@charset "UTF-8";.svg-icon[data-v-65769b80] {
    display: inline-block;
    overflow: hidden
}

.delete[data-v-953288bb] {
    position: absolute;
    right: 8px;
    bottom: 20px;
    height: 24px
}

.delete svg[data-v-953288bb] {
    width: 18px;
    height: 18px
}

.comment[data-v-953288bb] {
    padding: 6px 52px 6px 12px!important
}

.comment[data-v-953288bb] .el-textarea__inner {
    font-size: 14px;
    line-height: 24px
}

.send-icon[data-v-953288bb] {
    width: 40px;
    height: 24px;
    position: absolute;
    cursor: pointer;
    top: calc(50% - 12px);
    margin-left: calc(100% - 46px);
    background: var(--color-gradient-button);
    color: var(--color-text-5);
    border-radius: 4px;
    text-align: center
}

.send-icon .send-btn[data-v-953288bb] {
    font-size: 12px;
    height: 100%;
    line-height: 24px;
    font-weight: 400
}

.password-btn[data-v-953288bb] {
    width: 20px;
    height: 20px;
    position: absolute;
    top: calc(50% - 10px);
    color: var(--color-text-2);
    margin-left: calc(100% - 36px);
    cursor: pointer
}

.password-btn[data-v-953288bb]:hover {
    color: #fff
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px var(--color-text-5) inset!important;
    -webkit-text-fill-color: var(--color-text-1)!important
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--color-text-5) inset!important
}

input:-internal-autofill-selected {
    background-color: var(--color-text-5)!important;
    color: var(--color-text-1)!important
}

.generic-button[data-v-17e47d7b] {
    border: none;
    width: var(--generic-button-width);
    height: var(--generic-button-height);
    border-radius: 8px;
    cursor: pointer;
    padding: var(--generic-button-padding);
    margin: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center
}

.generic-button .content[data-v-17e47d7b] {
    display: inline-flex;
    align-items: center
}

.generic-button .content .inner[data-v-17e47d7b] {
    display: inline-flex;
    align-items: center;
    white-space: nowrap
}

.generic-button .content svg+div.inner[data-v-17e47d7b] {
    margin-left: 6px
}

.generic-button[data-v-17e47d7b]:active {
    filter: brightness(1.1)
}

.generic-button.small[data-v-17e47d7b] {
    padding: 0 12px;
    height: 28px
}

.generic-button.small .inner[data-v-17e47d7b] {
    font-size: 12px!important
}

.generic-button.small.iconic[data-v-17e47d7b],.generic-button.small.iconic-transparent[data-v-17e47d7b] {
    width: 28px
}

.generic-button.small.not-only-icon[data-v-17e47d7b] {
    padding: 0 12px 0 8px
}

.generic-button.small.transparent[data-v-17e47d7b] {
    padding: 0
}

.generic-button.medium[data-v-17e47d7b] {
    padding: 0 12px;
    height: 32px
}

.generic-button.medium .inner[data-v-17e47d7b] {
    font-size: 14px;
    font-weight: 600
}

.generic-button.medium.iconic[data-v-17e47d7b],.generic-button.medium.iconic-transparent[data-v-17e47d7b] {
    width: 32px
}

.generic-button.medium.not-only-icon[data-v-17e47d7b] {
    padding: 0 12px 0 8px
}

.generic-button.medium.transparent[data-v-17e47d7b] {
    padding: 0
}

.generic-button.big[data-v-17e47d7b] {
    padding: 0 16px;
    height: 36px
}

.generic-button.big .inner[data-v-17e47d7b] {
    font-size: 14px;
    font-weight: 600
}

.generic-button.big.iconic[data-v-17e47d7b],.generic-button.big.iconic-transparent[data-v-17e47d7b] {
    width: 36px
}

.generic-button.big.not-only-icon[data-v-17e47d7b] {
    padding: 0 16px 0 12px
}

.generic-button.big.transparent[data-v-17e47d7b] {
    padding: 0
}

.generic-button.large[data-v-17e47d7b] {
    padding: 0 16px;
    height: 40px
}

.generic-button.large .inner[data-v-17e47d7b] {
    font-size: 16px!important;
    font-weight: 600
}

.generic-button.large.iconic[data-v-17e47d7b],.generic-button.large.iconic-transparent[data-v-17e47d7b] {
    width: 40px
}

.generic-button.large.not-only-icon[data-v-17e47d7b] {
    padding: 0 16px 0 12px
}

.generic-button.large.not-only-icon[data-v-17e47d7b] svg {
    width: 20px!important;
    height: 20px!important
}

.generic-button.large.transparent[data-v-17e47d7b] {
    padding: 0
}

.generic-button.mobile-wide[data-v-17e47d7b] {
    width: calc(100vw - 32px)
}

.generic-button.primary[data-v-17e47d7b] {
    background: var(--color-gradient-button);
    color: var(--color-text-5)
}

.generic-button.primary[data-v-17e47d7b]:hover {
    background: var(--color-theme-1)
}

.generic-button.primary[data-v-17e47d7b]:disabled {
    cursor: not-allowed;
    background: var(--color-fill-disabled);
    color: var(--color-text-3)
}

.generic-button.primary[data-v-17e47d7b]:disabled:active {
    filter: none
}

.generic-button.secondary[data-v-17e47d7b] {
    background: var(--color-other-2);
    color: var(--color-text-1)
}

.generic-button.secondary[data-v-17e47d7b]:hover {
    background: var(--color-other-3)
}

.generic-button.secondary[data-v-17e47d7b]:disabled {
    cursor: not-allowed;
    background: var(--color-fill-disabled);
    color: var(--color-text-3)
}

.generic-button.secondary[data-v-17e47d7b]:disabled:active {
    filter: none
}

.generic-button.border[data-v-17e47d7b] {
    border: 1px solid var(--color-border-component);
    background: transparent;
    color: var(--color-text-1)
}

.generic-button.border[data-v-17e47d7b]:hover {
    border: 1px solid var(--color-border-hover)
}

.generic-button.border[data-v-17e47d7b]:disabled {
    cursor: not-allowed;
    background: var(--color-fill-disabled);
    color: var(--color-text-3);
    border: none
}

.generic-button.border[data-v-17e47d7b]:disabled:active {
    filter: none
}

.generic-button.transparent[data-v-17e47d7b] {
    background: transparent;
    color: var(--color-text-1);
    padding: 0
}

.generic-button.transparent[data-v-17e47d7b]:disabled {
    cursor: not-allowed;
    color: var(--color-text-3);
    border: none
}

.generic-button.transparent[data-v-17e47d7b]:disabled:active {
    filter: none
}

.generic-button.iconic[data-v-17e47d7b] {
    color: var(--color-text-1);
    background: var(--color-other-2);
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.generic-button.iconic-transparent[data-v-17e47d7b] {
    color: var(--color-text-1);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0
}

.generic-button.iconic-transparent svg[data-v-17e47d7b] {
    width: 20px!important;
    height: 20px!important
}

.generic-button.iconic-transparent[data-v-17e47d7b]:disabled {
    cursor: not-allowed;
    color: var(--color-text-3);
    border: none
}

.generic-button.iconic-transparent[data-v-17e47d7b]:disabled:active {
    filter: none
}

.generic-button.iconic-transparent-small[data-v-17e47d7b] {
    color: var(--color-text-1);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0
}

.generic-button.iconic-transparent-small[data-v-17e47d7b]:disabled {
    cursor: not-allowed;
    color: var(--color-text-3);
    border: none
}

.generic-button.iconic-transparent-small[data-v-17e47d7b]:disabled:active {
    filter: none
}

.generic-button.gold[data-v-17e47d7b] {
    background: linear-gradient(284deg,#ffc175,#ffefc6);
    color: #33241b
}

.generic-button.gold div.inner[data-v-17e47d7b] {
    font-weight: 600!important
}

.generic-button.error[data-v-17e47d7b] {
    background: var(--color-fill-red);
    color: var(--color-text-1)
}

.generic-button.none[data-v-17e47d7b] {
    background: var(--color-fill-disabled);
    color: var(--color-text-3)
}

.generic-button.none[data-v-17e47d7b]:disabled {
    cursor: not-allowed;
    background: var(--color-fill-disabled);
    color: var(--color-text-3)
}

.generic-button.none[data-v-17e47d7b]:disabled:active {
    filter: none
}

.generic-button.vip[data-v-17e47d7b] {
    background: var(--color-gradient-standard);
    color: var(--color-text-5)
}

.generic-button.vip[data-v-17e47d7b]:disabled {
    cursor: not-allowed;
    background: var(--color-fill-disabled);
    color: var(--color-text-3)
}

.generic-button.vip[data-v-17e47d7b]:disabled:active {
    filter: none
}

.generic-button.svip[data-v-17e47d7b] {
    background: var(--color-gradient-pro);
    color: var(--color-text-5)
}

.generic-button.svip[data-v-17e47d7b]:disabled {
    cursor: not-allowed;
    background: var(--color-fill-disabled);
    color: var(--color-text-3)
}

.generic-button.svip[data-v-17e47d7b]:disabled:active {
    filter: none
}

.generic-button.ssvip[data-v-17e47d7b] {
    background: var(--color-gradient-premier);
    color: var(--color-text-5)
}

.generic-button.ssvip[data-v-17e47d7b]:disabled {
    cursor: not-allowed;
    background: var(--color-fill-disabled);
    color: var(--color-text-3)
}

.generic-button.ssvip[data-v-17e47d7b]:disabled:active {
    filter: none
}

.generic-button.green[data-v-17e47d7b] {
    color: var(--color-text-5);
    background: var(--color-theme-2)
}

.generic-button.green[data-v-17e47d7b]:disabled {
    cursor: not-allowed;
    background: var(--color-fill-disabled);
    color: var(--color-text-3)
}

.generic-button.green[data-v-17e47d7b]:disabled:active {
    filter: none
}

.generic-button.dynamic-background[data-v-17e47d7b] {
    border-radius: 4px;
    background: var(--color-other-2);
    color: var(--color-text-1)
}

.generic-button.dynamic-background[data-v-17e47d7b]:hover {
    background: var(--color-other-3)
}

.generic-button.dynamic-background[data-v-17e47d7b]:disabled {
    cursor: not-allowed;
    background: var(--color-fill-disabled);
    color: var(--color-text-2)
}

.generic-button.dynamic-background[data-v-17e47d7b]:disabled:active {
    filter: none
}

.dialog-default.kling-dialog.el-dialog {
    padding: var(--common-dialog-padding-height) var(--common-dialog-padding-width)!important
}

.dialog-default.kling-dialog.el-dialog>.el-dialog__header.show-close .el-dialog__headerbtn {
    top: var(--common-dialog-padding-height);
    right: var(--common-dialog-padding-width)
}

.title[data-v-0919b269] {
    color: var(--color-text-1);
    line-height: 22px;
    gap: 8px
}

.description[data-v-0919b269] {
    color: var(--color-text-2);
    padding: 0 28px
}

body.mobile .empty .content .text[data-v-84b03ea8] {
    line-height: 24px
}

.empty[data-v-84b03ea8] {
    text-align: center;
    padding-top: 250px
}

.empty .content[data-v-84b03ea8] {
    display: flex;
    flex-direction: column;
    align-items: center
}

.empty .content .text[data-v-84b03ea8] {
    color: var(--color-text-1);
    font-size: 14px
}

.wrapper[data-v-1c89a4f1] {
    position: relative;
    overflow: hidden;
    z-index: 1
}

.wrapper[data-v-1c89a4f1]:not(.interactive) [data-renderer] {
    pointer-events: none
}

.holder[data-v-1c89a4f1] {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    z-index: 9999
}

.holder.show[data-v-1c89a4f1] {
    display: block
}

.place-holder-image[data-v-1c89a4f1] {
    display: block;
    width: 100%;
    height: 100%
}

.wrapper[data-v-1c89a4f1] foreignObject>.inserted-container>div {
    width: 100%;
    height: 100%
}

.effect-wrapper[data-v-5e1cdcbb] {
    margin: auto
}

.image-item[data-v-15730628] {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    filter: brightness(1);
    background: var(--color-other-2)
}

.image-item[data-v-15730628]:hover {
    filter: brightness(1.05)
}

.image-item-favor[data-v-15730628] {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--color-fill-white)
}

.image-item-expand[data-v-15730628] {
    position: absolute;
    top: 8px;
    right: 34px
}

.image-item-checkbox[data-v-15730628] {
    position: absolute;
    top: 8px;
    left: 8px;
    color: var(--color-fill-white)
}

.image-item-mask[data-v-15730628] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: var(--color-gradient-black-revert)
}

.image-item-selected[data-v-15730628] {
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    border-radius: 12px;
    outline: solid 5px #141414;
    outline-offset: -6px;
    border: solid 5px var(--color-theme-2)
}

.image-item-source[data-v-15730628] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover
}

.image-item-info[data-v-15730628] {
    position: absolute;
    background: var(--color-gradient-black);
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding: 24px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--color-text-1);
    gap: 12px
}

.image-item-info p[data-v-15730628] {
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.audio-item[data-v-23825332] {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    filter: brightness(1)
}

.audio-item[data-v-23825332]:hover {
    filter: brightness(1.05)
}

.audio-item-favor[data-v-23825332] {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--color-fill-white)
}

.audio-item-source[data-v-23825332] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover
}

.audio-item-checkbox[data-v-23825332] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    color: var(--color-fill-white)
}

.audio-item-tags[data-v-23825332] {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 4px
}

.audio-item-tags-item[data-v-23825332] {
    height: 24px;
    background: var(--color-fill-black-1);
    border-radius: 4px;
    font-size: 12px;
    color: var(--color-text-1);
    padding: 2px 8px;
    display: flex;
    align-items: center
}

.audio-item-mask[data-v-23825332] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: var(--color-gradient-black-revert)
}

.audio-item-selected[data-v-23825332] {
    width: 100%;
    cursor: pointer;
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    border-radius: 12px;
    outline: solid 5px #141414;
    outline-offset: -6px;
    border: solid 5px var(--color-theme-2)
}

.audio-item-info[data-v-23825332] {
    position: absolute;
    background: var(--color-gradient-black);
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding: 24px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--color-text-1);
    gap: 12px
}

.audio-item-info p[data-v-23825332] {
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

img[data-v-107197ba] {
    transition: opacity .4s;
    opacity: var(--loading-capacity);
    outline: solid 1px transparent
}

img.active[data-v-107197ba] {
    outline: solid 1px var(--theme-color-primary);
    outline-offset: -1px
}

img.clickable[data-v-107197ba] {
    cursor: pointer
}

img.clickable[data-v-107197ba]:hover {
    outline: solid 1px white;
    outline-offset: -1px
}

img.clickable:hover.active[data-v-107197ba] {
    outline: solid 1px var(--theme-color-primary)
}

.video-work-box[data-v-4a66f742] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--color-other-2)
}

.video-work-box .design-history-video[data-v-4a66f742] {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: block
}

.video-item[data-v-8329e673] {
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    filter: brightness(1)
}

.video-item[data-v-8329e673]:hover {
    filter: brightness(1.05)
}

.video-item-favor[data-v-8329e673] {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--color-fill-white)
}

.video-item-checkbox[data-v-8329e673] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    color: var(--color-fill-white)
}

.video-item-tags[data-v-8329e673] {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 4px
}

.video-item-tags-item[data-v-8329e673] {
    height: 24px;
    background: var(--color-fill-black-1);
    border-radius: 4px;
    font-size: 12px;
    color: var(--color-text-1);
    padding: 2px 8px
}

.video-item-mask[data-v-8329e673] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: var(--color-gradient-black-revert)
}

.video-item-selected[data-v-8329e673] {
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    border-radius: 12px;
    outline: solid 5px #141414;
    outline-offset: -6px;
    border: solid 5px var(--color-theme-2)
}

.video-item-info[data-v-8329e673] {
    position: absolute;
    background: var(--color-gradient-black);
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding: 24px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--color-text-1);
    gap: 12px
}

.video-item-info p[data-v-8329e673] {
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.upload-asset-container[data-v-3b088366] {
    background-color: var(--color-other-2);
    border-radius: 8px;
    width: var(--upload-box-size);
    height: var(--upload-box-size)
}

.upload-asset-container .upload-asset[data-v-3b088366] {
    width: 100%;
    height: 100%
}

.upload-asset-container .upload-asset[data-v-3b088366] .el-upload-dragger {
    background-color: transparent;
    border: none;
    padding: 0;
    display: flex;
    align-self: center;
    justify-content: center;
    height: var(--upload-box-size)
}

.upload-asset-container .upload-asset .upload[data-v-3b088366] {
    color: var(--color-text-1)
}

.upload-asset-container .upload-asset .upload .upload-icon[data-v-3b088366] {
    width: 40px;
    height: 40px;
    background-color: var(--color-other-1);
    border-radius: 4px
}

.upload-asset-container .upload-asset .upload .upload-text[data-v-3b088366] {
    margin-top: 16px;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    display: flex;
    gap: 4px;
    align-items: center
}

.upload-asset-container .upload-asset .upload .upload-text svg[data-v-3b088366] {
    color: var(--color-text-2)
}

.container[data-v-75832a86] {
    margin-bottom: 60px
}

.container .trace[data-v-75832a86] {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: var(--color-other-2);
    border-radius: 8px;
    gap: 16px;
    width: var(--upload-item-size);
    height: var(--upload-item-size)
}

.container .trace span[data-v-75832a86] {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-text-1)
}

.container .group-item[data-v-75832a86] {
    margin-bottom: 24px
}

.container .group-item h4[data-v-75832a86] {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-text-2);
    margin-bottom: 12px
}

.container .group-item[data-v-75832a86]:last-child {
    margin-bottom: 0
}

.container .list-container[data-v-75832a86] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.container .list-item[data-v-75832a86] {
    position: relative;
    cursor: pointer;
    width: var(--upload-item-size);
    height: var(--upload-item-size)
}

.container .list-item .mask[data-v-75832a86] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: var(--color-fill-black-3);
    z-index: 2
}

.container .empty-container[data-v-75832a86] {
    transition: all .4s;
    text-align: center
}

.container .empty-container .empty[data-v-75832a86] {
    display: inline-block;
    padding-top: 80px
}

.container .loading[data-v-75832a86] {
    padding-top: 180px
}

.content[data-v-121daab5] {
    width: 126px;
    height: 126px
}

.content.error[data-v-121daab5] {
    color: var(--color-fill-error)
}

.content.work[data-v-121daab5] {
    cursor: pointer;
    width: 126px;
    height: 126px
}

[data-v-83d8b0eb] .sub-menu-popper {
    max-height: 421px;
    overflow-y: auto
}

[data-v-83d8b0eb] .sub-menu-popper .second-menu-item {
    max-width: 148px
}

[data-v-83d8b0eb] .sub-menu-popper.add-to-menu .el-menu {
    padding-bottom: 0!important
}

[data-v-83d8b0eb] .sub-menu-popper.no-folder .el-menu {
    padding-top: 0!important
}

.divider[data-v-83d8b0eb] {
    height: 1px!important;
    background: var(--color-other-6)!important;
    position: sticky;
    bottom: 52px;
    padding: 0!important
}

.add-folder-button[data-v-83d8b0eb] {
    color: var(--color-theme-2)!important;
    position: sticky;
    border-radius: 0 0 8px 8px;
    height: 52px!important;
    line-height: 52px!important;
    bottom: 0;
    background: var(--color-bg-popover-1)!important
}

.add-folder-button[data-v-83d8b0eb]:hover {
    background: var(--color-bg-popover-1)!important
}

.download-dropdown[data-v-00b84054] {
    padding-bottom: 0!important
}

[data-v-00b84054] .watermark-switch-item {
    height: 52px!important;
    line-height: 52px!important;
    border-radius: 0 0 8px 8px;
    background: var(--color-bg-popover-1)!important;
    cursor: default;
    gap: 8px
}

[data-v-00b84054] .watermark-switch-item:hover {
    background: var(--color-bg-popover-1)!important
}

[data-v-00b84054] .watermark-switch-item .disable-click {
    display: flex;
    align-items: center;
    cursor: default
}

.download-only-watermark[data-v-00b84054],.download-only-watermark[data-v-00b84054] .el-menu {
    padding-top: 0!important
}

.download-only-watermark .watermark-switch-item[data-v-00b84054] {
    border-radius: 8px
}

.download-menu[data-v-00b84054] .el-menu {
    padding-bottom: 0!important
}

.divider[data-v-00b84054] {
    height: 1px!important;
    background: var(--color-other-6)!important;
    pointer-events: none
}

.vip[data-v-00b84054] {
    height: 20px;
    border-radius: 4px;
    padding: 0 6px;
    background: var(--color-other-1);
    color: var(--color-text-1);
    margin-left: 6px
}

.vip svg[data-v-00b84054] {
    margin-right: 0!important
}

.vip.need-membership[data-v-00b84054] {
    background: var(--color-theme-3);
    color: var(--color-theme-2)
}

.watermark-switch[data-v-00b84054] {
    pointer-events: all
}

.image-item[data-v-4a37046e] {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    filter: brightness(1);
    background: var(--color-other-2)
}

.image-item[data-v-4a37046e]:hover {
    filter: brightness(1.05)
}

.image-item-favor[data-v-4a37046e] {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--color-fill-white)
}

.image-item-expand[data-v-4a37046e] {
    position: absolute;
    top: 8px;
    right: 34px
}

.image-item-checkbox[data-v-4a37046e] {
    position: absolute;
    top: 8px;
    left: 8px;
    color: var(--color-fill-white)
}

.image-item-tags[data-v-4a37046e] {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 4px
}

.image-item-tags-item[data-v-4a37046e] {
    height: 24px;
    background: var(--color-fill-black-1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--color-text-1);
    padding: 0 8px
}

.image-item-mask[data-v-4a37046e] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: var(--color-gradient-black-revert)
}

.image-item-selected[data-v-4a37046e] {
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    border-radius: 12px;
    outline: solid 5px #141414;
    outline-offset: -6px;
    border: solid 5px var(--color-theme-2)
}

.image-item-source[data-v-4a37046e] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover
}

.image-item-info[data-v-4a37046e] {
    position: absolute;
    background: var(--color-gradient-black);
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding: 24px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--color-text-1);
    gap: 12px
}

.image-item-info p[data-v-4a37046e] {
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.audio-item[data-v-1eccd51b] {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    filter: brightness(1);
    width: 100%;
    height: 100%
}

.audio-item[data-v-1eccd51b]:hover {
    filter: brightness(1.05)
}

.audio-item-favor[data-v-1eccd51b] {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--color-fill-white)
}

.audio-item-source[data-v-1eccd51b] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover
}

.audio-item-checkbox[data-v-1eccd51b] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    color: var(--color-fill-white)
}

.audio-item-tags[data-v-1eccd51b] {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 4px
}

.audio-item-tags-item[data-v-1eccd51b] {
    height: 24px;
    background: var(--color-fill-black-1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--color-text-1);
    padding: 0 8px
}

.audio-item-mask[data-v-1eccd51b] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: var(--color-gradient-black-revert)
}

.audio-item-selected[data-v-1eccd51b] {
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    border-radius: 12px;
    outline: solid 5px #141414;
    outline-offset: -6px;
    border: solid 5px var(--color-theme-2)
}

.audio-item-info[data-v-1eccd51b] {
    position: absolute;
    background: var(--color-gradient-black);
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding: 24px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--color-text-1);
    gap: 12px
}

.audio-item-info p[data-v-1eccd51b] {
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.video-item[data-v-7ec30fec] {
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    filter: brightness(1)
}

.video-item[data-v-7ec30fec]:hover {
    filter: brightness(1.05)
}

.video-item-favor[data-v-7ec30fec] {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--color-fill-white)
}

.video-item-checkbox[data-v-7ec30fec] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    color: var(--color-fill-white)
}

.video-item-tags[data-v-7ec30fec] {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 4px
}

.video-item-tags-item[data-v-7ec30fec] {
    height: 24px;
    background: var(--color-fill-black-1);
    border-radius: 4px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--color-text-1);
    padding: 0 8px
}

.video-item-mask[data-v-7ec30fec] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: var(--color-gradient-black-revert)
}

.video-item-selected[data-v-7ec30fec] {
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    border-radius: 12px;
    outline: solid 5px #141414;
    outline-offset: -6px;
    border: solid 5px var(--color-theme-2)
}

.video-item-info[data-v-7ec30fec] {
    position: absolute;
    background: var(--color-gradient-black);
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding: 24px 8px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--color-text-1);
    gap: 12px
}

.video-item-info p[data-v-7ec30fec] {
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.container[data-v-8872cc24] {
    margin-bottom: 60px
}

.container .drag-image-container[data-v-8872cc24] {
    width: var(--drag-container-size);
    height: var(--drag-container-size);
    position: absolute;
    z-index: -1;
    top: -300px;
    left: -300px
}

.container .group-item[data-v-8872cc24] {
    margin-bottom: 24px
}

.container .group-item h4[data-v-8872cc24] {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-text-2);
    margin-bottom: 12px
}

.container .group-item[data-v-8872cc24]:last-child {
    margin-bottom: 0
}

.container .list-container[data-v-8872cc24] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.container .list-item[data-v-8872cc24] {
    position: relative;
    cursor: pointer;
    width: var(--task-item-size);
    height: var(--task-item-size)
}

.container .list-item .mask[data-v-8872cc24] {
    cursor: not-allowed;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: var(--color-fill-black-3);
    z-index: 2
}

.container .empty-container[data-v-8872cc24] {
    transition: all .4s;
    text-align: center
}

.container .empty-container .empty[data-v-8872cc24] {
    padding-top: 80px
}

.container .empty-container .empty .buttons[data-v-8872cc24] {
    margin-top: 32px;
    text-align: center
}

.container .empty-container .empty .buttons button[data-v-8872cc24] {
    margin-right: 16px
}

.container .empty-container .empty-history[data-v-8872cc24] {
    padding-top: 100px
}

.container .loading[data-v-8872cc24] {
    padding-top: 180px
}

.filter-face[data-v-1f15a32d] {
    color: var(--color-text-1);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-weight: 400;
    gap: 6px
}

.filter-face svg[data-v-1f15a32d] {
    transform: rotate(180deg);
    transition: transform .3s
}

.filter-face svg.active[data-v-1f15a32d] {
    transform: rotate(0)
}

.header[data-v-1d0dd350] {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: -24px;
    margin-bottom: 24px
}

#panel-reference-main-container[data-v-1d0dd350] {
    height: 436px;
    overflow-x: hidden;
    overflow-y: scroll
}

#panel-reference-main-container[data-v-1d0dd350]::-webkit-scrollbar {
    display: none
}

.bottom-tools[data-v-1d0dd350] {
    margin-top: 24px;
    display: flex;
    justify-content: end;
    gap: 12px
}

.tab[data-v-1d0dd350] {
    margin-bottom: 16px;
    justify-content: space-between
}

.tab .gap[data-v-1d0dd350] {
    gap: 16px
}

.tab .sep[data-v-1d0dd350] {
    color: var(--color-border-line)
}

.checkbox svg[data-v-1d0dd350] {
    margin-right: 8px
}

#confirm-popover[data-v-4a453002] {
    padding: 16px;
    width: 100%;
    height: 100%
}

.button-confirm-popover__title[data-v-4a453002] {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-1)
}

.button-confirm-popover__subTitle[data-v-4a453002] {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-1);
    margin-top: 4px
}

.button-confirm-popover__btns[data-v-4a453002] {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: flex-end
}

h3[data-v-1cfb896a] {
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px
}

h3 .exp[data-v-1cfb896a] {
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    gap: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center
}

h3 .exp svg[data-v-1cfb896a] {
    transform: rotate(180deg);
    transition: transform .3s
}

h3 .exp.shrink svg[data-v-1cfb896a] {
    transform: rotate(0)
}

.section-vertical[data-v-1cfb896a] {
    margin-bottom: var(--section-gap)
}

.section-vertical .title-vertical[data-v-1cfb896a] {
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.section-vertical .title-vertical svg[data-v-1cfb896a] {
    cursor: pointer
}

.section-vertical .vertical-info[data-v-1cfb896a] {
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    color: var(--color-text-1);
    word-break: break-all
}

.section-vertical .flex-row[data-v-1cfb896a] {
    gap: 4px;
    display: flex;
    flex-wrap: wrap
}

.section-vertical .input-image[data-v-1cfb896a] {
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 8px
}

.section-vertical .mask-image[data-v-1cfb896a] {
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 8px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .4
}

.section-vertical .input-image-box[data-v-1cfb896a] {
    position: relative
}

.section-vertical .input-image-box .image-tag[data-v-1cfb896a] {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 24px;
    font-weight: 400;
    font-size: 12px;
    text-align: center;
    line-height: 24px;
    color: var(--color-text-1);
    background-color: var(--color-fill-black-1)
}

.section-horizontal[data-v-1cfb896a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--section-gap);
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-text-1);
    gap: 12px
}

.section-horizontal .horizontal-title[data-v-1cfb896a] {
    flex-shrink: 0
}

.section-horizontal .horizontal-info[data-v-1cfb896a] {
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.section-horizontal .horizontal-info svg[data-v-1cfb896a] {
    vertical-align: sub;
    margin-right: 8px
}

.info-tags[data-v-1cfb896a] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: var(--section-gap)
}

.info-tags .tag-item[data-v-1cfb896a] {
    padding: 0 8px;
    font-weight: 400;
    font-size: 14px;
    height: 24px;
    line-height: 24px;
    color: var(--color-text-2);
    background-color: var(--color-other-2);
    border-radius: 4px
}

.prompt-content[data-v-1cfb896a] {
    color: var(--color-text-1);
    word-break: break-all;
    -webkit-user-select: text;
    user-select: text;
    font-size: 13px;
    font-weight: 400;
    line-height: 22px
}

.prompt-content .lora-content[data-v-1cfb896a] {
    display: inline-block;
    vertical-align: middle;
    height: 29px
}

.prompt-content .lora-content .user-message-item-card[data-v-1cfb896a] {
    margin-right: 0
}

.prompt-content .lora-container[data-v-1cfb896a] {
    display: inline-block;
    vertical-align: middle;
    height: 29px
}

.prompt-content .lora-container .user-message-item-card[data-v-1cfb896a] {
    margin-right: 0
}

.prompt-list .prompt-item[data-v-1cfb896a] {
    display: flex;
    margin-bottom: 12px
}

.prompt-list .prompt-item .time-container[data-v-1cfb896a] {
    margin-right: 12px;
    width: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0
}

.prompt-list .prompt-item .time-container .time[data-v-1cfb896a] {
    height: 24px;
    background-color: var(--color-other-2);
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-theme-2);
    text-align: center;
    flex-shrink: 0
}

.prompt-list .prompt-item .time-container .vertical-border[data-v-1cfb896a] {
    border-right: 1px dashed var(--color-border-component);
    height: 100%;
    margin: 0 auto
}

.prompt-list .prompt-item .prompt-container .prompt-title[data-v-1cfb896a] {
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: var(--color-text-2);
    margin-bottom: 4px
}

.prompt-list .prompt-item .prompt-container .empty-prompt[data-v-1cfb896a] {
    color: var(--color-text-3)
}

.prompt-list .prompt-item[data-v-1cfb896a]:last-child {
    margin-bottom: 0
}

.upload .el-upload.is-disabled,.upload .el-upload.is-disabled .el-upload-dragger {
    cursor: pointer
}

.upload[data-v-053dc2b0] {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: transparent
}

.upload.error[data-v-053dc2b0] {
    border-color: red
}

.upload .uploading[data-v-053dc2b0] {
    width: 100%;
    height: var(--upload-box-height);
    text-align: center;
    padding-top: calc(54px + (var(--upload-box-height) - 160px) / 2)
}

.upload .result[data-v-053dc2b0] {
    height: var(--upload-box-height);
    overflow: hidden
}

.upload .result.uploading-result[data-v-053dc2b0] {
    background: none
}

.upload .result .preview[data-v-053dc2b0] {
    float: left;
    width: 160px;
    height: var(--upload-box-height);
    position: relative
}

.upload .result .preview.narrow[data-v-053dc2b0] {
    width: 100%
}

.upload .result .preview img[data-v-053dc2b0] {
    position: absolute;
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%
}

.upload .result .preview img.preview-background[data-v-053dc2b0] {
    object-fit: cover;
    width: 100%;
    height: 100%;
    filter: blur(32px);
    opacity: .5
}

.upload .result .filename[data-v-053dc2b0] {
    height: var(--upload-box-height);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 16px;
    color: #fff
}

.upload .result .filename span[data-v-053dc2b0] {
    margin-left: 8px;
    color: inherit;
    width: 192px
}

.upload .result .delete-btn[data-v-053dc2b0] {
    float: right
}

.upload .result .delete-btn svg[data-v-053dc2b0] {
    margin-right: 16px;
    margin-top: 70px
}

.upload .click-here[data-v-053dc2b0] {
    color: var(--color-text-1);
    font-size: 18px;
    margin-top: calc(1em - var(--padding-top) + (var(--upload-box-height) - 200px) / 2);
    display: flex;
    flex-direction: column;
    align-items: center
}

.upload .click-here svg[data-v-053dc2b0] {
    vertical-align: middle
}

.upload .click-here[data-v-053dc2b0]:hover {
    color: var(--color-text-1)
}

.upload .tip[data-v-053dc2b0] {
    font-size: 12px;
    color: var(--color-text-3);
    margin-top: 8px
}

.upload .desc-area[data-v-053dc2b0] {
    width: 100%;
    position: absolute;
    margin-top: calc(-60px - (var(--upload-box-height) - 160px) / 2 - var(--padding-top));
    text-align: center
}

.upload .desc-area .from-history[data-v-053dc2b0] {
    pointer-events: none
}

.upload .desc-area .from-history .btn[data-v-053dc2b0] {
    cursor: pointer;
    pointer-events: all;
    display: inline-block;
    font-size: 12px
}

.upload .desc-area .from-history .btn span[data-v-053dc2b0] {
    color: var(--color-text-2)
}

.upload .desc-area .from-history .btn a[data-v-053dc2b0] {
    color: var(--color-text-1);
    margin-left: 6px;
    margin-right: 6px
}

.upload .desc-area .support[data-v-053dc2b0] {
    font-size: 12px;
    color: var(--color-text-3)
}

body.mobile .narrow-ops svg[data-v-053dc2b0] {
    opacity: 1
}

.narrow-ops[data-v-053dc2b0] {
    transition: all .2s;
    position: absolute;
    color: #fff;
    width: 100%;
    height: var(--upload-box-height);
    text-align: center
}

.narrow-ops[data-v-053dc2b0]:hover {
    border-radius: 4px;
    background-color: #00000080
}

.narrow-ops:hover svg[data-v-053dc2b0] {
    opacity: 1
}

.narrow-ops svg[data-v-053dc2b0] {
    opacity: 0;
    transition: all .2s;
    cursor: pointer;
    width: 20px;
    height: 20px;
    margin: 8px;
    margin-top: calc(var(--upload-box-height) / 2 - 10px)
}

.narrow-ops svg[data-v-053dc2b0]:active {
    filter: brightness(.9)
}

[data-v-053dc2b0] .el-upload-dragger {
    background-color: transparent!important;
    border: none!important;
    height: var(--upload-box-height)
}

[data-v-053dc2b0] .el-upload-dragger:hover {
    filter: brightness(1.1)
}

[data-v-053dc2b0] .el-upload-dragger:active {
    filter: brightness(.9)
}

.custom-tip[data-v-053dc2b0] {
    display: flex;
    flex-direction: column;
    align-items: center
}

.custom-tip span[data-v-053dc2b0] {
    line-height: 18px;
    font-size: 12px;
    color: var(--color-text-3)
}

.secondary-tabs[data-v-b97ba143] {
    display: flex;
    width: fit-content;
    font-size: 14px
}

.secondary-tabs .container[data-v-b97ba143] {
    cursor: pointer
}

.secondary-tabs .container svg[data-v-b97ba143] {
    width: 16px;
    margin-right: 10px
}

.secondary-tabs.size-large[data-v-b97ba143] {
    height: 36px;
    gap: 8px
}

.secondary-tabs.size-large .container[data-v-b97ba143] {
    padding: 4px 12px;
    border-radius: 6px
}

.secondary-tabs.size-border[data-v-b97ba143] {
    border-radius: 8px;
    height: 36px;
    gap: 2px
}

.secondary-tabs.size-border .container[data-v-b97ba143] {
    height: calc(100% - 4px);
    border-radius: 5px;
    padding: 4px 16px;
    margin: 2px;
    color: var(--color-text-2)
}

.secondary-tabs.size-border .container.active[data-v-b97ba143] {
    color: var(--color-text-1)
}

.secondary-tabs.size-border-medium[data-v-b97ba143] {
    border-radius: 8px;
    height: 32px;
    gap: 2px
}

.secondary-tabs.size-border-medium .container[data-v-b97ba143] {
    height: calc(100% - 4px);
    border-radius: 5px;
    padding: 4px 16px;
    margin: 2px;
    color: var(--color-text-2)
}

.secondary-tabs.size-border-medium .container.active[data-v-b97ba143] {
    color: var(--color-text-1)
}

.secondary-tabs.size-medium[data-v-b97ba143] {
    height: 32px;
    gap: 8px
}

.secondary-tabs.size-medium .container[data-v-b97ba143] {
    padding: 0 12px;
    border-radius: 6px
}

.secondary-tabs.theme-normal .container[data-v-b97ba143] {
    color: var(--color-text-2)
}

.secondary-tabs.theme-normal .container.active[data-v-b97ba143] {
    background-color: var(--color-other-2);
    color: var(--color-text-1)
}

.secondary-tabs.theme-normal .container.active[data-v-b97ba143]:hover {
    background-color: var(--color-other-2)
}

.secondary-tabs.theme-normal .container[data-v-b97ba143]:hover {
    background: var(--color-other-1);
    color: var(--color-text-1)
}

.secondary-tabs.theme-normal .container.disabled[data-v-b97ba143] {
    cursor: not-allowed;
    color: var(--color-text-4)
}

.secondary-tabs.theme-border[data-v-b97ba143] {
    border: 1px solid var(--color-border-component)
}

.secondary-tabs.theme-border .container.active[data-v-b97ba143],.secondary-tabs.theme-border .container.active[data-v-b97ba143]:hover {
    background: var(--color-other-3)
}

.secondary-tabs.theme-border .container[data-v-b97ba143]:hover {
    background: var(--color-other-1)
}

body.mobile .content[data-v-0db02b2e] {
    flex-direction: column
}

body.mobile .content .left[data-v-0db02b2e] {
    width: 100%
}

body.mobile .content .left .choose[data-v-0db02b2e] {
    height: 120px;
    padding-top: 50px
}

body.mobile .content .right[data-v-0db02b2e] {
    width: 100%;
    height: 420px
}

h1[data-v-0db02b2e] {
    margin-top: -24px;
    display: flex;
    align-items: center;
    height: 36px
}

h1 .title[data-v-0db02b2e] {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    color: var(--color-text-1);
    margin-right: 16px
}

h1 .switch[data-v-0db02b2e] {
    font-size: 14px;
    display: inline-block
}

.content[data-v-0db02b2e] {
    margin-top: 24px;
    display: flex;
    gap: 24px
}

.content .left[data-v-0db02b2e] {
    width: 50%;
    display: inline-block;
    background-color: var(--color-bg-primary);
    border-radius: 8px;
    overflow: hidden
}

.content .left .choose[data-v-0db02b2e] {
    width: 100%;
    height: 560px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-text-1);
    padding-top: 250px
}

.content .left .choose a[data-v-0db02b2e] {
    color: var(--color-theme-2)
}

.content .left .choose.skit[data-v-0db02b2e] {
    padding-top: 0
}

.content .left .clickable[data-v-0db02b2e] {
    cursor: pointer
}

.content .left .preview[data-v-0db02b2e] {
    height: 520px
}

.content .left .preview .media[data-v-0db02b2e] {
    width: 100%;
    height: 520px
}

.content .left .filename[data-v-0db02b2e] {
    text-align: right;
    height: 40px;
    background: var(--color-other-1);
    color: var(--color-text-1);
    font-size: 0;
    line-height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: center
}

.content .left .filename span[data-v-0db02b2e] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    vertical-align: middle
}

.content .left .filename svg[data-v-0db02b2e] {
    margin-right: 4px;
    vertical-align: middle;
    cursor: pointer
}

.content .right[data-v-0db02b2e] {
    width: 50%;
    height: 560px;
    border-radius: 8px;
    display: inline-block;
    vertical-align: top;
    padding: 16px 8px 16px 16px;
    background-color: var(--color-bg-primary)
}

.content .right .right-content[data-v-0db02b2e] {
    color: var(--color-text-1);
    height: 100%;
    padding-right: 8px
}

.content .right .right-content[data-v-0db02b2e] h3 {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 8px;
    margin-top: 12px
}

.content .right .right-content[data-v-0db02b2e] h3:first-child {
    margin-top: 0
}

.content .right .right-content .upload-skit-cover[data-v-0db02b2e] {
    border: 1px solid var(--color-border-component);
    border-radius: 8px;
    overflow: hidden
}

.content .right .right-content .upload-skit-cover[data-v-0db02b2e]:hover {
    border: 1px solid var(--color-border-hover)
}

.content .right .right-content .upload-skit-cover.disabled-upload[data-v-0db02b2e] {
    border: solid 1px var(--color-border-component);
    cursor: not-allowed;
    background-color: var(--color-fill-disabled)
}

.content .right .right-content .upload-skit-cover.disabled-upload .disabled-upload-cover[data-v-0db02b2e] {
    pointer-events: none
}

.content .right .right-content .upload-skit-cover.disabled-upload .disabled-upload-cover[data-v-0db02b2e] .upload .click-here {
    color: var(--color-text-4)
}

.content .right .right-content .detail[data-v-0db02b2e] {
    margin-top: 12px
}

.bottom[data-v-0db02b2e] {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px
}

.activity-link[data-v-0db02b2e] {
    position: absolute;
    bottom: 8px;
    left: 80px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-fill-link);
    cursor: pointer
}

.activity-link a[data-v-0db02b2e] {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    color: var(--color-fill-link);
    text-decoration: none
}

.activity-link a[data-v-0db02b2e]:hover {
    text-decoration: underline
}

.info-btn[data-v-0db02b2e] {
    margin-left: 12px;
    cursor: pointer;
    opacity: .6
}

.info-btn[data-v-0db02b2e]:hover {
    opacity: 1
}

.limit[data-v-1d909e05] {
    display: inline-flex;
    margin-left: 8px;
    height: 20px;
    padding: 0 6px;
    border-radius: 5px;
    vertical-align: middle;
    background: linear-gradient(284deg,#ffc175,#ffefc6);
    box-shadow: 0 2px 8px #00000029;
    color: #753f0c;
    font-size: 12px;
    font-weight: 400
}

.limit.bolded[data-v-1d909e05] {
    font-weight: 500
}

.limit.theme-hot[data-v-1d909e05] {
    background: linear-gradient(284deg,#ffa85c,#fff1cc)
}

.limit.theme-cold[data-v-1d909e05] {
    background: linear-gradient(135deg,#52ffba 9.27%,#23faec 46.96%,#0af 88.5%);
    color: #191d21
}

.limit.theme-gold[data-v-1d909e05] {
    background: #ffbe5c1a;
    color: #ffbe5c
}

.limit.theme-coldunbold[data-v-1d909e05] {
    background: linear-gradient(135deg,#52ffba 9.27%,#23faec 46.96%,#0af 88.5%);
    color: #191d21;
    font-weight: 400
}

.limit.theme-new[data-v-1d909e05] {
    background: var(--color-other-2)
}

.limit.theme-new span[data-v-1d909e05] {
    color: var(--color-theme-2)
}

.limit.theme-new-hot[data-v-1d909e05] {
    background: linear-gradient(270deg,#1dd4f01f,#1df5bb1f)
}

.limit.theme-new-hot span[data-v-1d909e05] {
    background: linear-gradient(90deg,#a7ff1a,#82fac2,#47d4ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.limit.theme-new-active[data-v-1d909e05] {
    background: var(--color-other-1)
}

.limit.theme-new-active span[data-v-1d909e05] {
    color: var(--color-theme-2)
}

.limit.theme-new-active-hot[data-v-1d909e05] {
    background: #111214
}

.limit.theme-new-active-hot span[data-v-1d909e05] {
    background: linear-gradient(90deg,#a7ff1a,#82fac2,#47d4ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.limit.disabled[data-v-1d909e05] {
    height: 18px;
    padding: 2px 6px;
    border: solid 1px #4d4e57;
    color: #727485;
    background: #404957;
    box-shadow: none
}

.price[data-v-1fce69b1] {
    display: inline-flex;
    align-items: center
}

.price.theme-large span.value[data-v-1fce69b1] {
    font-family: MiSans Latin VF;
    font-weight: 600;
    font-size: 14px
}

.price.theme-large svg[data-v-1fce69b1],.price.theme-large img[data-v-1fce69b1] {
    width: 20px;
    height: 20px
}

.price.none span.value[data-v-1fce69b1] {
    color: inherit;
    font-size: 14px
}

.price.normal span.value[data-v-1fce69b1] {
    color: var(--color-text-1);
    font-size: 14px
}

.price.hover span.value[data-v-1fce69b1] {
    color: var(--theme-color-primary);
    font-size: 14px
}

.price svg[data-v-1fce69b1],.price img[data-v-1fce69b1] {
    vertical-align: middle;
    margin: 0 0 1px;
    width: 16px;
    height: 16px
}

.price span[data-v-1fce69b1] {
    margin-left: 2px;
    padding: 0
}

.detail-btn[data-v-52212540] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-1);
    cursor: pointer;
    display: flex;
    align-items: center
}

.detail-btn svg[data-v-52212540] {
    margin-left: 4px;
    vertical-align: middle;
    transform: rotate(180deg);
    transition: transform .4s;
    margin-top: -1px
}

.detail-btn:hover svg[data-v-52212540] {
    transform: rotate(0)
}

.detail[data-v-52212540] {
    color: var(--color-text-1);
    padding: 4px 0
}

.detail h4[data-v-52212540] {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px
}

.detail ol[data-v-52212540] {
    border-top: 1px dashed var(--color-border-component);
    border-bottom: 1px dashed var(--color-border-component);
    margin: 16px 0;
    padding: 16px 0;
    list-style: none
}

.detail ol li[data-v-52212540] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    min-width: 168px;
    margin-top: 8px
}

.detail ol li[data-v-52212540]:first-child {
    margin-top: 0
}

.detail ol li i[data-v-52212540] {
    margin-left: 32px;
    float: right;
    font-style: normal
}

.detail .sum[data-v-52212540] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.el-popper.cost-detail {
    background-clip: padding-box,border-box!important;
    background-origin: padding-box,border-box!important;
    background: linear-gradient(251.63deg,#1b2829 -5.05%,#171b21 45.55%,#191d23 90.29%),linear-gradient(69.46deg,#323639 12.13%,#1d1d1d 49.54%,#262a2f 78.46%,#4f6d6e 101.17%)!important;
    border: 1px solid #262a2f!important
}

.el-popper.cost-detail .el-popper__arrow:before {
    display: none
}

.button-pay-container[data-v-502bcbfb] {
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    position: relative
}

.button-pay-container .cost-detail[data-v-502bcbfb] {
    position: relative;
    text-align: left;
    margin-right: auto
}

.button-pay-container .cost-detail .btn[data-v-502bcbfb] {
    display: inline-block
}

.button[data-v-502bcbfb] {
    color: var(--color-theme-2);
    cursor: pointer
}

.select-box[data-v-dfbebc0b] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.select-box span[data-v-dfbebc0b] {
    line-height: 18px;
    color: var(--color-fill-error)
}

.select-box .is-error[data-v-dfbebc0b] .el-select__wrapper {
    border: 1px solid var(--color-fill-error)
}

.select-box .is-error[data-v-dfbebc0b] .el-select__wrapper.is-hovering:not(.is-focus) {
    border: 1px var(--color-fill-error) solid
}

.select-box .is-error[data-v-dfbebc0b] .el-select__wrapper.is-focused {
    border: 1px var(--color-fill-error) solid
}

.option-not-scroll .el-select-dropdown__wrap {
    max-height: none!important
}

.redraw-stage-container[data-v-4ba8c03a] {
    position: relative;
    width: 100%;
    height: 100%
}

.redraw-brush-pen[data-v-4ba8c03a] {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fff;
    pointer-events: none;
    transform: translate(-50%,-50%)
}

.redraw-stage[data-v-4ba8c03a] {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-bg-page)
}

.upscale-stage-container[data-v-89ed1d68] {
    width: 100%;
    height: 100%;
    background: var(--color-bg-page);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center
}

.redraw-tools[data-v-e21967bb] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    min-width: 888px
}

.tools-wrapper[data-v-e21967bb] {
    display: flex;
    align-items: center;
    gap: 12px
}

.main-tool-group[data-v-e21967bb] {
    display: flex;
    gap: 8px
}

.main-tool-group .tool-item[data-v-e21967bb] {
    display: flex;
    height: 32px;
    padding: 0 16px 0 12px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    border: 1px solid var(--color-border-component);
    color: var(--color-text-2)
}

.main-tool-group .tool-item.active[data-v-e21967bb] {
    color: var(--color-theme-2);
    border-color: var(--color-theme-2)
}

.assist-tools[data-v-e21967bb] {
    display: flex;
    gap: 8px
}

.history-group[data-v-e21967bb] {
    display: flex;
    align-items: center;
    gap: 8px
}

.history-group .divider[data-v-e21967bb] {
    width: 1px;
    height: 12px;
    background: var(--color-border-line);
    margin: 0 24px
}

.tool-item[data-v-e21967bb] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--color-text-1);
    transition: all .3s;
    font-size: 14px
}

.tool-item .el-icon[data-v-e21967bb] {
    font-size: 16px
}

.tool-item[data-v-e21967bb]:hover {
    background: var(--color-bg-hover)
}

.tool-item.active[data-v-e21967bb] {
    color: var(--color-bg-deepseek);
    background: var(--color-bg-hover)
}

.tool-item.disabled[data-v-e21967bb] {
    cursor: not-allowed;
    opacity: .5;
    color: var(--color-text-3)
}

.tool-item.disabled[data-v-e21967bb]:hover {
    background: none;
    color: var(--color-text-3)
}

.scale[data-v-e21967bb] {
    height: 32px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--color-border-component)
}

.scale span[data-v-e21967bb] {
    padding: 0 12px;
    line-height: 32px
}

.brush-size-control[data-v-e21967bb] {
    position: absolute;
    display: inline-flex;
    top: -58px;
    left: 50%;
    height: 48px;
    transform: translate(-50%);
    background: color-mix(in srgb,var(--color-bg-secondary) 40%,transparent);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 2px 12px #0000001a;
    color: var(--color-text-1);
    min-width: 200px;
    z-index: 100;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex-shrink: 0
}

.brush-size-control .brush-size-control-icon[data-v-e21967bb] {
    border: 1px solid var(--color-text-1);
    border-radius: 20px;
    padding: 2px
}

[data-v-e21967bb] .el-slider {
    --el-slider-main-bg-color: var(--color-other-2)
}

[data-v-e21967bb] .el-slider__runway {
    background-color: #24262966
}

[data-v-e21967bb] .el-slider__bar {
    background-color: var(--color-text-1)
}

[data-v-e21967bb] .el-slider__button {
    border-color: var(--color-other-2)
}

[data-v-e21967bb] .el-slider__button:hover {
    transform: scale(1.1)
}

.upscale-tools[data-v-73d9579b] {
    width: 100%;
    display: flex;
    align-items: center;
    min-width: 888px;
    justify-content: space-between
}

.ratio-group[data-v-73d9579b] {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative
}

.ratio-buttons-wrapper[data-v-73d9579b] {
    display: flex;
    align-items: flex-end;
    gap: 8px
}

.ratio-item[data-v-73d9579b] {
    width: 48px;
    height: 56px;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    border-radius: 8px;
    color: var(--color-text-2)
}

.ratio-item .ratio-preview[data-v-73d9579b] {
    max-height: 16px;
    border: 1px solid var(--color-text-2);
    border-radius: 2px;
    transition: all .3s
}

.ratio-item span[data-v-73d9579b] {
    font-size: 12px;
    color: var(--color-text-2);
    line-height: 20px;
    margin-bottom: 2px
}

.ratio-item[data-v-73d9579b]:hover {
    background: var(--color-bg-hover)
}

.ratio-item.active[data-v-73d9579b] {
    background: var(--color-other-1);
    color: var(--color-text-1)
}

.ratio-item.active span[data-v-73d9579b] {
    color: var(--color-text-1)
}

[data-v-73d9579b] .el-divider--vertical {
    margin: 0 8px;
    height: 24px
}

.history-buttons[data-v-73d9579b] {
    display: flex;
    justify-content: space-between;
    gap: 8px
}

.tool-button[data-v-73d9579b] {
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center
}

.tool-button.disabled[data-v-73d9579b] {
    cursor: not-allowed;
    opacity: .5
}

.scale-multiplier[data-v-73d9579b] {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translate(-50%);
    background: color-mix(in srgb,var(--color-bg-secondary) 40%,transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 12px #0000001a;
    z-index: 100
}

.scale-multiplier .multiplier-title[data-v-73d9579b] {
    color: var(--color-text-2);
    font-size: 14px
}

.scale-multiplier .multiplier-options[data-v-73d9579b] {
    display: flex;
    gap: 8px
}

.scale-multiplier .multiplier-item[data-v-73d9579b] {
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--color-text-2);
    transition: all .3s;
    font-size: 14px
}

.scale-multiplier .multiplier-item[data-v-73d9579b]:hover {
    background: color-mix(in srgb,var(--color-text-1) 8%,transparent)
}

.scale-multiplier .multiplier-item.active[data-v-73d9579b] {
    background: color-mix(in srgb,var(--color-text-1) 8%,transparent);
    color: var(--color-bg-deepseek)
}

.editor-container[data-v-251be8bf] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #1e1e1e;
    position: relative
}

.toolbar[data-v-251be8bf] {
    height: 48px;
    padding: 0 16px;
    background: #2d2d2d;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid #3d3d3d
}

.editor-main[data-v-251be8bf] {
    flex: 1;
    display: flex;
    overflow: hidden
}

.canvas-container[data-v-251be8bf] {
    position: relative;
    overflow: hidden;
    background: #333;
    width: 100%;
    height: 100%
}

canvas[data-v-251be8bf] {
    position: absolute;
    left: 0;
    top: 0;
    background: var(--color-bg-page)
}

.editor-toolbar[data-v-251be8bf] {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translate(-50%);
    min-height: 48px;
    background: #24262966;
    border-radius: 8px;
    padding: 12px 16px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px)
}

.toolbar-up[data-v-251be8bf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px
}

.toolbar-down[data-v-251be8bf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%
}

.segmentation-loading[data-v-251be8bf] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    display: flex;
    align-items: center;
    justify-content: center
}

.segmentation-loading-text[data-v-251be8bf] {
    color: #fff;
    font-family: PingFang SC;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.is-mini.is-redraw .canvas-container[data-v-251be8bf] {
    height: calc(100% - 132px);
    border-radius: 16px;
    overflow: hidden
}

.is-mini.is-redraw .editor-toolbar[data-v-251be8bf] {
    bottom: -6px;
    left: 0;
    transform: none;
    width: 100%;
    border-radius: 12px
}

.is-mini.is-redraw [data-v-251be8bf] .brush-size-control {
    top: -100px
}

.is-mini.is-upscale .canvas-container[data-v-251be8bf] {
    height: calc(100% - 140px);
    border-radius: 16px;
    overflow: hidden
}

.is-mini.is-upscale .editor-toolbar[data-v-251be8bf] {
    bottom: -10px;
    left: 0;
    transform: none;
    width: 100%;
    border-radius: 12px
}

.settings[data-v-b4bbdcf5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px
}

.status-mask[data-v-b4bbdcf5] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-fill-black-3, rgba(0, 0, 0, .64));
    opacity: .9;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center
}

.status-mask-content[data-v-b4bbdcf5] {
    width: 470px;
    height: 317px;
    border-radius: 16px;
    padding: 16px;
    border: 1px solid var(--color-other-2, rgba(255, 255, 255, .12));
    background: var(--color-fill-black-3, rgba(0, 0, 0, .64));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.status-mask-content .tip[data-v-b4bbdcf5] {
    font-size: 16px;
    color: var(--color-text-1);
    margin-bottom: 12px;
    text-align: center;
    width: 100%;
    white-space: pre-line;
    word-break: break-word
}

.status-mask-content .status-mask-content-icon[data-v-b4bbdcf5] {
    margin-bottom: 24px
}

.status-mask-content .desc[data-v-b4bbdcf5] {
    font-size: 14px;
    line-height: 24px;
    color: var(--color-text-2);
    text-align: center;
    width: 100%;
    white-space: pre-line;
    word-break: break-word
}

.status-mask-content .desc .link[data-v-b4bbdcf5] {
    color: var(--color-theme-2);
    cursor: pointer
}

.status-mask-content .member-tip[data-v-b4bbdcf5] {
    cursor: pointer;
    background: linear-gradient(90deg,#fff8cc,#ffc670);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 12px
}

.status-mask-content .btn[data-v-b4bbdcf5] {
    margin-top: 24px
}

.cfg-slider-box[data-v-b4bbdcf5] {
    gap: 16px;
    height: px;
    font-size: 14px;
    color: var(--color-text-2);
    display: flex;
    flex-direction: column;
    align-items: center
}

.cfg[data-v-b4bbdcf5] {
    height: 36px;
    width: 36px;
    flex: 0 0 36px;
    padding: 0;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid var(--color-border-component);
    gap: 8px;
    color: var(--color-text-1);
    position: relative;
    display: flex;
    justify-content: center;
    cursor: pointer
}

.cfg[data-v-b4bbdcf5]:hover {
    border: 1px solid var(--color-border-hover)
}

.cfg svg[data-v-b4bbdcf5] {
    width: 16px;
    flex-shrink: 0;
    color: var(--color-text-2)
}

.cfg.disabled[data-v-b4bbdcf5] {
    cursor: not-allowed;
    border: 1px solid var(--color-border-component);
    background: var(--color-fill-disabled);
    color: var(--color-text-4)
}

.cfg.disabled svg[data-v-b4bbdcf5] {
    color: var(--color-text-4)
}

.cfg.active[data-v-b4bbdcf5] {
    border: 1px solid var(--color-border-hover)
}

.cfg-slider-box-content[data-v-b4bbdcf5] {
    display: flex;
    align-items: center;
    gap: 12px
}

.button-box>.button-pay-container[data-v-b4bbdcf5] {
    padding: 0
}

.kling-input.el-textarea[data-v-b4bbdcf5] {
    padding: 6px 12px
}

.image-edit-dialog-body[data-v-1a270f66] {
    width: calc(75vw - 48px);
    height: calc(85vh - 98px)
}

body.mobile .back-icon[data-v-40433912] {
    top: 16px
}

body.mobile .back-icon.left[data-v-40433912] {
    left: 16px
}

.content[data-v-40433912] {
    position: relative;
    height: 100%
}

.content .back-icon[data-v-40433912] {
    position: absolute;
    z-index: 1;
    cursor: pointer;
    top: 32px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    color: var(--color-text-1);
    background-color: var(--color-other-1)
}

.content .back-icon.left[data-v-40433912] {
    left: 32px
}

.content .back-icon.right[data-v-40433912] {
    right: 32px
}

.thumbnail-strip[data-v-74444bed] {
    width: 64px;
    margin-left: 32px;
    overflow-y: auto;
    border: 0;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.thumbnail-strip[data-v-74444bed]::-webkit-scrollbar {
    display: none
}

.thumbnail-strip .thumbnail[data-v-74444bed] {
    flex: 0 0 auto;
    cursor: pointer;
    margin-bottom: 4px;
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    position: relative
}

.thumbnail-strip .thumbnail .thumbnail-image-container[data-v-74444bed] {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transition: none
}

.thumbnail-strip .thumbnail[data-v-74444bed]:last-child {
    margin-bottom: 0
}

.thumbnail-strip .thumbnail img[data-v-74444bed] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover
}

.thumbnail-strip .thumbnail-active[data-v-74444bed] {
    background-color: var(--color-fil-black);
    border: 1px solid var(--color-theme-2);
    padding: 3px
}

.thumbnail-strip .thumbnail.is-work-list[data-v-74444bed] {
    margin-bottom: 4px
}

.thumbnail-strip .thumbnail.is-work-list.first-of-task[data-v-74444bed]:not(:first-child) {
    margin-top: 24px
}

.thumbnail-strip .thumbnail.is-work-list.first-of-task[data-v-74444bed]:not(:first-child):before {
    content: "";
    height: 1px;
    width: 40px;
    background-color: var(--color-border-container);
    position: absolute;
    top: -15px;
    left: 12px;
    z-index: 1
}

.thumbnail-loading[data-v-74444bed],.thumbnail-failed[data-v-74444bed] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-other-1)
}

.generation-status[data-v-feb70ece] {
    padding: 4px 12px 4px 4px;
    height: 32px;
    border-radius: 8px;
    background: var(--color-bg-popover-1);
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--color-text-1);
    font-size: 14x;
    z-index: 2
}

.generation-status .count[data-v-feb70ece] {
    margin-right: 6px
}

.generation-status[data-v-feb70ece]:hover {
    opacity: 1
}

.generation-status .text[data-v-feb70ece] {
    margin: 0 6px 0 12px
}

.head[data-v-aac938bb] {
    margin-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 22px;
    line-height: 32px;
    color: var(--color-text-1)
}

.head svg[data-v-aac938bb] {
    float: right
}

body.mobile .content .section .title[data-v-aac938bb] {
    float: unset!important;
    width: 100%!important
}

body.lang-en .content .section .title[data-v-aac938bb] {
    width: 10em!important
}

.content[data-v-aac938bb] {
    margin-top: 16px;
    padding-left: 8px;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.content p[data-v-aac938bb] {
    font-size: 18px;
    color: var(--color-text-1)
}

.content .section[data-v-aac938bb] {
    display: flex
}

.content .section .title[data-v-aac938bb] {
    font-size: 16px;
    color: var(--color-text-2);
    width: 93px;
    height: 3em
}

.content .section .list[data-v-aac938bb] {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 16px
}

.content .section .list .item[data-v-aac938bb] {
    cursor: pointer;
    height: 3em;
    line-height: 3em;
    font-size: 14px;
    padding: 0 16px;
    border-radius: 8px;
    background-color: var(--color-bg-secondary);
    color: var(--color-text-2);
    border: solid 1px var(--color-border-container)
}

.content .section .list .item[data-v-aac938bb]:hover {
    background-color: var(--color-other-2)
}

.content .section .list .item.active[data-v-aac938bb] {
    color: var(--color-text-1);
    border: 1px solid var(--color-border-focused)
}

.content .other-box .title[data-v-aac938bb] {
    font-size: 16px;
    color: var(--color-text-2);
    width: 93px
}

.content .other-box .other-input[data-v-aac938bb] {
    margin-top: 16px
}

.bottom[data-v-aac938bb] {
    padding-left: 8px;
    padding-right: 8px;
    margin-top: 2em;
    display: flex;
    gap: 12px;
    justify-content: end
}

.comment-item-detail[data-v-6bf1cb96] {
    width: 100%;
    display: flex;
    position: relative;
    margin-top: 16px
}

.comment-item-detail .comment-item-detail-avatar[data-v-6bf1cb96] {
    border-radius: 50%;
    margin-right: 12px;
    cursor: pointer
}

.comment-item-detail .comment-item-detail-content[data-v-6bf1cb96] {
    width: calc(100% - 40px)
}

.comment-item-detail .comment-item-detail-content .comment-item-user-box[data-v-6bf1cb96] {
    display: flex;
    margin-bottom: 8px;
    align-items: center;
    justify-content: space-between;
    color: var(--color-text-2)
}

.comment-item-detail .comment-item-detail-content .comment-item-user-box .comment-item-user-info[data-v-6bf1cb96] {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    gap: 8px
}

.comment-item-detail .comment-item-detail-content .comment-item-user-box .comment-item-user-info .comment-item-user-name[data-v-6bf1cb96] {
    cursor: pointer;
    line-height: 24px
}

.comment-item-detail .comment-item-detail-content .comment-item-content-text[data-v-6bf1cb96] {
    font-size: 13px;
    line-height: 22px;
    font-weight: 400;
    color: var(--color-text-1);
    margin-bottom: 8px
}

.comment-item-detail .comment-item-detail-content .comment-item-content-text .reply-user[data-v-6bf1cb96] {
    cursor: pointer;
    margin-right: 4px;
    color: var(--color-text-2)
}

.comment-item-detail .comment-item-detail-content .comment-item-content-text .reply-user[data-v-6bf1cb96]:hover {
    color: var(--color-text-1)
}

.comment-item-detail .comment-item-detail-content .comment-item-user-tag[data-v-6bf1cb96] {
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px
}

.comment-item-detail .comment-item-detail-content .comment-item-user-author[data-v-6bf1cb96] {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    color: var(--color-theme-2);
    background-color: var(--color-theme-3)
}

.comment-item-detail .comment-item-detail-content .comment-item-author-like[data-v-6bf1cb96] {
    margin-bottom: 8px;
    display: inline-block;
    background-color: var(--color-other-2);
    color: var(--color-text-1)
}

.comment-item-detail .comment-item-detail-content .comment-item-bottom[data-v-6bf1cb96] {
    display: flex;
    color: var(--color-text-2)
}

.comment-item-detail .comment-item-detail-content .comment-item-bottom .comment-item-content-info[data-v-6bf1cb96] {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400
}

.comment-item-detail .comment-item-detail-content .comment-item-bottom .comment-item-content-info .comment-item-time[data-v-6bf1cb96] {
    margin-right: 4px
}

.comment-item-detail .comment-item-detail-content .comment-item-bottom .comment-item-content-info .dot[data-v-6bf1cb96] {
    width: 2px;
    height: 2px;
    margin-right: 4px;
    border-radius: 50%
}

.comment-item-detail .comment-item-detail-content .comment-item-bottom .split[data-v-6bf1cb96] {
    margin: 0 12px;
    color: var(--color-border-line)
}

.comment-item-detail .comment-item-detail-content .comment-item-bottom .comment-item-content-options[data-v-6bf1cb96] {
    display: flex;
    font-size: 12px;
    line-height: 18px;
    gap: 12px
}

.comment-item-detail .comment-item-detail-content .comment-item-bottom .comment-item-content-options .comment-item-content-options-icon[data-v-6bf1cb96] {
    width: 16px;
    height: 16px;
    margin-right: 4px
}

.comment-item-detail .comment-item-detail-content .comment-item-bottom .comment-item-content-options .comment-item-content-options-item[data-v-6bf1cb96] {
    display: flex;
    align-items: center;
    cursor: pointer
}

.comment-item-detail .comment-item-detail-content .comment-item-bottom .comment-item-content-options .comment-item-content-options-item[data-v-6bf1cb96]:hover {
    color: var(--color-text-1)
}

.comment-item-detail .comment-item-detail-content .comment-item-detail-sub-input-box[data-v-6bf1cb96] {
    margin-top: 12px
}

.comment-detail[data-v-0a40405c] {
    width: 100%;
    display: flex
}

.comment-detail .comment-detail-avatar[data-v-0a40405c] {
    border-radius: 50%;
    margin-right: 12px;
    cursor: pointer
}

.comment-detail .comment-detail-content[data-v-0a40405c] {
    width: calc(100% - 40px)
}

.comment-detail .comment-detail-content .comment-user-box[data-v-0a40405c] {
    display: flex;
    margin-bottom: 8px;
    align-items: center;
    justify-content: space-between;
    color: var(--color-text-2)
}

.comment-detail .comment-detail-content .comment-user-box .comment-user-info[data-v-0a40405c] {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    gap: 8px
}

.comment-detail .comment-detail-content .comment-user-box .comment-user-info .comment-user-name[data-v-0a40405c] {
    cursor: pointer;
    line-height: 24px
}

.comment-detail .comment-detail-content .comment-content-text[data-v-0a40405c] {
    font-size: 13px;
    line-height: 22px;
    font-weight: 400;
    color: var(--color-text-1);
    margin-bottom: 8px
}

.comment-detail .comment-detail-content .comment-user-tag[data-v-0a40405c] {
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px
}

.comment-detail .comment-detail-content .comment-user-author[data-v-0a40405c] {
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    color: var(--color-theme-2);
    background-color: var(--color-theme-3)
}

.comment-detail .comment-detail-content .comment-author-like[data-v-0a40405c] {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--color-text-1);
    background-color: var(--color-other-2)
}

.comment-detail .comment-detail-content .comment-bottom[data-v-0a40405c] {
    display: flex;
    color: var(--color-text-2)
}

.comment-detail .comment-detail-content .comment-bottom .comment-content-info[data-v-0a40405c] {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400
}

.comment-detail .comment-detail-content .comment-bottom .comment-content-info .comment-time[data-v-0a40405c] {
    margin-right: 4px
}

.comment-detail .comment-detail-content .comment-bottom .comment-content-info .dot[data-v-0a40405c] {
    width: 2px;
    height: 2px;
    margin-right: 4px;
    border-radius: 50%
}

.comment-detail .comment-detail-content .comment-bottom .split[data-v-0a40405c] {
    margin: 0 12px;
    color: var(--color-border-line)
}

.comment-detail .comment-detail-content .comment-bottom .comment-content-options[data-v-0a40405c] {
    display: flex;
    font-size: 12px;
    line-height: 18px;
    gap: 12px
}

.comment-detail .comment-detail-content .comment-bottom .comment-content-options .comment-content-options-icon[data-v-0a40405c] {
    width: 16px;
    height: 16px;
    margin-right: 4px
}

.comment-detail .comment-detail-content .comment-bottom .comment-content-options .comment-content-options-item[data-v-0a40405c] {
    display: flex;
    align-items: center;
    cursor: pointer
}

.comment-detail .comment-detail-content .comment-bottom .comment-content-options .comment-content-options-item[data-v-0a40405c]:hover {
    color: var(--color-text-1)
}

.comment-detail .comment-detail-content .comment-detail-input-box[data-v-0a40405c] {
    margin-top: 12px
}

.comment-detail .comment-detail-content .comment-list-expand[data-v-0a40405c] {
    cursor: pointer;
    color: var(--color-text-2);
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    display: flex;
    align-items: center;
    margin-top: 16px
}

.comment-detail .comment-detail-content .comment-list-expand[data-v-0a40405c]:hover {
    color: var(--color-text-1)
}

.comment-detail .comment-detail-content .comment-list-expand-icon[data-v-0a40405c] {
    margin-left: 2px;
    width: 16px;
    height: 16px;
    transform: rotate(180deg)
}

.comment-detail .comment-detail-content .comment-list-options[data-v-0a40405c] {
    display: flex;
    cursor: pointer;
    margin-top: 16px;
    color: var(--color-text-2);
    font-size: 12px;
    line-height: 18px;
    font-weight: 400
}

.comment-detail .comment-detail-content .comment-list-options .comment-list-expand-more[data-v-0a40405c] {
    margin-right: 12px;
    display: flex;
    align-items: center
}

.comment-detail .comment-detail-content .comment-list-options .comment-list-expand-more[data-v-0a40405c]:hover {
    color: var(--color-text-1)
}

.comment-detail .comment-detail-content .comment-list-options .comment-list-shrink[data-v-0a40405c] {
    display: flex;
    align-items: center
}

.comment-detail .comment-detail-content .comment-list-options .comment-list-shrink .comment-list-shrink-icon[data-v-0a40405c] {
    width: 16px;
    height: 16px;
    margin-left: 2px
}

.comment-detail .comment-detail-content .comment-list-options .comment-list-shrink[data-v-0a40405c]:hover {
    color: var(--color-text-1)
}

.comment-container .split[data-v-55e3d7e1] {
    border-bottom: 1px solid var(--color-border-frame);
    margin: 32px 0
}

.comment-container .comment-title[data-v-55e3d7e1] {
    color: var(--color-text-1);
    font-size: 16px;
    line-height: 26px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.comment-container .comment-title .exp[data-v-55e3d7e1] {
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    gap: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center
}

.comment-container .comment-title .exp svg[data-v-55e3d7e1] {
    transform: rotate(180deg);
    transition: transform .3s;
    vertical-align: middle
}

.comment-container .comment-title .exp.shrink svg[data-v-55e3d7e1] {
    transform: rotate(0)
}

.comment-container .comment-user-content[data-v-55e3d7e1] {
    display: flex;
    margin-bottom: 24px;
    gap: 12px
}

.comment-container .comment-user-content .comment-user-avatar[data-v-55e3d7e1] {
    cursor: pointer;
    padding-top: 4px;
    height: 36px;
    width: 28px
}

.comment-container .comment-user-content .comment-user-input-box[data-v-55e3d7e1] {
    width: calc(100% - 44px)
}

.comment-container .comment-empty[data-v-55e3d7e1] {
    width: 100%;
    height: 64px;
    text-align: center;
    line-height: 64px;
    color: var(--color-text-3);
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 16px
}

.comment-container .comment-list-content .comment-list[data-v-55e3d7e1] {
    margin-bottom: 16px
}

.comment-container .comment-list-content .comment-list[data-v-55e3d7e1]:last-child {
    margin-bottom: 0
}

.comment-container .comment-no-more[data-v-55e3d7e1] {
    color: var(--color-text-3);
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    margin-top: 16px;
    margin-bottom: 16px
}

.work-detail-content[data-v-1b92bbda] {
    display: flex;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--color-border-container)
}

.work-detail-content .work-detail-content-tab-box[data-v-1b92bbda] {
    display: flex;
    align-items: center
}

.work-detail-content .work-detail-content-tab-box .work-detail-content-tab-item[data-v-1b92bbda] {
    margin-right: 24px;
    cursor: pointer;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    color: var(--color-text-2)
}

.work-detail-content .work-detail-content-tab-box .work-detail-content-tab-item span[data-v-1b92bbda] {
    margin-bottom: 8px
}

.work-detail-content .work-detail-content-tab-box .work-detail-content-tab-item .work-detail-content-tab-item-line[data-v-1b92bbda] {
    width: 100%;
    height: 4px;
    border-radius: 4px;
    transform: translateY(2px);
    background-color: var(--color-text-1)
}

.work-detail-content .work-detail-content-tab-box .work-detail-content-tab-item-active[data-v-1b92bbda] {
    color: var(--color-text-1);
    font-weight: 600
}

.work-detail-content .work-detail-content-tab-box .work-detail-content-tab-item-active span[data-v-1b92bbda] {
    margin-bottom: 4px
}

.scrollable-content[data-v-1b92bbda] {
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 8px
}

.scrollable-content[data-v-1b92bbda]::-webkit-scrollbar {
    display: none
}

.content-wrap[data-v-c09e6a9d] {
    word-break: break-all;
    display: flex
}

body.browser-safari .close[data-v-c09e6a9d] {
    display: block
}

.close[data-v-c09e6a9d] {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: var(--line-clamp);
    -webkit-line-clamp: var(--line-clamp);
    -webkit-box-orient: vertical
}

.close[data-v-c09e6a9d]:before {
    content: "";
    float: right;
    height: 100%;
    margin-bottom: var(--line-height-expand)
}

.expand[data-v-c09e6a9d] {
    float: right;
    clear: both
}

.button[data-v-c09e6a9d] {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-1)
}

.shrink[data-v-c09e6a9d] {
    margin-left: 4px;
    display: inline-block
}

.heart[data-v-0ad124f9] {
    display: flex;
    align-items: center;
    color: var(--color-text-1)
}

.heart span[data-v-0ad124f9] {
    margin-left: 6px;
    font-size: 14px;
    font-weight: 400
}

body.mobile .kling-popover {
    margin-left: 10px;
    margin-right: 10px;
    width: calc(100vw - 30px)!important
}

.kling-popover.is-transitioning {
    transition: opacity .2s ease-out!important
}

.kling-popover.is-transitioning.is-hiding {
    opacity: 0!important
}

.icon[data-v-8c6d6d1c] {
    margin-top: -33px;
    color: #72e528
}

.buttons[data-v-8c6d6d1c] {
    text-align: right;
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 12px
}

body.mobile .tags span[data-v-8c6d6d1c] {
    width: 92px
}

.content .title[data-v-8c6d6d1c] {
    color: var(--color-text-1);
    font-family: PingFang SC;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px
}

.tags[data-v-8c6d6d1c] {
    margin-top: 16px;
    line-height: 24px;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.tags span[data-v-8c6d6d1c] {
    display: inline-block;
    padding: 6px 16px;
    height: 32px;
    box-sizing: border-box;
    line-height: 20px;
    text-align: center;
    border: 1px solid var(--color-border-component);
    border-radius: 8px;
    cursor: pointer
}

.tags span.active[data-v-8c6d6d1c] {
    background: var(--color-other-2)
}

.reasons textarea[data-v-8c6d6d1c] {
    font-family: inherit;
    margin-top: 16px;
    width: 100%;
    border-radius: 10px;
    padding: 12px 16px;
    color: #fff;
    background-color: var(--color-bg-secondary);
    resize: none;
    border: none;
    font-size: 14px;
    overflow: hidden;
    line-height: 24px
}

.unmark[data-v-8c6d6d1c] {
    position: absolute
}

.issue-pick .mark-ops[data-v-8c6d6d1c] {
    position: absolute;
    text-align: center
}

.issue-pick p[data-v-8c6d6d1c] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #727485;
    margin-top: 8px;
    margin-bottom: 8px
}

.issue-pick .content[data-v-8c6d6d1c] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #fff;
    padding: 12px 16px;
    border: 1px dashed #3b3c4d;
    border-radius: 8px;
    margin-bottom: 12px;
    -webkit-user-select: text;
    user-select: text;
    min-height: 120px;
    max-height: 360px;
    overflow-y: visible
}

.score[data-v-8c6d6d1c] {
    display: flex;
    align-items: center;
    height: 28px
}

.score .star-wrapper[data-v-8c6d6d1c] {
    margin-top: 16px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center
}

.el-popper[data-v-8c6d6d1c] {
    opacity: 0;
    transition: opacity .15s ease-in-out
}

.el-popper.is-shown[data-v-8c6d6d1c] {
    opacity: 1
}

.dislike-selectable-content::selection {
    background-color: #49756380;
    outline: solid 1px #497563
}

.dislike-selectable-content i {
    font-style: normal;
    background-color: #638d7b;
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    cursor: pointer
}

.dislike-selectable-content i:hover {
    background-color: #779b8b
}

.audio-player[data-v-68f73726] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%
}

.audio-player .play-btn[data-v-68f73726] {
    cursor: pointer;
    height: 32px;
    width: 32px;
    margin-right: 16px;
    border-radius: 32px;
    background: var(--color-other-1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.audio-player .audio-box[data-v-68f73726] {
    height: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.audio-player .audio-box canvas[data-v-68f73726] {
    height: 36px;
    width: 100%
}

.audio-player .audio-box .time[data-v-68f73726] {
    width: 100%;
    display: flex;
    height: 20px;
    align-items: center;
    justify-content: space-between
}

.audio-player .audio-box .time .time-item[data-v-68f73726] {
    height: 100%;
    display: flex;
    align-items: center;
    color: var(--color-text-1);
    font-size: 12px
}

.audio-player audio[data-v-68f73726] {
    visibility: hidden
}

.waveform[data-v-68f73726] {
    width: 100%;
    margin-bottom: 10px
}

.controls[data-v-68f73726] {
    display: flex;
    align-items: center
}

.controls button[data-v-68f73726] {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer
}

.controls button.playing[data-v-68f73726] {
    background-color: #dc3545
}

.controls span[data-v-68f73726] {
    margin-left: 10px
}

body.mobile .container[data-v-7a915e91] {
    height: 100%;
    flex-direction: column
}

body.mobile .container .text[data-v-7a915e91] {
    height: 24px
}

body.mobile .container .left[data-v-7a915e91] {
    padding: 16px
}

body.mobile .container .left .media[data-v-7a915e91] {
    align-items: flex-start
}

body.mobile .container .left .tip[data-v-7a915e91] {
    padding-bottom: 0
}

body.mobile .container .left .tip .tip-content[data-v-7a915e91] {
    padding-top: 16px
}

body.mobile .container .left .tip .tip-content svg[data-v-7a915e91] {
    flex-shrink: 0
}

body.mobile .container .left .audio-box[data-v-7a915e91] {
    width: 100%;
    height: unset;
    gap: 8px;
    padding: 0;
    background: unset
}

body.mobile .container .left .audio-box[data-v-7a915e91] .play-btn {
    margin-right: 12px
}

body.mobile .container .left .audio-box .audio-cover[data-v-7a915e91] {
    margin-bottom: 24px
}

body.mobile .container .right[data-v-7a915e91] {
    width: 100%;
    padding: 0 16px
}

.container[data-v-7a915e91] {
    height: 100%;
    display: flex;
    flex: 1
}

.container .left[data-v-7a915e91] {
    flex: 1;
    background-color: var(--color-bg-primary);
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.container .left .top[data-v-7a915e91] {
    height: 104px
}

.container .left .media[data-v-7a915e91] {
    width: 100%;
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: contain
}

.container .left .media .audio-box[data-v-7a915e91] {
    height: 72%;
    aspect-ratio: 528/616;
    border-radius: 16px;
    background: var(--color-other-1);
    padding: 24px;
    display: flex;
    flex-direction: column
}

.container .left .media .audio-box .audio-cover[data-v-7a915e91] {
    width: 100%;
    aspect-ratio: 1/1;
    margin-bottom: 64px;
    border-radius: 8px;
    overflow: hidden;
    position: relative
}

.container .left .media .audio-box .audio-cover img[data-v-7a915e91] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.container .left .media .audio-box .audio-media[data-v-7a915e91] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 0
}

.container .left .tip[data-v-7a915e91] {
    padding-bottom: 16px;
    display: flex
}

.container .left .tip .tip-content[data-v-7a915e91] {
    font-size: 12px;
    font-weight: 400;
    gap: 4px;
    color: var(--color-text-3);
    display: inline-flex;
    align-items: center;
    line-height: 18px;
    padding-top: 32px
}

.container .right[data-v-7a915e91] {
    width: 452px;
    padding-left: 32px;
    height: 100%;
    display: flex;
    flex-direction: column
}

.container .right .info-top[data-v-7a915e91] {
    padding: 16px 0
}

.container .right .info-top .header[data-v-7a915e91] {
    padding-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border-frame)
}

.container .right .info-top .header .title[data-v-7a915e91] {
    margin-left: 8px;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-text-1)
}

.container .right .info-top .published[data-v-7a915e91] {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.container .right .info-top .published .published-user[data-v-7a915e91] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-top: 16px
}

.container .right .info-top .published .published-user img[data-v-7a915e91] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: block
}

.container .right .info-top .published .published-user h4[data-v-7a915e91] {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text-1)
}

.container .right .info-top .published .published-title[data-v-7a915e91] {
    color: var(--color-text-1);
    display: flex;
    flex-direction: column;
    gap: 8px
}

.container .right .info-top .published .published-title .title[data-v-7a915e91] {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between
}

.container .right .info-top .published .published-title .title h3[data-v-7a915e91] {
    font-weight: 600;
    font-size: 16px;
    line-height: 26px
}

.container .right .info-top .published .published-title .title h3 .title-name[data-v-7a915e91] {
    margin-right: 8px
}

.container .right .info-top .published .published-title .title h3 .tag[data-v-7a915e91] {
    display: inline-block;
    font-weight: 400;
    font-size: 12px;
    border-radius: 4px;
    line-height: 24px;
    color: var(--color-text-1);
    background-color: var(--color-other-3);
    padding: 1px 8px 0;
    height: 24px;
    vertical-align: top
}

.container .right .info-top .published .published-title .title h3 .tag.no-passed[data-v-7a915e91] {
    color: var(--color-fill-error);
    background-color: var(--color-fill-error-24)
}

.container .right .info-top .published .published-title .introduction[data-v-7a915e91] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    color: var(--color-text-2)
}

.container .right .info-top .published .published-title .introduction .activity-link[data-v-7a915e91] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-fill-link);
    text-decoration: none;
    cursor: pointer
}

.container .right .info-top .published .published-title .introduction .activity-link a[data-v-7a915e91]:hover {
    text-decoration: underline
}

.container .right .info-top .published .published-title .published-time[data-v-7a915e91] {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-text-2);
    padding-bottom: 16px
}

.container .right .info-top .published .published-title .published-time .split[data-v-7a915e91] {
    color: var(--color-border-line);
    margin: 0 12px
}

.container .right .info-top .operation[data-v-7a915e91] {
    pointer-events: all;
    display: flex;
    gap: 8px;
    align-items: center
}

.container .right .info-top .operation .favor[data-v-7a915e91] {
    color: var(--color-text-1)
}

.container .right .info-content[data-v-7a915e91] {
    flex: 1;
    overflow: hidden;
    margin-bottom: 16px
}

.container .right .info-bottom[data-v-7a915e91] {
    padding-bottom: 32px
}

.container .right .info-bottom .full[data-v-7a915e91] {
    width: 100%
}

.dialog-wide-picture .el-dialog__headerbtn {
    width: 34px;
    height: 34px;
    top: 14px;
    right: 14px
}

.dialog-wide-picture .el-dialog__headerbtn .el-dialog__close {
    font-size: 34px!important
}

body.mobile .wide-picture-title[data-v-67853290] {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px
}

.dialog-wide-picture dl[data-v-67853290],.dialog-wide-picture dt[data-v-67853290],.dialog-wide-picture dd[data-v-67853290] {
    margin: 0;
    padding: 0
}

.dialog-wide-picture .wide-picture[data-v-67853290] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 448px;
    border-radius: 12px;
    background-color: #101317;
    position: relative;
    overflow: hidden
}

.dialog-wide-picture .wide-picture .wide-picture-container[data-v-67853290] {
    width: 280px;
    height: 280px;
    border: 2px solid var(--color-fill-white);
    position: relative;
    z-index: 20;
    background-color: #fff3
}

.dialog-wide-picture .wide-picture .wide-picture-container .picture-content[data-v-67853290] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative
}

.dialog-wide-picture .wide-picture .wide-picture-container .picture-content img[data-v-67853290] {
    flex-shrink: 0;
    width: 280px;
    position: relative;
    z-index: 1
}

.dialog-wide-picture .wide-picture-title[data-v-67853290] {
    display: flex;
    align-items: center;
    margin-top: 20px
}

.dialog-wide-picture .wide-picture-title h3[data-v-67853290] {
    margin-right: 12px;
    line-height: 24px;
    color: var(--color-text-1)
}

.dialog-wide-picture .wide-picture-title p[data-v-67853290] {
    color: var(--color-text-2);
    font-size: 12px;
    line-height: 18px;
    display: flex;
    align-items: center
}

.dialog-wide-picture .wide-picture-title p .icon-info[data-v-67853290] {
    margin-right: 4px
}

.dialog-wide-picture .proportion-list[data-v-67853290] {
    display: flex;
    align-items: flex-end;
    margin-top: 16px
}

.dialog-wide-picture .proportion-list dl[data-v-67853290] {
    margin-right: 11px;
    padding: 11px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    cursor: pointer
}

.dialog-wide-picture .proportion-list dl dt[data-v-67853290] {
    border-radius: 6px;
    border: 2px solid var(--color-text-1)
}

.dialog-wide-picture .proportion-list dl dd[data-v-67853290] {
    margin-top: 11px;
    color: var(--color-text-1);
    font-size: 12px;
    line-height: 18px;
    text-align: center
}

.dialog-wide-picture .proportion-list .active-proportion dt[data-v-67853290] {
    border: 2px solid var(--color-fill-success)
}

.dialog-wide-picture .proportion-list .active-proportion dd[data-v-67853290] {
    color: var(--color-fill-success)
}

.dialog-wide-picture .wide-picture-btn-list[data-v-67853290] {
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.dialog-wide-picture .wide-picture-btn-list .input-top-btn[data-v-67853290] {
    display: flex;
    width: 120px;
    height: 38px;
    justify-content: center;
    align-items: center;
    border-radius: 18px;
    border: 1px solid #999bac;
    color: #c5c7d5;
    font-size: 14px;
    line-height: 24px;
    margin-right: 20px;
    cursor: pointer
}

.dialog-wide-picture .wide-picture-btn-list .picture-submit-btn[data-v-67853290] {
    display: flex;
    align-items: center;
    margin-left: 12px
}

.dialog-wide-picture .wide-picture-btn-list .picture-submit-btn .free-tip[data-v-67853290] {
    display: inline-block;
    color: #753f0c;
    margin-left: 8px;
    font-size: 12px;
    line-height: 14px;
    border-radius: 4px;
    background: linear-gradient(284deg,#ffc175,#ffefc6);
    box-shadow: 0 2px 8px #00000029
}

.dialog-wide-picture .wide-picture-btn-list .picture-submit-btn .free-tip-disabled[data-v-67853290] {
    background: #404957;
    box-shadow: none;
    color: #727485
}

#outer[data-v-ae3c63e3] {
    display: flex;
    justify-content: center
}

#button-group[data-v-ae3c63e3] {
    width: 100%;
    background: var(--color-fill-black-3);
    padding: 8px 16px;
    border-radius: 8px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}

.group-box[data-v-ae3c63e3] {
    width: fit-content;
    display: flex;
    gap: 32px;
    align-items: center
}

.group-box .button-auto-ellipsis-item[data-v-ae3c63e3] {
    cursor: pointer;
    line-height: 20px;
    font-size: 12px;
    color: var(--color-text-1);
    position: relative
}

.group-box .button-auto-ellipsis-item[data-v-ae3c63e3]:not(:first-child):before {
    content: "";
    height: 12px;
    width: 1px;
    background: var(--color-border-line);
    position: absolute;
    top: 4px;
    left: -16px
}

.group-box .button-auto-ellipsis-item.disabled[data-v-ae3c63e3] {
    cursor: not-allowed;
    color: var(--color-text-3)
}

.group-box .button-auto-ellipsis-item.hidden[data-v-ae3c63e3] {
    display: none
}

.bottom-operation-operations[data-v-23e5e042] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px
}

.bottom-operation-operations-3-in-row[data-v-23e5e042] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px
}

body.mobile .work-container[data-v-7299db49] {
    padding-right: 0
}

.work-container[data-v-7299db49] {
    display: flex;
    padding-right: 32px;
    background-color: var(--color-bg-page);
    height: 100%;
    overflow: hidden
}

.work-container .image-list[data-v-7299db49] {
    padding-top: 24px;
    padding-bottom: 32px;
    height: 100%
}

.bottom-operation[data-v-7299db49] {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.bottom-operation-group[data-v-7299db49] {
    display: flex;
    align-items: flex-start
}

.bottom-operation-text[data-v-7299db49] {
    width: 74px;
    margin-right: 16px;
    padding-top: 6px;
    flex-shrink: 0
}

.bottom-operation-text.is-chinese[data-v-7299db49] {
    width: 40px
}

.bottom-operation-operations[data-v-7299db49] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px
}

.bottom-operation-operations-3-in-row[data-v-7299db49] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px
}

.fixed-text[data-v-7299db49] {
    position: fixed;
    bottom: 32px;
    right: 580px;
    font-size: 14px;
    color: var(--text-color);
    transition: right .3s ease
}

.waterfall-wrapper[data-v-0301eb44] {
    display: flex;
    will-change: height;
    position: relative
}

.waterfall-wrapper .column[data-v-0301eb44] {
    flex: 1;
    position: relative;
    overflow: hidden
}

.waterfall-wrapper .column .item[data-v-0301eb44] {
    position: absolute;
    width: 100%;
    transition: transform .3s
}

.publish-tag[data-v-2e5e2a18] {
    position: absolute;
    font-weight: 400;
    font-size: 12px;
    border-radius: 4px;
    line-height: 24px;
    color: var(--color-text-1);
    background: var(--color-fill-black-1);
    height: 24px;
    right: 8px;
    top: 8px;
    padding: 0 8px
}

.cover[data-v-329d4fa9] {
    height: var(--1e7b2aa4);
    will-change: height;
    content-visibility: auto;
    contain-intrinsic-size: 100% var(--1e7b2aa4);
    background: var(--color-other-1);
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden
}

.cover .main[data-v-329d4fa9] {
    position: relative;
    display: flex;
    min-height: var(--0652d84f)
}

.cover .main img[data-v-329d4fa9] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.cover .main video[data-v-329d4fa9] {
    width: 100%;
    height: 100%
}

.cover .main .ref-image[data-v-329d4fa9] {
    height: 28px;
    border-radius: 4px;
    background: #0000003d;
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 12px;
    left: 12px
}

.cover .main .ref-image span[data-v-329d4fa9] {
    font-size: 11px;
    font-weight: 500;
    line-height: 20px;
    color: #fff;
    margin-left: 2px
}

.cover .main .play-button[data-v-329d4fa9] {
    position: absolute;
    top: 12px;
    left: 12px
}

.cover .main .bottom-row[data-v-329d4fa9] {
    width: 100%;
    pointer-events: none;
    position: absolute;
    bottom: 0;
    padding: 16px;
    height: 100px;
    background: linear-gradient(0deg,#000c,#0000 94.05%);
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px
}

.cover .main .bottom-row .user[data-v-329d4fa9] {
    pointer-events: all;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    display: flex;
    gap: 6px
}

.cover .main .bottom-row .user .avatar[data-v-329d4fa9] {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    flex-shrink: 0
}

.cover .main .bottom-row .user .name[data-v-329d4fa9] {
    font-size: 12px;
    color: #fff;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all
}

.cover .main .bottom-row .actions[data-v-329d4fa9] {
    pointer-events: all;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0
}

.cover .detail[data-v-329d4fa9] {
    border-radius: 0 0 4px 4px;
    height: 0;
    overflow: hidden;
    position: relative;
    bottom: 0
}

.cover .detail .mask[data-v-329d4fa9] {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(180px);
    backdrop-filter: blur(180px);
    z-index: -1;
    background-size: cover
}

.cover .detail .content[data-v-329d4fa9] {
    height: 100%;
    padding: 16px 12px;
    -webkit-backdrop-filter: blur(180px);
    backdrop-filter: blur(180px);
    background: var(--color-other-7);
    z-index: 2;
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.cover .detail .content .title[data-v-329d4fa9] {
    width: 100%;
    line-height: 24px;
    font-size: 13px;
    color: var(--color-text-1);
    pointer-events: none
}

.cover .detail .content .introduction[data-v-329d4fa9] {
    height: 44px;
    width: 100%;
    color: var(--color-text-1);
    font-size: 13px;
    line-height: 22px;
    pointer-events: none
}

.cover .detail .content .prompts[data-v-329d4fa9] {
    width: 100%;
    height: 44px;
    color: var(--color-text-1);
    font-size: 13px;
    line-height: 22px;
    pointer-events: none
}

.cover .detail .content .actions[data-v-329d4fa9] {
    display: flex;
    align-items: center;
    gap: 4px
}

.cover .detail .content .actions .remix[data-v-329d4fa9] {
    flex: 1
}

.cover .expand[data-v-329d4fa9] {
    height: 124px;
    animation: expand-329d4fa9 .2s ease-out
}

.cover .shrink[data-v-329d4fa9] {
    height: 0;
    animation: shrink-329d4fa9 .2s ease-out
}

@keyframes expand-329d4fa9 {
    0% {
        height: 0
    }

    to {
        height: 124px
    }
}

@keyframes shrink-329d4fa9 {
    0% {
        height: 124px
    }

    to {
        height: 0
    }
}

.v-enter-active[data-v-329d4fa9],.v-leave-active[data-v-329d4fa9] {
    opacity: 1;
    transition: all .3s linear;
    will-change: opacity
}

.v-enter-from[data-v-329d4fa9],.v-leave-to[data-v-329d4fa9] {
    opacity: 0;
    will-change: opacity
}

.debug-container[data-v-329d4fa9] {
    position: absolute;
    top: 40px;
    margin-left: 10px;
    margin-top: 10px
}

.debug-container .check[data-v-329d4fa9] {
    display: inline-block;
    cursor: pointer
}

.debug-container .btns[data-v-329d4fa9] {
    display: inline-block;
    line-height: 16px;
    vertical-align: top;
    padding-left: 8px
}

.award-badges[data-v-329d4fa9] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 1
}

.award-badge[data-v-329d4fa9] {
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
    background: var(--color-fill-black-1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    color: transparent;
    width: fit-content
}

.award-badge[data-v-329d4fa9]:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 4px;
    background: var(--color-fill-black-1);
    z-index: -1
}

.award-badge span[data-v-329d4fa9] {
    color: var(--color-text-1)
}

.award-icon[data-v-329d4fa9] {
    width: 9px;
    height: 10px
}

body.mobile .back-to-top[data-v-c05d36e3] {
    bottom: 78px
}

.back-to-top[data-v-c05d36e3] {
    cursor: pointer;
    position: fixed;
    bottom: 64px;
    right: calc(var(--drawer-width) + 60px);
    transition: right .5s ease-in-out;
    padding: 0;
    border: solid 1px var(--color-border-component);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-fill-black-3);
    color: var(--color-text-1);
    opacity: .8;
    z-index: 2
}

.back-to-top[data-v-c05d36e3]:hover {
    opacity: 1
}

.empty[data-v-c05d36e3] {
    text-align: center
}

.debug-container[data-v-7f76c7f1] {
    position: fixed;
    left: 232px;
    top: 8px;
    z-index: 9999999;
    background-color: var(--color-bg-dialog);
    font-size: 0;
    color: #fff;
    border-radius: 8px;
    padding: 8px 16px
}

.debug-container div.caption[data-v-7f76c7f1] {
    vertical-align: middle;
    font-size: 14px;
    line-height: 24px;
    display: inline-block;
    margin-bottom: 8px
}

.debug-container input[data-v-7f76c7f1] {
    font-size: 14px;
    margin-left: 16px;
    margin-right: 16px;
    width: 500px;
    line-height: 24px;
    border-radius: 4px;
    border: solid 1px var(--color-border-container);
    background-color: var(--color-bg-secondary);
    color: bisque;
    padding: 4px 8px
}

.select-toggle[data-v-5e00d16b] {
    display: inline-flex;
    gap: 4px;
    align-items: center
}

.separator[data-v-5e00d16b] {
    color: #fff9;
    font-size: 14px;
    line-height: 20px;
    margin: 0 4px
}

.toggle-item[data-v-5e00d16b] {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #727485;
    cursor: pointer;
    transition: all .3s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center
}

.toggle-item[data-v-5e00d16b]:hover {
    background-color: var(--color-other-1)!important
}

.toggle-item.active[data-v-5e00d16b] {
    color: var(--color-text-1)
}

.submission-area[data-v-e2621897] {
    width: 100%;
    position: relative;
    min-height: 500px
}

.submission-type-selector[data-v-e2621897] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 1px;
    z-index: 10
}

.content-wrapper[data-v-e2621897] {
    margin-top: 70px;
    padding: 24px
}

.sort-toggle[data-v-e2621897] {
    margin-left: 24px
}

.filter-bar[data-v-e2621897] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    margin-bottom: 16px
}

.left[data-v-e2621897],.right[data-v-e2621897] {
    display: flex;
    align-items: center;
    gap: 16px
}

.activity-zone-detail-box[data-v-e65f4240] {
    position: relative;
    height: calc(100vh - 32px);
    border-radius: 12px;
    overflow-y: scroll
}

.activity-zone-detail-box[data-v-e65f4240]::-webkit-scrollbar {
    display: none
}

.activity-zone-detail-box .detail-container[data-v-e65f4240] {
    width: 100%;
    padding: 32px 32px 0
}

.activity-zone-detail-box .detail-container .detail-operation[data-v-e65f4240] {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px
}

.activity-zone-detail-box .detail-container .detail-operation .close-btn[data-v-e65f4240] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-other-1);
    border-radius: 8px;
    border: 1px solid var(--color-border-component);
    cursor: pointer
}

.activity-zone-detail-box .detail-container .detail-operation .close-btn[data-v-e65f4240]:hover {
    border: 1px solid var(--color-border-hover)!important
}

.activity-zone-detail-box .detail-container .detail-operation .detail-operation-btn[data-v-e65f4240]>:nth-child(2n) {
    margin-left: 8px
}

.activity-zone-detail-box .detail-container .detail-separation-line[data-v-e65f4240] {
    width: 100%;
    height: 1px;
    background: var(--color-border-frame);
    margin: 32px 0
}

.activity-zone-detail-box .detail-container .detail-content[data-v-e65f4240] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px
}

.activity-zone-detail-box .detail-container .detail-content .detail-info[data-v-e65f4240] {
    color: var(--color-text-1)
}

.activity-zone-detail-box .detail-container .detail-content .detail-info .detail-title[data-v-e65f4240] {
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
    margin-bottom: 8px
}

.activity-zone-detail-box .detail-container .detail-content .detail-info .detail-activity-time[data-v-e65f4240] {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 16px;
    color: var(--color-text-3)
}

.activity-zone-detail-box .detail-container .detail-content .detail-info .detail-activity-status[data-v-e65f4240] {
    width: fit-content;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    display: flex;
    align-items: center;
    background: var(--color-other-1);
    padding: 4px 8px;
    border-radius: 4px
}

.activity-zone-detail-box .detail-container .detail-content .detail-info .detail-activity-status .start-time[data-v-e65f4240] {
    color: var(--color-text-3);
    margin-left: 8px
}

.activity-zone-detail-box .detail-container .detail-content .detail-info .detail-activity-status .end-time[data-v-e65f4240] {
    color: var(--color-text-1);
    margin-left: 8px
}

.activity-zone-detail-box .detail-container .detail-content .detail-info .detail-activity-status .zone-card-tag-grey[data-v-e65f4240] {
    color: var(--color-text-3)
}

.activity-zone-detail-box .detail-container .detail-activity-description-box[data-v-e65f4240] {
    position: relative;
    height: 100%
}

.activity-zone-detail-box .detail-container .detail-activity-description-box .detail-activity-description[data-v-e65f4240] {
    overflow: hidden;
    background-color: var(--color-other-1);
    border: 1px solid var(--color-border-container);
    padding: 20px;
    border-radius: 12px
}

.activity-zone-detail-box .detail-container .detail-activity-description-box .detail-activity-description[data-v-e65f4240] a {
    color: var(--color-theme-2);
    text-decoration: none
}

.activity-zone-detail-box .detail-container .detail-activity-description-box .detail-activity-description[data-v-e65f4240] strong {
    font-weight: bolder;
    color: var(--color-text-1)!important
}

.activity-zone-detail-box .detail-container .detail-activity-description-box .detail-expand-collapse-mark[data-v-e65f4240] {
    width: 100%;
    height: 43%;
    position: absolute;
    bottom: 0;
    background: var(--color-gradient-container);
    z-index: 10
}

.activity-zone-detail-box .detail-container .detail-expand-collapse[data-v-e65f4240] {
    width: fit-content;
    height: 36px;
    border: 1px solid var(--color-border-component);
    padding: 0 16px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    margin: 32px auto 24px;
    border-radius: 8px;
    background-color: var(--color-other-1);
    color: var(--color-text-1);
    cursor: pointer
}

.activity-zone-detail-box .detail-container .detail-expand-collapse[data-v-e65f4240]:hover {
    border-color: var(--color-border-hover)!important
}

.activity-zone-detail-box .detail-container .detail-expand-collapse .expand-btn[data-v-e65f4240],.activity-zone-detail-box .detail-container .detail-expand-collapse .collapse-btn[data-v-e65f4240] {
    display: flex;
    align-items: center
}

.activity-zone-detail-box .detail-container .detail-expand-collapse .icon-arrow-down[data-v-e65f4240] {
    margin-left: 8px
}

.activity-zone-detail-box .detail-container .detail-work-number-box[data-v-e65f4240] {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    color: var(--color-text-1);
    margin-top: 24px
}

.activity-zone-detail-box .detail-container .detail-work-number-box span[data-v-e65f4240] {
    font-weight: 400;
    line-height: 28px;
    color: var(--color-text-3)
}

.detail-waterfall[data-v-e65f4240] {
    margin-top: -70px
}

.text-tooltip[data-v-4a922a9d] {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.more-line[data-v-4a922a9d] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.activity-zone-card-container[data-v-60d7d45b] {
    height: 162px;
    border-radius: 12px;
    background: var(--color-other-1);
    display: flex;
    width: calc((100% - 32px) / 3);
    cursor: pointer
}

.activity-zone-card-container[data-v-60d7d45b]:hover {
    background: var(--color-other-2)
}

.activity-zone-card-container .zone-card-cover[data-v-60d7d45b] {
    width: 288px;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto
}

.activity-zone-card-container .zone-card-cover .zone-card-cover-item[data-v-60d7d45b] {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.activity-zone-card-container .zone-card-info[data-v-60d7d45b] {
    padding: 16px;
    width: calc(100% - 288px)
}

.activity-zone-card-container .zone-card-info .zone-card-info-detail[data-v-60d7d45b] {
    height: 96px
}

.activity-zone-card-container .zone-card-info .zone-card-info-detail .zone-card-title[data-v-60d7d45b],.activity-zone-card-container .zone-card-info .zone-card-info-detail .zone-card-subtitle[data-v-60d7d45b] {
    margin-bottom: 8px
}

.activity-zone-card-container .zone-card-info .zone-card-info-detail .zone-card-tag[data-v-60d7d45b] {
    width: fit-content;
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--color-other-1);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-text-1)
}

.activity-zone-card-container .zone-card-info .zone-card-info-detail .zone-card-tag .zone-card-tag-grey[data-v-60d7d45b] {
    color: var(--color-text-3)
}

.activity-zone-card-container .zone-card-info .zone-card-info-detail .zone-card-tag .start-time[data-v-60d7d45b] {
    color: var(--color-text-3);
    margin-left: 5px
}

.activity-zone-card-container .zone-card-info .zone-card-info-detail .zone-card-tag .end-time[data-v-60d7d45b],.activity-zone-card-container .zone-card-info .zone-card-info-detail .zone-card-tag .award-process[data-v-60d7d45b] {
    color: var(--color-text-1);
    margin-left: 5px
}

.activity-zone-card-container .zone-card-info .zone-card-info-detail .zone-card-tag .award-received[data-v-60d7d45b] {
    color: var(--color-text-3);
    margin-left: 5px
}

.activity-zone-card-container .zone-card-info .zone-card-movements[data-v-60d7d45b] {
    margin-top: 8px;
    display: flex;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px
}

.activity-zone-card-container .zone-card-info .zone-card-movements .zone-card-award[data-v-60d7d45b] {
    padding: 4px 8px;
    margin-right: 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    background: var(--color-other-1)
}

.activity-zone-card-container .zone-card-info .zone-card-movements .zone-card-award span[data-v-60d7d45b] {
    margin-left: 5px;
    color: var(--color-text-1)
}

.activity-zone-card-container .zone-card-info .zone-card-movements .zone-card-contributors[data-v-60d7d45b] {
    padding: 4px 8px;
    background: var(--color-other-1);
    border-radius: 4px;
    display: flex;
    align-items: center
}

.activity-zone-card-container .zone-card-info .zone-card-movements .zone-card-contributors span[data-v-60d7d45b] {
    margin-left: 6px
}

@media screen and (max-width: 1920px) {
    .activity-zone-card-container[data-v-60d7d45b] {
        width:calc((100% - 16px)/2)
    }
}

.activity-zoon-container[data-v-38dfcea4] {
    position: absolute;
    padding: 0 24px 16px;
    height: calc(100vh - 100px);
    width: calc(100% - 220px)
}

.activity-zoon-container[data-v-38dfcea4]::-webkit-scrollbar {
    display: none
}

.activity-zoon-container .activity-zone-card-list .activity-zoon-title[data-v-38dfcea4] {
    color: var(--color-text-1);
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    margin: 48px 0 32px;
    display: flex;
    align-items: center
}

.activity-zoon-container .activity-zone-card-list .activity-zoon-title .back[data-v-38dfcea4] {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-other-2);
    border-radius: 8px;
    cursor: pointer;
    margin-right: 10px
}

.activity-zoon-container .activity-zone-card-list .activity-zone-list[data-v-38dfcea4] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    overflow-y: auto;
    height: calc(100vh - 160px);
    align-items: flex-start;
    align-content: flex-start
}

.activity-zoon-container .activity-zone-detail[data-v-38dfcea4] {
    position: relative
}

.bottom-navigator[data-v-54174bb1] {
    position: fixed;
    pointer-events: all;
    bottom: 0;
    width: 100%;
    height: 80px;
    left: 0;
    background: var(--color-bg-page);
    text-align: center;
    cursor: pointer
}

.bottom-navigator .btn[data-v-54174bb1] {
    margin-top: 4px;
    display: inline-block;
    text-align: center;
    padding: 6px 16px;
    height: 60px;
    width: 19vw;
    color: #999bac
}

.bottom-navigator .btn .icon[data-v-54174bb1] {
    display: block;
    height: 24px
}

.bottom-navigator .btn .icon[data-v-54174bb1] svg {
    margin: 0;
    width: 24px;
    height: 24px;
    vertical-align: top
}

.bottom-navigator .btn .caption[data-v-54174bb1] {
    font-size: 12px;
    display: block;
    padding: 0;
    margin: 0;
    line-height: 24px
}

.bottom-navigator .btn.active[data-v-54174bb1] {
    color: var(--theme-color-primary);
    background-color: transparent
}

.bottom-navigator .btn[data-v-54174bb1]:active {
    background-color: #fff1
}

.menu[data-v-3745ffde] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.menu .menu-trigger[data-v-3745ffde] {
    width: 56px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center
}

.menu.active[data-v-3745ffde] {
    background: var(--color-other-1)
}

ul[data-v-3745ffde],li[data-v-3745ffde] {
    margin: 0;
    padding: 0;
    list-style: none
}

ul[data-v-3745ffde] {
    display: flex;
    flex-direction: column;
    width: 160px;
    padding: 8px 0
}

ul li .menu-item[data-v-3745ffde] {
    height: 40px;
    padding-left: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--color-text-1);
    cursor: pointer
}

ul li .menu-item[data-v-3745ffde]:hover {
    background: var(--color-other-1)
}

ul li .title[data-v-3745ffde] {
    padding: 8px 12px 4px;
    margin-top: 24px;
    line-height: 24px;
    font-size: 14px;
    color: var(--color-text-3);
    display: flex;
    align-items: center
}

body.mobile header[data-v-11eb95cd] {
    padding-right: 10px
}

body.mobile header .content img.logo[data-v-11eb95cd] {
    margin-left: 20px
}

body.mobile header .content img.logo.anonymous[data-v-11eb95cd] {
    position: absolute;
    left: -50px!important;
    top: -16px!important
}

header[data-v-11eb95cd] {
    height: var(--top-navigation-height);
    position: absolute;
    width: 100%;
    padding-right: 20px;
    left: 0;
    top: 0;
    border-bottom: 1px solid var(--color-border-frame)
}

header .user[data-v-11eb95cd] {
    float: right;
    height: 100%
}

header .content[data-v-11eb95cd] {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%
}

header .content .menu-container[data-v-11eb95cd] {
    overflow: hidden;
    transition: width .2s;
    height: 100%;
    width: 40px;
    flex: none
}

header .content img.logo[data-v-11eb95cd] {
    margin-left: 20px
}

header .help-btn[data-v-11eb95cd] {
    display: inline-block;
    vertical-align: middle;
    margin-right: 1em
}

.mobile-top-bar[data-v-11eb95cd] {
    width: 100vw;
    margin-right: -32px;
    font-size: 14px;
    line-height: 24px
}

.mobile-top-bar .back[data-v-11eb95cd] {
    float: left;
    margin-left: 16px;
    height: 24px;
    width: 48px
}

.mobile-top-bar .back svg[data-v-11eb95cd] {
    margin-top: 1px
}

.mobile-top-bar .history[data-v-11eb95cd] {
    float: right;
    width: 56px;
    text-align: right;
    margin-right: 16px
}

.mobile-top-bar .title[data-v-11eb95cd] {
    font-weight: 500;
    text-align: center;
    font-size: 16px
}

.mobile-top-bar .right[data-v-11eb95cd] {
    text-align: left
}

body.mobile .logo-box .logo[data-v-11eb95cd] {
    position: absolute;
    margin-top: -56px;
    margin-left: calc(-100vw + 88px)!important;
    clip: rect(0px,32px,32px,0px)
}

body.mobile #top-navigation-panel-content-history[data-v-11eb95cd],body.mobile #top-navigation-panel-content-result[data-v-11eb95cd] {
    display: none
}

.logo-box[data-v-11eb95cd] {
    display: flex;
    align-items: center;
    flex: 1;
    padding-right: 55px
}

.logo-box .title[data-v-11eb95cd] {
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    margin-left: 24px;
    margin-right: 12px;
    display: inline-block;
    vertical-align: middle
}

.logo-box .combo[data-v-11eb95cd] {
    width: 176px;
    flex: 0 0 176px;
    display: inline-block
}

.logo-box .video-extend-version[data-v-11eb95cd] {
    height: 32px;
    display: flex;
    padding: 0 12px;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    border: 1px solid var(--color-border-component);
    background: var(--color-bg-dialog);
    color: var(--color-text-3)
}

.option[data-v-11eb95cd] {
    flex-direction: column
}

.new-tag[data-v-11eb95cd] {
    border-radius: 4px;
    padding: 6px;
    display: inline-block;
    background: var(--color-theme-3);
    color: var(--color-theme-2);
    vertical-align: middle;
    margin-left: 8px;
    font-size: 10px;
    font-weight: 500;
    line-height: 12px;
    font-style: Italic
}

.name-new[data-v-11eb95cd] {
    color: var(--color-text-1)!important
}

.model-header[data-v-11eb95cd] {
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: var(--color-text-1);
    padding-left: 16px;
    padding-right: 16px
}

.expand-to-page-icon[data-v-11eb95cd] {
    margin-left: auto;
    margin-right: 24px
}

.close-icon[data-v-11eb95cd] {
    margin-left: auto;
    margin-right: 16px
}

.ai-web-select-model-version .el-select__wrapper .el-select__placeholder {
    display: flex;
    align-items: center
}

.ai-web-select-model-version .el-icon.el-select__caret.el-select__icon {
    color: var(--color-text-1)
}

.video-version-select .el-select-dropdown__header {
    padding: 10px 0;
    border-bottom: none
}

.video-version-select .el-select-dropdown__wrap .el-select-dropdown__list {
    padding: 0!important
}

.video-version-select .el-select-dropdown__wrap .el-select-dropdown__list .el-select-dropdown__item {
    height: 100%!important;
    display: flex!important;
    flex-direction: row;
    padding: 12px 16px!important
}

.video-version-select .el-select-dropdown__wrap .el-select-dropdown__list .el-select-dropdown__item .model-info {
    margin-right: 16px
}

.video-version-select .el-select-dropdown__wrap .el-select-dropdown__list .el-select-dropdown__item .model-info .model-version {
    display: flex;
    align-items: center
}

.video-version-select .el-select-dropdown__wrap .el-select-dropdown__list .el-select-dropdown__item .model-info .model-detail {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-text-2)
}

.ai-web-select-popover {
    background: var(--color-bg-popover)!important;
    box-shadow: var(--box-shadow-component)!important;
    border: none!important
}

.ai-web-select-popover .el-select-dropdown__header {
    padding: 10px 0;
    border-bottom: none
}

.ai-web-select-popover .model-version-select .el-scrollbar {
    overflow: visible;
    padding: 0
}

.ai-web-select-popover .model-version-select .el-select-dropdown__wrap {
    overflow: visible
}

.ai-web-select-popover .model-version-select .el-select-dropdown__list {
    padding: 0!important;
    overflow: visible
}

.ai-web-select-popover .model-version-select .el-select-dropdown__item {
    height: 100%!important;
    padding: 12px!important;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: auto;
    gap: 16px;
    position: relative;
    overflow: visible;
    margin-bottom: 0
}

.ai-web-select-popover .model-version-select .el-select-dropdown__item.is-hovering {
    border-radius: 0!important;
    padding: 12px!important;
    background: var(--color-other-1)!important
}

.ai-web-select-popover .model-version-select .el-select-dropdown__item.is-selected {
    background: none!important;
    color: var(--color-text-1)!important
}

.ai-web-select-popover .model-version-select .el-select-dropdown__item.is-selected svg.model-tick {
    visibility: unset
}

.ai-web-select-popover .model-version-select .el-select-dropdown__item .model-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.ai-web-select-popover .model-version-select .el-select-dropdown__item .model-info .model-detail {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    max-width: 240px;
    white-space: normal;
    color: var(--color-text-2)
}

.ai-web-select-popover .model-version-select .el-select-dropdown__item .model-notice {
    position: absolute;
    left: calc(100% + 4px);
    display: flex;
    flex-direction: row;
    align-items: center
}

.ai-web-select-popover .model-version-select .el-select-dropdown__item .model-notice .mark-dot {
    width: 8px;
    height: 8px;
    border-radius: 13px;
    background-color: #1be5ec;
    outline: solid 3px rgba(27,229,236,.4)
}

.ai-web-select-popover .model-version-select .el-select-dropdown__item .model-notice .mark-line {
    height: 0px;
    width: 16px;
    border-top: 1px dashed #1be5ec
}

.ai-web-select-popover .model-version-select .el-select-dropdown__item .model-notice .mark-text {
    border-radius: 12px;
    border: 1px solid transparent;
    background-clip: padding-box,border-box;
    background-origin: padding-box,border-box;
    background-image: linear-gradient(135deg,#152e2a 9.27%,#102d30 46.96%,#0b2332 88.5%),linear-gradient(135deg,#52ffba 9.27%,#23faec 46.96%,#0af 88.5%);
    padding: 8px 16px
}

.ai-web-select-popover .model-version-select .el-select-dropdown__item .model-notice .mark-text span {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    background: linear-gradient(135deg,#52ffba 9.27%,#23faec 46.96%,#0af 88.5%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.ai-web-select-popover .model-version-select .el-select-dropdown__item .model-version {
    display: flex;
    flex-direction: row;
    align-items: center
}

.ai-web-select-popover .model-version-select .el-select-dropdown__item .model-version .model-name {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-text-1)
}

.ai-web-select-popover .model-version-select .el-select-dropdown__item svg.model-tick {
    width: 20px;
    height: 20px;
    visibility: hidden;
    color: var(--color-theme-2);
    flex: 0 1 auto
}

.ai-web-select-popover .el-select-dropdown__item {
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    align-items: center
}

.designer-select {
    width: 110px;
    margin-right: 8px;
    flex: 1 1 120px;
    min-width: 105px;
    max-width: 176px
}

.top-history {
    position: absolute;
    text-align: center;
    width: 55px;
    right: 0;
    top: 20px;
    font-size: 14px;
    pointer-events: all
}

body.mobile .designer-container .background[data-v-768e567a] {
    display: none
}

body.mobile .bottom[data-v-768e567a] {
    margin-left: -41px;
    width: calc(100% + 41px);
    height: 76px
}

body.mobile .bottom.back[data-v-768e567a] {
    background: linear-gradient(0deg,#0d111688,#0d111600 50%)
}

body.mobile .bottom.back.tab-setting[data-v-768e567a] {
    background: linear-gradient(0deg,#0d1116 50%,#0d111600)
}

.designer-container[data-v-768e567a] {
    min-width: 450px;
    height: 100vh;
    display: flex;
    position: relative
}

.designer-container .background[data-v-768e567a] {
    position: absolute;
    left: 0;
    top: 0
}

.designer-secondary-panel[data-v-768e567a] {
    height: 100vh;
    border-right: 1px solid var(--color-border-frame);
    width: 400px
}

.designer-secondary-panel.mobile[data-v-768e567a] {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    background: var(--color-bg-primary)
}

.designer-secondary-panel .secondary-title[data-v-768e567a] {
    width: 100%;
    height: 64px;
    border-bottom: 1px solid var(--color-border-frame);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-bg-primary);
    padding: 0 20px
}

.designer-secondary-panel .secondary-title span[data-v-768e567a] {
    font-size: 16px;
    font-weight: bolder;
    color: var(--color-text-1)
}

.designer-secondary-panel .secondary-title svg[data-v-768e567a] {
    color: var(--color-text-1);
    cursor: pointer
}

.designer-secondary-panel .secondary-content[data-v-768e567a] {
    padding: 20px;
    width: 100%;
    box-sizing: border-box
}

.sidebar-container[data-v-768e567a] {
    width: 56px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-border-frame);
    background: var(--color-bg-primary)
}

.sidebar-container .menu-container[data-v-768e567a] {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center
}

.sidebar-container .sidebar-item-container[data-v-768e567a] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-2)
}

.sidebar-container .sidebar-item-container .sidebar-item[data-v-768e567a] {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.sidebar-container .sidebar-item-container .sidebar-item[data-v-768e567a]:hover {
    color: var(--color-text-1);
    background: var(--color-other-1)
}

.sidebar-container .sidebar-item-container .sidebar-item.active[data-v-768e567a] {
    color: var(--color-theme-2);
    background: var(--color-other-2)
}

.property-panel[data-v-768e567a] {
    overflow: visible!important;
    flex: none;
    width: 510px;
    height: 100vh;
    box-sizing: border-box;
    padding: 0;
    position: relative;
    background: var(--color-bg-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.property-panel .top-nav-panel-container[data-v-768e567a] {
    float: left;
    flex: none;
    height: 64px
}

.property-panel.mobile[data-v-768e567a] {
    width: 100vw
}

.property-panel .property-content[data-v-768e567a] {
    flex: 1;
    padding: 20px;
    overflow-y: scroll;
    height: calc(100vh - 64px);
    -ms-overflow-style: none;
    scrollbar-width: none
}

.property-panel .property-content[data-v-768e567a]::-webkit-scrollbar {
    display: none
}

.property-panel .property-content.not-sticky[data-v-768e567a] {
    flex: 0 0 auto;
    height: auto;
    overflow-y: visible
}

.property-panel .bottom[data-v-768e567a] {
    flex: none;
    height: 68px;
    position: relative;
    bottom: 0;
    width: 100%;
    background: var(--color-bg-primary)
}

.property-panel .resize-handle[data-v-768e567a] {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    cursor: col-resize;
    color: var(--color-text-2);
    opacity: 1;
    transition: opacity .2s;
    isolation: isolate;
    opacity: 0
}

.property-panel .resize-handle[data-v-768e567a]:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: var(--color-bg-primary);
    z-index: -1
}

.property-panel .resize-handle[data-v-768e567a]:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background-color: var(--22d07fb4);
    z-index: -1
}

.property-panel .resize-handle svg[data-v-768e567a] {
    position: relative;
    z-index: 2
}

.property-panel.resize-hover .resize-handle[data-v-768e567a] {
    opacity: 1
}

.property-panel[data-v-768e567a]:after {
    content: "";
    position: absolute;
    right: -1px;
    top: 0;
    width: 2px;
    height: 100%;
    cursor: default;
    background: linear-gradient(90deg,transparent 0%,rgba(36,40,44,.8) 50%,transparent 100%);
    z-index: 5;
    opacity: 1
}

.property-panel.resize-hover[data-v-768e567a]:after {
    cursor: col-resize;
    background: var(--color-border-component)
}

.property-panel[data-v-768e567a]::-webkit-scrollbar {
    display: none
}

#designer-secondary-panel[data-v-768e567a] {
    flex: none;
    width: 100%;
    height: calc(100vh - 64px);
    background-color: var(--color-bg-primary);
    transition: all .3s ease
}

#designer-secondary-panel.show[data-v-768e567a] {
    transform: translate(0)
}

.designer-component[data-v-768e567a] {
    z-index: 1;
    height: var(--06a4d8dd);
    position: relative;
    background: var(--color-bg-primary);
    display: flex;
    flex-direction: column;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.designer-component[data-v-768e567a]::-webkit-scrollbar {
    display: none
}

.designer-component .bottom-button[data-v-768e567a] {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between
}

.designer-component .bottom-button.not-sticky[data-v-768e567a] {
    position: static
}

.bottom[data-v-768e567a] {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    min-width: var(--body-min-width);
    height: 118px;
    box-sizing: border-box;
    padding: 4px 48px 30px;
    pointer-events: none;
    z-index: 3
}

.try-on-guide-title[data-v-768e567a] {
    z-index: 99;
    color: #999bac;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px
}

.try-on-guide-title a[data-v-768e567a] {
    display: inline-block;
    margin-left: 4px;
    color: #1be5ec;
    cursor: pointer;
    text-decoration: none
}

.top-history[data-v-768e567a] {
    position: absolute;
    right: 16px;
    top: 20px;
    font-size: 14px;
    pointer-events: all;
    z-index: 99999
}

.top-back[data-v-768e567a] {
    position: absolute;
    left: 16px;
    top: 24px;
    font-size: 14px;
    pointer-events: all;
    z-index: 99999
}

.top-navigation-panel[data-v-768e567a] {
    z-index: 9
}

.placeholder[data-v-768e567a] {
    min-height: 0;
    position: relative;
    height: auto;
    border-bottom: 1px solid var(--color-border-frame)
}

.placeholder[data-v-768e567a]:empty {
    height: 0;
    margin: 0;
    padding: 0;
    visibility: hidden
}

.placeholder[data-v-768e567a]:before {
    content: "";
    position: absolute;
    left: 0;
    top: -16px;
    width: 100%;
    height: 16px;
    background: linear-gradient(to bottom,#17181a00,#17181acc)
}

.divider[data-v-768e567a] {
    height: 32px;
    display: flex;
    align-items: center
}

.divider .line[data-v-768e567a] {
    width: 24px;
    height: 1px;
    background-color: var(--color-border-container);
    margin: 0 auto
}

.demo[data-v-04d12661] {
    width: 328px;
    padding: 12px
}

.demo h3[data-v-04d12661] {
    font-size: 14px;
    font-weight: 500;
    line-height: 26px;
    background: linear-gradient(90deg,#e0e9ff,#c3adff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0
}

.demo p[data-v-04d12661] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    margin-top: 8px
}

.demo img[data-v-04d12661] {
    margin-top: 16px;
    border-radius: 8px;
    width: 100%
}

.demo .content[data-v-04d12661] {
    margin-top: 4px
}

.demo .btn[data-v-04d12661] {
    margin-top: 18px
}

.demo .demo-video[data-v-04d12661] {
    width: 100%;
    margin-top: 12px;
    border-radius: 12px
}

.fast-tag[data-v-04d12661] {
    position: absolute;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    padding: 4px 8px;
    background: #00000047;
    color: #fff;
    right: 36px;
    margin-top: 20px;
    border-radius: 8px
}

body.lang-en .el-popper.tip.advanced-button-tip-demo.lite {
    width: 340px
}

.el-popper.tip.advanced-button-tip-demo {
    background-image: var(--membership-demo-background)!important;
    background-size: 100%!important;
    background-repeat: no-repeat!important;
    border: solid 1px #3b3c4d!important
}

.el-popper.tip.advanced-button-tip-demo .el-popper__arrow:before {
    display: none
}

.el-popper.tip.advanced-button-tip-demo.lite {
    width: 260px;
    border-radius: 18px!important;
    background-image: var(--membership-demo-lite-background)!important
}

.setting-collect-box[data-v-51355989] {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    padding: 16px 20px;
    gap: 8px;
    flex-wrap: wrap;
    row-gap: 8px
}

.setting-collect-box .cfg[data-v-51355989] {
    height: 32px;
    padding: 0 28px 0 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border-component);
    gap: 8px;
    color: var(--color-text-1);
    position: relative;
    cursor: pointer
}

.setting-collect-box .cfg[data-v-51355989]:hover {
    border: 1px solid var(--color-border-hover)
}

.setting-collect-box .cfg svg[data-v-51355989] {
    width: 16px;
    flex-shrink: 0;
    color: var(--color-text-2);
    position: absolute;
    right: 12px
}

.setting-collect-box .cfg.disabled[data-v-51355989] {
    cursor: not-allowed;
    border: 1px solid var(--color-border-component);
    background: var(--color-fill-disabled);
    color: var(--color-text-4)
}

.setting-collect-box .cfg.disabled svg[data-v-51355989] {
    color: var(--color-text-4)
}

.setting-collect-box .cfg.active[data-v-51355989] {
    border: 1px solid var(--color-border-hover)
}

.cfg-slider-box[data-v-51355989] {
    gap: 16px;
    height: 24px;
    font-size: 14px;
    color: var(--color-text-2)
}

.mode-item[data-v-51355989] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px
}

.select-active-item[data-v-51355989] {
    display: flex;
    align-items: center;
    gap: 4px
}

.select-active-item[data-v-51355989] * {
    flex: 0 0 auto
}

.cfg-text[data-v-51355989] {
    font-size: 14px
}

.vip[data-v-51355989] {
    display: flex;
    align-items: center;
    justify-self: center;
    height: 20px;
    border-radius: 4px;
    padding: 0 6px;
    background: var(--color-other-1);
    color: var(--color-text-1)
}

.vip.membership[data-v-51355989],.membership[data-v-51355989] {
    background: var(--color-theme-3);
    color: var(--color-theme-2)
}

.seed-container[data-v-51355989] {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%
}

.seed-container .label[data-v-51355989] {
    font-size: 14px;
    color: var(--color-text-2);
    width: 80px;
    flex: 0 0 auto
}

.setting-collect-box .kling-select.el-select .el-select__wrapper,.setting-collect-box .kling-select .el-select .el-select__wrapper {
    padding: 6px 8px
}

.dialog-select-try-on .el-dialog__header {
    padding-bottom: 0
}

.dialog-select-try-on .el-dialog__headerbtn {
    width: 34px;
    height: 34px;
    top: 14px;
    right: 14px
}

.dialog-select-try-on .el-dialog__headerbtn .el-dialog__close {
    font-size: 34px!important
}

.dialog-select-try-on h2[data-v-e0408226] {
    font-size: 22px;
    line-height: 32px;
    color: var(--color-text-1)
}

.dialog-select-try-on p[data-v-e0408226] {
    color: var(--color-text-2);
    font-size: 14px;
    line-height: 32px
}

.dialog-select-try-on main[data-v-e0408226] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 0
}

.dialog-select-try-on main div[data-v-e0408226] {
    width: 216px;
    height: 184px;
    border-radius: 12px;
    overflow: hidden;
    position: relative
}

.dialog-select-try-on main div img[data-v-e0408226] {
    width: 100%
}

.dialog-select-try-on main div svg[data-v-e0408226] {
    top: 10px;
    left: 10px;
    position: absolute;
    cursor: pointer
}

.dialog-select-try-on main .right-solid-arrow[data-v-e0408226] {
    color: var(--color-text-3)
}

.dialog-select-try-on main .is-single[data-v-e0408226] {
    border: 1px solid rgb(13,17,22);
    background: #0d111680;
    box-shadow: 0 4px 4px #1313131f;
    display: flex;
    align-items: center;
    justify-content: center
}

.dialog-select-try-on main .is-single span[data-v-e0408226] {
    color: #fff3;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400
}

.dialog-select-try-on footer[data-v-e0408226] {
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.dialog-select-try-on footer .input-top-btn[data-v-e0408226] {
    margin-right: 12px
}

.dialog-select-try-on footer button[data-v-e0408226] {
    height: 36px
}

.panel[data-v-0ff74a74] {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    width: 100%;
    margin-bottom: 32px;
    overflow-x: hidden;
    overflow-y: hidden
}

body.mobile .panel[data-v-0ff74a74] {
    width: 100%
}

.clothes-recommend ul[data-v-bc3c7b74],.clothes-recommend li[data-v-bc3c7b74] {
    margin: 0;
    padding: 0;
    list-style: none
}

.clothes-recommend .recommend-title[data-v-bc3c7b74] {
    padding: 16px;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--color-border-frame);
    white-space: nowrap
}

.clothes-recommend .recommend-title .recommend-list[data-v-bc3c7b74] {
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-right: 16px
}

.clothes-recommend .recommend-title .recommend-list[data-v-bc3c7b74]::-webkit-scrollbar {
    display: unset;
    width: 5px;
    height: 5px;
    background-color: transparent
}

.clothes-recommend .recommend-title .recommend-list[data-v-bc3c7b74]::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: transparent
}

.clothes-recommend .recommend-title .recommend-list[data-v-bc3c7b74]::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555
}

.clothes-recommend .recommend-title .recommend-list[data-v-bc3c7b74]::-webkit-scrollbar-thumb:hover {
    background-color: #777
}

.clothes-recommend .recommend-title .recommend-list li[data-v-bc3c7b74] {
    border-radius: 8px;
    border: 1px solid transparent;
    margin-right: 8px;
    cursor: pointer
}

.clothes-recommend .recommend-title .recommend-list li div[data-v-bc3c7b74] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--color-other-4)
}

.clothes-recommend .recommend-title .recommend-list li div img[data-v-bc3c7b74] {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.clothes-recommend .recommend-title .recommend-list li[data-v-bc3c7b74]:last-child {
    margin-right: 0
}

.clothes-recommend .recommend-title .recommend-list .recommend-active[data-v-bc3c7b74] {
    border-radius: 10px;
    border: 1px solid var(--color-theme-2)
}

.clothes-recommend .recommend-title .recommend-btn[data-v-bc3c7b74] {
    margin-left: auto
}

#changePopover[data-v-df0b6f4e] {
    padding: 20px 24px
}

[data-v-df0b6f4e] .el-popper {
    padding: 0!important
}

.cloth-content[data-v-df0b6f4e] {
    height: 200px;
    width: 100%;
    position: relative;
    overflow: hidden
}

.cloth-content .loading-box[data-v-df0b6f4e] {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 5;
    background: var(--color-fill-black-1);
    color: #fff;
    gap: 8px
}

.cloth-content .popover-reference[data-v-df0b6f4e] {
    position: absolute
}

.cloth-content img[data-v-df0b6f4e] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    position: absolute;
    top: 0
}

.cloth-content .dropdown[data-v-df0b6f4e] {
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer;
    z-index: 4
}

.cloth-content .try-on-cloth-operate-btn[data-v-df0b6f4e] {
    width: 20px;
    height: 20px;
    color: var(--color-text-1)
}

.cloth-content__tag[data-v-df0b6f4e] {
    z-index: 2;
    height: 32px;
    border-radius: 8px;
    background: var(--color-fill-black-1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 0 8px;
    gap: 6px;
    color: var(--color-fill-white)
}

.cloth-content__tag .turn-icon[data-v-df0b6f4e] {
    transform: rotate(180deg)
}

.cloth-content__btns[data-v-df0b6f4e] {
    z-index: 4;
    width: fit-content;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    opacity: 0;
    transition: opacity .3s;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer
}

.cloth-content__btns div[data-v-df0b6f4e] {
    display: flex;
    align-items: center
}

.cloth-content__btns.vertical[data-v-df0b6f4e],.cloth-content__btns.horizontal[data-v-df0b6f4e] {
    gap: 14px
}

.cloth-content-cover[data-v-df0b6f4e] {
    background-color: var(--color-fill-black-1)
}

.cloth-content-cover:hover .cloth-content__btns[data-v-df0b6f4e] {
    background-color: var(--color-other-6);
    opacity: 1
}

.cloth-content-cover[data-v-df0b6f4e]:hover:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--color-fill-black-1);
    z-index: 3
}

.popover__header[data-v-df0b6f4e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    color: var(--color-text-1)
}

.popover__content[data-v-df0b6f4e] {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px
}

.popover__content-item[data-v-df0b6f4e] {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    position: relative
}

.popover__content-item img[data-v-df0b6f4e] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    overflow: hidden
}

.popover__content-item .checkbox[data-v-df0b6f4e] {
    position: absolute;
    top: 8px;
    left: 8px;
    cursor: pointer
}

.popover__content-item .not-selected[data-v-df0b6f4e] {
    color: var(--color-border-component)
}

.try-on-rule-legend-content[data-v-9928e1bb] {
    border-radius: 8px;
    position: relative;
    margin-right: 8px
}

.try-on-rule-legend-content[data-v-9928e1bb]:last-child {
    margin-right: 0
}

.try-on-rule-legend-content .try-on-rule-legend-image[data-v-9928e1bb] {
    width: 100%;
    height: 100%;
    border-radius: 8px
}

.try-on-rule-legend-content .try-on-rule-legend-title-box[data-v-9928e1bb] {
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    background: var(--color-gradient-black);
    padding: 18px 0 6px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px
}

.try-on-rule-legend-content .try-on-rule-legend-title-box .try-on-rule-legend-title[data-v-9928e1bb] {
    max-width: 110px;
    color: var(--color-fill-white);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    margin-right: 4px
}

body.mobile .try-on-rule-clothes-content[data-v-d3214c42] {
    max-height: 500px;
    overflow-y: auto
}

.try-on-rule-clothes-content[data-v-d3214c42] {
    position: relative;
    z-index: 100
}

.try-on-rule-clothes-content .try-on-rule-clothes-title-box[data-v-d3214c42] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px
}

.try-on-rule-clothes-content .try-on-rule-clothes-title-box .try-on-rule-clothes-title[data-v-d3214c42] {
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: 600;
    line-height: 24px
}

.try-on-rule-clothes-content .try-on-rule-clothes-title-box .try-on-rule-clothes-close-btn[data-v-d3214c42] {
    position: relative;
    z-index: 100;
    cursor: pointer
}

.try-on-rule-clothes-content .try-on-rule-clothes-des[data-v-d3214c42] {
    color: var(--color-text-2);
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 12px
}

.try-on-rule-clothes-content .try-on-rule-clothes-correct-box[data-v-d3214c42] {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.try-on-rule-clothes-content .try-on-rule-clothes-error-title[data-v-d3214c42] {
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    margin: 16px 0 12px
}

.try-on-cloth-content[data-v-bca9aa95] {
    margin-top: 16px;
    border: 1px solid var(--color-border-container);
    border-radius: 8px;
    overflow: hidden
}

.single-box[data-v-bca9aa95] {
    overflow: hidden
}

.multiple-box[data-v-bca9aa95] {
    padding: 8px;
    display: flex;
    gap: 10px
}

.multiple-box__item[data-v-bca9aa95] {
    flex: .5;
    height: 184px;
    border-radius: 12px;
    overflow: hidden
}

.multiple-box .multiple-box-upload[data-v-bca9aa95] {
    background: var(--color-fill-light)
}

.try-on-cloth-header[data-v-bca9aa95] {
    display: flex;
    align-items: center;
    position: relative
}

.try-on-cloth-header .try-on-cloth-tabs[data-v-bca9aa95] {
    display: flex;
    align-items: center;
    cursor: pointer
}

.try-on-cloth-header .try-on-cloth-tabs div[data-v-bca9aa95] {
    padding: 0 12px;
    height: 32px;
    border-radius: 8px;
    margin-right: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-2)
}

.try-on-cloth-header .try-on-cloth-tabs .active[data-v-bca9aa95] {
    color: var(--color-text-1);
    background-color: var(--color-other-2)
}

.try-on-cloth-header .case-popover-box[data-v-bca9aa95] {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center
}

.try-on-cloth-header .case-popover-box .case-box[data-v-bca9aa95] {
    display: flex;
    align-items: center;
    cursor: pointer
}

.try-on-cloth-header .case-popover-box .case-box .info-case-btn[data-v-bca9aa95] {
    width: 16px;
    height: 16px;
    color: var(--color-text-2)
}

.try-on-cloth-header .case-popover-box .case-box .case-title[data-v-bca9aa95] {
    color: var(--color-text-2);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    padding-left: 4px
}

.upload-tip[data-v-bca9aa95] {
    font-size: 12px;
    color: #999bac;
    margin-top: 12px
}

body.mobile .default-model[data-v-feb5e571] {
    width: 92px!important
}

body.mobile .try-on-model-header .try-on-model-tabs[data-v-feb5e571] .generic-button.mid-wide {
    padding-left: 16px;
    padding-right: 16px
}

.try-on-model[data-v-feb5e571] {
    margin-bottom: 32px
}

.try-on-model ul[data-v-feb5e571],.try-on-model li[data-v-feb5e571] {
    margin: 0;
    padding: 0;
    list-style: none
}

.try-on-model .upload-tip[data-v-feb5e571] {
    font-size: 12px;
    color: #999bac;
    margin-top: 12px
}

.try-on-model .try-on-model-header[data-v-feb5e571] {
    display: flex;
    align-items: center;
    position: relative
}

.try-on-model .try-on-model-header .case-popover-box[data-v-feb5e571] {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center
}

.try-on-model .try-on-model-header .case-popover-box .case-box[data-v-feb5e571] {
    display: flex;
    align-items: center;
    cursor: pointer
}

.try-on-model .try-on-model-header .case-popover-box .case-box .info-case-btn[data-v-feb5e571] {
    width: 16px;
    height: 16px;
    color: var(--color-text-2)
}

.try-on-model .try-on-model-header .case-popover-box .case-box .case-title[data-v-feb5e571] {
    color: var(--color-text-2);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    padding-left: 4px
}

.try-on-model .try-on-model-header .try-on-model-tabs[data-v-feb5e571] {
    display: flex;
    align-items: center;
    cursor: pointer
}

.try-on-model .try-on-model-header .try-on-model-tabs div[data-v-feb5e571] {
    padding: 0 12px;
    height: 32px;
    border-radius: 8px;
    margin-right: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-2)
}

.try-on-model .try-on-model-header .try-on-model-tabs .active[data-v-feb5e571] {
    color: var(--color-text-1);
    background-color: var(--color-other-2)
}

.try-on-model .try-on-model-list-box[data-v-feb5e571] {
    overflow-y: auto;
    max-height: 304px;
    width: 100%;
    margin-top: 16px;
    padding: 4px 0
}

.try-on-model .try-on-model-list-box[data-v-feb5e571]::-webkit-scrollbar {
    display: none
}

.try-on-model .try-on-model-list-box .try-on-model-list[data-v-feb5e571] {
    display: flex;
    flex-wrap: wrap;
    position: relative
}

.try-on-model .try-on-model-list-box .try-on-model-list .try-on-model-item-active[data-v-feb5e571],.try-on-model .try-on-model-list-box .try-on-model-list .default-model[data-v-feb5e571] {
    padding: 3px;
    border-radius: 8px;
    border: 1px solid transparent
}

.try-on-model .try-on-model-list-box .try-on-model-list .try-on-model-item-active[data-v-feb5e571] {
    border: 1px solid var(--color-theme-2)!important
}

.try-on-model .try-on-model-list-box .try-on-model-list li[data-v-feb5e571] {
    border-radius: 8px;
    width: 25%;
    height: 100%;
    position: relative;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer
}

.try-on-model .try-on-model-list-box .try-on-model-list li .try-on-model-generation-result[data-v-feb5e571] {
    width: calc(100% - 8px);
    height: 100%;
    overflow: hidden
}

.try-on-model .try-on-model-list-box .try-on-model-list li .try-on-model-generation-result img[data-v-feb5e571] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px
}

.try-on-model .try-on-model-list-box .try-on-model-list li .try-on-model-generation-result .try-on-model-ratio[data-v-feb5e571] {
    position: absolute;
    padding: 3px 8px;
    background: var(--color-other-6);
    left: 8px;
    bottom: 8px;
    border-radius: 6px;
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.try-on-model .try-on-model-list-box .try-on-model-list li .try-on-model-generation-result .try-on-model-item__favor[data-v-feb5e571] {
    position: absolute;
    top: 8px;
    right: 8px
}

.try-on-model .try-on-model-list-box .try-on-model-list li img[data-v-feb5e571] {
    width: 100%;
    height: 100%;
    border-radius: 6px
}

.try-on-model .try-on-model-list-box .try-on-model-list li[data-v-feb5e571]:nth-of-type(4n) {
    margin-right: 0
}

.try-on-model .try-on-model-list-box .try-on-model-custom-list[data-v-feb5e571] {
    display: flex;
    flex-wrap: wrap;
    position: relative
}

.try-on-model .try-on-model-list-box .try-on-model-custom-list .try-on-model-item-active[data-v-feb5e571],.try-on-model .try-on-model-list-box .try-on-model-custom-list .default-model[data-v-feb5e571] {
    padding: 3px;
    border-radius: 8px;
    border: 1px solid transparent
}

.try-on-model .try-on-model-list-box .try-on-model-custom-list .try-on-model-item-active[data-v-feb5e571] {
    border: 1px solid var(--color-theme-2)!important
}

.try-on-model .try-on-model-list-box .try-on-model-custom-list li[data-v-feb5e571] {
    width: 25%;
    position: relative;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer
}

.try-on-model .try-on-model-list-box .try-on-model-custom-list li .try-on-model-generation-result[data-v-feb5e571] {
    width: calc(100% - 2px);
    padding-top: 133.3333333333%;
    overflow: hidden;
    border-radius: 8px;
    background-color: var(--color-other-1);
    position: relative
}

.try-on-model .try-on-model-list-box .try-on-model-custom-list li .try-on-model-generation-result .occupation-img[data-v-feb5e571] {
    opacity: 0;
    z-index: 0
}

.try-on-model .try-on-model-list-box .try-on-model-custom-list li .try-on-model-generation-result .try-on-model-add[data-v-feb5e571] {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    top: 25%;
    left: 50%;
    transform: translate(-50%);
    background-color: var(--color-other-1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-text-1);
    z-index: 100
}

.try-on-model .try-on-model-list-box .try-on-model-custom-list li .try-on-model-generation-result span[data-v-feb5e571] {
    top: 57%;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    font-size: 14px;
    font-weight: 500;
    line-height: 26px;
    color: var(--color-text-2);
    margin-top: 8px;
    white-space: nowrap
}

.try-on-model .try-on-model-list-box .try-on-model-custom-list li .try-on-model-generation-result img[data-v-feb5e571] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px
}

.try-on-model .try-on-model-list-box .try-on-model-custom-list li .try-on-model-generation-result .try-on-model-ratio[data-v-feb5e571] {
    position: absolute;
    padding: 3px 8px;
    background: var(--color-other-6);
    left: 8px;
    bottom: 8px;
    border-radius: 6px;
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.try-on-model .try-on-model-list-box .try-on-model-custom-list li .try-on-model-generation-result .try-on-model-item__favor[data-v-feb5e571] {
    position: absolute;
    top: 8px;
    right: 8px
}

.try-on-model .try-on-model-list-box .try-on-model-custom-list li img[data-v-feb5e571] {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover
}

.try-on-model .try-on-model-list-box .try-on-model-custom-list li[data-v-feb5e571]:nth-of-type(4n) {
    margin-right: 0
}

.try-on-model .try-on-model-custom-area[data-v-feb5e571] {
    width: 100%;
    height: 200px;
    margin-top: 16px
}

.try-on-model .try-on-model-custom-area .try-on-model-custom-upload[data-v-feb5e571] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--color-border-container);
    cursor: pointer
}

.try-on-model .try-on-model-custom-area .try-on-model-custom-image-box[data-v-feb5e571] {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    border: 1px solid var(--color-border-container);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.try-on-model .try-on-model-custom-area .try-on-model-custom-image-box .try-on-model-custom-image-result-box[data-v-feb5e571] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px;
    cursor: pointer
}

.try-on-model .try-on-model-custom-area .try-on-model-custom-image-box .try-on-model-custom-image-result-box[data-v-feb5e571]:hover {
    background-color: var(--color-other-6);
    opacity: 1
}

.try-on-model .try-on-model-custom-area .try-on-model-custom-image-box .try-on-model-custom-image-result-box[data-v-feb5e571]:hover:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--color-fill-black-1);
    z-index: 11
}

.try-on-model .try-on-model-custom-area .try-on-model-custom-image-box .try-on-model-custom-image-result-box .try-on-model-custom-image[data-v-feb5e571] {
    height: 200px;
    object-fit: cover;
    background: transparent;
    position: relative;
    z-index: 10
}

.try-on-model .try-on-model-custom-area .try-on-model-custom-image-box .try-on-model-custom-image-result-box .try-on-model-custom-mark[data-v-feb5e571] {
    background-color: var(--color-fill-black-1);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0
}

.try-on-model .try-on-model-custom-area .try-on-model-custom-image-box .try-on-model-custom-image-result-box .try-on-model-custom-operate[data-v-feb5e571] {
    width: 74px;
    height: 32px;
    border-radius: 8px;
    padding: 2px 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: var(--color-other-6);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
    gap: 12px
}

.try-on-model .try-on-model-custom-area .try-on-model-custom-image-box .try-on-model-custom-image-result-box .try-on-model-custom-operate .try-on-model-custom-operate-btn[data-v-feb5e571] {
    width: 20px;
    height: 20px;
    color: var(--color-text-1)
}

.try-on-model .try-on-model-custom-area .try-on-model-custom-image-box .try-on-model-custom-image-result-box:hover .try-on-model-custom-mark[data-v-feb5e571],.try-on-model .try-on-model-custom-area .try-on-model-custom-image-box .try-on-model-custom-image-result-box:hover .try-on-model-custom-operate[data-v-feb5e571] {
    opacity: 1
}

.title[data-v-a4099661] {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    height: 32px
}

.title svg[data-v-a4099661]:first-child {
    width: 24px;
    height: 24px;
    flex-shrink: 0
}

.title span[data-v-a4099661] {
    font-size: 14px;
    font-weight: 600;
    line-height: 26px;
    text-align: left;
    vertical-align: middle;
    color: var(--color-text-1)
}

.title .info-btn[data-v-a4099661] {
    margin-left: .5em;
    width: 16px;
    height: 16px;
    cursor: pointer
}

.title .desc[data-v-a4099661] {
    font-size: 14px;
    color: var(--color-text-3);
    font-weight: 400
}

.content[data-v-a4099661] {
    color: #727485;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-top: 12px
}

.title-bar {
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: end;
    margin-left: auto;
    gap: 8px
}

.title-bar span {
    font-size: 14px;
    color: #999bac
}

.title-bar a {
    pointer-events: all;
    color: #fff;
    cursor: pointer
}

.title-bar svg {
    float: right
}

.expandIcon {
    transition: transform .3s ease
}

.rotate-180 {
    transform: rotate(180deg)
}

#mark[data-v-88f07e57] {
    z-index: 2
}

#mark .mouse-con[data-v-88f07e57] {
    position: absolute;
    height: 340px;
    top: -150px;
    right: -490px
}

#mark .mark-step[data-v-88f07e57] {
    position: relative;
    width: 290px;
    background: linear-gradient(252deg,#1b2829 -5.05%,#171b21 45.55%,#191d23 90.29%);
    z-index: 2222;
    opacity: 1;
    border-radius: 12px;
    border: 1px solid rgba(27,229,236,.4);
    padding: 16px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column
}

#mark .mark-step .mark-dot[data-v-88f07e57] {
    position: absolute;
    left: 125px;
    width: 8px;
    height: 8px;
    border-radius: 13px;
    background-color: #1be5ec;
    outline: solid 3px rgba(27,229,236,.4)
}

#mark .mark-step .mark-line[data-v-88f07e57] {
    position: absolute;
    top: -59px;
    left: 129px;
    height: 0;
    width: 41px;
    border-top: 1px dashed #1be5ec
}

#mark .mark-step .mark-texts[data-v-88f07e57] {
    color: #fff;
    font-size: 16px;
    margin-bottom: 12px;
    font-weight: 600
}

#mark .mark-step .mark-texts span[data-v-88f07e57] {
    font-weight: 600
}

#mark .mark-step .mark-bottom[data-v-88f07e57] {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

#mark .mark-step .mark-bottom span[data-v-88f07e57] {
    color: #c5c7d5
}

#markSeek[data-v-c918bf86] {
    display: flex;
    flex-direction: column;
    align-items: center
}

#markSeek .mark-dot[data-v-c918bf86] {
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 4px solid var(--color-border-focused);
    border-radius: 8px;
    background: var(--color-fill-back-1)
}

#markSeek .mark-line[data-v-c918bf86] {
    height: 24px;
    width: 0px;
    border-right: 1px dashed var(--color-border-hover)
}

#markSeek .mark-step[data-v-c918bf86] {
    border-radius: 16px;
    padding: 16px;
    background: var(--color-bg-popover);
    display: flex;
    flex-direction: column;
    width: 248px;
    gap: 12px;
    font-size: 14px;
    pointer-events: none
}

#markSeek .mark-step .mid[data-v-c918bf86] {
    font-weight: 600;
    color: #74ff52;
    display: inline-block;
    margin-right: 4px
}

#markSeek .mark-step .mark-texts[data-v-c918bf86] {
    color: var(--color-text-1)
}

#markSeek .mark-step .mark-texts span[data-v-c918bf86] {
    font-weight: 600
}

#markSeek .mark-step .mark-bottom[data-v-c918bf86] {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

#markSeek .mark-step .mark-bottom span[data-v-c918bf86] {
    color: #c5c7d5
}

.loading-container[data-v-9e1e0552] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    margin-right: 4px
}

.loading-spinner[data-v-9e1e0552] {
    width: 16px;
    height: 16px;
    animation: rotate-9e1e0552 .7s linear infinite;
    display: inline-block
}

@keyframes rotate-9e1e0552 {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.options {
    display: flex;
    margin-top: 12px
}

.options .left-btn {
    width: 102px;
    margin-right: 8px
}

.options .right-btn {
    margin-left: 8px
}

.chat-with-ai {
    height: 100%;
    display: flex;
    flex-direction: column
}

.chat-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    -webkit-user-select: text;
    user-select: text
}

.chat-container .thinking .thinking-control {
    height: 24px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--color-text-1);
    margin-bottom: 12px
}

.chat-container .thinking .thinking-control svg {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    transform: rotate(180deg)
}

.chat-container .thinking .thinking-control svg:first-child {
    transform: rotate(0);
    margin-right: 4px;
    margin-left: 0
}

.chat-container .thinking .think-content {
    display: none;
    color: var(--color-text-2);
    font-size: 12px;
    line-height: 20px;
    background: var(--color-fill-black-1);
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 12px
}

.chat-container .thinking.expand .think-content {
    display: block;
    width: 100%;
    padding: 12px
}

.chat-container .thinking.expand .think-content .thinking-control svg {
    transform: rotate(0)
}

.sensitive-container {
    margin-top: 32px
}

.split-container {
    display: flex;
    align-items: center;
    width: 100%!important;
    height: 32px;
    margin-top: 32px;
    justify-content: center
}

.split-container span {
    margin: 0 8px;
    color: var(--color-text-3)
}

.split-container:before {
    content: "";
    display: block;
    height: 0;
    border-bottom: 1px solid var(--color-border-container);
    width: 32px
}

.split-container:after {
    content: "";
    display: block;
    height: 0;
    border-bottom: 1px solid var(--color-border-container);
    width: 32px
}

.kl-message-list {
    flex: 1;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.kl-message-list::-webkit-scrollbar {
    display: none
}

.kl-message {
    display: flex
}

.kl-message>div {
    width: fit-content;
    box-sizing: border-box
}

.kl-message div,.kl-message span {
    -webkit-user-select: text;
    user-select: text;
    white-space: pre-line
}

.kl-message.right {
    justify-content: flex-end
}

.kl-message .recommend-container {
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--color-border-component);
    margin-top: 8px;
    cursor: pointer
}

.kl-message .recommend-container:first {
    margin-top: 16px
}

.kl-message .recommend-container span {
    color: var(--color-text-2);
    font-size: 12px
}

.kl-message.active {
    flex-direction: column
}

.kl-message.active .kling-ds-res-container {
    width: 100%
}

.kl-message.active .thinking .think-content {
    max-height: 52px;
    mask: linear-gradient(180deg,transparent,#fff 32px);
    mask-origin: padding-box;
    -webkit-mask-origin: padding-box;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    margin-bottom: 0;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.kl-message.active .thinking .think-content::-webkit-scrollbar {
    display: none
}

.hello-container {
    border-radius: 0 6px 6px;
    background: var(--color-other-1);
    padding: 12px 16px;
    color: var(--color-text-1);
    margin-bottom: 8px
}

.query-container {
    border-radius: 8px 0 8px 8px;
    background: #65ed42;
    padding: 12px 16px;
    color: var(--color-text-5);
    align-self: flex-end;
    margin-top: 32px
}

.kling-ds-res-container {
    border-radius: 0 8px 8px;
    background: var(--color-other-1);
    padding: 12px 16px;
    color: var(--color-text-1);
    margin-top: 32px
}

.input-area {
    margin-top: 20px;
    height: 166px;
    position: relative
}

.input-area .input-container {
    height: 100%;
    display: flex
}

.input-area .send-icon {
    position: absolute;
    z-index: 10;
    right: 24px;
    bottom: 8px;
    display: flex;
    justify-content: flex-end
}

.input-area .send-icon .icon-container {
    cursor: pointer
}

.disclaimer {
    color: var(--color-text-3);
    font-size: 14px;
    line-height: 22px;
    margin-top: 8px
}

body.mobile.lang-en .tabs-box[data-v-b0507d07] {
    font-size: 14px
}

body.mobile .tabs[data-v-b0507d07] {
    width: fit-content
}

body.browser-safari .tabs-box .tab[data-v-b0507d07] {
    letter-spacing: -.5px
}

.tabs-box[data-v-b0507d07] {
    position: relative;
    height: fit-content
}

.tabs-box .tabs[data-v-b0507d07] {
    display: flex
}

.tabs-box .tabs .tab[data-v-b0507d07] {
    cursor: pointer
}

.tabs-box .tabs .tab.disabled[data-v-b0507d07] {
    color: var(--color-text-4);
    cursor: not-allowed
}

.tabs-box .tabs.size-normal[data-v-b0507d07] {
    gap: 24px;
    font-size: 16px;
    line-height: 26px
}

.tabs-box .tabs.size-small[data-v-b0507d07] {
    gap: 24px;
    font-size: 14px;
    line-height: 24px
}

.tabs-box .tabs.size-big[data-v-b0507d07] {
    gap: 32px;
    font-size: 16px;
    line-height: 26px
}

.tabs-box .bar[data-v-b0507d07] {
    height: 3px;
    border-radius: 4px;
    width: var(--bar-width);
    position: absolute;
    left: var(--bar-left);
    transition: var(--bar-transition);
    margin-top: var(--bar-margin-top);
    z-index: 2
}

.tabs-box.theme-colorful .tab[data-v-b0507d07] {
    color: var(--color-text-2)
}

.tabs-box.theme-colorful .tab .tag[data-v-b0507d07] {
    height: 24px;
    padding: 0 6px;
    background: var(--color-other-2);
    font-size: 14px;
    border-radius: 4px;
    margin-left: 8px;
    color: var(--color-theme-2);
    font-weight: 400
}

.tabs-box.theme-colorful .tab.active[data-v-b0507d07] {
    color: var(--color-theme-2);
    font-weight: 600
}

.tabs-box.theme-colorful .bar[data-v-b0507d07] {
    background: var(--color-theme-2)
}

.tabs-box.theme-simple .tab[data-v-b0507d07] {
    color: var(--color-text-2)
}

.tabs-box.theme-simple .tab.active[data-v-b0507d07] {
    color: var(--color-theme-1);
    font-weight: 600
}

.tabs-box.theme-simple .bar[data-v-b0507d07] {
    background: var(--color-theme-1)
}

.tabs-box.theme-member[data-v-b0507d07] {
    line-height: 22px
}

.tabs-box.theme-member .tab[data-v-b0507d07] {
    color: #fff;
    font-weight: 400
}

.tabs-box.theme-member .tab[data-v-b0507d07]:hover {
    color: #fff
}

.tabs-box.theme-member .tab.active[data-v-b0507d07] {
    font-weight: 600;
    background: linear-gradient(90deg,#a7ff1a,#82fac2,#47d4ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.tabs-box.theme-member .bar[data-v-b0507d07] {
    height: 3px;
    margin-top: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg,#a7ff1a,#82fac2,#47d4ff)
}

.tabs-box.tab-underline[data-v-b0507d07]:after {
    content: "";
    position: absolute;
    height: 1px;
    width: 100%;
    background: var(--color-border-container);
    bottom: var(--underline-bottom);
    z-index: 1
}

.prompt-library-box[data-v-2f30213c] {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%
}

.prompt-library-box .tabs-box[data-v-2f30213c] {
    margin-bottom: 34px
}

.prompt-library-box .phrase-box[data-v-2f30213c] {
    overflow-y: scroll;
    border-radius: 12px;
    flex-grow: 1
}

.prompt-library-box .phrase-box[data-v-2f30213c]::-webkit-scrollbar {
    display: none
}

.prompt-library-box .phrase-box .category[data-v-2f30213c] {
    margin-bottom: 32px
}

.prompt-library-box .phrase-box .category[data-v-2f30213c]:last-child {
    margin-bottom: 0
}

.prompt-library-box .phrase-box .category .category-caption[data-v-2f30213c] {
    color: var(--color-text-1);
    font-size: 14px;
    height: 24px;
    line-height: 24px;
    font-weight: 600;
    margin-bottom: 12px
}

.prompt-library-box .phrase-box .category .category-phrases[data-v-2f30213c] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.prompt-library-box .phrase-box .category .category-phrases .category-phrases-item[data-v-2f30213c] {
    font-size: 14px;
    cursor: pointer;
    position: relative;
    padding: 6px 16px;
    border: 1px solid var(--color-border-component);
    border-radius: 8px;
    color: var(--color-text-1);
    line-height: 24px
}

.prompt-library-box .phrase-box .category .category-phrases .category-phrases-item.active[data-v-2f30213c] {
    background-color: var(--color-other-2);
    border: 1px solid var(--color-text-1)
}

.prompt-library-box .phrase-box .category .category-phrases .category-phrases-item.active.multiple[data-v-2f30213c] {
    position: relative;
    overflow: hidden
}

.prompt-library-box .phrase-box .category .category-phrases .category-phrases-item.active.multiple .multiple-tag[data-v-2f30213c] {
    width: 14px;
    height: 12px;
    border-radius: 4px 0;
    position: absolute;
    right: 0;
    bottom: 0;
    background: var(--color-text-1)
}

.prompt-library-box .phrase-box .category .category-phrases .category-phrases-item.active.multiple .multiple-tag[data-v-2f30213c] svg {
    width: 6.88px;
    height: 4.79px
}

.prompt-library-box .hasBorder[data-v-2f30213c] {
    border-radius: 12px;
    border: 1px dashed var(---_, rgba(255, 255, 255, .2))
}

.prompt-library-box .preset-box[data-v-2f30213c] {
    overflow: hidden;
    flex-grow: 1;
    display: flex;
    flex-direction: column
}

.prompt-library-box .preset-box .preset-edit[data-v-2f30213c] {
    display: flex;
    flex-direction: column
}

.prompt-library-box .preset-box .preset-edit .preset-edit-title[data-v-2f30213c] {
    height: 24px;
    line-height: 24px;
    color: var(--color-text-1);
    margin-bottom: 8px
}

.prompt-library-box .preset-box .preset-edit .edit-content[data-v-2f30213c] {
    margin-bottom: 24px
}

.prompt-library-box .preset-box .preset-edit .edit-operation[data-v-2f30213c] {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.prompt-library-box .preset-box .preset-edit .edit-operation button[data-v-2f30213c] {
    margin-left: 10px
}

.prompt-library-box .preset-box .operation[data-v-2f30213c] {
    height: 36px;
    flex-shrink: 0;
    display: flex;
    margin-bottom: 24px
}

.prompt-library-box .preset-box .operation-query[data-v-2f30213c] {
    flex: 1
}

.prompt-library-box .preset-box .operation-btn[data-v-2f30213c] {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: var(--color-other-1);
    margin-left: 8px;
    padding: 0 12px;
    color: var(--color-text-1);
    cursor: pointer
}

.prompt-library-box .preset-box .operation-btn span[data-v-2f30213c] {
    display: none
}

.prompt-library-box .preset-box .operation-btn:hover span[data-v-2f30213c] {
    display: inline-block;
    margin-left: 4px
}

.prompt-library-box .preset-box .preset-wrap[data-v-2f30213c] {
    overflow-y: scroll;
    flex-grow: 1;
    flex-shrink: 1
}

.prompt-library-box .preset-box .preset-wrap[data-v-2f30213c]::-webkit-scrollbar {
    display: none
}

.prompt-library-box .preset-box .presets-list .preset-item[data-v-2f30213c] {
    height: 68px;
    padding: 12px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    border-radius: 8px;
    width: 100%;
    display: flex;
    background: var(--color-fill-light);
    justify-content: space-between
}

.prompt-library-box .preset-box .presets-list .preset-item[data-v-2f30213c]:hover {
    background: var(--color-other-1)
}

.prompt-library-box .preset-box .presets-list .preset-item:hover .content-wrap[data-v-2f30213c] {
    width: calc(100% - 84px)
}

.prompt-library-box .preset-box .presets-list .preset-item:hover .operation-wrap[data-v-2f30213c] {
    display: inline-flex;
    display: flex;
    align-items: center;
    flex-shrink: 0
}

.prompt-library-box .preset-box .presets-list .preset-item .content-wrap[data-v-2f30213c] {
    width: 100%
}

.prompt-library-box .preset-box .presets-list .preset-item .operation-wrap[data-v-2f30213c] {
    display: none
}

.prompt-library-box .preset-box .presets-list .preset-item .operation-wrap svg[data-v-2f30213c] {
    height: 20px;
    width: 20px;
    cursor: pointer;
    margin-right: 16px
}

.prompt-library-box .preset-box .presets-list .preset-item .operation-wrap svg[data-v-2f30213c]:last-child {
    margin-right: 0
}

.prompt-library-box .preset-box .presets-list .preset-item .operation-wrap svg[data-v-2f30213c]:hover {
    color: #6bf0dc
}

.prompt-library-box .preset-box .presets-list .preset-item-name[data-v-2f30213c] {
    height: 22px;
    margin-bottom: 2px;
    font-size: 13px;
    line-height: 22px;
    font-weight: 600;
    color: var(--color-text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.prompt-library-box .preset-box .presets-list .preset-item-prompt[data-v-2f30213c] {
    height: 22px;
    line-height: 22px;
    font-size: 13px;
    color: var(--color-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.user-item-card {
    vertical-align: middle;
    height: 24px;
    display: inline-flex;
    border-radius: 4px;
    background: var(--color-other-1);
    position: relative;
    margin-right: 8px
}

.user-item-card .lora-card-item-content {
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 14px
}

.user-item-card .card-avatar {
    width: 24px;
    height: 100%;
    border-radius: 4px 0 0 4px;
    overflow: hidden
}

.user-item-card .card-avatar img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.user-item-card .lora-card-text {
    height: 100%;
    margin: 0 6px 0 12px;
    color: var(--color-text-1);
    font-size: 12px;
    display: flex;
    align-items: center
}

.user-item-card .lora-card-remove {
    margin-right: 8px;
    cursor: pointer
}

.phrase-item-card[data-v-80d0f28a] {
    display: inline-flex;
    align-items: center;
    height: 24px;
    border-radius: 4px;
    background: var(--color-other-3);
    color: var(--color-text-1);
    font-size: 12px;
    font-weight: 400;
    margin-right: 8px;
    position: relative
}

.phrase-item-card .phrase-select[data-v-80d0f28a] {
    width: auto;
    position: relative;
    background-color: transparent
}

.phrase-item-card .phrase-remove[data-v-80d0f28a] {
    position: absolute;
    right: 8px;
    width: 10px;
    height: 10px;
    cursor: pointer
}

.phrase-item-card.multi[data-v-80d0f28a] {
    padding: 0 8px 0 12px
}

.phrase-item-card.multi .phrase-remove[data-v-80d0f28a] {
    margin-left: 8px;
    position: static;
    right: 0
}

.phrase-item-card .el-select__placeholder {
    position: relative;
    transform: none
}

.phrase-item-card .el-select__wrapper {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    gap: 8px
}

.phrase-item-card .el-select__wrapper.is-hovering:not(.is-focused) {
    box-shadow: none
}

.phrase-item-card .el-select__wrapper .el-select__suffix {
    margin-right: 32px
}

.phrase-item-card .el-select__wrapper .el-select__selection {
    margin-left: 12px
}

.phrase-item-card .el-select__selected-item {
    width: auto;
    color: var(--color-text-1);
    font-size: 12px;
    padding: 0
}

body .lora-guide-tip {
    background: transparent!important
}

body .lora-guide-tip .el-popper__arrow {
    display: none
}

body .deepseek-guide-tooltip {
    background: transparent!important;
    border: none!important
}

body .deepseek-guide-tooltip .el-popper__arrow {
    display: none
}

.over-limit {
    display: inline;
    color: #f5ba31;
    max-width: 100%
}

.over-limit .user-item-card {
    color: #f5ba31
}

.prompt-guide[data-v-e009f289] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 12px;
    z-index: 1;
    color: var(--color-text-3);
    pointer-events: none;
    line-height: 28px;
    font-size: 14px
}

.prompt-guide[data-v-e009f289] a {
    color: var(--color-text-1);
    pointer-events: all;
    cursor: pointer;
    margin: 0;
    text-decoration: underline
}

.lora-tips-panel[data-v-e009f289] {
    width: 240px!important
}

.delete[data-v-e009f289] {
    position: absolute;
    bottom: 12px;
    right: 16px
}

.lora-select-content[data-v-e009f289] {
    margin-top: 32px;
    width: 100%;
    border-radius: 10px
}

.lora-select-content .select-avatar-content[data-v-e009f289] {
    display: flex;
    border-radius: 8px;
    border: 1px solid var(--color-border-container);
    align-items: center;
    justify-content: space-between;
    height: 64px;
    position: relative;
    padding: 0 16px 0 8px;
    cursor: pointer
}

.lora-select-content .select-avatar-content .left-avatar[data-v-e009f289] {
    display: flex;
    align-items: center;
    gap: 16px
}

.lora-select-content .select-avatar-content .left-avatar .avatar[data-v-e009f289] {
    height: 48px;
    width: 48px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-other-1)
}

.lora-select-content .select-avatar-content .left-avatar .avatar img[data-v-e009f289] {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.lora-select-content .select-avatar-content .left-avatar .avatar svg[data-v-e009f289] {
    color: var(--color-text-4)
}

.lora-select-content .select-avatar-content .left-avatar .name[data-v-e009f289] {
    color: var(--color-text-3)
}

.lora-select-content .select-avatar-content .left-avatar .name.selected[data-v-e009f289] {
    color: var(--color-text-1)
}

.lora-select-content .select-avatar-content .right-icon[data-v-e009f289] {
    height: 20px;
    width: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-1)
}

.lora-select-content .tips[data-v-e009f289] {
    height: 32px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.lora-select-content .tips .left-tips[data-v-e009f289] {
    display: flex;
    align-items: center
}

.lora-select-content .tips .left-tips .left-tips-title[data-v-e009f289] {
    color: var(--color-text-1);
    font-size: 14px;
    line-height: 32px;
    font-weight: 600;
    margin-right: 6px
}

.lora-select-content .tips .left-tips svg[data-v-e009f289] {
    cursor: pointer;
    color: var(--color-text-2)
}

.lora-select-content .tips .left-tips svg[data-v-e009f289]:hover {
    color: var(--color-text-1)
}

.lora-select-content .tips .right-clear[data-v-e009f289] {
    width: 16px;
    height: 32px;
    display: flex;
    align-items: center;
    cursor: pointer;
    line-height: 26px
}

.lora-select-content .tips .right-clear svg[data-v-e009f289] {
    color: var(--color-text-4)
}

.lora-select-content .tips .right-clear.active-clear svg[data-v-e009f289] {
    color: var(--color-text-1)
}

.prompt-box[data-v-e009f289] {
    position: relative
}

.prompt-box .spirit-box[data-v-e009f289] {
    position: absolute;
    right: 0;
    top: -45px;
    display: flex;
    align-items: center;
    height: 32px;
    gap: 6px
}

.prompt-box .get-spirit[data-v-e009f289] {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px 0 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-1);
    border-radius: 8px;
    background: var(--color-other-1);
    gap: 6px
}

.prompt-box .get-spirit .deepseek[data-v-e009f289] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center
}

.prompt-box .get-spirit .deepseek svg[data-v-e009f289] {
    margin-right: 4px
}

.prompt-box .get-spirit .deepseek.right[data-v-e009f289] {
    right: 0;
    top: -40px
}

.prompt-box .settings-box[data-v-e009f289] {
    overflow: hidden;
    width: 200px;
    position: absolute;
    border-radius: 8px;
    background: var(--color-bg-popover);
    display: flex;
    padding: 8px 0;
    flex-direction: column;
    z-index: 99;
    max-height: 216px;
    overflow-y: auto
}

.prompt-box .settings-box[data-v-e009f289]::-webkit-scrollbar {
    display: none
}

.prompt-box .settings-box li[data-v-e009f289] {
    height: 40px;
    display: flex;
    align-items: center;
    color: var(--color-text-1);
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    padding: 0 12px
}

.prompt-box .settings-box li .avatar[data-v-e009f289] {
    border-radius: 4px;
    overflow: hidden;
    width: 28px;
    height: 28px;
    font-size: 0;
    margin-right: 12px
}

.prompt-box .settings-box li .avatar img[data-v-e009f289] {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.prompt-box .settings-box li span[data-v-e009f289] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all
}

.prompt-box .settings-box li[data-v-e009f289]:hover,.prompt-box .settings-box .box-active[data-v-e009f289] {
    background: var(--color-other-1)
}

.prompt-wrap[data-v-e009f289] {
    border: 1px solid var(--color-border-container);
    border-radius: 8px;
    overflow: hidden
}

.prompt-wrap.overLimit[data-v-e009f289] {
    border: 1px solid var(---color_font_8, #f5ba31)
}

.prompt[data-v-e009f289] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    min-height: 108px;
    padding: 12px
}

.prompt.negative[data-v-e009f289] {
    min-height: 140px
}

.prompt .prompt-input[data-v-e009f289] {
    -webkit-user-select: text;
    user-select: text;
    flex-grow: 1;
    color: var(--color-text-1);
    overflow-y: auto;
    line-height: 28px;
    white-space: pre-wrap;
    font-size: 13px;
    max-height: 440px
}

.prompt .prompt-input[data-v-e009f289]::-webkit-scrollbar {
    display: none
}

.prompt .exceeds-limit[data-v-e009f289] {
    color: var(--color-text-1);
    font-size: 12px;
    margin-top: 8px;
    line-height: 20px;
    padding-left: 20px;
    position: relative
}

.prompt .exceeds-limit-icon[data-v-e009f289] {
    position: absolute;
    left: 0;
    top: 2px
}

.prompt .prompt-operation[data-v-e009f289] {
    height: 32px;
    gap: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 8px;
    margin-right: 4px
}

.prompt .prompt-operation .btn[data-v-e009f289] {
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--color-text-1)
}

.prompt .placeholder[data-v-e009f289] {
    position: absolute;
    top: 0
}

.lora-select-teleport[data-v-e009f289] {
    height: 100%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.lora-select-teleport[data-v-e009f289]::-webkit-scrollbar {
    display: none
}

.lora-select-teleport .lora-select-item[data-v-e009f289] {
    height: 56px;
    border-radius: 8px;
    background: var(--color-fill-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer
}

.lora-select-teleport .lora-select-item .left[data-v-e009f289] {
    width: calc(100% - 32px);
    height: 100%;
    display: flex;
    align-items: center
}

.lora-select-teleport .lora-select-item .left .avatar[data-v-e009f289] {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--color-other-1)
}

.lora-select-teleport .lora-select-item .left .avatar img[data-v-e009f289] {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.lora-select-teleport .lora-select-item .left .avatar svg[data-v-e009f289] {
    color: var(--color-text-4)
}

.lora-select-teleport .lora-select-item .left .name[data-v-e009f289] {
    margin: 0 6px 0 24px;
    color: var(--color-text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all
}

.lora-select-teleport .lora-select-item .left .name.name_active[data-v-e009f289] {
    color: var(--color-theme-2)
}

.lora-select-teleport .lora-select-item .left .message[data-v-e009f289] {
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--color-other-3);
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
    font-size: 12px;
    color: var(--color-text-1)
}

.lora-select-teleport .lora-select-item .right-icon[data-v-e009f289] {
    flex-shrink: 0;
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center
}

.lora-select-teleport .lora-select-item .right-icon svg[data-v-e009f289] {
    display: none
}

.lora-select-teleport .lora-select-item:hover .right-icon svg[data-v-e009f289] {
    display: block
}

body.lang-en .delete[data-v-e009f289] {
    margin-left: 100px
}

body.mobile .prompt-guide[data-v-e009f289] {
    width: calc(100% - 36px)
}

.recommend-box[data-v-e009f289] {
    display: flex;
    height: 60px;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--color-border-frame);
    padding: 0 16px
}

.recommend-box .recommend-title[data-v-e009f289] {
    color: var(--color-text-1)
}

.recommend-box .recommend[data-v-e009f289] {
    flex: 1;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    gap: 6px;
    justify-content: flex-start;
    padding: 0 16px
}

.recommend-box .recommend a[data-v-e009f289] {
    cursor: pointer;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--color-other-1);
    display: inline-flex;
    align-items: center;
    color: var(--color-text-1)
}

.recommend-box .recommend-btn[data-v-e009f289] {
    width: 28px
}

.container[data-v-068d4951] {
    gap: 12px
}

.container .model-settings-title[data-v-068d4951] {
    font-size: 14px;
    font-weight: 600;
    line-height: 26px;
    color: var(--color-text-1);
    margin-bottom: 12px
}

.container .row[data-v-068d4951] {
    gap: 12px;
    line-height: 24px;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-1)
}

.container .row .radio-group[data-v-068d4951] {
    display: flex;
    align-items: center;
    margin: 8px 0 12px;
    gap: 8px;
    line-height: 24px
}

.container .row .radio-group .skin[data-v-068d4951] {
    height: 32px;
    padding: 4px 8px 4px 4px;
    border-radius: 8px;
    border: 1px solid var(--color-border-component);
    cursor: pointer;
    display: flex;
    align-items: center
}

.container .row .radio-group .skin[data-v-068d4951]:hover {
    border: 1px solid var(--color-border-focused)
}

.container .row .radio-group .skin .content[data-v-068d4951] {
    width: 76%;
    background: transparent;
    height: 100%;
    border-radius: 4px;
    margin-right: 8px
}

.container .row .radio-group .skin .select-radio-active[data-v-068d4951] {
    flex-shrink: 0
}

.container .row .radio-group .skin .select-radio[data-v-068d4951] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--color-border-focused);
    flex-shrink: 0
}

.container .row .radio-group .skin-active[data-v-068d4951] {
    border: 1px solid var(--color-border-focused);
    background: var(--color-other-2)
}

.container .row .radio-group .radio-item[data-v-068d4951] {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--color-text-1);
    border-radius: 8px;
    justify-content: center;
    height: 32px;
    border: 1px solid var(--color-border-component);
    padding: 6px 12px
}

.container .row .radio-group .radio-item[data-v-068d4951]:hover {
    border: 1px solid var(--color-border-focused)
}

.container .row .radio-group .radio-item .icon[data-v-068d4951] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 1px solid #dfe0e2;
    border-radius: 16px
}

.container .row .radio-group .radio-item .active[data-v-068d4951] {
    border: 5px solid #72e528
}

.container .row .radio-group .radio-item-active[data-v-068d4951] {
    border: 1px solid var(--color-border-focused)
}

.tab[data-v-396b8bd3] {
    position: relative;
    z-index: 2;
    margin: 0 0 32px;
    opacity: var(--property-title-alpha);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px
}

.tab .try-on-guide-use[data-v-396b8bd3] {
    cursor: pointer
}

.tab .try-on-guide-use a[data-v-396b8bd3] {
    display: flex;
    align-items: center;
    margin-left: 4px;
    color: var(--color-text-2);
    text-decoration: none
}

.tab .try-on-guide-use a span[data-v-396b8bd3] {
    margin-left: 4px;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400
}

.model-setting-panel[data-v-34f13756] {
    margin-bottom: 20px
}

body.mobile .audio-right[data-v-64d660ce] {
    min-width: 400px
}

.prompt[data-v-64d660ce] {
    line-height: 24px;
    color: #fff
}

.content[data-v-64d660ce] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 32px
}

.content .audio-box[data-v-64d660ce] {
    width: 100%;
    height: 48px
}

.content .audio-box .audio[data-v-64d660ce] {
    height: 100%;
    display: flex;
    border-radius: 8px;
    background: var(--color-fill-light)
}

.content .audio-box .audio-left[data-v-64d660ce] {
    height: 100%;
    width: 48px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-text-1);
    background: var(--color-other-1)
}

.content .audio-box .audio .audio-right[data-v-64d660ce] {
    flex: 1;
    position: relative;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAuoAAAAbCAYAAAAqNqozAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAILSURBVHgB7d2xaipBFIDhUSwCSZdASnvf/1VcsBHyAOlS2IhhwSIgqLsz8Rx3vw/kOnczc/i7ISxkUSp1Xbfu/91sNl9lhOj9tfTrr5mvX3/k/lr6287X05aex54XPX+qPcsCAACk46IOAAAJuagDAEBCLuoAAJCQizoAACTkog4AAAkNvqjv9/vP/lNGurW/9nnt/Oj9+vXr1z/2ee386P1z69dz/bzo/Xqunxe9/9l77j1vVQY6HA4vpcKt/bXPa+dH79evv+Z57fzo/fr11zyvnf/o/Xqunxe9X8/186L3P3vPved59QUAABJyUQcAgIRc1AEAIKGbF/Wu69b9p9xp6M+bb7755ptvvvn5ztOT+zw98zjPb9QBACCh5W63++g/Zab069evv8yU/mn168lNT26te1qdtzwej6/9p8yUfv369ZeZ0j+tfj256cmtdU+r87z6AgAACf37RX273b71nxLEfPPNN78EMd/8lvP1tKXnsedFz4/uGWvwXyYdarFYvJ+//pQA5ptvvvnmm18CtJ6vpy09jz0ven50z1hefQEAgIRc1AEAIKGLi/qzvsPTin79+vWXmdI/rX49uenJLcs78hfvqD/rOzyt6Nd//qp/hvTrP3+dRL+e3PTkluUdea++AABAQi7qAACQkIs6AAAktDqdTt9//8Pa2tra2tra2traOn79CxBTrG6XAdHyAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px
}

.content .audio-box .audio .audio-right .cut-area[data-v-64d660ce] {
    position: absolute;
    left: 0;
    top: 0;
    height: 48px;
    border-radius: 8px;
    background: var(--color-fill-light);
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 0 20px;
    align-items: center
}

.content .audio-box .audio .audio-right .cut-area[data-v-64d660ce]:hover {
    border: var(--color-border-focused) 1px solid
}

.content .audio-box .audio .audio-right .cut-area .filename[data-v-64d660ce] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.content .audio-box .audio .audio-right .cut-area .cut-slider[data-v-64d660ce] {
    width: calc(100% + 2px);
    position: absolute;
    top: 0;
    left: -1px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.content .audio-box .audio .audio-right .cut-area .cut-slider__item[data-v-64d660ce] {
    width: 8px;
    height: 100%;
    background: var(--color-text-4);
    opacity: 1;
    position: relative
}

.content .audio-box .audio .audio-right .cut-area .cut-slider__item.hover[data-v-64d660ce] {
    background: var(--color-border-focused)
}

.content .audio-box .audio .audio-right .cut-area .cut-slider__item.hover[data-v-64d660ce]:before {
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    left: 2.5px;
    width: 1px;
    height: 12px;
    background: #000;
    border-radius: 1px
}

.content .audio-box .audio .audio-right .cut-area .cut-slider__item.hover[data-v-64d660ce]:after {
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    right: 2.5px;
    width: 1px;
    height: 12px;
    background: #000;
    border-radius: 1px
}

.content .audio-box .audio .audio-right .control-bar[data-v-64d660ce] {
    height: 64px;
    width: 2px;
    background: var(--color-text-1);
    position: absolute;
    top: -8px;
    cursor: pointer;
    z-index: 1;
    border-radius: 0 0 2px 2px
}

.content .audio-box .audio .audio-right .control-bar[data-v-64d660ce]:after {
    content: "";
    position: absolute;
    top: -3px;
    left: -5px;
    width: 12px;
    height: 14px;
    border: 5px solid transparent;
    border-top: 5px solid var(--color-text-1)
}

.content .audio-box .audio .audio-right .control-bar[data-v-64d660ce]:before {
    content: "1";
    position: absolute;
    top: -15px;
    left: -5px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-top: 9px solid var(--color-text-1);
    border-radius: 2px 2px 0 0;
    overflow: hidden
}

.emotion-box[data-v-eb30a319] {
    width: 100%;
    margin-top: 12px
}

.emotion-box[data-v-eb30a319]::-webkit-scrollbar {
    display: none
}

.emotion-box .emotion[data-v-eb30a319] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.emotion-box .emotion__item[data-v-eb30a319] {
    height: 36px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border-component);
    border-radius: 8px;
    flex-shrink: 0;
    color: var(--color-text-1);
    cursor: pointer
}

.emotion-box .emotion__item[data-v-eb30a319]:hover {
    border: 1px solid var(--color-border-hover)
}

.emotion-box .emotion__item-active[data-v-eb30a319] {
    color: var(--color-text-1);
    font-weight: 600;
    border: 1px solid transparent;
    background: var(--color-other-2)
}

.emotion-box .emotion__item-disabled[data-v-eb30a319] {
    background: var(--color-fill-disabled);
    color: var(--color-text-4);
    cursor: not-allowed
}

.emotion-box .emotion__item-disabled[data-v-eb30a319]:hover {
    border: 1px solid var(--color-border-component)
}

.speed-box[data-v-e54ef2a7] {
    margin: 24px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-1)
}

.speed-box .title[data-v-e54ef2a7] {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.speed-box .title div[data-v-e54ef2a7] {
    width: 64px;
    height: 32px;
    border: 1px solid var(--color-border-line);
    border-radius: 8px
}

.speed-box .slider-box[data-v-e54ef2a7] {
    display: flex;
    margin-top: 16px
}

.speed-box .slider-box .icon[data-v-e54ef2a7] {
    width: 32px;
    height: 32px;
    background: var(--color-other-2);
    color: var(--color-text-1)
}

.speed-box .slider-box .slider[data-v-e54ef2a7] {
    flex: 1
}

body.mobile .audio-box .item[data-v-cf1f6afd] {
    min-width: 154px
}

.audio-box[data-v-cf1f6afd] {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px
}

.audio-box .item[data-v-cf1f6afd] {
    height: 32px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    cursor: pointer;
    border: 1px var(--color-border-component) solid;
    overflow: hidden
}

.audio-box .item__left[data-v-cf1f6afd] {
    width: 32px;
    height: 32px;
    background: var(--color-other-1);
    color: var(--color-text-2);
    flex-shrink: 0
}

.audio-box .item__left[data-v-cf1f6afd] svg {
    width: 16px
}

.audio-box .item__right[data-v-cf1f6afd] {
    flex: 1;
    display: flex;
    gap: 8px;
    padding: 6px 12px
}

.audio-box .item__right .title[data-v-cf1f6afd] {
    font-size: 12px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.audio-box .item__right .new-tag[data-v-cf1f6afd] {
    height: 16px;
    width: 32px;
    border-radius: 4px;
    background: #1be5ec14;
    display: inline-block;
    margin-left: 4px;
    color: var(--color-text-2);
    font-size: 10px;
    font-weight: 500;
    padding: 2px 4px;
    line-height: 12px
}

.audio-box .item__right .last-used[data-v-cf1f6afd] {
    height: 20px;
    border-radius: 4px;
    background: var(--color-other-3);
    color: var(color-text-1);
    font-size: 12px;
    line-height: 18px;
    padding: 1px 6px
}

.audio-box .item__duration[data-v-cf1f6afd] {
    color: var(--color-text-3);
    font-size: 12px
}

.audio-box .item-active[data-v-cf1f6afd] {
    border: 1px solid var(--color-border-focused);
    color: var(--color-text-1)
}

.timbre-classify-box[data-v-11222a84] {
    width: 100%;
    margin: 12px 0 0;
    overflow: hidden;
    position: relative;
    height: 32px
}

.timbre-classify-box[data-v-11222a84]::-webkit-scrollbar {
    display: none
}

.timbre-classify-box .timbre-classify[data-v-11222a84] {
    display: flex;
    gap: 8px;
    height: 32px;
    width: fit-content;
    white-space: nowrap;
    transition: left .2s cubic-bezier(.34,.69,.1,1);
    position: absolute;
    left: 0
}

.timbre-classify-box .timbre-classify__item[data-v-11222a84] {
    height: 100%;
    padding: 0 12px;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    flex-shrink: 0;
    color: var(--color-text-2);
    font-size: 14px;
    cursor: pointer
}

.timbre-classify-box .timbre-classify__item[data-v-11222a84]:hover {
    border: 1px solid var(--color-border-hover)
}

.timbre-classify-box .timbre-classify__item-active[data-v-11222a84] {
    color: var(--color-text-1);
    background: var(--color-other-2);
    font-weight: 600
}

.timbre-classify-box .timbre-classify__item-active[data-v-11222a84]:hover {
    border: 1px solid transparent
}

.timbre-classify-box .control-btns[data-v-11222a84] {
    width: 72px;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 8px;
    justify-content: center;
    color: var(--color-text-1);
    background: var(--color-bg-primary)
}

.timbre-classify-box .control-btns div[data-v-11222a84] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-other-2);
    border-radius: 18px;
    border: 1px solid #2e363c;
    cursor: pointer;
    z-index: 1
}

.timbre-classify-box .control-btns[data-v-11222a84]:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100px;
    background: linear-gradient(90deg,#0f0f0f00,#0f0f0f 48%);
    z-index: 0
}

.read-top[data-v-cf41f99e] {
    width: 100%;
    height: 144px;
    border-radius: 12px;
    position: relative;
    padding: 12px 16px;
    border: var(--color-border-container) 1px solid
}

.read-top textarea[data-v-cf41f99e] {
    font-weight: 400;
    text-align: left;
    color: var(--color-text-1);
    background: transparent;
    width: 100%;
    resize: none;
    height: calc(100% - 32px);
    border: none;
    font-size: 14px;
    padding: 0
}

.read-top textarea[data-v-cf41f99e]::placeholder {
    color: var(--color-text-3);
    font-size: 12px
}

.read-top textarea[data-v-cf41f99e]::-webkit-scrollbar {
    display: none!important
}

.read-top .textarea-bottom[data-v-cf41f99e] {
    position: absolute;
    bottom: 12px;
    left: 16px;
    width: calc(100% - 32px);
    display: flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    margin-top: 8px
}

.read-top .textarea-bottom__text[data-v-cf41f99e] {
    color: var(--color-text-2);
    line-height: 24px;
    font-size: 14px
}

.read-top .textarea-bottom__icon[data-v-cf41f99e] {
    width: 16px;
    height: 16px
}

.read-top .textarea-bottom .play-icon[data-v-cf41f99e] {
    cursor: pointer
}

.read-top .textarea-bottom .play-icon[data-v-cf41f99e] path {
    fill: var(--color-text-1);
    stroke: var(--color-text-1)
}

.format[data-v-cf41f99e] {
    color: red;
    font-size: 13px
}

.recommend-audio__item[data-v-15301f52] {
    width: 164px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--color-border-component);
    border-radius: 8px
}

.recommend-audio__item.active[data-v-15301f52] {
    border: 1px solid var(--color-border-focused)
}

.recommend-audio__item.active[data-v-15301f52] path {
    fill: var(--color-text-1);
    stroke: var(--color-text-1)
}

.recommend-audio__item .right[data-v-15301f52] {
    width: 32px;
    height: 32px;
    background: var(--color-other-1);
    cursor: pointer
}

.recommend-audio__item .right.active[data-v-15301f52] {
    color: var(--color-text-3);
    cursor: not-allowed
}

.recommend-audio__item .click-area[data-v-15301f52] {
    cursor: pointer;
    display: flex;
    align-items: center;
    flex: 1;
    overflow: hidden;
    color: var(--color-text-2)
}

.recommend-audio__item .click-area .left[data-v-15301f52] {
    width: 32px;
    height: 32px;
    background: var(--color-other-1);
    flex-shrink: 0
}

.recommend-audio__item .click-area .text[data-v-15301f52] {
    flex: 1;
    margin: 0 12px;
    overflow: hidden
}

.recommend-audio__item .click-area .text-play[data-v-15301f52] {
    flex: 1;
    height: 24px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 8px;
    color: var(--color-text-1);
    font-size: 14px
}

.recommend-audio__item .click-area .text-play__content[data-v-15301f52] {
    position: absolute;
    left: 0;
    white-space: nowrap
}

.recommend-audio[data-v-618883d1] {
    margin-top: 32px;
    width: 100%;
    display: flex;
    gap: 12px;
    flex-direction: column
}

.recommend-audio__header[data-v-618883d1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-1)
}

.recommend-audio__box[data-v-618883d1] {
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px
}

.audio[data-v-fa44e3b2] {
    width: 100%
}

.audio .audio-control[data-v-fa44e3b2] {
    height: 72px;
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    align-items: center;
    background: var(--color-other-1);
    padding: 16px 12px
}

.audio .audio-control .control-left[data-v-fa44e3b2] {
    height: 40px;
    width: 40px;
    border-radius: 8px;
    cursor: pointer;
    background: var(--color-other-1);
    color: var(--color-text-1)
}

.audio .audio-control .control-right[data-v-fa44e3b2] {
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px
}

.audio .audio-control .control-right .top[data-v-fa44e3b2] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.audio .audio-control .control-right .top .name[data-v-fa44e3b2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
    font-size: 14px;
    color: var(--color-text-1)
}

.audio .audio-control .control-right .top .btns[data-v-fa44e3b2] {
    cursor: pointer;
    color: #f9fbfc
}

.audio .audio-progress[data-v-fa44e3b2] {
    height: 20px;
    display: flex;
    align-items: center;
    gap: 8px
}

.audio .audio-progress .time[data-v-fa44e3b2] {
    width: 32px;
    color: var(--color-text-1);
    font-size: 12px;
    text-align: center
}

.upload-area[data-v-3ff52483] {
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--color-border-component);
    overflow: hidden
}

.lip-popover-box[data-v-ac4e6e96] {
    width: 100%;
    position: relative;
    height: 100%
}

.lip-popover-box .close[data-v-ac4e6e96] {
    position: absolute;
    top: 24px;
    right: 24px;
    cursor: pointer
}

.lip-popover-box .content[data-v-ac4e6e96] {
    width: 100%;
    height: calc(100% - 62px);
    margin-top: 36px
}

.lip-popover-box .content .upload-box[data-v-ac4e6e96] {
    flex: 1;
    height: 349px
}

.lip-popover-box .content .read-box[data-v-ac4e6e96] {
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.lip-popover-box .content .read-box .read-bottom[data-v-ac4e6e96] {
    margin-top: 28px
}

.lip-popover-box .content .read-box .read-bottom__title[data-v-ac4e6e96] {
    font-size: 14px;
    font-weight: 600;
    height: 24px;
    color: var(--color-text-1)
}

.lip-popover-box .content .audio[data-v-ac4e6e96] {
    width: 100%
}

.lip-popover-box .bottom[data-v-ac4e6e96] {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    gap: 12px
}

.confirm-box[data-v-faa5791f] {
    padding: 16px;
    font-size: 12px;
    font-weight: 600;
    color: #fff
}

.confirm-box .btns[data-v-faa5791f] {
    margin-top: 12px;
    gap: 8px;
    justify-content: flex-end
}

.item[data-v-faa5791f] {
    position: relative;
    padding: 3px;
    border: solid 1px transparent;
    aspect-ratio: 1/1;
    border-radius: 4px
}

.item img[data-v-faa5791f] {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 4px
}

.item .tag[data-v-faa5791f] {
    position: absolute;
    bottom: 7px;
    left: 5px;
    border-radius: 6px;
    background: #0006;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    height: 20px;
    padding: 0 4px;
    color: #fff;
    font-size: 12px
}

.item-active[data-v-faa5791f] {
    border: solid 1px var(--theme-color-primary);
    border-radius: 8px
}

.confirm-recommend-video.el-popper {
    padding: 0!important;
    background-color: var(--color-bg-popover)
}

.recommend-video-popover.el-popper {
    padding: 4px!important;
    min-width: 0!important
}

.audio-panel-box[data-v-b6aa5564] {
    margin-top: 32px
}

.audio-panel-box[data-v-b6aa5564] .title {
    background: var(--color-other-1);
    border-radius: 8px;
    padding: 8px 16px;
    height: 40px
}

.audio-panel-box[data-v-b6aa5564] .title span {
    font-size: 14px
}

body.mobile .recommend-video-box .content[data-v-b6aa5564] {
    overflow-x: auto
}

body.mobile .recommend-video-box .content[data-v-b6aa5564]::-webkit-scrollbar {
    display: none
}

.role-video-box[data-v-b6aa5564] {
    border: 1px solid var(--color-border-container);
    border-radius: 8px;
    overflow: hidden
}

.role-video-box .top[data-v-b6aa5564] {
    height: 200px
}

.role-video-box .top .video-box[data-v-b6aa5564] {
    position: relative;
    width: 100%;
    height: 200px;
    background: var(--color-bg-frame);
    border-radius: 14px
}

.role-video-box .top .video-box video[data-v-b6aa5564] {
    width: 100%;
    height: 100%;
    border-radius: 14px
}

.role-video-box .top .video-box .buttons[data-v-b6aa5564] {
    display: none;
    gap: 18px;
    position: absolute;
    top: 8px;
    right: 8px;
    align-items: center;
    cursor: pointer;
    border-radius: 8px;
    background: #0006;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    padding: 4px 8px;
    color: var(--color-text-1)
}

.role-video-box .error-reason[data-v-b6aa5564] {
    gap: 8px;
    color: var(--color-text-1);
    border-top: 1px solid var(--color-border-container);
    padding: 8px 16px
}

.role-video-box .error-reason svg[data-v-b6aa5564] {
    width: 16px;
    height: 16px;
    flex-shrink: 0
}

.role-video-box .recommend-video-box[data-v-b6aa5564] {
    border-top: 1px solid var(--color-border-container);
    padding: 16px;
    color: var(--color-text-1);
    display: flex;
    align-items: center;
    gap: 13px
}

.role-video-box .recommend-video-box span[data-v-b6aa5564] {
    flex-shrink: 0
}

.role-video-box .recommend-video-box .content[data-v-b6aa5564] {
    gap: 2px;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(6,1fr)
}

video[data-v-b6aa5564]::-webkit-media-controls-mute-button {
    display: none
}

video[data-v-b6aa5564]::-webkit-media-controls-toggle-closed-captions-button {
    display: none
}

video[data-v-b6aa5564]::-webkit-media-controls-fullscreen-button {
    display: none
}

.extra-line[data-v-b6aa5564] {
    height: 40px;
    justify-content: space-between;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    border: 1px solid var(--color-border-component);
    padding: 4px 8px
}

.extra-line .add-icon[data-v-b6aa5564] {
    margin-left: auto;
    color: var(--color-text-1)
}

.extra-line svg[data-v-b6aa5564] {
    margin-right: 8px
}

.item[data-v-c3446fe5] {
    cursor: pointer;
    position: relative;
    border-radius: 12px;
    border: 1px solid transparent;
    padding: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--color-other-1);
    color: var(--color-text-2)
}

.item[data-v-c3446fe5]:hover {
    background: var(--color-other-3);
    color: var(--color-text-1)
}

.item .img[data-v-c3446fe5] {
    width: 100%;
    border-radius: 8px
}

.item .text[data-v-c3446fe5] {
    line-height: 28px;
    font-size: 14px
}

.item .hot-tag[data-v-c3446fe5] {
    position: absolute;
    right: 4.765px;
    top: 5px;
    border-radius: 6px;
    background: var(---, linear-gradient(90deg, #f70 -15.32%, #ff2b0a 100%));
    display: flex;
    align-items: center
}

.active[data-v-c3446fe5] {
    border: 1px solid var(--color-border-focused)
}

.special-effects-pop-video[data-v-c3446fe5] {
    width: 240px;
    height: 240px;
    margin-bottom: -6px;
    border-radius: 8px
}

.container[data-v-1455430f] {
    display: flex;
    flex-direction: column;
    gap: 32px
}

.container .effects[data-v-1455430f] {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px
}

.container .swap-icon[data-v-1455430f] {
    z-index: 2;
    position: absolute;
    right: 12px;
    top: 12px;
    cursor: pointer
}

.container .uploader-area .tip-container[data-v-1455430f],.container .prompt-area .tip-container[data-v-1455430f] {
    margin-bottom: 12px;
    height: 100px;
    padding: 10px 12px 10px 0;
    border-radius: 8px;
    background: var(--color-other-1);
    display: flex;
    gap: 12px
}

.container .uploader-area .tip-container img[data-v-1455430f],.container .prompt-area .tip-container img[data-v-1455430f] {
    margin-left: 13px
}

.container .uploader-area .tip-container .tip[data-v-1455430f],.container .prompt-area .tip-container .tip[data-v-1455430f] {
    height: 100%;
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px
}

.container .uploader-area .tip-container .tip .tip-title[data-v-1455430f],.container .prompt-area .tip-container .tip .tip-title[data-v-1455430f] {
    color: var(--color-text-1);
    font-weight: 600
}

.container .uploader-area .tip-container .tip .desc[data-v-1455430f],.container .prompt-area .tip-container .tip .desc[data-v-1455430f] {
    color: var(--color-text-2);
    font-size: 12px;
    line-height: 20px
}

.container .uploader-area .title[data-v-1455430f],.container .prompt-area .title[data-v-1455430f] {
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    color: var(--color-text-1)
}

.container .uploader-area .uploader[data-v-1455430f],.container .prompt-area .uploader[data-v-1455430f] {
    border-radius: 8px;
    border: 1px solid var(--color-border-container)
}

.dialog-image-agreement .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid var(--color-border-container)
}

.dialog-image-agreement .header span {
    font-size: 26px;
    font-weight: 900;
    line-height: 40px
}

.dialog-image-agreement-title {
    font-size: 18px;
    line-height: 26px;
    font-weight: 500
}

.dialog-image-agreement-content {
    height: 466px;
    overflow-y: scroll;
    margin: 24px 0;
    padding: 0 24px;
    border-radius: 10px;
    line-height: 24px
}

.dialog-image-agreement-content li,.dialog-image-agreement-content ul,.dialog-image-agreement-content span {
    font-weight: 600
}

.dialog-image-agreement-content footer {
    float: right
}

.dialog-image-agreement-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid var(--color-border-container);
    padding: 24px
}

.note-tags-class[data-v-f973cefb] {
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--color-border-component);
    overflow: hidden;
    cursor: pointer
}

.note-tags-class[data-v-f973cefb]:hover {
    border: 1px solid var(--color-border-focused);
    color: var(--color-text-1)
}

.note-tags-class .note-tags-name[data-v-f973cefb] {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    padding: 6px 12px;
    color: var(--color-text-1)
}

.note-tags-class .note-tags-icon[data-v-f973cefb] {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-other-1)
}

.note-tags-disabled[data-v-f973cefb] {
    color: var(--color-text-4)!important;
    border: 1px solid var(--color-border-component)!important
}

.note-tags-active[data-v-f973cefb] {
    border: 1px solid var(--color-border-focused);
    color: var(--color-text-1)
}

.note-tags-effect[data-v-f973cefb] {
    display: flex;
    align-items: center;
    width: 230px
}

.facial-recognition-frame-container[data-v-2974e4dc] {
    position: absolute;
    z-index: 15;
    border-radius: 10px;
    background-size: cover;
    background-repeat: no-repeat
}

.facial-recognition-frame-container .frame-top-left[data-v-2974e4dc] {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 10px;
    height: 10px;
    border-top-left-radius: 10px;
    border-top: 4px solid #f9fbfc;
    border-left: 4px solid #f9fbfc
}

.facial-recognition-frame-container .frame-top-right[data-v-2974e4dc] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-top-right-radius: 10px;
    border-top: 4px solid #f9fbfc;
    border-right: 4px solid #f9fbfc
}

.facial-recognition-frame-container .frame-bottom-left[data-v-2974e4dc] {
    position: absolute;
    bottom: -2px;
    left: -2px;
    width: 10px;
    height: 10px;
    border-bottom-left-radius: 10px;
    border-bottom: 4px solid #f9fbfc;
    border-left: 4px solid #f9fbfc
}

.facial-recognition-frame-container .frame-bottom-right[data-v-2974e4dc] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-bottom-right-radius: 10px;
    border-bottom: 4px solid #f9fbfc;
    border-right: 4px solid #f9fbfc
}

.active-frame .frame-top-left[data-v-2974e4dc],.active-frame .frame-top-right[data-v-2974e4dc],.active-frame .frame-bottom-left[data-v-2974e4dc],.active-frame .frame-bottom-right[data-v-2974e4dc] {
    border-color: var(--color-theme-2)
}

.reference-image-upload-container[data-v-a6030480] {
    width: 100%;
    height: 480px;
    border-radius: 12px;
    position: relative;
    margin-bottom: 16px;
    overflow: hidden
}

.reference-image-upload-container .reference-image-background-image[data-v-a6030480] {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    object-position: center;
    filter: blur(8px)
}

.reference-image-upload-container .reference-image-upload-image[data-v-a6030480] {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 3
}

.reference-image-upload-container .reference-image-upload-image .reference-image-upload-result[data-v-a6030480] {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: var(--color-fill-black-1)
}

.reference-image-upload-container .reference-image-upload-image img[data-v-a6030480] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.reference-image-upload-container .reference-image-background-mask[data-v-a6030480] {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background: var(--color-fill-black-1)
}

.reference-image-upload-container .reference-image-loading[data-v-a6030480] {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    background: var(--color-fill-black-1)
}

.reference-image-upload-container .reference-loading[data-v-a6030480] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 12
}

.reference-image-upload-container .reference-image-upload-loading[data-v-a6030480] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: auto;
    height: 48px;
    padding: 12px 24px;
    background-color: var(--color-fill-black-2);
    border-radius: 60px;
    z-index: 11
}

.reference-image-upload-container .reference-image-upload-loading .reference-image-upload-loading-text[data-v-a6030480] {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    white-space: nowrap;
    color: var(--color-fill-white);
    margin: 0 8px
}

.reference-image-upload-container .reference-image-upload-loading .reference-image-upload-loading-cancel[data-v-a6030480] {
    color: var(--color-theme-2);
    cursor: pointer
}

.reference-image-upload-container .reference-image-upload-options[data-v-a6030480] {
    width: 68px;
    height: 28px;
    position: absolute;
    display: flex;
    background-color: var(--color-fill-black-1);
    border-radius: 4px;
    padding: 8px 12px;
    align-items: center;
    justify-content: space-between;
    top: 8px;
    right: 18px;
    z-index: 5
}

.reference-image-upload-container .reference-image-upload-options .reference-image-upload-options-icon[data-v-a6030480] {
    cursor: pointer
}

.reference-image-recognition-result[data-v-a6030480] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0
}

.reference-image-recognition-result .reference-image-recognition-result-item[data-v-a6030480]:last-child {
    margin-right: 0
}

.reference-image-recognition-result .reference-image-recognition-result-item[data-v-a6030480] {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    margin-right: 16px;
    cursor: pointer;
    position: relative;
    overflow: hidden
}

.reference-image-recognition-result .reference-image-recognition-result-item img[data-v-a6030480] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    object-position: center
}

.reference-image-recognition-result .reference-image-recognition-result-item .reference-image-recognition-result-mask[data-v-a6030480] {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    background: var(--color-fill-black-1)
}

.reference-image-recognition-result .reference-image-recognition-result-item-selected[data-v-a6030480] {
    border: 1px solid var(--color-theme-2)
}

.reference-image-recognition-result .reference-image-recognition-result-item-selected img[data-v-a6030480] {
    padding: 2px
}

.reference-image-recognition-result-options[data-v-a6030480] {
    width: 100%;
    height: 108px;
    background-color: var(--color-fill-light);
    border-radius: 16px;
    padding: 16px 24px;
    margin-bottom: 24px
}

.reference-image-recognition-result-options .reference-image-recognition-result-options-title[data-v-a6030480] {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 16px;
    color: var(--color-text-1)
}

.reference-image-recognition-result-options .options-container[data-v-a6030480] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.reference-image-btn-content[data-v-a6030480] {
    display: flex;
    justify-content: flex-end
}

.reference-image-btn-content[data-v-a6030480]>:first-child {
    margin-right: 12px
}

.options-example-effect[data-v-a6030480] {
    width: 230px;
    height: 146px
}

.extra-line .button {
    color: var(--color-theme-2);
    cursor: pointer
}

body.mobile .reference-image-tip-popper-content {
    flex-direction: column;
    overflow-y: auto;
    height: 25vh
}

body.mobile .reference-image-tip-popper-content>div {
    width: 100%
}

body.mobile .reference-image-tip-popper-content>div video {
    width: 100%;
    height: unset
}

.reference-image-tip-popper-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: .02em;
    color: var(--color-text-1)
}

.reference-image-tip-popper-sub-title {
    margin-top: 4px;
    line-height: 22px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--color-text-2)
}

.reference-image-tip-popper-content {
    margin-top: 16px;
    display: flex;
    gap: 8px
}

.reference-image-tip-popper-content .mask {
    margin-top: -7px;
    display: flex;
    justify-content: space-around;
    background: #ffffff14;
    border-radius: 0 0 12px 12px;
    padding: 8px;
    color: var(--color-text-1);
    line-height: 22px
}

.reference-image-tip-popper-content-video {
    width: 240px;
    height: 135px;
    border-radius: 12px 12px 0 0
}

.reference-image-guide-container[data-v-3c3bf2a0] {
    height: 384px;
    width: 423px;
    display: flex;
    align-items: center;
    gap: 3px
}

.reference-image-guide-container .mark[data-v-3c3bf2a0] {
    display: flex;
    align-items: center
}

.reference-image-guide-container .mark .mark-dot[data-v-3c3bf2a0] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-fill-black-1);
    border: 4px solid var(--color-border-focused)
}

.reference-image-guide-container .mark .mark-line[data-v-3c3bf2a0] {
    width: 40px;
    height: 0px;
    border-top: 1px dashed var(--color-border-focused)
}

.reference-image-guide-title[data-v-3c3bf2a0] {
    color: var(--color-text-1);
    font-size: 16px;
    line-height: 26px;
    font-weight: 500
}

.reference-image-guide-content[data-v-3c3bf2a0] {
    width: 367px;
    height: 384px;
    border-radius: 12px;
    border: 1px solid var(--color-border-component);
    padding: 16px;
    background: var(--color-bg-popover);
    display: flex;
    flex-direction: column;
    gap: 12px
}

.reference-image-guide-video[data-v-3c3bf2a0] {
    width: 335px;
    height: 244px;
    border-radius: 16px
}

.reference-image-guide-button[data-v-3c3bf2a0] {
    align-self: flex-end;
    width: 76px;
    display: flex;
    justify-content: center
}

.slider-container[data-v-7f898238] {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.slider-container .fidelity[data-v-7f898238] {
    width: 32px;
    text-align: center;
    height: 18px;
    line-height: 18px;
    margin-left: 10px;
    color: var(--color-text-2)
}

.slider-container .slider[data-v-7f898238] {
    flex: 0
}

.question-icon[data-v-7f898238] {
    margin-left: 4px;
    vertical-align: middle;
    cursor: pointer;
    color: var(--color-text-2);
    flex-shrink: 0
}

.panel>.title[data-v-7f898238] {
    width: 100%;
    display: flex;
    align-items: center
}

.panel>.title span[data-v-7f898238] {
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    vertical-align: middle;
    color: var(--color-text-1)
}

.panel>.title .info-btn[data-v-7f898238] {
    margin-left: .5em;
    width: 16px;
    height: 16px;
    cursor: pointer
}

.panel>.title .desc[data-v-7f898238] {
    font-size: 14px;
    color: var(--color-text-3);
    margin-left: 6px
}

.panel>.title .control-tips[data-v-7f898238] {
    cursor: pointer;
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 14px;
    line-height: 24px;
    gap: 4px;
    color: var(--color-text-1)
}

.result[data-v-7f898238] {
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center
}

.result .preview[data-v-7f898238] {
    width: 200px;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 10
}

.result .preview .clickable[data-v-7f898238] {
    padding: 2px 8px;
    border-radius: 8px;
    transition: opacity .2s;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: var(--color-other-6);
    text-align: center;
    display: flex;
    align-items: center
}

.result .preview .clickable span[data-v-7f898238] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center
}

.result .preview:hover .clickable[data-v-7f898238] {
    opacity: 1;
    z-index: 11
}

.result .preview[data-v-7f898238]:hover:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--color-fill-black-1);
    z-index: 10
}

.tips[data-v-7f898238] {
    color: var(--color-text-3);
    font-size: 12px;
    margin-bottom: 12px
}

[data-v-7f898238] .custom-tip {
    color: var(--color-text-3);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-top: 16px
}

.upload-container[data-v-7f898238] {
    position: relative;
    z-index: 1
}

.upload-container .reference-upload[data-v-7f898238] {
    border-radius: 8px;
    border: 1px solid var(--color-border-container)
}

.upload-container .reference-setting-options[data-v-7f898238] {
    margin-top: 16px
}

.upload-container .setting[data-v-7f898238] {
    margin-top: 12px
}

.upload-container .setting .title-container[data-v-7f898238] {
    display: flex;
    align-items: center
}

.upload-container .setting .title-container .title[data-v-7f898238] {
    color: var(--color-text-1);
    font-size: 14px;
    height: 24px;
    white-space: nowrap
}

.upload-container .setting.one-slider[data-v-7f898238] {
    padding: 0 16px;
    border-radius: 8px;
    background-color: var(--color-other-2);
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.upload-container .setting.one-slider .slider[data-v-7f898238] {
    margin-top: 0
}

.upload-container .setting.two-slider .slider-item[data-v-7f898238] {
    padding: 0 16px;
    border-radius: 8px;
    background-color: var(--color-other-2);
    height: 42px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.upload-container .setting .tip[data-v-7f898238] {
    font-size: 12px;
    margin-left: 6px
}

.__panel_prompt_reference_slider {
    height: 18px
}

.__panel_prompt_reference_slider .el-slider__button {
    background: var(--color-text-1);
    width: 4px;
    height: 12px;
    border-radius: 2px;
    border: none!important
}

.__panel_prompt_reference_slider .el-slider__runway {
    background-color: var(--color-other-2)
}

.__panel_prompt_reference_slider .el-slider__bar {
    background: var(--color-text-1)
}

body.mobile .result-container[data-v-9b5fc826] {
    width: 100vw!important;
    display: flex;
    align-items: center;
    justify-content: center
}

body.mobile .result-container .result[data-v-9b5fc826] {
    margin-top: 0!important
}

body.mobile .dialog-footer[data-v-9b5fc826] {
    min-width: unset;
    line-height: 54px;
    position: unset;
    padding: 0
}

body.mobile .dialog-footer .footer-container[data-v-9b5fc826] {
    width: 100%;
    min-width: unset
}

body.mobile .dialog-footer .footer-container button[data-v-9b5fc826] {
    transform: scale(.8);
    margin-left: 0!important
}

body.mobile .dialog-footer .footer-container .left-part[data-v-9b5fc826] {
    float: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-right: 0
}

body.mobile .dialog-footer .footer-container .right-part[data-v-9b5fc826] {
    float: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

body.mobile .dialog-footer .footer-container .right-part[data-v-9b5fc826] .adv-btn-container {
    margin-left: 0!important
}

body.mobile .dialog-footer .footer-container .right-part[data-v-9b5fc826] .adv-btn-container button {
    transform: scale(.8)
}

body.mobile .dialog-footer .footer-container .right-part[data-v-9b5fc826] .el-dropdown {
    margin-left: 0!important
}

body.mobile .dialog-footer .footer-container .right-part[data-v-9b5fc826] .el-dropdown button {
    transform: scale(.8);
    margin-left: 0
}

body.mobile .design-main-container[data-v-9b5fc826] {
    display: flex;
    justify-content: center
}

.design-main-container[data-v-9b5fc826] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center
}

.result-container[data-v-9b5fc826] {
    width: 100vh;
    line-height: 0;
    display: flex;
    justify-content: center
}

.result-container .result[data-v-9b5fc826] {
    display: inline-block;
    vertical-align: middle;
    line-height: 0
}

.reference-panel-container[data-v-9b5fc826] {
    margin-top: 32px
}

.dialog-footer[data-v-9b5fc826] {
    padding-left: 8px;
    padding-right: 8px;
    position: fixed;
    width: 100%;
    min-width: 800px;
    left: 0;
    text-align: center
}

.dialog-footer .footer-container[data-v-9b5fc826] {
    display: inline-block;
    min-width: var(--carousel-width)
}

.dialog-footer .footer-container .left-part[data-v-9b5fc826] {
    float: left;
    margin-right: 16px
}

.dialog-footer .footer-container .right-part[data-v-9b5fc826] {
    float: right
}

.dialog-footer .el-dropdown[data-v-9b5fc826] {
    margin-left: -8px
}

[data-v-9b5fc826] .el-loading-mask {
    border-radius: 12px!important
}

[data-v-9b5fc826] .el-loading-text {
    color: #eee;
    margin-top: 2em
}

#dropping-image[data-v-9b5fc826] {
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 12px
}

.empty-container[data-v-9b5fc826] {
    width: 100%
}

.empty-container .empty[data-v-9b5fc826] {
    padding-top: 0;
    margin-bottom: 112px
}

.lora-guide[data-v-9b5fc826] {
    position: fixed;
    width: 259px;
    height: 232px;
    background: linear-gradient(252deg,#1b2829 -5.05%,#171b21 45.55%,#191d23 90.29%);
    z-index: 2222;
    top: 600px;
    left: 150px
}

.tab-container[data-v-9b5fc826] {
    position: relative;
    z-index: 2;
    opacity: var(--property-title-alpha);
    padding-bottom: 24px
}

.try-on-expand-btn[data-v-9b5fc826] {
    position: relative
}

.try-on-expand-btn .try-on-limited-exemption[data-v-9b5fc826] {
    display: flex;
    align-items: center;
    position: absolute;
    background: linear-gradient(to left,#ffc175,#ffefc6);
    color: #753f0c;
    font-size: 11px;
    font-weight: 400;
    line-height: 12px;
    text-align: center;
    padding: 2px 6px;
    border-radius: 4px;
    top: -6px;
    left: 100%;
    white-space: nowrap;
    transform: translate(-70%)
}

[data-v-6ab719d6] .el-dropdown-menu__item--divided {
    border-top-color: var(--color-border-component)
}

.recommend-popover[data-v-6ab719d6] {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.recommend-popover .recommend-content[data-v-6ab719d6] {
    height: 24px
}

.recommend-popover .recommend-audio[data-v-6ab719d6] {
    height: 64px
}

.recommend-popover .recommend-audio[data-v-6ab719d6] canvas {
    height: 36px
}

.audio-setting-box[data-v-6ab719d6] {
    border-radius: 8px
}

.audio-setting-box.overLimit[data-v-6ab719d6] {
    border: 1px solid var(---color_font_8, #f5ba31)
}

.audio-setting-box[data-v-6ab719d6] .prompt-wrap {
    border-radius: 8px 8px 0 0
}

.audio-setting-box[data-v-6ab719d6] .prompt-wrap.overLimit {
    border: 1px solid transparent
}

.recommend-box[data-v-6ab719d6] {
    display: flex;
    height: 72px;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border: 1px solid var(--color-border-container);
    border-top: none;
    border-radius: 0 0 8px 8px
}

.recommend-box .recommend-title[data-v-6ab719d6] {
    margin-right: 8px;
    flex-shrink: 0;
    color: var(--color-text-1)
}

.recommend-box .recommend[data-v-6ab719d6] {
    flex: 1;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    gap: 6px
}

.recommend-box .recommend-item[data-v-6ab719d6] {
    height: 32px;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    flex: 0 0 auto;
    cursor: pointer
}

.recommend-box .recommend-item .img[data-v-6ab719d6] {
    position: absolute;
    width: 100%;
    height: 100%
}

.recommend-box .recommend-btn[data-v-6ab719d6] {
    width: 28px;
    margin-left: 6px
}

.audio-setting-collect-box[data-v-6ab719d6] {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    padding: 16px 20px;
    gap: 8px;
    flex-wrap: wrap;
    row-gap: 8px
}

.recommend-content[data-v-6ab719d6] {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 4px 8px 4px 4px;
    color: var(--color-text-1);
    font-size: 12px;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px)
}

.recommend-content .recommend-cover[data-v-6ab719d6] {
    height: 24px;
    width: 24px;
    margin-right: 8px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0
}

.recommend-content .recommend-cover img[data-v-6ab719d6] {
    width: 100%;
    height: 100%
}

.prase-result-box[data-v-6ab719d6] {
    padding: 16px;
    border-left: 1px solid var(--color-border-container);
    border-right: 1px solid var(--color-border-container);
    border-bottom: 1px solid var(--color-border-frame)
}

.prase-result-box .prase-result-inner[data-v-6ab719d6] {
    min-height: 28px;
    display: flex;
    align-items: center
}

.prase-result-box .parse-result-content[data-v-6ab719d6] {
    flex-grow: 1;
    color: var(--color-text-1);
    line-height: 24px;
    padding: 0 8px 0 24px;
    position: relative
}

.prase-result-box .parse-result-content .parse-result-icon[data-v-6ab719d6] {
    position: absolute;
    left: 0;
    top: 4px
}

.prase-result-box .parse-result-btn[data-v-6ab719d6] {
    flex-shrink: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px
}

.prase-result-box .prase-result-prompt[data-v-6ab719d6] {
    margin-top: 12px;
    color: var(--color-text-2);
    line-height: 20px;
    font-size: 12px
}

.audio-panel-box .audio-upload-box[data-v-6ab719d6] {
    height: 200px;
    width: 100%;
    margin-bottom: 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border-component);
    position: relative;
    overflow: hidden
}

.audio-panel-box .audio-upload-box .is-parsing[data-v-6ab719d6] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-1);
    background: var(--color-fill-black-3);
    z-index: 2
}

.audio-panel-box .audio-upload-box .is-parsing-info[data-v-6ab719d6] {
    margin-top: 8px;
    height: 20px;
    line-height: 20px;
    font-size: 12px
}

.audio-panel-box .audio-upload-box .video-box[data-v-6ab719d6] {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.audio-panel-box .audio-upload-box .video-box video[data-v-6ab719d6] {
    height: 100%;
    width: 100%
}

.audio-panel-box .audio-upload-box .video-box video[data-v-6ab719d6]::-webkit-media-controls-mute-button {
    display: none
}

.audio-panel-box .audio-upload-box .video-box video[data-v-6ab719d6]::-webkit-media-controls-fullscreen-button {
    display: none
}

.audio-panel-box .audio-upload-box .video-box .buttons[data-v-6ab719d6] {
    display: none;
    gap: 18px;
    position: absolute;
    top: 8px;
    right: 8px;
    align-items: center;
    cursor: pointer;
    border-radius: 8px;
    background: #0006;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    padding: 4px 8px;
    color: var(--color-text-1)
}

.audio-panel-box .upload-box[data-v-6ab719d6] {
    cursor: pointer;
    width: 100%;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.audio-panel-box .upload-box .from-history .btn[data-v-6ab719d6] {
    pointer-events: all;
    display: inline-block;
    font-size: 12px
}

.audio-panel-box .upload-box .from-history .btn span[data-v-6ab719d6] {
    color: var(--color-text-3)
}

.audio-panel-box .upload-box .from-history .btn a[data-v-6ab719d6] {
    color: var(--color-text-1);
    margin-left: .5em;
    margin-right: .5em
}

.audio-panel-box .upload-box .custom-tip[data-v-6ab719d6] {
    line-height: 18px;
    font-size: 12px;
    color: var(--color-text-3)
}

.audio-custom-duration[data-v-6ab719d6] {
    cursor: pointer;
    color: var(--color-text-1);
    display: flex;
    align-items: center;
    height: 32px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border-component)
}

.audio-custom-duration.disabled[data-v-6ab719d6] {
    border: 1px solid var(--color-border-component)!important;
    background: var(--color-fill-disabled);
    color: var(--color-text-2)
}

.audio-custom-duration.disabled svg[data-v-6ab719d6] {
    color: var(--color-text-4)
}

.audio-custom-duration[data-v-6ab719d6]:hover {
    border: 1px solid var(--color-border-hover)
}

.audio-custom-duration .arrow-icon[data-v-6ab719d6] {
    margin-left: 9px;
    transition: transform .4s;
    transform: rotate(180deg)
}

.audio-custom-duration .arrow-icon.arrowDown[data-v-6ab719d6] {
    transform: rotate(0)
}

h1[data-v-40ae228e] {
    font-size: 22px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: .02em;
    color: #fff
}

p[data-v-40ae228e] {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-top: 24px
}

ol[data-v-40ae228e] {
    border-radius: 16px;
    border: dashed 1px #3b3c4d;
    margin-top: 16px;
    padding: 12px 24px 12px 40px
}

ol li[data-v-40ae228e] {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    margin-top: 8px;
    margin-bottom: 8px;
    color: #fff
}

.description[data-v-40ae228e] {
    margin-top: 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #c5c7d5
}

.description svg[data-v-40ae228e] {
    vertical-align: middle
}

.btn[data-v-40ae228e] {
    margin-top: 24px;
    margin-bottom: 12px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: 12px
}

.extend-panel-box[data-v-7ce5b353] {
    width: 100%
}

.extend-upload-box[data-v-7ce5b353] {
    height: 200px;
    width: 100%;
    margin-bottom: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border-component)
}

.extend-upload-box .video-box[data-v-7ce5b353] {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.extend-upload-box .video-box video[data-v-7ce5b353] {
    max-height: 100%;
    max-width: 100%
}

.extend-upload-box .video-box video[data-v-7ce5b353]::-webkit-media-controls-mute-button {
    display: none
}

.extend-upload-box .video-box video[data-v-7ce5b353]::-webkit-media-controls-fullscreen-button {
    display: none
}

.extend-upload-box .video-box .buttons[data-v-7ce5b353] {
    display: none;
    gap: 18px;
    position: absolute;
    top: 8px;
    right: 8px;
    align-items: center;
    cursor: pointer;
    border-radius: 8px;
    background: #0006;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    padding: 4px 8px
}

.extend-upload-box .video-box .buttons[data-v-7ce5b353] svg {
    width: 22px
}

.extend-upload-box .video-box .buttons[data-v-7ce5b353] path {
    fill: #fff
}

.extend-upload-box .upload-box[data-v-7ce5b353] {
    cursor: pointer;
    width: 100%;
    padding: 20px 0
}

.extend-upload-box .from-history[data-v-7ce5b353] {
    margin-top: 15px
}

.extend-upload-box .from-history .btn[data-v-7ce5b353] {
    pointer-events: all;
    display: inline-block;
    font-size: 12px
}

.extend-upload-box .from-history .btn span[data-v-7ce5b353] {
    color: var(--color-text-3)
}

.extend-upload-box .from-history .btn a[data-v-7ce5b353] {
    color: var(--color-text-1);
    margin-left: .5em;
    margin-right: .5em
}

body.mobile .result[data-v-7ce5b353] {
    padding-bottom: 30px;
    height: calc(100vh - 100px);
    width: 100%
}

body.mobile .result .tools[data-v-7ce5b353] {
    transform: scale(.8);
    flex-wrap: wrap;
    justify-content: center
}

body.mobile .footer-btn[data-v-7ce5b353] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px
}

body.mobile .footer-btn__item[data-v-7ce5b353] {
    display: flex;
    gap: 16px
}

body.lang-en .new-version-tip[data-v-7ce5b353] {
    height: 50px;
    width: 637px
}

.design-main-box[data-v-7ce5b353] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative
}

.design-main-box .new-version-tip[data-v-7ce5b353] {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translate(-50%);
    width: 614px;
    font-size: 12px;
    height: 32px;
    padding: 0 16px;
    background: #000;
    border-radius: 32px;
    color: #fff;
    gap: 10px;
    z-index: 2
}

.design-main-box .new-version-tip span[data-v-7ce5b353] {
    line-height: 18px
}

.design-main-box .new-version-tip[data-v-7ce5b353] path {
    fill: #e92a1b
}

.design-main-box .design-main-container[data-v-7ce5b353] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto
}

.design-main-box .design-main-container[data-v-7ce5b353]::-webkit-scrollbar {
    display: none
}

.design-main-box .design-main-container .video-button-group[data-v-7ce5b353] {
    position: sticky;
    top: 0;
    display: flex;
    gap: 12px;
    margin-bottom: 16px
}

.design-main-box .design-main-container .no-work[data-v-7ce5b353] {
    background-color: #191d21;
    border-radius: 12px;
    color: #e0e0e0;
    font-size: 14px
}

.design-main-box .design-main-container .mask[data-v-7ce5b353] {
    background-color: #191d21b3;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%
}

.design-main-box .design-main-container .fail-work-box[data-v-7ce5b353] {
    border-radius: 12px;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.design-main-box .design-main-container .fail-work-box .fail-work[data-v-7ce5b353] {
    background-color: #191d21dd;
    border-radius: 12px;
    overflow: hidden;
    color: #c5c7d5;
    font-size: 14px;
    height: 100%
}

.design-main-box .design-main-container .fail-work-box .fail-work .inner[data-v-7ce5b353] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center
}

.design-main-box .design-main-container .fail-work-box .fail-work .inner .clickable[data-v-7ce5b353] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px
}

.design-main-box .design-main-container .fail-work-box .fail-work .reason[data-v-7ce5b353] {
    margin-top: 2em;
    color: #4b4b5a
}

.design-main-box .design-main-container .fail-work-box .fail-work span.text a[data-v-7ce5b353] {
    color: var(--theme-color-primary)
}

.design-main-box .design-main-container .fail-work-box .fail-work span.text a[data-v-7ce5b353]:hover {
    filter: brightness(1.05)
}

.design-main-box .design-main-container .fail-work-box .fail-work span.text a[data-v-7ce5b353]:active {
    filter: brightness(.9)
}

.design-main-box .design-main-container .icons[data-v-7ce5b353] {
    position: absolute;
    top: 12px;
    left: 12px
}

.single-result[data-v-7ce5b353] {
    flex-direction: row!important;
    margin: 0 auto!important
}

.result[data-v-7ce5b353] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
    vertical-align: middle;
    width: 100%;
    margin: 46px auto 0;
    padding-bottom: 46px;
    gap: 32px
}

.result[data-v-7ce5b353]::-webkit-scrollbar {
    display: none
}

.result video[data-v-7ce5b353] {
    width: 100%;
    border-radius: 12px
}

.result .tools[data-v-7ce5b353] {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-direction: row;
    align-items: center
}

.panel-box[data-v-7ce5b353] {
    position: relative
}

.extension-history[data-v-7ce5b353] {
    text-align: center
}

.extension-history .extension-history-content[data-v-7ce5b353] {
    text-align: left;
    display: inline-block;
    margin-top: 24px
}

.empty-container[data-v-7ce5b353] {
    width: 100%;
    height: 100%
}

.empty-container .empty[data-v-7ce5b353] {
    padding-top: 0;
    margin-bottom: 112px
}

.extend-history-btn[data-v-7ce5b353] {
    cursor: pointer;
    vertical-align: middle;
    color: #fff;
    float: left;
    padding-left: 4px;
    padding-right: 4px
}

.extend-history-btn[data-v-7ce5b353]:hover {
    color: var(--theme-color-primary)
}

.extend-history-btn svg[data-v-7ce5b353] {
    vertical-align: middle;
    margin-bottom: 5px
}

.video-box[data-v-7ce5b353] {
    position: relative
}

.footer-btn[data-v-7ce5b353] {
    display: flex;
    gap: 16px;
    justify-content: space-between
}

.footer-btn__item[data-v-7ce5b353] {
    display: flex;
    gap: 16px
}

.primary-panel[data-v-7ce5b353] {
    overflow-y: auto;
    height: 100%
}

.primary-panel[data-v-7ce5b353]::-webkit-scrollbar {
    display: none
}

h1[data-v-9acc4def] {
    font-size: 20px;
    margin-top: -16px
}

.content[data-v-9acc4def] {
    min-height: 200px;
    max-height: 60vh;
    border: dashed 1px #888;
    margin-top: 16px;
    margin-bottom: 24px;
    font-size: 12px;
    line-height: 20px;
    color: #ccc;
    border-radius: 12px
}

p[data-v-d17dc5a6] {
    font-size: 14px;
    font-weight: 24px;
    margin-bottom: .5em
}

p b[data-v-d17dc5a6] {
    font-weight: 700
}

.el-dialog.video-policy-dialog {
    padding: 32px 32px 40px!important
}

.video-policy-dialog .el-dialog__header {
    margin-bottom: 32px;
    padding-bottom: 0
}

.video-policy-dialog .el-dialog__body {
    margin-top: 0;
    padding-top: 0;
    overflow: hidden
}

.video-policy-dialog .el-dialog__headerbtn {
    margin-top: 24px
}

.head[data-v-6054fc9d] {
    margin-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 22px;
    line-height: 32px;
    color: #fff
}

.head svg[data-v-6054fc9d] {
    float: right;
    cursor: pointer
}

.content[data-v-6054fc9d] {
    padding-left: 8px;
    padding-right: 8px;
    color: #c5c7d5
}

.bottom[data-v-6054fc9d] {
    padding-left: 8px;
    padding-right: 8px;
    margin-top: 2em;
    text-align: right
}

.policy-name[data-v-6054fc9d] {
    display: inline-block;
    vertical-align: top;
    margin-top: 30px;
    margin-left: -16px
}

.policy-name a[data-v-6054fc9d] {
    color: var(--theme-color-primary)
}

.reference-video-guide-container[data-v-a60ad4da] {
    position: relative;
    width: 368px;
    min-height: 426px;
    border-radius: 12px;
    padding: 16px 16px 48px;
    background: var(--color-bg-popover);
    box-shadow: var(--box-shadow-container)
}

.reference-video-guide-container .reference-video-guide-item .guide-item-title[data-v-a60ad4da] {
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    color: var(--color-text-1)
}

.reference-video-guide-container .reference-video-guide-item .guide-item-video[data-v-a60ad4da] {
    width: 100%;
    margin: 12px 0;
    object-fit: cover;
    object-position: center
}

.reference-video-guide-container .guide-item-button[data-v-a60ad4da] {
    position: absolute;
    right: 16px;
    bottom: 16px
}

.cropper-wrapper[data-v-277516cb] {
    display: flex;
    flex-direction: column;
    align-items: center
}

.cropper-container[data-v-277516cb] {
    width: 640px;
    height: 480px;
    background: #0d1116
}

.cropper-container[data-v-277516cb] .cropper-view-box {
    outline: 2px solid rgb(229,230,238)
}

.cropper-container[data-v-277516cb] .cropper-bg {
    background-image: none!important;
    background-color: gray;
    background: #0d1116
}

.cropper-container[data-v-277516cb] .cropper-line,.cropper-container[data-v-277516cb] .cropper-point {
    background-color: #e5e6ee
}

.cropper-container[data-v-277516cb] .cropper-point {
    width: 8px;
    height: 8px;
    opacity: 1;
    background-color: #e5e6ee
}

.cropper-container[data-v-277516cb] .cropper-point.point-e,.cropper-container[data-v-277516cb] .cropper-point.point-w {
    height: 20px;
    width: 8px
}

.cropper-container[data-v-277516cb] .cropper-point.point-n,.cropper-container[data-v-277516cb] .cropper-point.point-s {
    width: 20px;
    height: 8px
}

.cut-dialog-tip[data-v-277516cb] {
    margin-bottom: 10px;
    color: #6c757a
}

.footer[data-v-277516cb] {
    width: 100%;
    margin-top: 20px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: 12px
}

.click-here[data-v-c454276e] {
    color: var(--color-text-2);
    font-size: 12px
}

.click-here[data-v-c454276e]:hover {
    color: var(--color-text-1)
}

.click-here svg[data-v-c454276e] {
    vertical-align: middle;
    margin-right: .5em;
    margin-bottom: 4px
}

.btn-unique[data-v-c454276e] {
    font-size: 12px
}

.btn-unique a[data-v-c454276e] {
    display: inline-block;
    color: var(--color-text-2);
    text-decoration: underline;
    transition: all .2s ease;
    padding: 0 4px
}

.btn-unique a.active[data-v-c454276e] {
    color: var(--color-text-2);
    cursor: pointer
}

.btn-unique a[data-v-c454276e]:hover {
    color: var(--color-text-1);
    cursor: pointer
}

.btn-unique span[data-v-c454276e] {
    color: #6c757a
}

.upload-grid[data-v-c454276e] {
    margin: 8px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2,1fr);
    gap: 6px;
    position: relative
}

.upload-grid .upload-item[data-v-c454276e] {
    position: relative;
    height: 120px;
    width: 100%;
    gap: 8px;
    border-radius: 4px;
    background: #ffffff0a;
    border: none!important
}

.upload-grid .upload-item[data-v-c454276e] .el-upload-dragger {
    position: relative
}

.upload-grid .upload-item .upload-item-content[data-v-c454276e] {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%)
}

.upload-grid .grid-icon[data-v-c454276e] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.uploader[data-v-ab87a875] {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.uploader .size-limit-container[data-v-ab87a875] {
    position: relative;
    height: 22px;
    margin-top: 8px
}

.uploader .size-limit[data-v-ab87a875] {
    width: 100%;
    height: 22px;
    position: absolute;
    top: 8px;
    left: 0;
    font-size: 13px;
    line-height: 22px;
    color: #5e6266
}

.uploader .main[data-v-ab87a875] {
    border: 1px solid rgb(47,49,51);
    border-radius: 8px
}

.uploader .main .recommend-row[data-v-ab87a875] {
    border-top: 1px solid rgb(28,29,31);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px
}

.uploader .main .recommend-row .recommends-container[data-v-ab87a875] {
    flex: 1;
    display: flex;
    gap: 8px;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.uploader .main .recommend-row .recommends-container[data-v-ab87a875]::-webkit-scrollbar {
    display: none
}

.uploader .main .recommend-row .recommends-container .item[data-v-ab87a875] {
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 4px;
    height: 52px;
    width: 52px
}

.uploader .main .recommend-row .recommends-container .item-bg[data-v-ab87a875] {
    position: relative;
    top: -2px;
    right: -1px;
    transform: rotate(12deg);
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: var(--color-other-5)
}

.uploader .main .recommend-row .recommends-container .item .image[data-v-ab87a875] {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2
}

.uploader .main .recommend-row .recommends-container .item-count[data-v-ab87a875] {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    height: 18px;
    padding: 0 6px;
    border-radius: 4px 0;
    background: var(--color-fill-black-3);
    color: var(--color-text-1);
    font-size: 12px
}

.uploader .prompt-container[data-v-ab87a875] {
    margin: 16px 0;
    display: flex;
    flex-direction: column
}

.uploader .prompt-container .prompt-title[data-v-ab87a875] {
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 14px;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 6px
}

.uploader .prompt-container .prompt-title .tip[data-v-ab87a875] {
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    color: var(--color-text-3)
}

.multi-id-pop-tips {
    width: 280px
}

.multi-id-recommends-tip .image-group-grid {
    margin: 4px 0;
    display: grid;
    grid-template-columns: 120px 120px;
    grid-template-rows: 120px 120px;
    gap: 4px
}

.multi-id-recommends-tip .image-group-flex {
    margin: 4px 0;
    display: flex;
    gap: 4px
}

.multi-id-recommends-tip img {
    width: 120px;
    height: 120px;
    border-radius: 4px
}

.multi-id-recommends-tip .image-container {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 4px;
    overflow: hidden
}

.multi-id-recommends-tip .preview-image {
    width: 120px;
    height: 120px;
    border-radius: 4px;
    object-fit: contain;
    position: relative;
    z-index: 2
}

.multi-id-recommends-tip .preview-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(8px);
    transform: scale(1.1)
}

.top-container[data-v-77d2382e] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px
}

.top-container .top-right-container[data-v-77d2382e] {
    display: flex;
    align-items: center
}

.top-container .label[data-v-77d2382e] {
    width: 76px;
    height: 32px;
    line-height: 32px;
    color: #fffc;
    margin-right: 24px
}

.top-container input[data-v-77d2382e] {
    width: 51px;
    height: 32px;
    border: 1px solid var(--color-border-component);
    border-radius: 8px;
    display: inline-block;
    background: transparent;
    box-sizing: border-box;
    box-shadow: none;
    text-align: center;
    color: #fff
}

.movement-slider[data-v-77d2382e] {
    height: 32px;
    box-sizing: border-box;
    display: flex
}

.movement-slider button[data-v-77d2382e] {
    background: #ffffff1f;
    border: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    padding: 0;
    color: #ccc;
    border-radius: 0;
    justify-content: center;
    align-items: center;
    margin: 0;
    vertical-align: middle;
    box-sizing: border-box
}

.movement-slider button[data-v-77d2382e]:hover {
    background: #fff2;
    color: #fff
}

.movement-slider button[data-v-77d2382e]:active {
    background: #fff4;
    color: #fff
}

.movement-slider button.right[data-v-77d2382e] {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px
}

.movement-slider button.right svg[data-v-77d2382e] {
    transform: rotate(180deg)
}

.movement-slider button.left[data-v-77d2382e] {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px
}

.movement-slider .view[data-v-77d2382e] {
    vertical-align: middle;
    display: inline-block;
    margin: 0;
    padding: 0 4px;
    width: 100%;
    height: 32px;
    background: #232323
}

.movement-slider .view .view-content[data-v-77d2382e] {
    position: relative;
    width: 100%;
    height: 32px
}

.movement-slider .view .view-content .span[data-v-77d2382e] {
    background: #fff3;
    position: absolute;
    height: 32px
}

.movement-slider .view .view-content .btn[data-v-77d2382e] {
    position: absolute;
    height: 32px;
    width: 6px;
    cursor: pointer;
    border-radius: 3px;
    background-color: #fff;
    margin-left: -4px
}

.el-select-dropdown__item[data-v-f6b21e80] {
    height: 40px;
    line-height: 40px;
    padding: 0 16px
}

body.mobile .content .main-view[data-v-f6b21e80] {
    width: calc(100vw - 68px);
    display: flex;
    justify-content: center;
    align-items: center
}

body.mobile .content .main-view .container[data-v-f6b21e80] {
    width: calc(100vw - 68px)
}

body.mobile .content .main-view .back[data-v-f6b21e80],body.mobile .content .main-view .view[data-v-f6b21e80] {
    width: calc(100vw - 208px);
    margin: 0
}

.r-content[data-v-f6b21e80] {
    flex: 1;
    display: flex;
    gap: 8px
}

.r-content .types-container[data-v-f6b21e80] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.r-content .types-container .wholeScreen[data-v-f6b21e80] {
    width: 100%
}

.r-content .types-container .wholeScreen[data-v-f6b21e80] .generic-button .content {
    padding: 0
}

.r-content .types-container .wholeScreen[data-v-f6b21e80] .content {
    display: flex;
    padding: 0 12px;
    width: 100%
}

.r-content .types-container .wholeScreen[data-v-f6b21e80] .content .inner {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between
}

.r-content .types-container .wholeScreen.selected[data-v-f6b21e80] {
    background: var(--color-other-2);
    border-radius: 8px
}

.r-content .types-container .wholeScreen .btn-txt[data-v-f6b21e80] {
    color: var(--color-text-2);
    font-weight: 400;
    display: flex;
    justify-content: space-between
}

.r-content .types-container .wholeScreen .btn-txt img[data-v-f6b21e80] {
    width: 30px
}

.r-content .types-container .vip-img[data-v-f6b21e80] {
    width: 30px;
    height: 20px
}

.disable-reason[data-v-f6b21e80] {
    font-size: 14px;
    color: #999bac;
    margin-top: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px
}

.title-bar[data-v-f6b21e80] {
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: end;
    margin-left: auto;
    gap: 8px
}

.title-bar span[data-v-f6b21e80] {
    font-size: 14px;
    color: #999bac
}

.title-bar a[data-v-f6b21e80] {
    pointer-events: all;
    color: #fff;
    cursor: pointer
}

.title-bar a[data-v-f6b21e80]:hover {
    color: var(--theme-color-primary)
}

.title-bar svg[data-v-f6b21e80] {
    transform: rotate(180deg);
    transition: all .4s;
    float: right
}

.title-bar.expand a svg[data-v-f6b21e80] {
    transform: rotate(0)
}

.content[data-v-f6b21e80] {
    height: 20px;
    transition: height .2s
}

.content.expand[data-v-f6b21e80] {
    height: auto
}

.content.disabled .main-view[data-v-f6b21e80] {
    opacity: 30%
}

.content.disabled .main-view .view[data-v-f6b21e80] {
    opacity: 0
}

.content.disabled .movement-type[data-v-f6b21e80],.content.disabled .parameter[data-v-f6b21e80] {
    opacity: 30%
}

.content .main-view[data-v-f6b21e80] {
    height: 220px;
    width: 100%;
    border-radius: 10px;
    background-color: #0d1116
}

.content .main-view .container[data-v-f6b21e80] {
    position: absolute;
    overflow: hidden;
    width: 418px;
    border-radius: 10px;
    height: 220px
}

.content .main-view .back[data-v-f6b21e80] {
    background-color: #ffffff1f;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 284px;
    height: 160px;
    position: absolute;
    margin-left: calc(50% - 142px);
    margin-top: 30px;
    border-radius: 12px
}

.content .main-view .view[data-v-f6b21e80] {
    transition: all .5s linear;
    position: absolute;
    width: 284px;
    height: 160px;
    border-radius: 12px;
    background: #fff3;
    border: 1px solid #ffffff;
    margin-left: calc(50% - 142px);
    margin-top: 30px;
    transform: perspective(300px) scale(var(--view-translate-z)) rotate(var(--view-rotate-z)) rotateX(var(--view-rotate-x)) rotateY(var(--view-rotate-y)) translate(var(--view-translate-x)) translateY(var(--view-translate-y))
}

.content .main-view .nav[data-v-f6b21e80] {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -10px;
    margin-top: -10px
}

.content .movement-type[data-v-f6b21e80] {
    margin-top: 16px;
    width: 100%;
    gap: 24px
}

.content .movement-type .title[data-v-f6b21e80] {
    color: #fff;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 600
}

.content .movement-type .title svg[data-v-f6b21e80] {
    color: #fff;
    vertical-align: middle;
    margin-bottom: 1px;
    margin-left: 4px
}

.content .movement-type button[data-v-f6b21e80] {
    min-width: 30%;
    padding: 0;
    border: 1px solid var(--color-border-component);
    background: transparent;
    border-radius: 8px;
    display: block
}

.content .movement-type button .btn-txt[data-v-f6b21e80] {
    color: var(--color-text-2)
}

.content .movement-type button.selected[data-v-f6b21e80] {
    background: var(--color-other-2);
    border-color: transparent
}

.content .movement-type button.selected .btn-txt[data-v-f6b21e80] {
    color: var(--color-text-1);
    font-weight: 600
}

.parameter[data-v-f6b21e80] {
    margin-top: 12px
}

#mark[data-v-04416750] {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: #00000080;
    z-index: 2200
}

#mark .mark-step[data-v-04416750] {
    position: relative;
    background: var(--color-bg-popover);
    z-index: 2222;
    opacity: 1;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px
}

#mark .mark-step .mark-dot[data-v-04416750] {
    position: absolute;
    background: var(--color-fill-black-1);
    outline: solid 3px var(--color-border-hover);
    width: 8px;
    height: 8px;
    border-radius: 13px
}

#mark .mark-step .mark-line[data-v-04416750] {
    position: absolute
}

#mark .mark-step .mark-line__vertical[data-v-04416750] {
    width: 0px;
    height: 36px;
    border-left: 1px dashed var(--color-border-hover)
}

#mark .mark-step .mark-line__horizontal[data-v-04416750] {
    height: 0px;
    width: 36px;
    border-top: 1px dashed var(--color-border-hover)
}

#mark .mark-step .mark-texts[data-v-04416750] {
    color: var(--color-text-1);
    font-size: 16px;
    font-weight: 600
}

#mark .mark-step .mark-texts span[data-v-04416750] {
    font-weight: 600
}

#mark .mark-step .mark-title[data-v-04416750] {
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    color: var(--color-text-1)
}

#mark .mark-step .mark-subtitle[data-v-04416750] {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-text-1)
}

#mark .mark-step video[data-v-04416750] {
    width: 100%;
    border-radius: 8px
}

#mark .mark-step .mark-bottom[data-v-04416750] {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.switch[data-v-87171982] {
    position: relative;
    width: 32px;
    height: 16px
}

.switch.disabled[data-v-87171982] {
    cursor: not-allowed
}

.switch.disabled .back[data-v-87171982] {
    background: #666;
    cursor: not-allowed
}

.switch.disabled .btn[data-v-87171982] {
    background: #ccc;
    cursor: not-allowed
}

.switch.disabled .btn[data-v-87171982]:hover {
    background: #ccc
}

.switch .back[data-v-87171982] {
    position: absolute;
    margin: 4px 0;
    width: 32px;
    height: 8px;
    border-radius: 10em;
    background: var(--color-other-5);
    cursor: pointer
}

.switch .btn[data-v-87171982] {
    transition: margin-left .2s;
    position: absolute;
    border-radius: 10em;
    width: 16px;
    height: 16px;
    background: var(--color-theme-2);
    cursor: pointer
}

.switch .btn[data-v-87171982]:not(.on) {
    background: var(--color-text-2)
}

.switch .btn.on[data-v-87171982] {
    margin-left: 16px
}

.title-container[data-v-6ed7fd51] {
    display: flex;
    align-items: center
}

.title-container .back[data-v-6ed7fd51] {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-other-2);
    border-radius: 8px;
    cursor: pointer
}

.title-container h1[data-v-6ed7fd51] {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    color: var(--color-text-1);
    margin: 0 6px 0 16px
}

.title-container .delete[data-v-6ed7fd51] {
    line-height: 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer
}

.top-bar[data-v-6ed7fd51] {
    display: flex;
    align-items: center
}

.top-bar .label[data-v-6ed7fd51] {
    color: #c4c8cc
}

.top-bar .detecting[data-v-6ed7fd51] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px
}

.top-bar .pipe[data-v-6ed7fd51] {
    display: inline-block;
    margin: 0 16px;
    width: 1px;
    background-color: #333a45;
    height: 12px;
    vertical-align: bottom
}

.top-bar .box[data-v-6ed7fd51] {
    display: inline-block;
    vertical-align: bottom;
    height: 34px;
    border: 1px solid #333a45;
    border-radius: 8px;
    padding: 5px 12px
}

.top-bar .box .label[data-v-6ed7fd51] {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    display: inline-block;
    vertical-align: top;
    margin-top: 1px
}

.top-bar .box .label.disabled[data-v-6ed7fd51] {
    color: #727485
}

.top-bar .box .content[data-v-6ed7fd51] {
    vertical-align: top;
    margin-left: 8px;
    display: inline-block
}

.top-bar .box.disabled .label[data-v-6ed7fd51] {
    color: #727485
}

.top-bar .brush-size[data-v-6ed7fd51] {
    margin-left: 8px;
    height: 36px;
    background: var(--color-other-2);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 400px;
    box-sizing: border-box;
    padding: 0 16px 0 12px
}

.top-bar .brush-size .content[data-v-6ed7fd51] {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.top-bar .brush-size .content .el-slider-container[data-v-6ed7fd51] {
    width: 240px
}

.top-bar .brush-size .content .slider-val[data-v-6ed7fd51] {
    width: 32px;
    display: block;
    color: var(--color-text-2);
    text-align: center
}

.top-bar .brush-size .content .slider-val.disabled[data-v-6ed7fd51] {
    color: var(--color-text-4)
}

.top-bar .brush-size .content .icon-container[data-v-6ed7fd51] {
    height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
    cursor: not-allowed;
    color: var(--color-text-4)
}

.top-bar .brush-size .content .icon-container.active[data-v-6ed7fd51] {
    color: var(--color-text-2);
    cursor: pointer
}

.top-bar .detect-container[data-v-6ed7fd51] {
    height: 36px;
    background: var(--color-other-2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 16px 0 12px
}

.top-bar .auto-detect .content[data-v-6ed7fd51] {
    margin-left: 10px
}

.top-bar .desc[data-v-6ed7fd51] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    display: inline-block;
    vertical-align: bottom;
    color: var(--color-text-3);
    margin-left: 8px
}

.main[data-v-6ed7fd51] {
    width: 100%;
    margin-top: 24px;
    height: calc(100vh - 248px);
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.main .left-panel[data-v-6ed7fd51] {
    flex: 1;
    background-color: #0d1116;
    border-radius: 12px;
    position: relative
}

.main .left-panel .board-container[data-v-6ed7fd51] {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.main .left-panel .board-container .image-name[data-v-6ed7fd51] {
    width: 100%;
    height: 40px;
    background: #272b33;
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-color: #333a45;
    border-radius: 0 0 12px 12px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding-left: 16px;
    padding-right: 16px
}

.main .left-panel .board-container .image-name .filename[data-v-6ed7fd51] {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    flex-shrink: 1
}

.main .left-panel .board-container .image-name .delete-image[data-v-6ed7fd51] {
    cursor: pointer;
    width: 20px;
    height: 20px;
    flex-shrink: 0
}

.main .left-panel .board[data-v-6ed7fd51] {
    position: relative
}

.main .left-panel .board img[data-v-6ed7fd51] {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.main .left-panel .board canvas[data-v-6ed7fd51] {
    position: absolute;
    width: 100%;
    height: 100%
}

.main .left-panel .board canvas.region[data-v-6ed7fd51] {
    opacity: 50%
}

.main .left-panel .board canvas.highlight[data-v-6ed7fd51] {
    opacity: 40%
}

.main .left-panel .board .bounding-rect[data-v-6ed7fd51] {
    position: absolute;
    border: 2px solid #ffffff;
    border-radius: 4px;
    pointer-events: none
}

.main .left-panel .board .bounding-rect .delete[data-v-6ed7fd51] {
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 12px;
    color: #3b3c4d;
    cursor: pointer;
    position: absolute;
    top: -12px;
    right: -12px;
    pointer-events: all
}

.main .left-panel .board .bounding-rect .delete svg[data-v-6ed7fd51] {
    margin-left: 4px;
    margin-top: 4px
}

.main .left-panel .board .brush-circle[data-v-6ed7fd51] {
    position: absolute;
    border: 2px solid;
    pointer-events: none
}

.main .left-panel .board .brush-circle.auto-region[data-v-6ed7fd51] {
    border: none
}

.main .left-panel .board .brush-circle.auto-region svg[data-v-6ed7fd51] {
    margin-left: 6px;
    margin-top: 6px
}

.main .right-panel[data-v-6ed7fd51] {
    width: 420px;
    margin-left: 32px;
    position: relative
}

.main .right-panel h2[data-v-6ed7fd51] {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    color: var(--color-text-1)
}

.main .right-panel .brushes[data-v-6ed7fd51] {
    min-width: 364px;
    margin-bottom: 16px
}

.main .right-panel .brushes .title[data-v-6ed7fd51] {
    z-index: 99999;
    margin-top: 16px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-3)
}

.main .right-panel .brushes .title .region[data-v-6ed7fd51] {
    display: inline-block;
    width: 184px
}

.main .right-panel .brushes .title .track[data-v-6ed7fd51] {
    display: inline-block;
    width: 184px;
    margin-left: 8px
}

.main .right-panel .brushes .brush[data-v-6ed7fd51] {
    display: flex;
    gap: 8px;
    margin-bottom: 8px
}

.main .right-panel .brushes .brush .brush-inner[data-v-6ed7fd51] {
    display: flex;
    align-items: center
}

.main .right-panel .brushes .brush.disabled .box.active[data-v-6ed7fd51] {
    background: #272b33;
    border-color: #333a45
}

.main .right-panel .brushes .brush.disabled .region-block[data-v-6ed7fd51] {
    color: #474e5a
}

.main .right-panel .brushes .brush.disabled .region-block .dot[data-v-6ed7fd51] {
    background-color: #333a45!important
}

.main .right-panel .brushes .brush.disabled .traj-block[data-v-6ed7fd51] {
    color: #474e5a
}

.main .right-panel .brushes .brush.disabled .traj-block svg.icon[data-v-6ed7fd51] {
    color: #727485!important
}

.main .right-panel .brushes .brush.disabled .mark-item[data-v-6ed7fd51] {
    color: #fff!important
}

.main .right-panel .brushes .brush.disabled .mark-item.region-block.mark-item-guide-1[data-v-6ed7fd51] {
    color: #474e5a
}

.main .right-panel .brushes .brush.disabled .mark-item.region-block.mark-item-guide-1 .dot[data-v-6ed7fd51] {
    background-color: #72e528!important
}

.main .right-panel .brushes .brush.disabled .mark-item.traj-block.mark-item-guide-2[data-v-6ed7fd51] {
    background: #272b33!important;
    color: #fff!important
}

.main .right-panel .brushes .brush.disabled .mark-item.traj-block.mark-item-guide-2 svg.icon[data-v-6ed7fd51] {
    color: #72e528!important
}

.main .right-panel .brushes .brush.disabled .mark-item.static-region.mark-item-guide-3 .dot[data-v-6ed7fd51] {
    background-color: #000!important
}

.main .right-panel .brushes .brush .box[data-v-6ed7fd51] {
    position: relative;
    vertical-align: bottom;
    background: var(--color-fill-light);
    border: 1px solid var(--color-border-component);
    width: 184px;
    padding: 0 12px;
    height: 36px;
    box-sizing: border-box;
    border-radius: 8px;
    display: flex;
    align-items: center
}

.main .right-panel .brushes .brush .box.disabled[data-v-6ed7fd51] {
    background-color: transparent!important;
    border-color: #333a45!important;
    cursor: not-allowed;
    color: #727485!important
}

.main .right-panel .brushes .brush .box.disabled svg.icon[data-v-6ed7fd51] {
    color: #727485!important
}

.main .right-panel .brushes .brush .box.disabled.mark-item-guide-2[data-v-6ed7fd51] {
    background: #333a45!important;
    color: #fff!important
}

.main .right-panel .brushes .brush .box.disabled.mark-item-guide-2 svg.icon[data-v-6ed7fd51] {
    color: #72e528!important
}

.main .right-panel .brushes .brush .box.active[data-v-6ed7fd51] {
    border-color: var(--color-text-1)
}

.main .right-panel .brushes .brush .box.active.mark-item-guide-1[data-v-6ed7fd51] {
    border-color: #333a45
}

.main .right-panel .brushes .brush .check-container[data-v-6ed7fd51] {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.main .right-panel .brushes .brush .region-block[data-v-6ed7fd51] {
    color: var(--color-text-1);
    font-size: 14px;
    line-height: 24px
}

.main .right-panel .brushes .brush .region-block.static-region[data-v-6ed7fd51] {
    flex: 1
}

.main .right-panel .brushes .brush .region-block .dot[data-v-6ed7fd51] {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    margin-right: 8px
}

.main .right-panel .brushes .brush .traj-block[data-v-6ed7fd51] {
    color: var(--color-text-1);
    font-size: 14px;
    line-height: 24px;
    margin-left: 8px
}

.main .right-panel .brushes .brush .traj-block .track-info[data-v-6ed7fd51] {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px
}

.main .right-panel .brushes .brush .traj-block.active[data-v-6ed7fd51] {
    color: var(--color-text-1)
}

.main .right-panel .brushes .brush .traj-block.disabled[data-v-6ed7fd51] {
    color: var(--color-text-4)
}

.main .right-panel .brushes .brush .traj-block svg.icon[data-v-6ed7fd51] {
    margin-top: 3px;
    vertical-align: top
}

.main .right-panel .right-tools[data-v-6ed7fd51] {
    display: flex;
    position: absolute;
    z-index: 10;
    width: 144px;
    height: 36px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--color-border-component);
    border-radius: 8px;
    padding: 0 16px;
    bottom: 0
}

.main .right-panel .right-tools .generic-button[data-v-6ed7fd51]:disabled {
    cursor: not-allowed;
    color: var(--color-text-4)
}

.main .right-panel .right-tools .generic-button[data-v-6ed7fd51]:disabled:active {
    filter: none
}

.main .right-panel .right-tools .pipe[data-v-6ed7fd51] {
    width: 0;
    height: 12px;
    border-left: 1px solid var(--color-border-line)
}

.mark-item[data-v-6ed7fd51],.mark-item.region-block.mark-item-guide-1[data-v-6ed7fd51] {
    color: #fff!important
}

.mark-item.region-block.mark-item-guide-1 .dot[data-v-6ed7fd51] {
    background-color: #72e528!important
}

.mark-item.traj-block.mark-item-guide-2[data-v-6ed7fd51] {
    background: #333a45!important;
    color: #fff!important
}

.mark-item.traj-block.mark-item-guide-2 svg.icon[data-v-6ed7fd51] {
    color: #72e528!important
}

.mark-item.static-region.mark-item-guide-3 .dot[data-v-6ed7fd51] {
    background-color: #000!important
}

.mark-box[data-v-6ed7fd51] {
    z-index: 99999;
    outline: 8px solid #181c22;
    position: relative;
    width: fit-content;
    border-radius: 8px
}

.static-tip[data-v-6ed7fd51] {
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
    margin-top: 16px;
    margin-bottom: 12px;
    color: var(--color-text-2)
}

.static-tip svg[data-v-6ed7fd51] {
    margin-right: 4px;
    vertical-align: middle;
    margin-bottom: 2px
}

[data-v-6ed7fd51] .el-slider__runway {
    height: 4px;
    background-color: var(--color-other-2)
}

[data-v-6ed7fd51] .el-slider__runway .el-slider__bar {
    height: 4px;
    background-color: var(--color-text-1)
}

[data-v-6ed7fd51] .el-slider__runway .el-slider__button {
    background-color: var(--color-text-1)
}

[data-v-6ed7fd51] .el-slider__runway.is-disabled {
    background-color: var(--color-other-2)
}

[data-v-6ed7fd51] .el-slider__runway.is-disabled .el-slider__bar,[data-v-6ed7fd51] .el-slider__runway.is-disabled .el-slider__button {
    background-color: var(--color-text-3)
}

[data-v-6ed7fd51] .el-slider__button-wrapper {
    height: 12px;
    width: 4px;
    border-radius: 4px;
    top: -8px
}

[data-v-6ed7fd51] .el-slider__button-wrapper .el-slider__button {
    border: none;
    height: 12px;
    width: 4px;
    border-radius: 4px
}

.bottom-bar[data-v-6ed7fd51] {
    margin-top: 24px;
    width: 100%;
    height: 36px
}

.bottom-bar .bottom-btns[data-v-6ed7fd51] {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end
}

.bottom-bar .bottom-btns .generic-button[data-v-6ed7fd51]:not(:last-child) {
    margin-right: 8px
}

.bottom-bar .bottom-btns .guide[data-v-6ed7fd51] {
    margin-right: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    color: var(--color-text-2);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none
}

.dialog-motion-brush {
    margin: 0!important;
    border-radius: 0!important;
    height: 100vh!important;
    max-height: 100vh!important;
    position: fixed;
    top: 0;
    left: 0
}

.btn[data-v-e783e0ec] {
    padding: 12px 16px;
    border-radius: 10px;
    color: #fff;
    cursor: pointer
}

.btn[data-v-e783e0ec]:active {
    background: #1d242e
}

.btn.disabled[data-v-e783e0ec] {
    cursor: default;
    color: #3b3c4d
}

.btn.disabled[data-v-e783e0ec]:active {
    background: #0d1116
}

.btn span[data-v-e783e0ec] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px
}

.btn svg[data-v-e783e0ec] {
    margin-top: 2px;
    float: right
}

.preview[data-v-e783e0ec] {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.preview img[data-v-e783e0ec] {
    width: 100%;
    border-radius: 8px
}

.extra-line[data-v-e783e0ec] {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    flex-direction: row;
    gap: 4px;
    border-radius: 8px;
    border: 1px solid var(--color-border-component);
    padding: 4px 16px 4px 8px
}

.extra-line span[data-v-e783e0ec] {
    color: var(--color-text-3);
    line-height: 1.2
}

.extra-line span.selected[data-v-e783e0ec] {
    color: var(--color-text-1)
}

.extra-line .button[data-v-e783e0ec] {
    padding-left: 10px;
    color: var(--color-text-1);
    text-align: right
}

.extra-line svg[data-v-e783e0ec] {
    margin-right: 8px
}

body.mobile .recommends-box[data-v-dbc2a252] {
    gap: 8px;
    overflow-x: auto
}

body.mobile .recommends-box[data-v-dbc2a252]::-webkit-scrollbar {
    display: none
}

.key-frames-box[data-v-dbc2a252] {
    margin-top: 24px;
    border-radius: 8px;
    border: 1px solid rgb(47,49,51);
    display: flex;
    flex-direction: column
}

.key-frames-box .uploaders[data-v-dbc2a252] {
    padding: 8px;
    display: flex;
    gap: 8px
}

.key-frames-box .uploaders .frame-uploader[data-v-dbc2a252] {
    border: none!important
}

.key-frames-box .controls[data-v-dbc2a252] {
    border-top: 1px solid rgb(28,29,31);
    padding: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px
}

.key-frames-box .controls .swap-button[data-v-dbc2a252] {
    cursor: pointer
}

.key-frames-box .controls .swap-button.disabled[data-v-dbc2a252] {
    color: #4d545c
}

.key-frames-box .controls .control[data-v-dbc2a252] {
    width: 130px;
    height: 40px;
    padding: 4px;
    background: #ffffff0a;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    border: 1px solid rgba(27,229,236,0);
    position: relative;
    color: #fff
}

.key-frames-box .controls .control[data-v-dbc2a252]:hover {
    border: 1px solid var(--color-border-hover)
}

.key-frames-box .controls .control:hover .delete-button[data-v-dbc2a252] {
    display: unset
}

.key-frames-box .controls .control.active[data-v-dbc2a252] {
    border: 1px solid var(--color-border-focused)
}

.key-frames-box .controls .control.disabled[data-v-dbc2a252] {
    border: none;
    color: #4d545c
}

.key-frames-box .controls .control img[data-v-dbc2a252] {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: #ffffff1f;
    object-fit: contain
}

.key-frames-box .controls .control .title[data-v-dbc2a252] {
    line-height: 24px;
    flex-grow: 1;
    text-align: center
}

.key-frames-box .controls .control .delete-button[data-v-dbc2a252] {
    position: absolute;
    cursor: pointer;
    transform: translate(50%,-50%);
    top: 0;
    right: 0;
    display: none
}

.key-frames-box .recommends-box[data-v-dbc2a252] {
    width: 100%;
    height: 80px;
    border-top: 1px solid rgb(28,29,31);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    justify-content: space-between;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 4px #1313131f
}

.key-frames-box .recommends-box .image-list[data-v-dbc2a252] {
    flex: 1;
    display: flex;
    gap: 8px;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.key-frames-box .recommends-box .image-list[data-v-dbc2a252]::-webkit-scrollbar {
    display: none
}

.key-frames-box .recommends-box .image-list .recommend-item[data-v-dbc2a252] {
    cursor: pointer;
    height: 48px;
    width: 48px;
    position: relative
}

.key-frames-box .recommends-box .image-list .recommend-item-bg[data-v-dbc2a252] {
    height: 100%;
    width: 100%;
    position: relative;
    top: -2px;
    right: -1px;
    border-radius: 4px;
    background: var(--color-other-5);
    transform: rotate(12deg)
}

.key-frames-box .recommends-box .image-list .recommend-item img[data-v-dbc2a252] {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2
}

.key-frames-box .recommends-box .image-list .recommend-item-count[data-v-dbc2a252] {
    border-radius: 4px 0;
    height: 18px;
    padding: 0 6px;
    color: var(--color-text-1);
    font-size: 12px;
    background: var(--color-fill-black-3);
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 3
}

.disabled-reason[data-v-dbc2a252] {
    font-size: 14px
}

.disabled-reason .reason[data-v-dbc2a252] {
    color: var(--color-text-3)
}

.disabled-reason .button[data-v-dbc2a252] {
    color: var(--color-theme-2)
}

.prompt-container[data-v-a6386f6c] {
    margin: 32px 0;
    display: flex;
    flex-direction: column
}

.prompt-container .title-row[data-v-a6386f6c] {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px
}

.prompt-container .title-row .title[data-v-a6386f6c] {
    font-size: 14px;
    font-weight: 600;
    line-height: 26px;
    color: #f9fbfc
}

.prompt-container .title-row .optional[data-v-a6386f6c] {
    font-size: 14px;
    line-height: 24px;
    color: #5e6266
}

.extra-line[data-v-a6386f6c] {
    height: 40px;
    justify-content: space-between;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    border: 1px solid var(--color-border-component);
    padding: 4px 8px
}

.extra-line .reason[data-v-a6386f6c] {
    color: var(--color-text-3);
    line-height: 1.2
}

.extra-line .reason .arg[data-v-a6386f6c] {
    color: var(--color-text-1)
}

.extra-line .button[data-v-a6386f6c] {
    text-align: right;
    color: var(--color-text-1);
    padding-left: 10px;
    margin-right: 8px
}

.extra-line .add-icon[data-v-a6386f6c] {
    margin-left: auto;
    color: var(--color-text-1);
    margin-right: 8px
}

.tab[data-v-9f2b3b9c] {
    position: relative;
    z-index: 2;
    margin-bottom: 12px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.04);
    background: #ffffff0a;
    padding: 2px;
    display: flex;
    align-items: center;
    gap: 2px;
    width: 450px
}

.tab .item[data-v-9f2b3b9c] {
    flex: 1;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.tab .item .text[data-v-9f2b3b9c] {
    line-height: 24px;
    font-weight: 400
}

.tab .active[data-v-9f2b3b9c] {
    cursor: default;
    border-radius: 10px;
    background: linear-gradient(89.43deg,#5afaaf1f,#1fcbff1f)
}

.tab .active .text[data-v-9f2b3b9c] {
    font-weight: 500;
    line-height: 24px;
    background: var(----, linear-gradient(270deg, #1dd4f0 0%, #1df5bb 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

body.mobile .result[data-v-e36230ed] {
    padding-bottom: 30px;
    height: calc(100vh - 100px);
    width: 100%
}

body.mobile .result .tools[data-v-e36230ed] {
    transform: scale(.8);
    flex-wrap: wrap;
    justify-content: center
}

body.mobile .footer-btn[data-v-e36230ed] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px
}

body.mobile .footer-btn__item[data-v-e36230ed] {
    display: flex;
    gap: 16px
}

body.lang-en .new-version-tip[data-v-e36230ed] {
    height: 50px;
    width: 637px
}

.single-result[data-v-e36230ed] {
    flex-direction: row!important;
    margin: 0 auto!important
}

.result[data-v-e36230ed] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
    vertical-align: middle;
    width: 100%;
    margin: 46px auto 0;
    padding-bottom: 46px;
    gap: 32px
}

.result[data-v-e36230ed]::-webkit-scrollbar {
    display: none
}

.result video[data-v-e36230ed] {
    width: 100%;
    border-radius: 12px
}

.result .tools[data-v-e36230ed] {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-direction: row;
    align-items: center
}

.panel-box[data-v-e36230ed] {
    position: relative
}

.tab-container[data-v-e36230ed] {
    position: relative;
    z-index: 2;
    opacity: var(--property-title-alpha);
    padding-bottom: 24px
}

.extension-history[data-v-e36230ed] {
    text-align: center
}

.extension-history .extension-history-content[data-v-e36230ed] {
    text-align: left;
    display: inline-block;
    margin-top: 24px
}

.empty-container[data-v-e36230ed] {
    width: 100%;
    height: 100%
}

.empty-container .empty[data-v-e36230ed] {
    padding-top: 0;
    margin-bottom: 112px
}

.extend-history-btn[data-v-e36230ed] {
    cursor: pointer;
    vertical-align: middle;
    color: #fff;
    float: left;
    padding-left: 4px;
    padding-right: 4px
}

.extend-history-btn[data-v-e36230ed]:hover {
    color: var(--theme-color-primary)
}

.extend-history-btn svg[data-v-e36230ed] {
    vertical-align: middle;
    margin-bottom: 5px
}

.video-box[data-v-e36230ed] {
    position: relative
}

.footer-btn[data-v-e36230ed] {
    display: flex;
    gap: 16px;
    justify-content: space-between
}

.footer-btn__item[data-v-e36230ed] {
    display: flex;
    gap: 16px
}

.primary-panel[data-v-e36230ed] {
    overflow-y: auto;
    height: 100%
}

.primary-panel[data-v-e36230ed]::-webkit-scrollbar {
    display: none
}

.extra-line[data-v-e36230ed] {
    height: 40px;
    justify-content: space-between;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    border: 1px solid var(--color-border-component);
    padding: 4px 16px 4px 8px
}

.extra-line .reason[data-v-e36230ed] {
    color: var(--color-text-3);
    line-height: 1.2
}

.extra-line .reason .arg[data-v-e36230ed] {
    color: var(--color-text-1)
}

.extra-line .button[data-v-e36230ed] {
    color: var(--color-text-1);
    cursor: pointer;
    text-align: right;
    padding-left: 10px;
    margin-right: 8px
}

.extra-line .add-icon[data-v-e36230ed] {
    margin-left: auto;
    color: var(--color-text-1);
    margin-right: 8px
}

.el-popper.is-dark.__video_design_extension_history_tip {
    background-color: #151c20!important
}

.el-popper.is-dark.__video_design_extension_history_tip span.el-popper__arrow:before {
    background: #151c20!important
}

.drawer[data-v-4d3688d6] {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 450px;
    background-color: #fff;
    box-shadow: 0 0 10px #00000080;
    z-index: 1000;
    transition: transform .3s ease
}

.drawer.left[data-v-4d3688d6] {
    left: 0;
    transform: translate(-100%)
}

.drawer.right[data-v-4d3688d6] {
    right: 0
}

.drawer-content[data-v-4d3688d6] {
    padding: 20px
}

.close-button[data-v-4d3688d6] {
    position: absolute;
    top: 10px;
    right: 10px
}

body.mobile .recommend-layout .main[data-v-c0211f9d] {
    padding: 0 24px 16px!important
}

@keyframes main-expand-c0211f9d {
    0% {
        width: 100%
    }

    to {
        width: calc(100% - 520px)
    }
}

@keyframes main-shrink-c0211f9d {
    0% {
        width: calc(100% - 520px)
    }

    to {
        width: 100%
    }
}

@keyframes drawer-expand-c0211f9d {
    0% {
        width: 0
    }

    to {
        width: 520px
    }
}

.recommend-layout[data-v-c0211f9d] {
    display: flex
}

.recommend-layout .main[data-v-c0211f9d] {
    width: 100%;
    padding: 40px 32px 24px
}

.recommend-layout .shrink[data-v-c0211f9d] {
    animation: main-shrink-c0211f9d .5s ease-in-out
}

.recommend-layout .expand[data-v-c0211f9d] {
    width: calc(100% - 520px);
    animation: main-expand-c0211f9d .5s ease-in-out
}

.recommend-layout .drawer[data-v-c0211f9d] {
    position: fixed;
    height: 100vh;
    right: 0;
    top: 0;
    animation: drawer-expand-c0211f9d .5s ease-in-out;
    z-index: 100
}

.recommend-layout .fixed-text[data-v-c0211f9d] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    font-size: 14px;
    color: var(--text-color);
    transition: right .3s ease
}

.recommend-layout .text-expand[data-v-c0211f9d] {
    right: 534px
}

body.mobile .movie-card[data-v-d7aa28e9] {
    width: calc(100vw - 40px)
}

.cover[data-v-d7aa28e9] {
    height: var(--02710bbd)124;
    will-change: height;
    content-visibility: auto;
    contain-intrinsic-size: 100% var(--02710bbd);
    background: var(--color-other-1);
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden
}

.cover .main[data-v-d7aa28e9] {
    position: relative;
    display: flex;
    min-height: var(--57fff016)
}

.cover .main img[data-v-d7aa28e9] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.cover .main video[data-v-d7aa28e9] {
    width: 100%;
    height: 100%
}

.cover .main .ref-image[data-v-d7aa28e9] {
    height: 28px;
    border-radius: 4px;
    background: #0000003d;
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 12px;
    left: 12px
}

.cover .main .ref-image span[data-v-d7aa28e9] {
    font-size: 11px;
    font-weight: 500;
    line-height: 20px;
    color: #fff;
    margin-left: 2px
}

.cover .main .play-button[data-v-d7aa28e9] {
    position: absolute;
    top: 12px;
    left: 12px
}

.cover .main .bottom-row[data-v-d7aa28e9] {
    width: 100%;
    pointer-events: none;
    position: absolute;
    bottom: 0;
    padding: 16px;
    height: 100px;
    background: transparent;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px
}

.cover .main .bottom-row .user[data-v-d7aa28e9] {
    pointer-events: all;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    display: flex;
    gap: 6px;
    position: relative;
    z-index: 3
}

.cover .main .bottom-row .user .avatar[data-v-d7aa28e9] {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    flex-shrink: 0
}

.cover .main .bottom-row .user .name[data-v-d7aa28e9] {
    color: #fff;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all
}

.cover .main .bottom-row .actions[data-v-d7aa28e9] {
    pointer-events: all;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 3
}

.cover .detail[data-v-d7aa28e9] {
    border-radius: 0 0 4px 4px;
    height: 0;
    position: relative;
    bottom: 0
}

.cover .detail[data-v-d7aa28e9]:before {
    content: "";
    position: absolute;
    bottom: 76px;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to top,#1f2224,#1f222400);
    z-index: 2
}

.cover .detail .mask[data-v-d7aa28e9] {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(180px);
    backdrop-filter: blur(180px);
    z-index: -1;
    background-size: cover
}

.cover .detail .content[data-v-d7aa28e9] {
    height: 100%;
    padding: 12px 20px 20px;
    -webkit-backdrop-filter: blur(180px);
    backdrop-filter: blur(180px);
    background: #1f2224;
    z-index: 2;
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative
}

.cover .detail .content .title[data-v-d7aa28e9] {
    width: 100%;
    line-height: 20px;
    font-weight: 600;
    font-size: 12px;
    color: var(--color-text-1);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.cover .detail .content .introduction[data-v-d7aa28e9] {
    width: 100%;
    color: var(--color-text-1);
    font-size: 12px;
    line-height: 20px;
    pointer-events: none;
    font-weight: 400;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: var(--eac6e85a);
    -webkit-line-clamp: var(--eac6e85a)
}

.cover .expand[data-v-d7aa28e9] {
    height: 76px
}

.cover .shrink[data-v-d7aa28e9] {
    height: 0;
    animation: shrink-d7aa28e9 .2s ease-out
}

@keyframes expand-d7aa28e9 {
    0% {
        height: 0
    }

    to {
        height: 124px
    }
}

@keyframes shrink-d7aa28e9 {
    0% {
        height: 124px
    }

    to {
        height: 0
    }
}

.back-to-top[data-v-938615f8] {
    cursor: pointer;
    position: fixed;
    bottom: 64px;
    right: calc(var(--drawer-width) + 60px);
    transition: right .5s ease-in-out;
    padding: 0;
    border: solid 1px var(--color-border-component);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-fill-black-3);
    color: var(--color-text-1);
    opacity: .8;
    z-index: 2
}

.back-to-top[data-v-938615f8]:hover {
    opacity: 1
}

.empty[data-v-938615f8] {
    text-align: center
}

.resource[data-v-b7204380] {
    display: flex;
    gap: 5%
}

.resource .activity[data-v-b7204380] {
    width: 74%;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.resource .activity .title[data-v-b7204380] {
    color: var(--color-text-1);
    font-family: PingFang SC;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.resource .activity .images[data-v-b7204380] {
    display: flex;
    gap: 12px
}

.resource .activity .images .activity-image[data-v-b7204380] {
    border-radius: 16px;
    cursor: pointer;
    object-fit: cover
}

.resource .activity .images .count-3[data-v-b7204380] {
    width: calc((100% - 24px) / 3)
}

.resource .activity .images .count-4[data-v-b7204380] {
    width: calc((100% - 36px)/4)
}

.resource .activity .images .more[data-v-b7204380] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 16px;
    cursor: pointer;
    background-size: cover
}

.resource .activity .images .more .desc[data-v-b7204380] {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-1)
}

.resource .activity-sgp[data-v-b7204380] {
    width: 100%
}

.resource .college[data-v-b7204380] {
    width: 21%;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.resource .college .title[data-v-b7204380] {
    color: var(--color-text-1);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.resource .college .college-image[data-v-b7204380] {
    object-fit: cover;
    height: 100%;
    border-radius: 12px;
    cursor: pointer
}

.tools[data-v-b7204380] {
    background: var(--color-bg-page);
    pointer-events: all;
    padding: 40px 0 16px;
    position: sticky;
    z-index: 2;
    top: -2px
}

.tools .main[data-v-b7204380] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between
}

.tools .main .left[data-v-b7204380] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px
}

.tools .main .left .divider[data-v-b7204380] {
    width: 1px;
    height: 16px;
    margin: 0 24px;
    background-color: var(--color-border-line)
}

.tools .main .left .filter[data-v-b7204380] {
    display: flex;
    gap: 8px;
    align-items: center
}

.tools .main .left .filter div[data-v-b7204380] {
    color: var(--color-text-2);
    font-size: 14px;
    line-height: 24px;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap
}

.tools .main .left .filter .active[data-v-b7204380] {
    color: var(--color-text-1);
    background: var(--color-other-2)
}

.tools .main .search[data-v-b7204380] {
    width: 320px;
    cursor: pointer;
    height: 36px;
    padding: 5px 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border-component);
    color: var(--color-text-1)
}

.tools .main .search[data-v-b7204380] .el-input__wrapper {
    flex: 1;
    border: none!important;
    font-size: 14px
}

.tools .main .search[data-v-b7204380]:hover {
    border-color: var(--color-border-hover)
}

.tools .main .search-active[data-v-b7204380] {
    border-color: var(--color-border-focused)!important
}

.tools .secondary[data-v-b7204380] {
    margin-top: 16px;
    display: flex;
    gap: 24px;
    overflow: auto
}

.tools .secondary div[data-v-b7204380] {
    color: var(--color-text-2);
    font-size: 14px;
    line-height: 24px;
    cursor: pointer;
    white-space: nowrap
}

.tools .secondary .active[data-v-b7204380] {
    color: var(--color-text-1);
    font-weight: 500
}

.el-dropdown-menu[data-v-b7204380] {
    background-color: transparent
}

span[data-v-cf06babe] {
    position: absolute;
    bottom: -20px;
    color: var(--color-fill-error);
    font-size: 12px
}

.title[data-v-79c14acf] {
    font-size: 18px;
    font-weight: 500;
    height: 32px;
    margin-bottom: 16px
}

.sub-title[data-v-79c14acf] {
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--color-text-2)
}

.gender-box[data-v-79c14acf] {
    display: flex;
    gap: 16px;
    color: var(--color-text-1)
}

.gender-box__item[data-v-79c14acf] {
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--color-border-component);
    padding: 0 16px;
    display: flex;
    gap: 16px;
    font-size: 16px;
    align-items: center;
    cursor: pointer
}

.gender-box__item div[data-v-79c14acf] {
    width: 24px;
    height: 24px;
    border-radius: 12px
}

.gender-box__item.active[data-v-79c14acf] {
    border: 1px solid var(--color-theme-2)
}

.content[data-v-4342e88e] {
    width: 100%;
    margin-top: 16px
}

.content .bottom[data-v-4342e88e] {
    width: 100%;
    gap: 12px
}

.close[data-v-b06dc564] {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer
}

.inform-title[data-v-b06dc564] {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    color: var(--color-text-1)
}

.content[data-v-b06dc564] {
    width: 100%;
    background: var(--color-fill-light);
    padding: 16px;
    border-radius: 8px;
    line-height: 24px;
    color: var(--color-text-1);
    height: 504px
}

.bottom[data-v-b06dc564] {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 24px
}

.title[data-v-c25dd06d] {
    font-weight: 600;
    color: var(--color-text-1);
    margin-bottom: 18px
}

.title2[data-v-c25dd06d] {
    font-weight: 400;
    color: var(--color-text-1);
    margin-bottom: 6px
}

.title3[data-v-c25dd06d] {
    font-weight: 600;
    color: var(--color-theme-2);
    margin-bottom: 6px
}

.content[data-v-c25dd06d] {
    font-weight: 400;
    color: var(--color-text-2);
    margin-bottom: 10px
}

.kling-dialog-no-padding[data-v-4a8febf0] {
    position: relative
}

.kling-dialog-no-padding .video[data-v-4a8febf0] {
    max-width: 80vw;
    max-height: 80vh;
    border-radius: 12px;
    display: block
}

.kling-dialog-no-padding .close[data-v-4a8febf0] {
    position: absolute;
    top: -48px;
    right: -48px;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    background: var(--color-other-1);
    color: var(--color-text-1);
    cursor: pointer
}

.lora-ideas[data-v-55828f35] {
    width: 100%;
    height: 100%;
    position: relative;
    margin-top: 18px
}

.lora-ideas[data-v-55828f35] .virtual-waterfall {
    padding: 0!important
}

.lora-ideas .lora-ideas-header[data-v-55828f35] {
    height: 40px;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.lora-ideas .lora-ideas-header span[data-v-55828f35] {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    color: var(--color-text-1)
}

.lora-ideas .lora-ideas-header span[data-v-55828f35]:last-child {
    cursor: pointer
}

.lora-ideas .lora-shadow-bottom-btn[data-v-55828f35] {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 42px 0;
    justify-content: center
}

[data-v-0ff3b3d1] .create-lora .content .top {
    flex-shrink: 0
}

.lora-training-progress[data-v-0ff3b3d1] {
    height: 480px;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--color-border-container);
    background: var(--color-bg-primary)
}

.lora-training-progress .video-img[data-v-0ff3b3d1] {
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto
}

.lora-training-progress .video-img[data-v-0ff3b3d1]:after {
    content: "";
    background: var(--color-fill-black-2);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

.lora-training-progress .video-img[data-v-0ff3b3d1]:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(100px);
    backdrop-filter: blur(100px)
}

.lora-training-progress .video-img img[data-v-0ff3b3d1] {
    position: absolute
}

.lora-training-progress .video-img .img1[data-v-0ff3b3d1] {
    height: 100%;
    z-index: 3
}

.lora-training-progress .video-img .img2[data-v-0ff3b3d1] {
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: 1
}

.lora-training-progress .lora-progress-content[data-v-0ff3b3d1] {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    border-radius: 12px
}

.lora-training-progress .lora-progress-content[data-v-0ff3b3d1] .el-progress-bar__outer {
    background-color: var(--color-fill-disabled)!important
}

.lora-training-progress .lora-progress-content[data-v-0ff3b3d1] .el-progress__text {
    margin-left: 12px
}

.lora-training-progress .lora-progress-content[data-v-0ff3b3d1] .el-progress__text span {
    color: var(--color-theme-2)
}

.lora-training-progress .lora-progress-content .lora-progress[data-v-0ff3b3d1] {
    width: 502px
}

.lora-training-progress .lora-progress-content .lora-progress-text[data-v-0ff3b3d1] {
    width: 536px;
    text-align: center;
    font-size: 14px;
    line-height: 24px;
    display: inline-block;
    margin-top: 26px;
    color: #c5c7d5
}

.lora-training-progress .lora-progress-content .lora-btn-list[data-v-0ff3b3d1] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    gap: 12px
}

.lora-training-progress .lora-progress-content .success-btn-list[data-v-0ff3b3d1] {
    margin-top: 32px
}

.lora-training-progress .lora-success-img[data-v-0ff3b3d1] {
    width: 108px;
    height: 144px;
    border-radius: 8px
}

.lora-training-progress .lora-progress-tips[data-v-0ff3b3d1] {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    text-align: center;
    display: inline-block;
    margin-top: 16px;
    color: var(--color-text-1)
}

.lora-training-progress .lora-progress-count[data-v-0ff3b3d1] {
    display: inline-block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: var(--color-text-2)
}

.lora-training-progress .lora-btn[data-v-0ff3b3d1] {
    padding: 6px 24px
}

.lora-progress-loading[data-v-0ff3b3d1] {
    display: flex;
    justify-content: center
}

.delete-icon[data-v-0ff3b3d1] {
    position: absolute;
    top: 16px;
    right: 16px
}

.example-item[data-v-d3e7b6d1] {
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%
}

.example-item__bottom[data-v-d3e7b6d1] {
    width: 100%;
    background: var(--color-theme-3);
    padding: 0 12px;
    height: 56px;
    justify-content: space-between;
    font-size: 12px;
    gap: 3px;
    color: var(--color-text-1)
}

.example-item__bottom span[data-v-d3e7b6d1] {
    flex: 1;
    overflow: hidden
}

.example-item .play-icon[data-v-d3e7b6d1] {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    border: 1px solid var(--color-other-5);
    background: var(--color-other-6);
    position: absolute;
    top: 8px;
    right: 4px;
    color: var(--color-text-1)
}

#loreExampleBox[data-v-ba9824ca] {
    height: 100%
}

#icon[data-v-ba9824ca] {
    margin-left: 4px;
    transform: rotate(0);
    transition: all .4s
}

.example-title[data-v-ba9824ca] {
    font-size: 16px;
    font-weight: 500;
    justify-content: space-between;
    color: var(--color-text-1);
    height: 24px;
    margin-bottom: 16px
}

.example-title a[data-v-ba9824ca] {
    font-size: 14px;
    font-weight: 400;
    gap: 4px;
    cursor: pointer;
    color: var(--color-theme-2);
    text-decoration: none
}

.step1-content[data-v-ba9824ca] {
    display: flex;
    gap: 16px;
    height: calc(100% - 40px)
}

.step1-content .right[data-v-ba9824ca],.step1-content .left[data-v-ba9824ca] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%
}

.step1-content .right span[data-v-ba9824ca],.step1-content .left span[data-v-ba9824ca] {
    line-height: 24px;
    font-size: 14px;
    color: var(--color-text-1)
}

.step1-content .right[data-v-ba9824ca] {
    flex: 1;
    overflow: hidden
}

.step1-content .right .example-group[data-v-ba9824ca] {
    display: flex;
    gap: 16px
}

.step2-content[data-v-ba9824ca] {
    color: var(--color-text-2);
    font-size: 12px;
    height: calc(100% - 40px)
}

.step2-content .example-group[data-v-ba9824ca] {
    display: flex;
    gap: 16px
}

.step2-content .bottom[data-v-ba9824ca] {
    margin-top: 24px;
    color: var(--color-text-1)
}

.supplement-video-item[data-v-20158f3f] {
    overflow: hidden;
    position: relative
}

.supplement-video-item .cover[data-v-20158f3f] {
    width: 100%;
    height: 52px;
    background: linear-gradient(0deg,#000c,#0000 94.05%);
    position: absolute;
    bottom: 0;
    z-index: 1
}

.supplement-video-item .msg[data-v-20158f3f] {
    position: absolute;
    bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-1);
    z-index: 2;
    width: 100%;
    padding: 0 8px;
    font-size: 12px;
    gap: 8px
}

.supplement-video-item .msg span[data-v-20158f3f] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.supplement-video-item .msg .del[data-v-20158f3f] {
    cursor: pointer;
    width: 20px;
    height: 20px
}

.supplement-video-item .fail-box[data-v-20158f3f] {
    width: 100%;
    height: 100%
}

.supplement-video-item .fail-box[data-v-20158f3f]:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg,#000c,#0000 94.05%);
    width: 100%;
    height: 56px;
    z-index: 1;
    border-radius: 8px;
    overflow: hidden
}

.supplement-video-item .progress-box[data-v-20158f3f] {
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative
}

.supplement-video-item .progress-box__content[data-v-20158f3f] {
    z-index: 2;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    gap: 8px;
    font-size: 12px;
    background-color: var(--color-other-1)
}

[data-v-790c4548] .el-upload-dragger {
    background-color: var(--upload-background);
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    border-radius: 0
}

[data-v-790c4548] .el-upload-dragger:hover {
    filter: brightness(1.1)
}

[data-v-790c4548] .el-upload-dragger:active {
    filter: brightness(.9)
}

[data-v-790c4548] .el-upload {
    width: 100%;
    height: 100%;
    cursor: pointer
}

[data-v-790c4548] .el-upload.is-disabled .el-upload-dragger {
    background-color: var(--upload-background)
}

.upload[data-v-790c4548] {
    width: 100%;
    color: var(--color-text-1)
}

.upload .title[data-v-790c4548] {
    color: var(--color-text-1);
    font-size: 14px;
    gap: 8px;
    margin-top: var(--title-margin-top)
}

.upload .tips[data-v-790c4548] {
    color: var(--color-text-3);
    font-size: 12px;
    margin-top: 8px
}

.upload .upload-item[data-v-790c4548] {
    width: 100%;
    height: 100%
}

.lora-progress-explain[data-v-bcff16b5] {
    width: 100%;
    padding: 12px 16px;
    background: var(--color-bg-primary);
    height: 42px;
    border-radius: 8px
}

.lora-progress-explain .lora-progress[data-v-bcff16b5] {
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start
}

.lora-progress-explain .lora-progress ul[data-v-bcff16b5],.lora-progress-explain .lora-progress li[data-v-bcff16b5] {
    margin: 0;
    padding: 0;
    list-style: none
}

.lora-progress-explain .lora-progress .lora-insufficient-progress[data-v-bcff16b5] {
    height: 6px;
    margin-right: 4px;
    display: flex;
    overflow: hidden
}

.lora-progress-explain .lora-progress .lora-insufficient-progress li[data-v-bcff16b5] {
    width: 2px;
    height: 6px;
    margin-right: 4px;
    border-radius: 24px
}

.lora-progress-explain .lora-progress .lora-commonly-progress[data-v-bcff16b5],.lora-progress-explain .lora-progress .lora-commonly-progress li[data-v-bcff16b5] {
    height: 10px
}

.lora-progress-explain .lora-progress .lora-excellent-progress[data-v-bcff16b5],.lora-progress-explain .lora-progress .lora-excellent-progress li[data-v-bcff16b5] {
    height: 14px
}

.lora-progress-explain .lora-progress-status[data-v-bcff16b5] {
    margin-top: 4px;
    width: 368px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.lora-progress-explain .lora-progress-status span[data-v-bcff16b5] {
    font-size: 12px;
    line-height: 20px
}

.lora-progress-explain .progress-count[data-v-bcff16b5] {
    position: relative;
    top: 2px;
    left: 6px;
    font-size: 12px;
    color: var(--color-text-1)
}

.lora-progress-explain .progress-count .status-text[data-v-bcff16b5] {
    color: var(--count-theme-color)
}

.lora-progress-explain .progress-count span span[data-v-bcff16b5] i {
    color: var(--count-theme-color);
    font-style: normal
}

.count-down[data-v-88a9c35d] {
    padding: 0 4px;
    background: #e01e00;
    color: #fff;
    position: absolute;
    height: 26px;
    justify-content: center;
    border-radius: 6px;
    gap: 2px
}

.count-down .n[data-v-88a9c35d] {
    font-family: MiSans Latin VF;
    font-size: 11px;
    font-weight: 600;
    width: 15px;
    border-radius: 4px;
    text-align: center;
    background: linear-gradient(180deg,#ffcf9966,#ff725c66)
}

.count-down .l[data-v-88a9c35d] {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    width: var(--l-width);
    margin-top: -2px
}

.count-down-simple[data-v-88a9c35d] {
    height: 100%;
    gap: 2px
}

.count-down-simple .n[data-v-88a9c35d] {
    width: 15px;
    font-size: 11px;
    font-weight: 600;
    text-align: center
}

.count-down-simple .l[data-v-88a9c35d] {
    width: var(--l-width);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    margin-top: -2px
}

.membership-and-property[data-v-0e62b80e] {
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    height: 32px;
    line-height: 32px;
    background: var(--color-other-2);
    border-radius: 8px
}

.membership-and-property .property[data-v-0e62b80e] {
    display: inline-flex;
    align-items: center;
    cursor: pointer
}

.membership-and-property .property svg[data-v-0e62b80e] {
    margin-right: 2px
}

.membership-and-property .property .value[data-v-0e62b80e] {
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: 600
}

.membership-and-property .pipe[data-v-0e62b80e] {
    padding: 0 16px;
    color: var(--color-text-3)
}

.membership-and-property .membership[data-v-0e62b80e] {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-1);
    cursor: pointer
}

.membership-and-property .membership .member[data-v-0e62b80e] {
    background: linear-gradient(148deg,#d6d7ff,#fff);
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--color-text-1)
}

.membership-and-property .membership .member-tip[data-v-0e62b80e] {
    display: inline-flex;
    align-items: center;
    gap: 2px
}

.membership-and-property .coupon-activity-tag[data-v-0e62b80e] {
    cursor: pointer;
    margin-left: 8px;
    display: inline-flex;
    background: linear-gradient(284deg,#ffc175,#ffefc6);
    border-radius: 5px;
    height: 20px;
    padding: 3px 6px;
    color: #753f0c;
    font-size: 12px;
    font-weight: 500;
    position: relative
}

.membership-and-property .coupon-activity-tag img[data-v-0e62b80e] {
    width: 16px;
    position: absolute;
    top: -10px;
    right: -8px
}

.lora-step-box[data-v-d4933e77],.lora-step-box .lora-step[data-v-d4933e77] {
    display: flex;
    align-items: center
}

.lora-step-box .lora-step__step[data-v-d4933e77] {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    margin-right: 8px;
    background: var(--color-other-5);
    color: var(--color-bg-page)
}

.lora-step-box .lora-step__step-active[data-v-d4933e77] {
    background: var(--color-theme-2);
    color: var(--color-bg-page)
}

.lora-step-box .lora-step__step-finish[data-v-d4933e77] {
    background: var(--color-other-5);
    color: var(--color-text-1)
}

.lora-step-box .lora-step__line[data-v-d4933e77] {
    width: 80px;
    border-bottom: 1px rgba(255,255,255,.24) dashed;
    margin: 0 16px
}

.notification-content[data-v-ff071689] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.notification-content .title[data-v-ff071689] {
    color: #fff;
    line-height: 26px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px
}

.notification-content .description[data-v-ff071689] {
    margin-bottom: 16px;
    line-height: 24px;
    color: #fff
}

.create-lora[data-v-8e22032d] {
    width: 100%;
    height: 100%;
    background: var(--color-bg-page);
    display: flex;
    flex-direction: column
}

.create-lora .header[data-v-8e22032d] {
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-bottom: 1px solid var(--color-border-frame);
    margin-bottom: 32px
}

.create-lora .header .left[data-v-8e22032d] {
    position: absolute;
    left: 0;
    height: 64px
}

.create-lora .header .left .name[data-v-8e22032d] {
    font-weight: 500;
    font-size: 16px;
    color: var(--color-text-1);
    gap: 6px;
    cursor: pointer;
    line-height: 32px
}

.create-lora .header .left .input-box[data-v-8e22032d] {
    gap: 12px;
    font-size: 14px;
    height: 32px;
    position: relative
}

.create-lora .header .left .bar[data-v-8e22032d] {
    width: 1px;
    height: 16px;
    background: var(--color-border-line);
    margin-right: 16px
}

.create-lora .header .right[data-v-8e22032d] {
    position: absolute;
    right: 32px
}

.create-lora .content[data-v-8e22032d] {
    margin: auto;
    width: calc(100% - 64px);
    max-width: 1664px;
    min-width: 1376px;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.create-lora .content .prompt[data-v-8e22032d] {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    color: var(--color-text-1)
}

.create-lora .content .progress-explain[data-v-8e22032d] {
    padding: 16px 0
}

.create-lora .content .center[data-v-8e22032d] {
    flex: 1;
    border-radius: 8px;
    border: 1px solid var(--color-border-container);
    overflow: hidden;
    background: var(--color-bg-primary)
}

.create-lora .content .center .center-initial[data-v-8e22032d] {
    width: 100%;
    height: 100%;
    position: relative
}

.create-lora .content .center .center-initial__content[data-v-8e22032d] {
    width: 100%;
    height: calc(100% - 56px)
}

.create-lora .content .center .center-initial__content .main-video[data-v-8e22032d] {
    width: 100%;
    height: 100%;
    position: relative
}

.create-lora .content .center .center-initial__content .main-video .filename[data-v-8e22032d] {
    width: 100%;
    position: absolute;
    bottom: 0;
    color: var(--color-text-1);
    font-size: 16px;
    font-weight: 500
}

.create-lora .content .center .center-initial__content .main-video .filename span[data-v-8e22032d] {
    z-index: 1;
    position: absolute;
    bottom: 24px;
    left: 24px
}

.create-lora .content .center .center-initial__content .main-video .filename[data-v-8e22032d]:after {
    width: 100%;
    height: 218px;
    left: 0;
    position: absolute;
    content: "";
    bottom: -8px;
    background: var(--color-gradient-black);
    z-index: 0
}

.create-lora .content .center .center-initial__content .main-video .replace[data-v-8e22032d] {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: var(--color-bg-popover-1);
    border-radius: 8px;
    color: var(--color-text-1);
    cursor: pointer;
    z-index: 1
}

.create-lora .content .center .center-initial__content .other-video[data-v-8e22032d] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 16px
}

.create-lora .content .center .center-initial__content .other-video[data-v-8e22032d]::-webkit-scrollbar {
    display: none
}

.create-lora .content .center .center-initial__content .other-video .text[data-v-8e22032d] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-1);
    margin-bottom: 12px;
    margin-top: 12px;
    border-bottom: 1px solid var(--color-border-frame);
    height: 40px;
    line-height: 40px;
    vertical-align: middle
}

.create-lora .content .center .center-initial__content .other-video__items[data-v-8e22032d] {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 12px
}

.create-lora .content .center .center-initial__content .other-video__items .item[data-v-8e22032d] {
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1/1;
    cursor: pointer;
    border: 1px solid var(--color-border-container)
}

.create-lora .content .center .center-initial__content .other-video__items .fail-item[data-v-8e22032d] {
    border-radius: 8px;
    height: fit-content;
    background: var(--color-other-1)
}

.create-lora .content .center .center-initial__content .other-video__items .fail-item .item[data-v-8e22032d] {
    border: none;
    border-radius: 8px 8px 0 0
}

.create-lora .content .center .center-initial__content .other-video__items .fail-item .fail-reason-box[data-v-8e22032d] {
    height: 56px;
    padding: 8px 12px;
    display: flex;
    gap: 4px;
    font-size: 12px
}

.create-lora .content .center .center-initial__content .other-video__items .fail-item .fail-reason-box .fail-reason[data-v-8e22032d] {
    flex: 1
}

.create-lora .content .center .center-initial .example[data-v-8e22032d] {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-radius: 8px 8px 0 0;
    border-top: 1px solid var(--color-border-container);
    background: var(--color-bg-secondary);
    box-shadow: 0 -8px 32px #0009;
    padding: 16px;
    transition: all .4s;
    z-index: 3;
    max-height: 1000px
}

.create-lora .content .center .bottom-training[data-v-8e22032d] {
    flex: 1
}

.create-lora .content .trainingContent[data-v-8e22032d] {
    overflow-y: auto
}

.create-lora .content .trainingContent[data-v-8e22032d]::-webkit-scrollbar {
    display: none
}

.create-lora .footer[data-v-8e22032d] {
    height: 68px;
    padding: 0 32px;
    border-top: 1px solid var(--color-border-frame);
    color: var(--color-text-2);
    font-size: 14px;
    margin-top: 32px;
    justify-content: space-between
}

.create-lora .footer .a[data-v-8e22032d] {
    text-decoration: underline;
    text-underline-position: from-font;
    cursor: pointer
}

.create-lora .footer .bottom-btns[data-v-8e22032d] {
    display: flex;
    gap: 12px;
    justify-content: flex-end
}

.create-lora .footer .bottom-btns .submit-btn[data-v-8e22032d] {
    position: relative
}

.create-lora .footer .bottom-btns .submit-btn img[data-v-8e22032d] {
    position: absolute;
    top: -17px;
    right: -6px
}

.create-lora .footer .bottom-btns .origin-price[data-v-8e22032d] {
    position: relative
}

.create-lora .footer .bottom-btns .origin-price[data-v-8e22032d]:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 6%;
    height: 1px;
    width: 88%;
    background: var(--line-color);
    opacity: .6;
    transform: rotate(6deg)
}

.container[data-v-ddfa5402] {
    margin-bottom: 60px
}

.container .group-item[data-v-ddfa5402] {
    margin-bottom: 24px
}

.container .group-item h4[data-v-ddfa5402] {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-text-2);
    margin-bottom: 12px
}

.container .group-item[data-v-ddfa5402]:last-child {
    margin-bottom: 0
}

.container .add-edit-project[data-v-ddfa5402] {
    width: 240px;
    height: 288px;
    border-radius: 12px;
    background: var(--color-other-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer
}

.container .add-edit-project .add-icon-box[data-v-ddfa5402] {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: var(--color-other-1);
    display: flex;
    align-items: center;
    justify-content: center
}

.container .add-edit-project .add-edit-project-title[data-v-ddfa5402] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-1);
    margin-top: 30px
}

.container .group-add[data-v-ddfa5402] {
    margin-bottom: 24px
}

.container .list-container[data-v-ddfa5402] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.container .list-container .edit-project-item[data-v-ddfa5402] {
    width: 240px;
    height: 288px;
    border-radius: 12px;
    overflow: hidden;
    position: relative
}

.container .list-container .edit-project-item .select-box[data-v-ddfa5402] {
    top: 10px;
    left: 10px;
    position: absolute;
    cursor: pointer;
    z-index: 1
}

.container .list-container .edit-project-item .edit-project-item-image-box-hover:hover .edit-project-item-btn[data-v-ddfa5402] {
    opacity: 1;
    z-index: 2
}

.container .list-container .edit-project-item .edit-project-item-image-box-hover[data-v-ddfa5402]:hover:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--color-fill-black-1);
    z-index: 1
}

.container .list-container .edit-project-item .edit-project-item-image-box[data-v-ddfa5402] {
    height: 240px;
    position: relative;
    background: var(--color-other-1)
}

.container .list-container .edit-project-item .edit-project-item-image-box .edit-project-item-image[data-v-ddfa5402] {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.container .list-container .edit-project-item .edit-project-item-operate[data-v-ddfa5402] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--color-other-2);
    cursor: pointer
}

.container .list-container .edit-project-item .edit-project-item-operate p[data-v-ddfa5402] {
    color: var(--color-text-2)
}

.container .list-container .edit-project-item .edit-project-item-btn[data-v-ddfa5402] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 0
}

.container .empty-container[data-v-ddfa5402] {
    transition: all .4s;
    text-align: center
}

.container .empty-container .empty[data-v-ddfa5402] {
    padding-top: 80px
}

.container .empty-container .empty .buttons[data-v-ddfa5402] {
    margin-top: 32px;
    text-align: center
}

.container .empty-container .empty .buttons button[data-v-ddfa5402] {
    margin-right: 16px
}

.header-bar[data-v-2219dd23] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--color-text-1);
    padding-bottom: 24px;
    position: sticky;
    top: 100px;
    z-index: 3;
    background: var(--color-bg-page)
}

.header-bar .split[data-v-2219dd23] {
    color: var(--color-border-line)
}

.header-bar .operation[data-v-2219dd23] {
    display: flex;
    gap: 16px;
    align-items: center
}

.header-bar .operation .checkbox svg[data-v-2219dd23] {
    margin-right: 6px
}

.header-bar .folder-name[data-v-2219dd23] {
    display: flex;
    max-width: 120px;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-text-1)
}

.my-edit-list[data-v-2219dd23] {
    margin-bottom: 60px
}

.my-edit-list .my-edit-list-container[data-v-2219dd23] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

body.mobile .preset-item-table[data-v-5092f790] {
    width: 100%!important
}

body.mobile .filter[data-v-5092f790] {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start
}

.my-presets-box .filter[data-v-5092f790] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 24px;
    position: sticky;
    top: 100px;
    background: var(--color-bg-page);
    z-index: 2
}

.my-presets-box .filter-right[data-v-5092f790] {
    display: flex;
    align-items: center;
    gap: 16px
}

.my-presets-box .filter .checkbox svg[data-v-5092f790] {
    margin-right: 6px
}

.my-presets-box .filter .operation-query[data-v-5092f790] {
    width: 240px
}

.my-presets-box .filter .bar[data-v-5092f790] {
    color: var(--color-border-line)
}

.my-presets-box .preset-list[data-v-5092f790] {
    display: flex
}

.my-presets-box .preset-list .preset-empty-wrap[data-v-5092f790] {
    padding-top: 80px;
    width: 100%;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center
}

.my-presets-box .preset-list .preset-empty-wrap .empty-info[data-v-5092f790] {
    color: var(--color-text-3);
    height: 24px;
    font-size: 14px;
    line-height: 24px;
    margin: 12px 0 16px
}

.my-presets-box .preset-list .preset-list-view[data-v-5092f790] {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--color-border-container);
    background: var(--color-bg-primary)
}

.my-presets-box .preset-list .preset-list-view .list-item[data-v-5092f790] {
    width: 100%;
    display: flex;
    height: 88px
}

.my-presets-box .preset-list .preset-list-view .list-item.header[data-v-5092f790] {
    height: 36px
}

.my-presets-box .preset-list .preset-list-view .list-item.header>div[data-v-5092f790] {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 32px;
    color: var(--color-text-2)
}

.my-presets-box .preset-list .preset-list-view .list-item .name[data-v-5092f790] {
    height: 24px;
    line-height: 24px;
    margin: auto 0;
    flex: 1 1 240px
}

.my-presets-box .preset-list .preset-list-view .list-item .name .select-box[data-v-5092f790] {
    margin-right: 16px;
    cursor: pointer;
    vertical-align: middle
}

.my-presets-box .preset-list .preset-list-view .list-item .name .select-box svg[data-v-5092f790] {
    transform: translateY(2px)
}

.my-presets-box .preset-list .preset-list-view .list-item .preset[data-v-5092f790] {
    flex: 1 1 926px;
    margin: auto 0;
    height: 48px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis
}

.my-presets-box .preset-list .preset-list-view .list-item .operation[data-v-5092f790] {
    flex: 0 0 212px;
    display: flex;
    gap: 24px
}

.my-presets-box .preset-list .preset-list-view .list-item .operation-btn[data-v-5092f790] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    color: var(--color-text-1)
}

.my-presets-box .preset-list .preset-list-view .list-item .operation-btn.disabled[data-v-5092f790] {
    color: var(--color-text-3);
    cursor: not-allowed
}

.my-presets-box .preset-list .preset-list-view .list-item>div[data-v-5092f790] {
    padding: 0 32px;
    color: var(--color-text-1)
}

.my-presets-box .preset-list .preset-list-view .list-item[data-v-5092f790]:nth-child(odd) {
    background: var(--color-fill-light)
}

.my-presets-box .preset-list.table[data-v-5092f790] {
    flex-wrap: wrap;
    gap: 12px
}

.my-presets-box .preset-list .preset-item-table[data-v-5092f790] {
    position: relative;
    width: calc(33.3% - 8px);
    height: 142px;
    border-radius: 8px;
    background: var(--color-bg-primary);
    padding: 16px 24px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.my-presets-box .preset-list .preset-item-table .name-box[data-v-5092f790] {
    height: 26px;
    margin-bottom: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.my-presets-box .preset-list .preset-item-table .name-box .name[data-v-5092f790] {
    color: var(--color-text-1);
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600
}

.my-presets-box .preset-list .preset-item-table .name-box .select-box[data-v-5092f790] {
    cursor: pointer
}

.my-presets-box .preset-list .preset-item-table .prompt[data-v-5092f790] {
    height: 44px;
    font-size: 13px;
    color: var(--color-text-2);
    line-height: 22px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis
}

.my-presets-box .preset-list .preset-item-table .operation[data-v-5092f790] {
    flex-shrink: 0;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 8px;
    gap: 16px
}

.my-presets-box .preset-list .preset-item-table .operation svg[data-v-5092f790] {
    color: var(--color-text-1);
    cursor: pointer
}

.my-presets-box .preset-list .preset-item-table .operation.disabled svg[data-v-5092f790] {
    color: var(--color-text-3);
    cursor: not-allowed
}

.edit-preset-dialog-content[data-v-5092f790] {
    display: flex;
    flex-direction: column
}

.edit-preset-dialog-content .title[data-v-5092f790] {
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    color: var(--color-text-1);
    margin-bottom: 8px
}

.edit-preset-dialog-content .edit-input[data-v-5092f790] {
    margin-bottom: 24px
}

.edit-preset-dialog-content .edit-operation[data-v-5092f790] {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px
}

.kling-dialog .upload-cover-content[data-v-132249c0] {
    display: flex;
    gap: 24px
}

.kling-dialog .upload-cover-content .upload-left[data-v-132249c0] {
    width: 330px;
    height: 440px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-fill-light)
}

.kling-dialog .upload-cover-content .upload-left[data-v-132249c0] .el-upload-dragger {
    padding: 0
}

.kling-dialog .upload-cover-content .upload-right[data-v-132249c0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--color-text-1)
}

.kling-dialog .upload-cover-content .upload-right h2[data-v-132249c0] {
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 22px
}

.kling-dialog .upload-cover-content .upload-right .upload-cover-tip[data-v-132249c0] {
    font-size: 14px;
    margin-bottom: 26px;
    line-height: 22px
}

.kling-dialog .upload-cover-content .upload-right .upload-right-tips[data-v-132249c0] {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border-container);
    display: flex;
    gap: 24px
}

.kling-dialog .upload-cover-content .upload-right .upload-right-tips span[data-v-132249c0] {
    display: inline-block;
    font-size: 14px;
    margin-bottom: 12px;
    text-align: left;
    line-height: 24px
}

.kling-dialog .upload-cover-content .upload-right .upload-right-tips .upload-lora-cover .lora-cover[data-v-132249c0] {
    width: 210;
    height: 280px;
    position: relative;
    border-radius: 8px;
    overflow: hidden
}

.kling-dialog .upload-cover-content .upload-right .upload-right-tips .upload-lora-cover .lora-cover img[data-v-132249c0] {
    height: 100%
}

.kling-dialog .upload-cover-content .upload-right .upload-right-tips .upload-lora-cover .lora-cover .lora-cover-name[data-v-132249c0] {
    left: 8px;
    bottom: 8px;
    word-break: break-all;
    position: absolute;
    margin-bottom: 0;
    justify-content: space-between;
    width: calc(100% - 16px)
}

.kling-dialog .upload-cover-content .upload-right .upload-right-tips .upload-lora-cover .lora-cover .lora-cover-name div[data-v-132249c0]:first-child {
    word-break: break-all;
    overflow: hidden;
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 4px
}

.kling-dialog .upload-cover-content .upload-right .upload-right-tips .upload-lora-cover .lora-cover .lora-cover-name div[data-v-132249c0]:last-child {
    height: 24px;
    display: flex;
    padding: 0 8px;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    background: var(--color-fill-black-1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    font-size: 12px
}

.kling-dialog .upload-cover-content .upload-right .upload-right-tips .upload-lora-head[data-v-132249c0] {
    flex: 1;
    overflow: hidden
}

.kling-dialog .upload-cover-content .upload-right .upload-right-tips .upload-lora-head .lora-avatar[data-v-132249c0] {
    display: flex;
    align-items: center;
    width: 100%;
    height: 64px;
    padding: 8px;
    border-radius: 8px;
    background: var(--color-other-1)
}

.kling-dialog .upload-cover-content .upload-right .upload-right-tips .upload-lora-head .lora-avatar div[data-v-132249c0] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-shrink: 0
}

.kling-dialog .upload-cover-content .upload-right .upload-right-tips .upload-lora-head .lora-avatar div img[data-v-132249c0] {
    width: 100%
}

.kling-dialog .upload-cover-content .upload-right .upload-right-tips .upload-lora-head .lora-avatar p[data-v-132249c0] {
    word-break: break-all;
    overflow: hidden;
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    margin-left: 8px;
    margin-bottom: 0
}

.kling-dialog .upload-lora-card[data-v-132249c0] {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%
}

.kling-dialog .upload-lora-card .upload-cover-img[data-v-132249c0] {
    width: 100%;
    flex: 1;
    overflow: hidden
}

.kling-dialog .upload-lora-card .upload-cover-img img[data-v-132249c0] {
    width: 100%;
    height: 100%
}

.kling-dialog .upload-lora-card .upload-cover-name[data-v-132249c0] {
    position: absolute;
    bottom: 0;
    left: 0;
    cursor: pointer;
    display: flex;
    height: 80px;
    width: 330px;
    padding: 0 16px 12px;
    justify-content: space-between;
    align-items: flex-end;
    overflow: hidden;
    color: var(--color-text-1);
    background: var(--color-gradient-container)
}

.kling-dialog .upload-lora-card .upload-cover-name span[data-v-132249c0] {
    flex: 1;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    word-break: break-all;
    text-overflow: ellipsis;
    display: inline-block;
    margin-right: 16px;
    font-size: 12px
}

.kling-dialog .upload-lora-card .upload-cover-name .icon[data-v-132249c0] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--color-fill-black-1)
}

.kling-dialog .lora-body-content[data-v-10daea00] {
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.kling-dialog .input-box[data-v-10daea00] {
    gap: 16px;
    position: relative
}

.kling-dialog span[data-v-10daea00] {
    display: inline-block
}

.kling-dialog .left-content[data-v-10daea00] {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%
}

.kling-dialog .left-content .lora-bottom-list[data-v-10daea00] {
    border-radius: 8px;
    padding-top: 24px;
    min-height: 228px
}

.kling-dialog .left-content .lora-bottom-list .list-title[data-v-10daea00] {
    text-align: left;
    margin-bottom: 12px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    color: var(--color-text-1)
}

.kling-dialog .left-content .lora-bottom-list .list-title span[data-v-10daea00] {
    color: var(--color-text-2)
}

.kling-dialog .left-content .lora-bottom-list .bottom-list[data-v-10daea00] {
    display: flex;
    flex-wrap: wrap;
    max-height: 220px;
    overflow-y: auto
}

.kling-dialog .left-content .lora-bottom-list .bottom-list .vide-card[data-v-10daea00] {
    width: 200px;
    height: 200px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-other-2)
}

.kling-dialog .left-content .lora-bottom-list .bottom-list .vide-card[data-v-10daea00]:nth-of-type(4n) {
    margin-right: 0
}

.kling-dialog .left-content .lora-bottom-list .bottom-list .video-player-item[data-v-10daea00] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0
}

.kling-dialog .lora-body-head[data-v-10daea00] {
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--color-border-container)
}

.kling-dialog .lora-body-head .header-left[data-v-10daea00] {
    display: flex;
    align-items: center
}

.kling-dialog .lora-body-head .head-con[data-v-10daea00] {
    margin-right: 64px
}

.kling-dialog .lora-body-head .head-con .head-title[data-v-10daea00] {
    color: var(--color-text-2);
    font-size: 14px;
    margin-bottom: 8px;
    line-height: 24px
}

.kling-dialog .lora-body-head .head-con .name[data-v-10daea00] {
    height: 36px;
    color: var(--color-text-1)
}

.kling-dialog .lora-body-head .head-con .time[data-v-10daea00] {
    color: var(--color-text-1);
    height: 36px
}

.kling-dialog .lora-body-head .lora-head[data-v-10daea00] {
    margin-right: 32px;
    width: 90px;
    height: 120px;
    overflow: hidden;
    position: relative;
    border-radius: 8px
}

.kling-dialog .lora-body-head .lora-head img[data-v-10daea00] {
    height: 100%
}

.kling-dialog .lora-body-head .lora-head .upload-cover-icon[data-v-10daea00] {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--color-fill-black-1);
    color: var(--color-text-1);
    cursor: pointer
}

.kling-dialog .video-item-slot[data-v-10daea00] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 8px;
    font-size: 12px
}

.kling-dialog .video-item-slot .video-item_top[data-v-10daea00] {
    display: flex;
    justify-content: space-between
}

.kling-dialog .video-item-slot .video-item_bottom[data-v-10daea00] {
    display: flex;
    align-items: center
}

.kling-dialog .video-item-slot .video-item_bottom div[data-v-10daea00] {
    border-radius: 4px;
    background: var(--color-fill-black-1);
    line-height: 18px;
    padding: 4px 8px;
    margin-right: 4px;
    color: var(--color-text-1)
}

.kling-dialog .lora-body-bottom[data-v-10daea00] {
    display: flex;
    margin-top: 16px
}

.kling-dialog .lora-body-bottom .fail-btns__item[data-v-10daea00] {
    margin-right: 12px
}

.img[data-v-8add3972] {
    width: 100%;
    border-radius: 8px 8px 0 0;
    overflow: hidden
}

.content[data-v-8add3972] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px
}

.content .text[data-v-8add3972] {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: var(--color-text-1)
}

.content .text2[data-v-8add3972] {
    margin-top: 4px;
    margin-bottom: 24px
}

body.mobile .lora-item[data-v-4f1bb17f] {
    flex: .5
}

.lora-item[data-v-4f1bb17f] {
    width: 210px;
    height: 280px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    font-size: 14px
}

.lora-item__del[data-v-4f1bb17f] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4
}

.lora-item__favor[data-v-4f1bb17f] {
    position: absolute;
    top: 6px;
    right: 10px;
    z-index: 4
}

.lora-item__checkbox[data-v-4f1bb17f] {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4
}

.lora-item-content[data-v-4f1bb17f] {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    gap: 16px;
    color: var(--color-text-1)
}

.lora-item .fail-btns[data-v-4f1bb17f] {
    z-index: 2;
    position: absolute;
    bottom: 8px;
    width: 100%;
    display: flex;
    gap: 8px;
    padding: 0 8px
}

.lora-item .fail-btns__item[data-v-4f1bb17f] {
    padding: unset;
    width: 100%;
    height: 32px
}

.lora-item .fail-btns__item.border[data-v-4f1bb17f] {
    border: 1px solid var(--color-border-focused)
}

.lora-item .success-bottom[data-v-4f1bb17f] {
    width: 100%;
    position: absolute;
    bottom: 8px;
    padding: 0 8px;
    display: flex;
    justify-content: center;
    z-index: 2
}

.lora-item .success-bottom__unHover[data-v-4f1bb17f] {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-1);
    width: 100%;
    font-size: 14px;
    gap: 8px
}

.lora-item .success-bottom__unHover div[data-v-4f1bb17f] {
    height: 24px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 6px;
    background: var(--color-fill-black-1);
    padding: 3px 8px
}

.lora-item .success-bottom__unHover span[data-v-4f1bb17f] {
    flex: 1
}

.lora-item[data-v-4f1bb17f]:after {
    content: "";
    width: 100%;
    height: var(--bottom-cover-height);
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg,#000c,#0000 94.05%);
    z-index: 1
}

.lora-item .delete-item[data-v-4f1bb17f] {
    background: var(--color-other-2);
    font-size: 14px;
    color: var(--color-text-1);
    width: 100%;
    height: 100%
}

.lora-item .delete-item .delete-text[data-v-4f1bb17f] {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 24px);
    margin-bottom: 4px
}

.lora-cover[data-v-4f1bb17f]:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-fill-black-3);
    width: 100%;
    height: 100%;
    z-index: 1
}

.ellipsis[data-v-4f1bb17f] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    color: var(--color-text-1)
}

.ellipsis-box[data-v-4f1bb17f] {
    max-width: calc(100% - 16px);
    justify-content: center
}

.fail-tip[data-v-4f1bb17f] {
    display: flex;
    gap: 8px;
    align-items: center
}

.fail-tip__left[data-v-4f1bb17f] {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    background-color: var(--color-bg-tertiary)
}

.fail-tip__right[data-v-4f1bb17f] {
    height: 100%;
    color: var(--color-text-1)
}

body.mobile .create-item[data-v-78108edf] {
    flex: .5
}

.lora-list[data-v-78108edf] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.lora-list .create-item[data-v-78108edf] {
    background: var(--color-other-2);
    gap: 16px;
    color: var(--color-text-1);
    width: 210px;
    height: 280px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer
}

.lora-list .create-item__icon[data-v-78108edf] {
    width: 40px;
    height: 40px;
    background: var(--color-other-1);
    border-radius: 4px
}

.lora-list .empty[data-v-78108edf] {
    width: 100%;
    gap: 12px;
    padding-top: calc(25% - 62px);
    color: var(--color-text-3)
}

body.mobile .top[data-v-94a11435] {
    flex-direction: column;
    gap: 12px
}

.lora[data-v-94a11435] {
    height: calc(100% - 68px)
}

.lora .top[data-v-94a11435] {
    padding-bottom: 24px;
    position: sticky;
    top: 100px;
    background: var(--color-bg-page);
    display: flex;
    align-self: center;
    justify-content: space-between
}

.lora .top .top-right[data-v-94a11435] {
    height: 32px;
    display: flex;
    align-items: center;
    color: var(--color-text-1)
}

.lora .top .top-right .batch-btns[data-v-94a11435] {
    display: flex;
    align-items: center;
    gap: 16px
}

.lora .top .top-right .batch-btns .bar[data-v-94a11435] {
    color: var(--color-border-line)
}

.lora .top .top-right .batch-btns .checkbox svg[data-v-94a11435] {
    margin-right: 6px
}

.lora .content[data-v-94a11435] {
    overflow: auto
}

.operation p[data-v-667b8f45] {
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    color: var(--color-text-2);
    margin-bottom: 4px
}

.operation .error[data-v-667b8f45] {
    margin-top: 4px;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: var(--color-fill-error)
}

.guide-container[data-v-58095956] {
    position: fixed;
    z-index: 2200
}

.guide-container .mark[data-v-58095956] {
    display: flex;
    flex-direction: column;
    align-items: center
}

.guide-container .mark .mark-dot[data-v-58095956] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-fill-black-1);
    border: 4px solid var(--color-border-hover)
}

.guide-container .mark .mark-line[data-v-58095956] {
    width: 0px;
    height: 40px;
    border-left: 1px dashed var(--color-border-hover)
}

.guide-container .guide-content[data-v-58095956] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--color-border-component);
    padding: 24px;
    border-radius: 16px;
    box-shadow: var(--box-shadow-container);
    background: var(--color-bg-popover);
    width: 300px
}

.guide-container .guide-content h3[data-v-58095956] {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--text-color-1)
}

.guide-container .guide-content .btn[data-v-58095956] {
    text-align: right
}

.folder-operation[data-v-72cf0be5] {
    flex-shrink: 0;
    color: var(--color-text-1);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-weight: 400;
    gap: 6px;
    background-color: var(--color-other-1);
    border-radius: 8px;
    padding: 6px 16px;
    line-height: 24px
}

.folder-operation.disabled[data-v-72cf0be5] {
    cursor: not-allowed;
    background: var(--color-fill-disabled);
    color: var(--color-text-3)
}

.folder-operation .arrow[data-v-72cf0be5] {
    transform: rotate(180deg);
    transition: transform .3s
}

.folder-operation .arrow.active[data-v-72cf0be5] {
    transform: rotate(0)
}

.batch-add-to-folder-menu {
    max-height: 421px;
    overflow-y: auto;
    padding-bottom: 0!important
}

.batch-add-to-folder-menu.no-folder {
    padding-top: 0!important
}

.batch-add-to-folder-menu .dropdown-menu-item {
    width: 200px!important
}

.batch-add-to-folder-menu .divider {
    height: 1px!important;
    background: var(--color-other-6)!important;
    position: sticky;
    bottom: 52px;
    padding: 0!important
}

.batch-add-to-folder-menu .add-folder-button {
    color: var(--color-theme-2)!important;
    position: sticky;
    border-radius: 0 0 8px 8px;
    height: 52px!important;
    line-height: 52px!important;
    bottom: 0;
    background: var(--color-bg-popover-1)!important
}

.batch-add-to-folder-menu .add-folder-button:hover {
    background: var(--color-bg-popover-1)!important
}

.vip[data-v-3e2ba80d] {
    height: 20px;
    border-radius: 4px;
    padding: 0 6px;
    background: var(--color-other-1);
    color: var(--color-text-1);
    margin-left: 6px
}

.vip svg[data-v-3e2ba80d] {
    margin-right: 0!important
}

.vip.need-membership[data-v-3e2ba80d] {
    background: var(--color-theme-3);
    color: var(--color-theme-2)
}

.folder-item-container[data-v-fff8eaa3] {
    border-radius: 8px;
    margin-bottom: 16px;
    border: 1px solid transparent;
    cursor: pointer;
    overflow: hidden
}

.folder-item-container .img-full[data-v-fff8eaa3] {
    width: 200px;
    height: 200px
}

.folder-item-container .img-full img[data-v-fff8eaa3] {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.folder-item-container .img-empty[data-v-fff8eaa3] {
    width: 200px;
    height: 200px;
    background-color: var(--color-other-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.folder-item-container .img-empty span[data-v-fff8eaa3] {
    color: var(--color-text-3);
    font-weight: 400;
    font-size: 12px;
    line-height: 20px
}

.folder-item-container .img-list[data-v-fff8eaa3] {
    display: grid;
    height: 200px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    background-color: var(--color-text-5);
    gap: 1px
}

.folder-item-container .img-list .img-item[data-v-fff8eaa3] {
    width: 99.5px;
    background-color: var(--color-other-2);
    overflow: hidden
}

.folder-item-container .img-list .img-item[data-v-fff8eaa3]:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/3
}

.folder-item-container .img-list .img-item[data-v-fff8eaa3]:nth-child(2) {
    grid-column: 2/3;
    grid-row: 1/2
}

.folder-item-container .img-list .img-item[data-v-fff8eaa3]:nth-child(3) {
    grid-column: 2/3;
    grid-row: 2/3
}

.folder-item-container .img-list .img-item img[data-v-fff8eaa3] {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.folder-item-container[data-v-fff8eaa3]:last-child {
    margin-bottom: 0
}

.folder-item-container .folder-controls[data-v-fff8eaa3] {
    height: 40px;
    display: flex;
    padding: 0 8px;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-1);
    background-color: var(--color-other-1);
    gap: 8px
}

.folder-item-container .folder-controls .left[data-v-fff8eaa3] {
    font-size: 14px;
    display: flex;
    align-items: center;
    font-weight: 400;
    line-height: 24px;
    max-width: calc(100% - 32px)
}

.folder-item-container .folder-controls .left .name[data-v-fff8eaa3] {
    margin-right: 4px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    flex: 1
}

.folder-item-container .folder-controls .left .number[data-v-fff8eaa3] {
    color: var(--color-text-2)
}

.folder-item-container.selected[data-v-fff8eaa3] {
    border-color: var(--color-border-focused)
}

.folder-item-container.selected .folder-controls[data-v-fff8eaa3] {
    color: var(--color-text-5);
    background-color: var(--color-theme-1)
}

.folder-item-container.selected .folder-controls .name[data-v-fff8eaa3] {
    font-weight: 600
}

.folder-item-container.selected .folder-controls .number[data-v-fff8eaa3],.folder-item-container.selected .folder-controls[data-v-fff8eaa3] button {
    color: var(--color-text-5)
}

.folder-item-container.active[data-v-fff8eaa3] {
    border-color: var(--color-theme-2)
}

.folders-container[data-v-9f2a4831] {
    opacity: 0;
    width: 0;
    overflow-y: auto;
    transition: width .3s
}

.folders-container.expend[data-v-9f2a4831] {
    opacity: 1;
    width: 227px;
    padding-right: 24px;
    border-right: 1px solid var(--color-border-frame)
}

.folders-container .top-controls[data-v-9f2a4831] {
    padding-top: 4px;
    padding-bottom: 20px;
    position: sticky;
    z-index: 2;
    top: 0;
    background: var(--color-bg-page);
    display: flex;
    flex-direction: column;
    gap: 12px
}

.folders-container .top-controls .operation[data-v-9f2a4831] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    cursor: pointer
}

.folders-container .top-controls svg[data-v-9f2a4831] {
    cursor: pointer
}

.folders-container .empty-container[data-v-9f2a4831] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px
}

.folders-container .folders[data-v-9f2a4831] {
    margin-bottom: 60px
}

body.mobile .header-bar[data-v-5f78c674] {
    flex-direction: column;
    height: fit-content;
    align-items: flex-start;
    gap: 12px
}

body.mobile .header-bar .operation[data-v-5f78c674] {
    width: 100%
}

body.mobile .header-bar .operation>div[data-v-5f78c674] {
    flex-shrink: 0
}

body.mobile .my-materials-container[data-v-5f78c674] {
    left: 0;
    padding: 0 24px
}

body.mobile .my-materials-container .batch-operation[data-v-5f78c674] {
    left: 24px;
    right: 24px;
    transform: translate(0);
    overflow: auto
}

.my-materials-container[data-v-5f78c674] {
    display: flex;
    position: fixed;
    top: 100px;
    left: 220px;
    bottom: 0;
    right: 0;
    padding: 0 32px
}

.my-materials-container .main-content[data-v-5f78c674] {
    flex: 1;
    overflow-y: auto
}

.my-materials-container .main-content.shrink[data-v-5f78c674] {
    padding-left: 24px
}

.checkbox svg[data-v-5f78c674] {
    margin-right: 6px
}

.header-bar[data-v-5f78c674] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-text-1);
    padding-bottom: 24px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-bg-page)
}

.header-bar .operation[data-v-5f78c674] {
    display: flex;
    gap: 16px;
    align-items: center
}

.header-bar .selected-folder[data-v-5f78c674] {
    display: flex;
    gap: 8px;
    align-items: center
}

.header-bar .selected-folder .folder-name[data-v-5f78c674] {
    display: flex;
    max-width: 120px;
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-1)
}

.split[data-v-5f78c674] {
    color: var(--color-border-line)
}

.split.margin-gap[data-v-5f78c674] {
    margin: 0 8px
}

.batch-operation[data-v-5f78c674] {
    display: flex;
    gap: 24px;
    align-items: center;
    position: fixed;
    bottom: 40px;
    z-index: 2;
    left: calc(50% + 110px);
    transform: translate(-50%);
    border-radius: 12px;
    padding: 12px 24px;
    background-color: var(--color-bg-popover);
    box-shadow: var(--box-shadow-container)
}

.batch-operation .operation-buttons[data-v-5f78c674] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0
}

.batch-operation .operation-buttons.select-status[data-v-5f78c674] {
    min-width: 136px
}

.title[data-v-0357a2ad] {
    color: var(--color-text-1);
    line-height: 22px;
    gap: 8px
}

.description[data-v-0357a2ad] {
    color: var(--color-text-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 28px
}

.footer[data-v-0357a2ad] {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.footer .remind[data-v-0357a2ad] {
    display: flex;
    align-items: center;
    color: var(--color-text-1);
    gap: 8px;
    height: 24px;
    line-height: 24px
}

.footer .remind svg[data-v-0357a2ad] {
    color: var(--color-border-component)
}

.upload-container[data-v-b949b763] {
    display: flex;
    background-color: var(--color-bg-page);
    height: 100%;
    overflow: hidden
}

.upload-container .main-content[data-v-b949b763] {
    width: calc(100% - 128px);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    background-color: var(--color-bg-primary)
}

.upload-container .main-content .top[data-v-b949b763] {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px
}

.upload-container .main-content .top .filename[data-v-b949b763] {
    padding-left: 52px;
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-1);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.upload-container .main-content .top .operation[data-v-b949b763] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    align-items: center
}

.upload-container .main-content .top .operation .favor[data-v-b949b763] {
    color: var(--color-text-1)
}

.upload-container .main-content .media[data-v-b949b763] {
    width: 80%;
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
    margin: 24px 0
}

.upload-container .main-content .media .audio-box[data-v-b949b763] {
    height: 72%;
    aspect-ratio: 528/616;
    border-radius: 16px;
    background: var(--color-other-1);
    padding: 24px;
    display: flex;
    flex-direction: column
}

.upload-container .main-content .media .audio-box .audio-cover[data-v-b949b763] {
    width: 100%;
    aspect-ratio: 1/1;
    margin-bottom: 64px;
    border-radius: 8px;
    overflow: hidden;
    position: relative
}

.upload-container .main-content .media .audio-box .audio-cover img[data-v-b949b763] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.upload-container .main-content .media .audio-box .audio-media[data-v-b949b763] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 0
}

.upload-container .main-content .bottom[data-v-b949b763] {
    display: flex;
    gap: 8px
}

.upload-container .image-list[data-v-b949b763] {
    padding-top: 24px;
    padding-bottom: 32px;
    height: 100%;
    padding-right: 32px
}

body.mobile .main-content[data-v-b949b763] {
    width: 100%;
    padding: 16px
}

body.mobile .main-content .media[data-v-b949b763] {
    width: 100%
}

body.mobile .main-content .media .audio-box[data-v-b949b763] {
    padding: 0;
    width: 100%;
    height: unset;
    gap: 8px;
    background: unset
}

body.mobile .main-content .media .audio-box[data-v-b949b763] .play-btn {
    margin-right: 12px
}

body.mobile .main-content .media .audio-box .audio-cover[data-v-b949b763] {
    margin-bottom: 24px
}

body.mobile .header-bar[data-v-785ae4f9] {
    flex-direction: column;
    height: fit-content;
    align-items: flex-start;
    gap: 12px
}

body.mobile .header-bar .operation[data-v-785ae4f9] {
    width: 100%
}

body.mobile .header-bar .operation>div[data-v-785ae4f9] {
    flex-shrink: 0
}

.header-bar[data-v-785ae4f9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-text-1);
    padding-bottom: 24px;
    position: sticky;
    top: 100px;
    height: 56px;
    z-index: 2;
    background: var(--color-bg-page)
}

.header-bar .split[data-v-785ae4f9] {
    color: var(--color-border-line)
}

.header-bar .operation[data-v-785ae4f9] {
    display: flex;
    gap: 16px;
    align-items: center
}

.header-bar .operation .checkbox svg[data-v-785ae4f9] {
    margin-right: 6px
}

.header[data-v-61390373] {
    padding: 8px 0 24px;
    width: 100%;
    background: var(--color-bg-page);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.header .tabs[data-v-61390373] {
    width: 100%;
    height: 36px
}

.dialog-asset-manage-body[data-v-61390373] {
    z-index: 1000
}

.dialog-asset-manage-content[data-v-61390373] .my-materials-container {
    top: 156px;
    left: 0
}

.dialog-asset-manage-content[data-v-61390373] .uploads-container .header-bar,.dialog-asset-manage-content[data-v-61390373] .lora .top,.dialog-asset-manage-content[data-v-61390373] .my-presets-box .filter {
    top: 156px
}

.dialog-asset-manage-content[data-v-61390373] .my-edit-container {
    left: 0;
    top: 158px
}

.dialog-asset-manage-content .header[data-v-61390373] {
    position: sticky;
    top: 88px;
    z-index: 2;
    background: var(--color-bg-page);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.dialog-asset-manage-content .header .tabs[data-v-61390373] {
    width: 100%;
    height: 36px
}

.title-container[data-v-61390373] {
    display: flex;
    align-items: center;
    height: 64px;
    position: relative;
    box-sizing: border-box
}

.title-container[data-v-61390373]:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -32px;
    right: -32px;
    height: 1px;
    background-color: var(--color-border-frame)
}

.title-container .back[data-v-61390373] {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--color-other-2);
    border-radius: 8px;
    cursor: pointer;
    margin-right: 16px
}

.title-container .title[data-v-61390373] {
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: var(--color-text-1)
}

.dialog-asset-manage.el-dialog {
    border-radius: 0!important;
    background-color: var(--color-bg-page)!important
}

.dialog-asset-manage.el-dialog>.el-dialog__header {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--color-bg-page)
}

.video-container[data-v-1dbd824b] {
    margin-top: 16px;
    position: relative;
    overflow: hidden;
    border-radius: 8px
}

.video-container .video-bg-box[data-v-1dbd824b] {
    overflow: hidden;
    position: absolute;
    top: 0;
    opacity: .5
}

.video-container .video-bg-box[data-v-1dbd824b],.video-container .content[data-v-1dbd824b] {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 50vh;
    min-width: 160px
}

.video-container .content[data-v-1dbd824b] {
    position: relative;
    z-index: 1;
    object-fit: contain
}

.video-container .video-bg[data-v-1dbd824b] {
    width: 100%;
    height: 100%;
    filter: blur(120px)
}

.actions[data-v-1dbd824b] {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.actions .left[data-v-1dbd824b] {
    display: flex;
    gap: 8px
}

.actions .right[data-v-1dbd824b] {
    background: var(--color-other-2);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    border-radius: 8px
}

.actions .right .right-item[data-v-1dbd824b] {
    width: 28px!important;
    display: flex;
    justify-content: center;
    gap: 12px
}

.loading[data-v-c25c3405] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.loading .title[data-v-c25c3405] {
    color: var(--color-theme-2)
}

.loading .sub-title[data-v-c25c3405] {
    flex-shrink: 0;
    font-weight: 400;
    color: var(--color-text-2)
}

.loading .loading-content[data-v-c25c3405] {
    position: relative;
    display: flex;
    gap: 3px
}

.loading .loading-content .highlight[data-v-c25c3405] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

body.lang-en .tip[data-v-8732d235] {
    flex-direction: column
}

.inner[data-v-8732d235] {
    max-width: calc(100% - 48px);
    display: flex;
    flex-direction: column
}

.inner .membership-primary[data-v-8732d235] {
    color: var(--color-text-2)
}

.inner .progress-box[data-v-8732d235] {
    margin-bottom: 16px;
    gap: 8px
}

.inner .progress-box svg[data-v-8732d235] {
    width: 24px;
    flex-shrink: 0
}

.inner .tip[data-v-8732d235] {
    color: var(--color-text-2);
    font-size: 12px;
    line-height: 18px;
    margin-top: 4px;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.inner .purchase[data-v-8732d235] {
    background: var(--color-gradient-standard);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    margin-top: 16px
}

.progress[data-v-0f4ad06a] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.progress.mask[data-v-0f4ad06a] {
    position: relative;
    width: 100%;
    height: 100%
}

.progress.mask[data-v-0f4ad06a]:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-fill-black-3);
    z-index: 1;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

.progress .content[data-v-0f4ad06a] {
    background-color: var(--color-fill-light);
    height: 100%;
    font-size: 14px;
    color: var(--color-text-3);
    position: relative;
    padding: 0 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    width: 100%
}

.progress .content .failed-inner[data-v-0f4ad06a] {
    height: 100%;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.progress .content .failed-inner img[data-v-0f4ad06a] {
    min-height: 40px;
    flex-basis: 100px
}

.progress .content .failed-inner .reason[data-v-0f4ad06a] {
    margin-top: 2em;
    color: var(--color-text-3)
}

@keyframes lightAnimation-0f4ad06a {
    0% {
        left: -240px
    }

    to {
        left: 100%
    }
}

.progress .content .light[data-v-0f4ad06a] {
    width: 240px;
    height: 100%;
    background: linear-gradient(270deg,#ffffff0a,#fff0);
    position: absolute;
    animation: lightAnimation-0f4ad06a 1.8s .3s infinite linear
}

.progress .inner[data-v-0f4ad06a] {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 2
}

.top-right-actions[data-v-09d04a70] {
    z-index: 3;
    position: absolute;
    right: 12px;
    top: 12px;
    height: 32px;
    gap: 2px;
    padding: 2px 8px;
    background: var(--color-fill-black-3);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    width: fit-content
}

.top-right-actions .item[data-v-09d04a70] {
    width: 28px;
    height: 28px;
    cursor: pointer
}

.top-right-actions[data-v-09d04a70] .disabled-icon {
    color: var(--color-text-4);
    cursor: pointer
}

.bottom-center-actions[data-v-09d04a70] {
    z-index: 2;
    position: absolute;
    bottom: 16px;
    left: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
    color: #f9fbfc;
    font-size: 12px;
    line-height: 20px;
    width: 100%;
    padding: 0 24px;
    justify-content: center
}

.bottom-center-actions .box[data-v-09d04a70] {
    width: 100%;
    display: flex;
    justify-content: center
}

.bottom-center-actions .action-item[data-v-09d04a70] {
    cursor: pointer;
    padding: 0 16px
}

.bottom-center-actions .action-item.disabled[data-v-09d04a70] {
    color: var(--color-text-4)
}

.bottom-center-actions .divider[data-v-09d04a70] {
    height: 12px;
    width: 1px;
    background: #5e6366
}

.stream-video-add-audio[data-v-1dadcb7b] {
    border-radius: 8px;
    background: var(--color-other-1);
    width: 100%
}

.stream-video-add-audio .content[data-v-1dadcb7b] {
    width: 100%;
    display: block;
    height: var(--55629ea5)
}

.stream-video-add-audio .works[data-v-1dadcb7b] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px
}

.stream-video-add-audio .works .work[data-v-1dadcb7b] {
    margin: 12px 0;
    height: 48px;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px
}

.stream-video-add-audio .works .work.active[data-v-1dadcb7b] {
    border-color: var(--color-theme-2)
}

.stream-video-add-audio .works .work-inner[data-v-1dadcb7b] {
    height: 40px;
    width: 40px;
    position: relative;
    border-radius: 4px;
    background: var(--color-other-1);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

.stream-video-add-audio .works .work-inner img[data-v-1dadcb7b] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    transform: translate(-50%,-50%);
    object-fit: cover
}

.ancestor[data-v-0c2eafde] {
    height: 28px;
    padding-left: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 4px;
    background: var(--color-other-2);
    padding-right: 8px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    color: var(--color-text-1)
}

.ancestor img[data-v-0c2eafde],.ancestor video[data-v-0c2eafde] {
    object-fit: cover;
    width: 24px;
    height: 24px;
    border-radius: 4px
}

.ancestor .source-icon[data-v-0c2eafde] {
    display: flex;
    background-color: var(--color-other-7);
    position: absolute;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center
}

.creation-item-ancestors-images {
    height: 100%;
    max-width: 404px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px
}

.creation-item-ancestors-images .item {
    position: relative;
    cursor: pointer
}

.creation-item-ancestors-images .item .item-image {
    position: relative
}

.creation-item-ancestors-images .item .item-image .mask-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: .3
}

.creation-item-ancestors-images .item .link {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-fill-black-1);
    bottom: 8px;
    right: 8px
}

.creation-item-ancestors-images .item img,.creation-item-ancestors-images .item video {
    display: block;
    border-radius: 4px;
    object-fit: cover
}

.creation-item-ancestors-images .item img {
    width: 200px;
    height: 200px
}

.creation-item-ancestors-images .item video {
    width: 400px;
    height: 400px
}

.creation-stream-item[data-v-416b3a46] {
    display: flex;
    flex-direction: column;
    width: 100%
}

.creation-stream-item .videos[data-v-416b3a46] {
    display: flex;
    flex-direction: column;
    gap: 32px
}

.creation-stream-item .title[data-v-416b3a46] {
    color: var(--color-text-1);
    display: flex;
    align-items: center;
    justify-content: space-between
}

.creation-stream-item .title .divider[data-v-416b3a46] {
    width: 1px;
    height: 12px;
    background: var(--color-border-line);
    margin: auto 10px
}

.creation-stream-item .title .left[data-v-416b3a46] {
    flex-grow: 0;
    display: flex;
    align-items: center;
    gap: 6px
}

.creation-stream-item .title .left span[data-v-416b3a46] {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.creation-stream-item .title .left .tag[data-v-416b3a46] {
    padding: 4px 8px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: 12px;
    line-height: 20px;
    border-radius: 4px;
    background: var(--color-other-2);
    color: var(--color-text-1)
}

.creation-stream-item .title .right[data-v-416b3a46] {
    display: flex;
    gap: 8px
}

.creation-stream-item .title .right .top-action[data-v-416b3a46] {
    padding: 6px;
    background: #ffffff1f;
    border-radius: 8px;
    display: flex;
    cursor: pointer
}

.creation-stream-item .prompt-area[data-v-416b3a46] {
    margin-top: 12px;
    position: relative;
    line-height: 22px;
    display: flex
}

.creation-stream-item .prompt-area .prompt[data-v-416b3a46] {
    color: var(--color-text-2);
    font-size: 13px;
    line-height: 22px;
    max-height: 66px;
    text-overflow: ellipsis;
    overflow: hidden
}

.creation-stream-item .prompt-area .copy .icon[data-v-416b3a46] {
    height: 22px;
    width: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

.creation-stream-item .prompt-area .multi-line[data-v-416b3a46] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 56px;
    padding: 0 8px 0 32px;
    background: linear-gradient(90deg,#0f0f0f00,#0e0f0f 60%)
}

.creation-stream-item .content[data-v-416b3a46] {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 50vh;
    min-width: 160px;
    object-fit: contain
}

.creation-stream-item .content-wrapper[data-v-416b3a46] {
    display: flex;
    justify-content: center;
    background: var(--color-other-1);
    border-radius: 8px;
    margin-top: 16px
}

.creation-stream-item .content-wrapper.video-add-audio[data-v-416b3a46],.creation-stream-item .content-wrapper.audio[data-v-416b3a46] {
    background: transparent
}

.creation-stream-item .content-wrapper.audio[data-v-416b3a46] .top-right-actions {
    background: var(--color-other-2);
    top: 50%;
    transform: translateY(-50%)
}

.creation-stream-item .content-wrapper .grid[data-v-416b3a46] {
    display: grid;
    gap: 8px;
    width: 100%
}

.creation-stream-item .content-wrapper .image[data-v-416b3a46] {
    width: 100%
}

.creation-stream-item .content-wrapper .grid[data-v-416b3a46],.creation-stream-item .content-wrapper .image[data-v-416b3a46] {
    position: relative
}

.creation-stream-item .audio-item-box[data-v-416b3a46] {
    height: 96px;
    width: 100%
}

.creation-stream-item .audio-item-box.generating[data-v-416b3a46] {
    background-color: var(--color-other-1);
    border-radius: 16px
}

.creation-stream-item .audio-item-box .audio-item-uncompleted[data-v-416b3a46] {
    display: flex;
    height: 100%;
    padding: 8px
}

.creation-stream-item .audio-item-box .audio-item-completed[data-v-416b3a46] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 8px 0
}

.creation-stream-item .audio-item-box .audio-item-completed .cover[data-v-416b3a46] {
    height: 80px;
    width: 80px;
    border-radius: 4px 0 0 4px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    background: var(--color-other-2)
}

.creation-stream-item .audio-item-box .audio-item-completed .cover img[data-v-416b3a46] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    transform: translate(-50%,-50%);
    object-fit: cover
}

.creation-stream-item .audio-item-box .audio-item-completed .audio-player-box[data-v-416b3a46] {
    height: 100%;
    flex-grow: 1;
    border-radius: 0 4px 4px 0;
    background: var(--color-other-1);
    padding: 8px 180px 8px 20px
}

.creation-stream-item .audio-item-box[data-v-416b3a46] .progress-box {
    margin-bottom: 8px
}

.creation-stream-item .audio-item-box .audio-item-uncompleted[data-v-416b3a46] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%
}

.creation-stream-item .audio-item-box .audio-item-uncompleted-left[data-v-416b3a46] {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--color-text-3)
}

.creation-stream-item .audio-item-box .audio-item-uncompleted-left .text[data-v-416b3a46] {
    cursor: pointer;
    color: var(--color-text-1)
}

.creation-stream-item .audio-item-box .audio-item-uncompleted-left svg[data-v-416b3a46] {
    margin-right: 16px
}

.history-stream[data-v-a4e3de3f] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--color-bg-page)
}

.history-stream .filter-bar[data-v-a4e3de3f] {
    height: 64px;
    padding: 20px 32px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border-frame)
}

.history-stream .filter-bar .split[data-v-a4e3de3f] {
    color: var(--color-border-line);
    margin: 0 16px
}

.history-stream .filter-bar .checkbox[data-v-a4e3de3f] {
    margin-left: 16px
}

.history-stream .filter-bar .checkbox svg[data-v-a4e3de3f] {
    margin-right: 6px
}

.history-stream .content-container[data-v-a4e3de3f] {
    flex: 1;
    display: flex;
    overflow: hidden;
    padding: 24px 32px 10px
}

.history-stream .content-container.mobile[data-v-a4e3de3f] {
    padding: 24px 10px 10px
}

.history-stream .content-container .creation-stream[data-v-a4e3de3f] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    height: 100%;
    align-items: center;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    gap: 64px
}

.history-stream .content-container .creation-stream[data-v-a4e3de3f]::-webkit-scrollbar {
    display: none
}

.history-stream .content-container .thumbnail-list[data-v-a4e3de3f] {
    width: 64px;
    margin-left: 32px;
    overflow-y: auto;
    border: 0;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.history-stream .content-container .thumbnail-list[data-v-a4e3de3f]::-webkit-scrollbar {
    display: none
}

.history-stream .content-container .thumbnail-list .thumbnail[data-v-a4e3de3f] {
    cursor: pointer;
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
    transition: none
}

.history-stream .content-container .thumbnail-list .thumbnail[data-v-a4e3de3f]:last-child {
    margin-bottom: 0
}

.history-stream .content-container .thumbnail-list .thumbnail img[data-v-a4e3de3f] {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.fixed-status[data-v-a4e3de3f] {
    position: fixed;
    bottom: 24px;
    right: 128px;
    font-size: 14px;
    color: var(--text-color);
    transition: right .3s ease;
    z-index: 2
}

.fixed-status.is-mobile[data-v-a4e3de3f] {
    right: 32px
}

.el-dropdown-menu[data-v-a4e3de3f] {
    background-color: transparent
}

.thumbnail--active[data-v-a4e3de3f] {
    border: 2px solid rgb(116,255,82);
    box-shadow: 0 0 8px #4caf5080
}

.thumbnail-list[data-v-a4e3de3f] {
    overflow-y: auto;
    scrollbar-width: thin;
    position: relative
}

.thumbnail[data-v-a4e3de3f] {
    transition: border-color .3s ease;
    position: relative
}

.bottom-operation[data-v-a4e3de3f] {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.bottom-operation-group[data-v-a4e3de3f] {
    display: flex;
    align-items: flex-start
}

.bottom-operation-text[data-v-a4e3de3f] {
    width: 74px;
    margin-right: 16px;
    padding-top: 6px;
    flex-shrink: 0
}

.bottom-operation-text.is-chinese[data-v-a4e3de3f] {
    width: 40px
}

.bottom-operation-operations[data-v-a4e3de3f] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px
}

.bottom-operation-operations-3-in-row[data-v-a4e3de3f] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px
}

.empty-history[data-v-a4e3de3f] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-page);
    height: 100%;
    color: var(--color-text-3)
}

.empty-history .empty-history-content[data-v-a4e3de3f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.video-design-view[data-v-104ccee4] {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: auto
}

.video-design-view[data-v-104ccee4] .video-designer {
    flex: 0 1 auto;
    min-width: 0
}

.video-design-view[data-v-104ccee4] .history-stream {
    flex: 1;
    min-width: 665px
}

body.lang-en .header span[data-v-536084f1] {
    font-family: PP Editorial New Italic;
    font-size: 28px;
    font-weight: 800
}

.dialog-box[data-v-536084f1] {
    padding: 32px;
    color: var(--color-text-1)
}

.dialog-box .header[data-v-536084f1] {
    display: flex;
    justify-content: space-between
}

.dialog-box .header span[data-v-536084f1] {
    font-size: 26px;
    font-weight: 900;
    line-height: 40px
}

.dialog-box .subtitle[data-v-536084f1] {
    margin-top: 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px
}

.dialog-box .content[data-v-536084f1] {
    margin-top: 16px;
    padding: 16px 16px 16px 28px;
    background: var(--color-other-1);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.dialog-box .content .item[data-v-536084f1] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px
}

.dialog-box .content .item[data-v-536084f1] b {
    font-style: normal;
    color: var(--color-theme-2)
}

.dialog-box .prompt[data-v-536084f1] {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-text-3)
}

.dialog-box .signature[data-v-536084f1] {
    display: flex;
    flex-direction: column;
    margin-top: 16px
}

.dialog-box .signature span[data-v-536084f1] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px
}

.dialog-box .bottom[data-v-536084f1] {
    margin-top: 16px;
    display: flex;
    flex-direction: row-reverse
}

.title[data-v-328b7857] {
    font-size: 22px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: .02em
}

.note[data-v-328b7857] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-1)
}

.content[data-v-328b7857] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px
}

.content .item .title[data-v-328b7857] {
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 12px
}

.content .item .title span[data-v-328b7857] {
    color: var(--color-fill-error)
}

.content .item .sgpIdentityTypes[data-v-328b7857] {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.content .item .sgpIdentityTypes span[data-v-328b7857] {
    gap: 4px
}

.btns[data-v-328b7857] {
    text-align: right;
    margin-top: 24px;
    margin-bottom: 16px
}

.subtitle[data-v-6420080f] {
    color: var(--color-text-2);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 24px;
    margin-top: -16px
}

ol.membership-list[data-v-6420080f] {
    margin: 16px 0 0;
    padding: 0 16px 0 0;
    list-style: none;
    border-radius: 16px;
    background: var(--color-fill-dark)
}

ol.membership-list li[data-v-6420080f] {
    padding: 12px 0 0 44px;
    margin: 0
}

ol.membership-list li.only-one[data-v-6420080f] {
    padding-left: 16px
}

ol.membership-list li h3[data-v-6420080f] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
    padding: 0;
    color: var(--color-text-1)
}

ol.membership-list li p[data-v-6420080f] {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: var(--color-text-2);
    margin: 4px 0 0
}

ol.membership-list li p[data-v-6420080f]:last-child {
    padding-bottom: 12px;
    border-bottom: solid 1px var(--color-border-container)
}

ol.membership-list li .num[data-v-6420080f] {
    position: absolute;
    margin-top: 4px;
    margin-left: -28px;
    width: 16px;
    height: 16px;
    color: var(--color-theme-2);
    border-radius: 16px
}

ol.membership-list li .num i[data-v-6420080f] {
    background-color: var(--color-theme-3);
    border-radius: 20px;
    color: var(--color-theme-2);
    font-style: normal;
    font-family: MiSans Latin VF;
    font-size: 10px;
    font-weight: 330;
    line-height: 16px;
    width: 16px;
    height: 16px;
    text-align: center;
    display: block
}

ol.membership-list li .bar[data-v-6420080f] {
    position: absolute;
    margin-left: -20px;
    margin-top: 28px;
    border-left: dashed 1px var(--color-theme-3);
    height: 40px;
    width: 1px
}

ol.membership-list li:last-child .bar[data-v-6420080f] {
    display: none
}

ol.membership-list li:last-child p[data-v-6420080f] {
    border: none
}

ol.membership-list li:last-child p[data-v-6420080f]:last-child {
    border-bottom: none
}

.colorful[data-v-6420080f] {
    display: inline-block;
    color: var(--color-theme-2)
}

.bottom-bar[data-v-6420080f] {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    margin-top: 24px;
    margin-bottom: 12px;
    gap: 24px
}

.bottom-bar .need-pay[data-v-6420080f] {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: #c5c7d5
}

.bottom-bar .price[data-v-6420080f] {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: var(--color-theme-2)
}

.alert[data-v-6420080f] {
    display: flex;
    flex-direction: row;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #c5c7d5;
    margin-top: 16px;
    gap: 8px
}

.alert[data-v-6420080f] :first-child {
    width: 20px;
    height: 20px
}

.alert .clickable a[data-v-6420080f] {
    color: var(--color-theme-2);
    margin: 0
}

.top-header[data-v-cf31ddd6] {
    width: 100vw;
    height: 64px;
    padding: 0 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    background: transparent;
    transition: all .7s;
    z-index: 100
}

.top-header .dev-link[data-v-cf31ddd6] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin-right: 16px;
    color: var(--color-text-1);
    text-decoration: none
}

.top-header .dev-link.disabled[data-v-cf31ddd6] {
    color: #727485
}

.avatar-header[data-v-cf31ddd6] {
    margin-top: 16px;
    display: block;
    height: 54px
}

.avatar-header .avatar[data-v-cf31ddd6] {
    float: left;
    margin-left: 16px;
    margin-right: 12px
}

.avatar-header .title[data-v-cf31ddd6] {
    line-height: 26px;
    font-size: 16px;
    padding-top: 4px;
    color: var(--color-text-1);
    display: block;
    padding-right: 1em
}

.avatar-header .desc[data-v-cf31ddd6] {
    line-height: 20px;
    display: block;
    font-size: 12px;
    color: var(--color-text-2)
}

body.mobile .dev-center-container .package[data-v-10483fba] {
    margin-bottom: 24px
}

body.mobile .dev-center-container .banner[data-v-10483fba] {
    height: var(--top-navigation-height)
}

body.mobile .dev-center-container .teaser-inner img[data-v-10483fba] {
    height: 44px;
    padding-left: 12px
}

body.mobile .dev-center-container .header[data-v-10483fba] {
    flex-direction: column
}

body.mobile .dev-center-container .header-tip[data-v-10483fba] {
    margin-left: 0
}

body.mobile .dev-center-container .header[data-v-10483fba] .common-tabs {
    overflow: scroll
}

body.mobile .dev-center-container .header[data-v-10483fba] .common-tabs::-webkit-scrollbar {
    display: none
}

body.mobile .dev-center-container .header[data-v-10483fba] .common-tabs .tabs-box {
    display: flex
}

body.mobile .dev-center-container .header[data-v-10483fba] .common-tabs .tab {
    flex-shrink: 0;
    margin-right: 16px
}

body.mobile .dev-center-container .parent-packages[data-v-10483fba] {
    display: block
}

body.mobile .dev-center-container .dev-center-content[data-v-10483fba] {
    padding: 0 12px
}

.api-box[data-v-10483fba] {
    height: 100vh;
    overflow-y: auto
}

.menu-li[data-v-10483fba] {
    display: flex;
    align-items: center;
    color: var(--color-text-2)
}

.menu-li[data-v-10483fba]:hover {
    color: var(--color-text-1)
}

.quit-btn[data-v-10483fba] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 12px;
    padding-bottom: 12px
}

.quit-btn[data-v-10483fba]:after {
    content: "";
    position: absolute;
    top: 4px;
    left: -12px;
    width: calc(100% + 24px);
    height: 1px;
    background: var(--color-other-1)
}

.dev-center-container[data-v-10483fba] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 100px
}

.dev-center-container .banner[data-v-10483fba] {
    width: 100%;
    height: 320px;
    position: relative
}

.dev-center-container .banner .banner-background[data-v-10483fba] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.dev-center-container .banner .teaser[data-v-10483fba] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.dev-center-container .banner .teaser .teaser-inner[data-v-10483fba] {
    width: 100%;
    max-width: 1180px;
    height: 100%;
    display: flex;
    align-items: center
}

.dev-center-container pre[data-v-10483fba] {
    white-space: pre-wrap;
    word-wrap: break-word
}

.dev-center-content[data-v-10483fba] {
    width: 100%;
    max-width: 1156px;
    margin-top: 24px
}

.header[data-v-10483fba] {
    display: flex;
    flex-direction: row;
    font-size: 14px;
    font-weight: 500;
    line-height: 28px;
    gap: 16px
}

.header-tip[data-v-10483fba] {
    margin-left: auto
}

.header span[data-v-10483fba] {
    color: #c5c7d5
}

.header a[data-v-10483fba] {
    margin-left: 4px;
    color: var(--color-fill-link);
    text-decoration: none;
    cursor: pointer
}

.parent-packages[data-v-10483fba] {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
    margin-top: 32px
}

.package[data-v-10483fba] {
    padding: 16px;
    border: 1px solid transparent;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--color-bg-primary);
    color: var(--color-text-2);
    border: 1px solid var(--color-other-1)
}

.package .tag[data-v-10483fba] {
    position: absolute;
    top: -15px;
    right: -8px;
    width: 80px;
    height: 40px
}

.package .tag-text[data-v-10483fba] {
    position: absolute;
    top: -15px;
    right: -8px;
    width: 80px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    font-weight: 500;
    text-align: center
}

.package .title[data-v-10483fba] {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-text-2);
    display: flex;
    justify-content: space-between
}

.package .title .count-tag[data-v-10483fba] {
    background: var(--color-fill-warning);
    height: 26px;
    color: var(--color-text-5);
    padding: 0 10px;
    width: fit-content;
    border-radius: 100px
}

.package .details[data-v-10483fba] {
    padding-top: 24px;
    padding-bottom: 16px;
    border-top: 1px solid var(--color-other-1);
    margin-top: 24px
}

.package .details .benefits[data-v-10483fba] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 16px;
    color: var(--color-text-1)
}

.package .details .benefit-count[data-v-10483fba] {
    font-size: 14px;
    color: var(--color-text-2)
}

.package .details .benefit-count[data-v-10483fba] i {
    color: var(--color-theme-2);
    font-size: 18px;
    font-weight: 520;
    margin: 4px;
    font-style: normal
}

.package .details .benefit-count-expire[data-v-10483fba] {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-3);
    margin-top: 4px;
    margin-bottom: 24px
}

.package .unit-price[data-v-10483fba] {
    display: inline-flex;
    float: right;
    flex-direction: column;
    align-items: end
}

.package .original-unit-price[data-v-10483fba] {
    width: auto;
    color: var(--color-text-3);
    font-size: 12px;
    font-weight: 400;
    line-height: 20px
}

.package .original-unit-price .b[data-v-10483fba] {
    height: 1px;
    background-color: var(--color-text-3);
    transform: translateY(-12px)
}

.package .month-select-wrapper[data-v-10483fba] {
    margin-top: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px
}

.package .month-select-wrapper span[data-v-10483fba] {
    color: #999bac;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px
}

.package .month-select-wrapper .month-select[data-v-10483fba] {
    width: 100px
}

.package .issue-tip[data-v-10483fba] {
    margin-top: 16px
}

.package .issue-tip__item[data-v-10483fba] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    gap: 4px;
    color: var(--color-text-3)
}

.package .issue-tip__item[data-v-10483fba] i {
    color: var(--color-theme-2);
    font-style: normal
}

.package .issue-tip__item span[data-v-10483fba] {
    text-align: center
}

.package .issue-tip svg[data-v-10483fba] {
    flex-shrink: 0
}

.package .final-price[data-v-10483fba] {
    margin-top: 20px;
    color: var(--color-text-2);
    display: flex;
    justify-content: space-between;
    font-weight: 600
}

.package .final-price[data-v-10483fba]>:first-child {
    font-size: 20px;
    line-height: 26px
}

.package .final-price[data-v-10483fba]>:last-child {
    font-size: 32px;
    line-height: 36px
}

.package .prices[data-v-10483fba] {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px
}

.package .discount-notice[data-v-10483fba] {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

.package .discount-notice .price[data-v-10483fba] {
    color: var(--color-fill-warning)
}

.package .discount-notice .percent[data-v-10483fba] {
    font-size: 18px;
    font-weight: 520;
    line-height: 24px;
    color: var(--color-fill-warning)
}

body.lang-en .package .month-select-wrapper .month-select[data-v-10483fba] {
    width: 130px!important
}

.tip-container[data-v-10483fba] {
    margin-top: 32px;
    color: var(--color-text-2)
}

.tip[data-v-10483fba] {
    width: auto;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-text-2)
}

.tips[data-v-10483fba] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    margin-top: 12px;
    background: var(--color-bg-primary);
    border-radius: 8px;
    padding: 26px 16px
}

.tips span[data-v-10483fba] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px
}

.pay-success-content[data-v-10483fba] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center
}

.pay-success-content .pay-success-title[data-v-10483fba] {
    margin-top: 24px;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    color: var(--color-theme-2)
}

.pay-success-content .buttons[data-v-10483fba] {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 32px;
    margin-bottom: 12px
}

.benefit[data-v-10483fba] {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: flex-start;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px
}

.benefit div[data-v-10483fba]:first-child {
    margin-top: 4px
}

.benefit div:first-child svg[data-v-10483fba] {
    width: 16px;
    height: 16px
}

.qr-list[data-v-0430ef4e] {
    float: right
}

.qr-list .qr img[data-v-0430ef4e] {
    width: 112px;
    height: 112px
}

body.mobile .qr-list[data-v-0430ef4e] {
    display: block;
    float: none;
    width: 100%;
    text-align: center;
    margin-top: 20px
}

body.mobile .copyright .content .logo[data-v-0430ef4e] {
    display: none
}

body.mobile .copyright .content .list[data-v-0430ef4e] {
    margin-right: 24px;
    padding: 0
}

body.mobile .copyright .content .list.no-margin[data-v-0430ef4e] {
    float: right;
    margin-right: 0
}

body.mobile .copyright .content .qr[data-v-0430ef4e] {
    float: none;
    margin-left: 0;
    margin-bottom: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center
}

body.mobile .copyright.bottom[data-v-0430ef4e] {
    margin-bottom: 84px
}

body.mobile .container[data-v-0430ef4e] {
    padding-left: 20px;
    padding-right: 20px
}

.container[data-v-0430ef4e] {
    padding-top: 42px;
    border-top: 1px solid var(--color-border-frame)
}

.copyright[data-v-0430ef4e] {
    font-size: 14px
}

.copyright.first[data-v-0430ef4e] {
    padding-bottom: 32px
}

.copyright.bottom[data-v-0430ef4e] {
    font-size: 12px;
    color: var(--color-text-3);
    text-align: center;
    padding-top: 32px;
    border-top: 1px solid var(--color-border-frame)
}

.copyright.bottom p[data-v-0430ef4e] {
    margin-bottom: .2em
}

.copyright.bottom a[data-v-0430ef4e] {
    display: inline;
    margin-left: 1em;
    margin-right: 1em
}

.copyright .content .logo[data-v-0430ef4e] {
    vertical-align: top;
    display: inline-block;
    margin-right: 5em
}

.copyright .content .list[data-v-0430ef4e] {
    vertical-align: top;
    margin-right: 5em;
    display: inline-block
}

.copyright .content .list h3[data-v-0430ef4e] {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 48px;
    color: var(--color-text-1)
}

.copyright .content .list p[data-v-0430ef4e] {
    margin-bottom: 1em;
    color: var(--color-text-2)
}

.copyright .content .qr[data-v-0430ef4e] {
    float: right;
    text-align: center;
    margin-left: 2em;
    color: var(--color-text-2)
}

.copyright .content .qr div.img[data-v-0430ef4e] {
    border-radius: 8px;
    background-color: #fff;
    padding: 2px;
    line-height: 0;
    margin-bottom: 1em
}

.copyright a[data-v-0430ef4e] {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all .4s
}

.copyright a[data-v-0430ef4e]:hover {
    color: var(--color-text-1)
}

img.police[data-v-0430ef4e] {
    width: 16px;
    height: 16px;
    margin-bottom: -4px
}

.resource[data-v-31261a83] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 12px;
    overflow: hidden
}

.resource .main[data-v-31261a83] {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 auto;
    background: linear-gradient(90deg,#1b1c1f,#17181a);
    padding: 28px 36px
}

.resource .main.mobile[data-v-31261a83] {
    padding: 28px 10px
}

.resource .main .title[data-v-31261a83] {
    font-family: PingFang SC;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    background: var(--color-gradient-button, linear-gradient(148deg, #d3e2f0 0%, #fff 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 6px
}

.resource .main .title.en span[data-v-31261a83] {
    font-family: PP Editorial New Italic;
    font-style: italic
}

.resource .main .description[data-v-31261a83] {
    color: var(--color-text-1);
    font-family: PingFang SC;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 26px
}

.resource .carousel .carousel-image[data-v-31261a83] {
    width: 100%;
    height: 100%;
    border-radius: 12px
}

.resource .carousel[data-v-31261a83] .el-carousel__container {
    height: 100%
}

.resource .carousel[data-v-31261a83] .el-carousel__indicators {
    left: unset;
    right: 16px;
    transform: none
}

.button[data-v-31261a83] {
    border-radius: 40px;
    padding: 0 24px!important
}

.tab[data-v-31261a83] {
    padding-top: 32px;
    width: 100%;
    background: var(--color-bg-page);
    position: sticky;
    top: -2px;
    z-index: 2;
    padding-bottom: 16px
}

.bottom[data-v-31261a83] {
    text-align: center;
    margin-top: 32px;
    margin-bottom: 56px
}

.video-container[data-v-31261a83] {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    flex: 1
}

.video-container[data-v-31261a83]:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 560px;
    height: 100%;
    background: linear-gradient(to right,#17181a 0%,transparent 100%);
    z-index: 1
}

.home-video[data-v-31261a83] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    object-fit: cover
}

.default[data-v-b86e6207] {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px
}

.default .uploader[data-v-b86e6207] {
    width: 638px;
    border-radius: 12px;
    border: 1px dashed var(--color-border-component);
    background: var(--color-other-1)
}

.default .video[data-v-b86e6207] {
    width: 638px;
    height: 360px;
    object-fit: contain;
    border-radius: 12px
}

.default .history[data-v-b86e6207] {
    max-width: 1072px;
    height: 96px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px
}

.default .history .text[data-v-b86e6207] {
    flex-shrink: 0;
    color: var(--color-text-1);
    font-size: 14px;
    line-height: 24px;
    white-space: nowrap
}

.default .history .item-wrapper[data-v-b86e6207] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.default .history .item-wrapper[data-v-b86e6207]::-webkit-scrollbar {
    display: none
}

.default .history .item-wrapper .item[data-v-b86e6207] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 4px;
    cursor: pointer;
    object-fit: cover;
    transition: all .2s ease-in-out
}

.default .history .item-wrapper .item[data-v-b86e6207]:hover {
    width: 64px;
    height: 64px;
    transition: all .2s ease-in-out
}

.project-bar[data-v-0dd1a6b4] {
    position: absolute;
    top: 32px;
    right: 32px;
    z-index: 1;
    display: flex;
    gap: 12px
}

.project-bar .history[data-v-0dd1a6b4] {
    width: 158px;
    max-height: 70vh;
    transition: height .3s linear;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    border: 1px solid var(--color-other-3);
    background: #24262966;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px)
}

.project-bar .history .title[data-v-0dd1a6b4] {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer
}

.project-bar .history .title span[data-v-0dd1a6b4] {
    color: var(--color-text-1);
    font-size: 12px;
    line-height: 20px
}

.project-bar .history .task-list[data-v-0dd1a6b4] {
    border-top: 1px solid var(--color-other-3, rgba(255, 255, 255, .16));
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column
}

.project-bar .history .task-list[data-v-0dd1a6b4]::-webkit-scrollbar {
    display: none
}

.project-bar .history .task-list .task-header[data-v-0dd1a6b4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px
}

.project-bar .history .task-list .task-header .left[data-v-0dd1a6b4] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer
}

.project-bar .history .task-list .task-header .left .img-wrapper[data-v-0dd1a6b4] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    position: relative;
    background-color: #ffffff14;
    background-image: linear-gradient(45deg,rgba(255,255,255,.08) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.08) 75%),linear-gradient(45deg,rgba(255,255,255,.08) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.08) 75%);
    background-position: 0 0,3px 3px;
    background-size: 6px 6px;
    display: flex;
    align-items: center;
    justify-content: center
}

.project-bar .history .task-list .task-header .left .img-wrapper .mask[data-v-0dd1a6b4] {
    position: absolute;
    left: 0;
    z-index: 1;
    opacity: .3
}

.project-bar .history .task-list .task-header .left .img-wrapper .outpainting[data-v-0dd1a6b4] {
    width: 70%;
    height: 70%;
    border-radius: 4px
}

.project-bar .history .task-list .task-header .left .img-wrapper img[data-v-0dd1a6b4] {
    border-radius: 8px;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.project-bar .history .task-list .task-header .left span[data-v-0dd1a6b4] {
    color: var(--color-text-1);
    font-size: 12px;
    line-height: 20px
}

.project-bar .history .task-list .task-header .icon[data-v-0dd1a6b4] {
    height: 40px;
    width: 24px;
    justify-self: flex-end;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

.project-bar .history .task-list .task .works[data-v-0dd1a6b4] {
    display: grid;
    grid-template-columns: repeat(2,64px);
    gap: 4px;
    margin-bottom: 36px
}

.project-bar .history .task-list .task .works .work[data-v-0dd1a6b4] {
    height: fit-content;
    border-radius: 8px;
    width: 64px;
    cursor: pointer;
    background: var(--color-other-1)
}

.project-bar .history .task-list .task .works .work .not-success[data-v-0dd1a6b4] {
    height: 64px;
    border-radius: 8px;
    display: flex
}

.project-bar .history .task-list .task .works .work img[data-v-0dd1a6b4] {
    display: block;
    border-radius: 8px;
    width: 100%;
    height: 64px;
    object-fit: contain;
    cursor: pointer
}

.project-bar .history .task-list .task .works .active[data-v-0dd1a6b4] {
    padding: 2px;
    border: 1px solid var(--color-theme-2)
}

.project-bar .history .task-list .task .works .active .not-success[data-v-0dd1a6b4],.project-bar .history .task-list .task .works .active img[data-v-0dd1a6b4] {
    height: 58px
}

.project-bar .history .task-list .task-active[data-v-0dd1a6b4] {
    border: 1px solid var(--color-theme-2);
    border-radius: 8px
}

.shrink[data-v-0dd1a6b4] {
    height: 40px;
    overflow: hidden
}

.command-tooltip-panel[data-v-559991d8] {
    width: 362px;
    margin: 13px 15px 19px;
    font-size: 14px;
    line-height: 24px
}

.command-tooltip-panel .title[data-v-559991d8] {
    height: 36px;
    font-weight: 600;
    color: var(--color-theme-1);
    display: flex;
    align-items: center
}

.command-tooltip-panel .row[data-v-559991d8] {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 40px
}

.command-tooltip-panel .row .section[data-v-559991d8] {
    flex-shrink: 0;
    width: 94px;
    white-space: nowrap;
    color: var(--color-text-2)
}

.command-tooltip-panel .row .right[data-v-559991d8] {
    color: var(--color-text-1);
    display: flex;
    align-items: center
}

.command-tooltip-panel .row .right .key[data-v-559991d8] {
    padding: 4px;
    min-width: 28px;
    height: 28px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    color: var(--color-text-1);
    background: var(--color-other-3);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center
}

.command-tooltip-panel .row .right .icon[data-v-559991d8] {
    margin: 0 8px
}

.page[data-v-b653bd63] {
    height: 100%;
    display: flex;
    flex-direction: column
}

.page .topbar[data-v-b653bd63] {
    flex-shrink: 0;
    padding: 0 32px 0 28px;
    height: 64px;
    background: var(--color-bg-page);
    display: flex;
    align-items: center;
    justify-content: space-between
}

.page .topbar .title[data-v-b653bd63] {
    display: flex;
    align-items: center;
    gap: 28px;
    color: var(--color-text-1);
    font-size: 18px;
    font-weight: 600;
    line-height: 26px
}

.page .topbar .title .humburger[data-v-b653bd63] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center
}

.page .topbar .actions[data-v-b653bd63] {
    display: flex;
    align-items: center;
    gap: 12px
}

.page .topbar .actions .scale[data-v-b653bd63] {
    color: var(--color-text-1)
}

.page .topbar .actions .download[data-v-b653bd63] {
    display: flex;
    align-items: center
}

.page .container[data-v-b653bd63] {
    flex: 1;
    position: relative
}

.page .container .sidebar[data-v-b653bd63] {
    position: absolute;
    z-index: 10;
    left: 32px;
    top: 32px;
    width: 80px
}

.page .container .sidebar .mode[data-v-b653bd63],.page .container .sidebar .upload[data-v-b653bd63] {
    border-radius: 12px;
    border: 1px solid var(--color-other-3);
    background: #24262966;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 3px;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.page .container .sidebar .mode .menu-item[data-v-b653bd63] {
    cursor: pointer;
    padding: 12px 0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--color-text-1);
    font-size: 14px;
    line-height: 24px
}

.page .container .sidebar .mode .active[data-v-b653bd63] {
    background: var(--color-other-2)
}

.page .container .sidebar .upload[data-v-b653bd63] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-bottom: 7px
}

.page .container .sidebar .upload .upload-icon[data-v-b653bd63] {
    width: 100%;
    display: flex;
    justify-content: center;
    cursor: pointer
}

.page .container .sidebar .upload img[data-v-b653bd63] {
    border-radius: 8px;
    width: 72px;
    height: 72px;
    object-fit: cover
}

.page .container .main-content[data-v-b653bd63] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.page .container .loading[data-v-b653bd63] {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: var(--color-fill-black-3, rgba(0, 0, 0, .64));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center
}

.page .container .loading .tip[data-v-b653bd63] {
    font-size: 16px;
    color: var(--color-text-1);
    text-align: center;
    white-space: pre-line;
    word-break: break-word
}

.project-bar[data-v-b653bd63] {
    z-index: 10
}

.sgp-text[data-v-d1355fdc] {
    font-family: PP Editorial New Italic;
    font-size: var(--sgp-font-size);
    color: var(--color-text-1);
    font-weight: var(--sgp-font-weight)
}

.svg-box[data-v-d1355fdc] {
    height: 100%;
    width: fit-content
}

.svg-box div[data-v-d1355fdc] {
    display: flex;
    align-items: center;
    height: 100%
}

.shopping-box[data-v-f874757b] {
    width: 240px;
    border-radius: 12px;
    background: var(--color-bg-tertiary);
    box-shadow: 0 8px 32px #000c;
    position: absolute;
    bottom: 24px;
    right: 24px;
    padding: 16px 12px;
    z-index: 99
}

.shopping-box .title[data-v-f874757b] {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-1);
    font-size: 14px
}

.shopping-box .line[data-v-f874757b] {
    height: 1px;
    width: 100%;
    background: var(--color-border-container);
    margin: 12px 0 24px
}

.shopping-box .target[data-v-f874757b] {
    width: 100%;
    height: 72px;
    border-radius: 4px;
    position: relative;
    padding: 12px
}

.shopping-box .target-bg[data-v-f874757b] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}

.shopping-box .target span[data-v-f874757b] {
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    z-index: 1;
    position: relative
}

.shopping-box .target span[data-v-f874757b] b {
    color: var(--color-theme-2);
    font-size: 16px;
    font-weight: 520;
    margin: 0 2px
}

.shopping-box .target .discount[data-v-f874757b] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 72px;
    height: 72px;
    z-index: 1
}

.shopping-box .total[data-v-f874757b] {
    color: var(--color-text-2);
    font-size: 14px;
    margin-top: 12px
}

.shopping-box .total-top[data-v-f874757b] {
    height: 28px
}

.shopping-box .total-top span[data-v-f874757b] {
    font-size: 18px;
    color: var(--color-text-1)
}

.shopping-box .total-top span span[data-v-f874757b] {
    font-size: 24px;
    font-weight: 520;
    margin-left: 2px
}

.shopping-box .total-bottom[data-v-f874757b] {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px
}

.shopping-box .fold-area[data-v-f874757b] {
    overflow: hidden;
    transition: height .4s ease;
    max-height: calc(100vh - 426px);
    margin-top: 16px
}

.shopping-box .fold-area[data-v-f874757b]::-webkit-scrollbar {
    width: 4px;
    background-color: transparent
}

.shopping-box .fold-area[data-v-f874757b]::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: transparent
}

.shopping-box .fold-area[data-v-f874757b]::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555
}

.shopping-box .fold-area[data-v-f874757b]::-webkit-scrollbar-thumb:hover {
    background-color: #777
}

.shopping-box .fold-area .line[data-v-f874757b] {
    margin: 0 0 16px
}

.shopping-box .fold-area .products[data-v-f874757b] {
    width: 100%;
    display: flex;
    gap: 4px;
    flex-wrap: wrap
}

.shopping-box .fold-area .products .item[data-v-f874757b] {
    flex-shrink: 0;
    width: calc(50% - 4px);
    height: 56px;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--color-other-1)
}

.shopping-box .fold-area .products .item:hover .delete[data-v-f874757b] {
    display: flex
}

.shopping-box .fold-area .products .item .delete[data-v-f874757b] {
    display: none;
    position: absolute;
    top: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-other-5);
    color: var(--color-text-1);
    cursor: pointer
}

.shopping-box .fold-area .products .item span[data-v-f874757b] {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px
}

.shopping-box .fold-area .price[data-v-f874757b] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--color-text-2);
    font-size: 14px
}

.shopping-box .fold-area .price span span[data-v-f874757b]:nth-child(2) {
    color: var(--color-text-1)
}

.shopping-box .fold-area .price span[data-v-f874757b] {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.member-ship-rule-explanation[data-v-82310cbf] {
    width: 1136px;
    margin: 40px auto 120px;
    border-radius: 16px;
    background: #ffffff0f;
    display: flex;
    padding: 24px 80px 48px;
    flex-direction: column;
    align-items: center;
    align-self: stretch
}

.member-ship-rule-explanation ul[data-v-82310cbf],.member-ship-rule-explanation li[data-v-82310cbf] {
    margin: 0;
    padding: 0;
    list-style: none
}

.member-ship-rule-explanation dl[data-v-82310cbf],.member-ship-rule-explanation dt[data-v-82310cbf],.member-ship-rule-explanation dd[data-v-82310cbf] {
    margin: 0;
    padding: 0
}

.member-ship-rule-explanation h2[data-v-82310cbf] {
    text-align: center;
    font-size: 20px;
    margin-bottom: 24px;
    font-weight: 600
}

.member-ship-rule-explanation .member-ship-rule-explanation-content[data-v-82310cbf] {
    width: 100%
}

.member-ship-rule-explanation .member-ship-rule-explanation-content ul li[data-v-82310cbf] {
    margin-bottom: 14px;
    display: flex;
    margin-top: 8px
}

.member-ship-rule-explanation .member-ship-rule-explanation-content ul li span[data-v-82310cbf] {
    font-size: 14px;
    color: #fff;
    display: inline-block;
    margin-right: 8px;
    line-height: 18px
}

.member-ship-rule-explanation .member-ship-rule-explanation-content ul li span[data-v-82310cbf]:last-child {
    color: #cad7db;
    font-size: 12px;
    line-height: 18px
}

.member-ship-rule-explanation .member-ship-rule-explanation-content dl[data-v-82310cbf] {
    border-bottom: 1px solid rgba(61,94,102,.4);
    padding: 12px 0
}

.member-ship-rule-explanation .member-ship-rule-explanation-content dl dt span[data-v-82310cbf] {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    background: linear-gradient(12deg,#ffecd6 14.38%,#ffd21f 80.65%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.member-ship-rule-explanation .member-ship-rule-explanation-content dl dt .rule-index[data-v-82310cbf] {
    display: inline-block;
    width: 20px;
    font-size: 16px;
    margin-right: 12px;
    font-weight: 630
}

.member-ship-rule-explanation .member-ship-rule-explanation-content dl dd[data-v-82310cbf] {
    padding-left: 32px;
    color: #cad7db;
    margin-top: 8px;
    font-size: 12px;
    line-height: 18px
}

.member-ship-rule-explanation .member-ship-rule-explanation-content dl dd span[data-v-82310cbf] {
    font-size: 12px;
    line-height: 18px;
    background: linear-gradient(90deg,#a7ff1a,#82fac2,#47d4ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.member-ship-rule-explanation .member-ship-rule-explanation-content dl[data-v-82310cbf]:last-child {
    border: none
}

.member-ship-rule-explanation-first[data-v-82310cbf] {
    margin-bottom: 0
}

.membership-discount[data-v-315b684f] {
    margin: 20px auto auto;
    border-radius: 16px;
    width: 1136px;
    background: #e0efff0f;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.membership-discount .discount-card-oldUser[data-v-315b684f] {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding-top: 32px
}

.membership-discount .discount-card-oldUser img[data-v-315b684f] {
    width: 400px
}

.membership-discount ul[data-v-315b684f],.membership-discount li[data-v-315b684f] {
    margin: 0;
    padding: 0;
    list-style: none
}

.membership-discount .discount-card-list[data-v-315b684f] {
    display: flex;
    align-items: center;
    padding: 0 128px;
    justify-content: center
}

.membership-discount .discount-card-list li[data-v-315b684f] {
    margin-right: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.membership-discount .discount-card-list li .discount-card[data-v-315b684f] {
    width: 126px;
    height: 89px;
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 17px 0 10px
}

.membership-discount .discount-card-list li .discount-card .discount-card-price[data-v-315b684f] {
    color: #16171f;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    line-height: 20px;
    align-items: flex-start
}

.membership-discount .discount-card-list li .discount-card .discount-card-price span[data-v-315b684f] {
    color: #16171f;
    font-size: 32px;
    font-weight: 700;
    line-height: 32px;
    font-family: MiSans Latin VF
}

.membership-discount .discount-card-list li .discount-card .discount-card-line[data-v-315b684f] {
    color: #16171f;
    padding: 0 12px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    border-radius: 21px;
    border: 1px solid #16171f
}

.membership-discount .discount-card-list li .discount-card-name[data-v-315b684f] {
    margin-top: 10px;
    font-size: 12px;
    text-align: center;
    white-space: nowrap
}

.membership-discount .discount-card-list li .discount-card-name div[data-v-315b684f] {
    font-size: 16px;
    font-weight: 600;
    display: inline-block;
    margin: 0 2px;
    white-space: nowrap;
    background-clip: text;
    -webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent
}

.membership-discount .discount-card-list li[data-v-315b684f]:last-child {
    margin-right: 0
}

.membership-discount .discount-card-list li[data-v-315b684f]:nth-of-type(3) {
    margin-right: 48px
}

.membership-discount .membership-discount-title[data-v-315b684f] {
    text-align: center;
    padding-bottom: 32px;
    font-size: 20px;
    padding-top: 32px;
    font-weight: 500;
    line-height: 26px
}

.membership-discount .membership-discount-btn[data-v-315b684f] {
    margin: 40px auto;
    width: 224px
}

.ranks-table .rank-gift-info {
    display: flex;
    align-items: center
}

.ranks-table .rank-gift-info img {
    flex-shrink: 0
}

.ranks-table .rank-gift-info span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all
}

.ranks-table .empty {
    padding-top: 0
}

.ranks-table .el-table__empty-text {
    line-height: 14px
}

.ranks-table .el-table__empty-block {
    background: #191d22;
    height: 330px!important
}

.ranks-table .el-table__inner-wrapper {
    max-height: 784px
}

.ranks-table .gift-img {
    width: 48px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 8px
}

.ranks-table .gift-img img {
    width: 100%;
    height: 100%
}

.ranks-table :deep(.el-table__body-wrapper::before) {
    display: none
}

.ranks-table .el-table__inner-wrapper:before {
    display: none
}

.ranks-table .el-table__header {
    background: transparent
}

.ranks-table .el-table__header tr,.ranks-table .el-table__header th.el-table__cell {
    background: #15181e;
    height: 64px;
    color: #fff;
    padding-left: 80px
}

.ranks-table .el-table__header td.el-table__cell,.ranks-table .el-table__header th.el-table__cell.is-leaf {
    border-bottom: none
}

.ranks-table tr {
    background: #191d23
}

.ranks-table tr td {
    border-bottom: none!important;
    height: 64px;
    padding-left: 80px!important
}

.ranks-table .el-table__body tr:hover>td.el-table__cell {
    background: #191d23!important
}

.ranks-table tr.el-table__row--striped td.el-table__cell,.ranks-table .el-table__footer-wrapper tfoot td.el-table__cell {
    background: #15181e!important;
    border-bottom: none
}

.ranks-table tr.highlight-row {
    background: linear-gradient(11.98deg,#ffecd61f 14.38%,#ffd21f1f 80.65%)!important
}

.ranks-table tr.highlight-row td.el-table__cell {
    background: transparent!important;
    border-top: 1px solid #ffd21f!important;
    border-bottom: 1px solid #ffd21f!important
}

.ranks-table tr.highlight-row td.el-table__cell:first-child {
    border-left: 1px solid #ffd21f!important
}

.ranks-table tr.highlight-row td.el-table__cell:last-child {
    border-right: 1px solid #ffd21f!important
}

.ranks-table .el-table__footer-wrapper .el-table__footer {
    border-top: 1px solid!important;
    border-image-source: linear-gradient(90deg,#fff8cc 0%,#ffc670 100%);
    border-image-slice: 1
}

.ranks-table .el-table__footer-wrapper .el-table__footer td.el-table__cell {
    background: #303743!important
}

body .membership-tip .el-popper__arrow {
    display: inline-block
}

.member-ship-charts[data-v-fc193fed] {
    position: relative;
    width: 1132px;
    margin: 60px auto auto
}

.member-ship-charts .ranks-table[data-v-fc193fed] {
    background: transparent;
    border-radius: 16px
}

.member-ship-charts .ranks-table .top-before-three[data-v-fc193fed] {
    font-weight: bolder;
    font-size: 16px;
    line-height: 22px;
    background: linear-gradient(12deg,#ffecd6 14.38%,#ffd21f 80.65%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.member-ship-charts ul[data-v-fc193fed],.member-ship-charts li[data-v-fc193fed] {
    margin: 0;
    padding: 0;
    list-style: none
}

.member-ship-charts .charts-tabs[data-v-fc193fed] {
    width: 292px;
    height: 48px;
    border-radius: 80px;
    cursor: pointer;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,.2);
    padding: 4px
}

.member-ship-charts .charts-tabs div[data-v-fc193fed] {
    height: 36px;
    border-radius: 40px;
    width: 136px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    line-height: 22px
}

.member-ship-charts .charts-tabs .chartsActive[data-v-fc193fed] {
    background: linear-gradient(90deg,#a7ff1a,#82fac2,#47d4ff);
    color: #111214
}

.member-ship-charts .charts-message[data-v-fc193fed] {
    color: #8d9399;
    margin: 24px auto 40px;
    font-size: 14px;
    text-align: center
}

.member-ship-charts .charts-content[data-v-fc193fed] {
    overflow-y: hidden;
    padding-bottom: 20px;
    border-radius: 16px
}

.member-ship-charts .charts-time-list[data-v-fc193fed] {
    display: flex;
    align-items: center;
    margin-bottom: 40px
}

.member-ship-charts .charts-left-btn[data-v-fc193fed] {
    margin-right: 4px
}

.member-ship-charts .charts-right-btn[data-v-fc193fed] {
    margin-left: 4px
}

.member-ship-charts .charts-left-btn[data-v-fc193fed],.member-ship-charts .charts-right-btn[data-v-fc193fed] {
    color: #4d545c;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    background: #ffffff0a;
    flex-shrink: 0
}

.member-ship-charts .is-active-time-btn[data-v-fc193fed] {
    color: #ffd21f
}

.member-ship-charts .charts-content-title[data-v-fc193fed] {
    display: flex;
    align-items: center;
    padding: 2px 1px;
    width: 1050px;
    overflow-x: auto;
    flex: 1
}

.member-ship-charts .charts-content-title[data-v-fc193fed]::-webkit-scrollbar {
    display: none
}

.member-ship-charts .charts-content-title li[data-v-fc193fed] {
    cursor: pointer;
    box-sizing: border-box;
    width: 142px;
    flex-shrink: 0;
    margin-right: 8px;
    padding: 1px;
    background: #191b21;
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.member-ship-charts .charts-content-title li .week-item[data-v-fc193fed] {
    flex-shrink: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 62px;
    background: #191b21;
    border-radius: 8px
}

.member-ship-charts .charts-content-title li span[data-v-fc193fed] {
    color: #ffffff4d;
    text-align: center;
    font-size: 14px;
    font-weight: 500
}

.member-ship-charts .charts-content-title li .is-today[data-v-fc193fed] {
    display: flex;
    height: 18px;
    padding: 0 6px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    top: 0;
    font-size: 12px;
    position: absolute;
    right: 0;
    border-radius: 0 8px;
    background: #ffffff14
}

.member-ship-charts .charts-content-title li .is-today span[data-v-fc193fed] {
    background: linear-gradient(12deg,#ffecd6 14.38%,#ffd21f 80.65%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.member-ship-charts .charts-content-title li .is-select-today[data-v-fc193fed] {
    color: #000;
    background: linear-gradient(90deg,#a7ff1a,#82fac2,#47d4ff)
}

.member-ship-charts .charts-content-title li[data-v-fc193fed]:last-child {
    margin-right: 0
}

.member-ship-charts .charts-content-title .is-past-time span[data-v-fc193fed] {
    color: #fff
}

.member-ship-charts .charts-content-title .chartsDateActive[data-v-fc193fed] {
    background: linear-gradient(to right,#a7ff1a,#82fac2,#47d4ff)
}

.member-ship-charts .charts-content-title .chartsDateActive span[data-v-fc193fed] {
    text-align: center;
    font-weight: 600;
    background: linear-gradient(90deg,#a7ff1a,#82fac2,#47d4ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.member-ship-gift-display-banner[data-v-7bece698] {
    width: 1136px;
    margin: auto
}

.member-ship-gift-display-banner .gifts-display-img[data-v-7bece698] {
    width: 1136px;
    margin: 40px auto auto
}

.member-ship-gift-display[data-v-7bece698] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1136px;
    margin: auto;
    padding: 24px 24px 0;
    border-radius: 16px;
    border: 1px solid #4c4e5e;
    background: linear-gradient(90deg,#13d8ff,#70fde6),linear-gradient(175deg,#282937 4.74%,#353849 96.08%)
}

.member-ship-gift-display ul[data-v-7bece698],.member-ship-gift-display li[data-v-7bece698],.member-ship-gift-display h2[data-v-7bece698] {
    margin: 0;
    padding: 0;
    list-style: none
}

.member-ship-gift-display .gift-display-content[data-v-7bece698] {
    width: 532px;
    height: 236px;
    stroke-width: 1px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    padding-top: 15px;
    position: relative
}

.member-ship-gift-display .gift-display-content .gift-display-title[data-v-7bece698] {
    display: flex;
    position: absolute;
    top: -8px;
    align-items: flex-end
}

.member-ship-gift-display .gift-display-content .gift-display-title img[data-v-7bece698] {
    width: 100%
}

.member-ship-gift-display .gift-display-content .gift-display-title h2[data-v-7bece698] {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    line-height: 20px
}

.member-ship-gift-display .gift-display-content .gift-display-title p[data-v-7bece698] {
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    font-size: 12px;
    margin-left: 10px;
    line-height: 14px
}

.member-ship-gift-display .gift-display-content .gift-list[data-v-7bece698] {
    width: 100%;
    margin-top: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow-x: auto
}

.member-ship-gift-display .gift-display-content .gift-list[data-v-7bece698]::-webkit-scrollbar {
    display: unset;
    width: 5px;
    height: 5px;
    background-color: transparent
}

.member-ship-gift-display .gift-display-content .gift-list[data-v-7bece698]::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: transparent
}

.member-ship-gift-display .gift-display-content .gift-list[data-v-7bece698]::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555
}

.member-ship-gift-display .gift-display-content .gift-list[data-v-7bece698]::-webkit-scrollbar-thumb:hover {
    background-color: #777
}

.member-ship-gift-display .gift-display-content .gift-list li[data-v-7bece698] {
    height: 172px;
    width: 172px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.0784313725);
    overflow: hidden;
    position: relative;
    flex-shrink: 0
}

.member-ship-gift-display .gift-display-content .gift-list li img[data-v-7bece698] {
    width: 100%;
    height: 100%
}

.member-ship-gift-display .gift-display-content .gift-list li .gift-card-message[data-v-7bece698] {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center
}

.member-ship-gift-display .gift-display-content .gift-list li .gift-card-message .card-money[data-v-7bece698] {
    color: #fffc;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 4px;
    line-height: 16px
}

.member-ship-gift-display .gift-display-content .gift-list li .gift-card-message .card-message[data-v-7bece698] {
    color: #fffc;
    font-size: 14px;
    line-height: 20px
}

.member-ship-gift-display .gift-display-content .gift-list li[data-v-7bece698] :last-child {
    margin: 0
}

.header-bg[data-v-2bdb4ad0] {
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 200px;
    background-position: right top;
    background-repeat: no-repeat;
    background-image: url(../images/redeem/redeem-cong-bg.html);
    background-size: contain
}

.content[data-v-2bdb4ad0] {
    padding: 16px 32px 32px
}

.content .title-image[data-v-2bdb4ad0] {
    display: flex;
    justify-content: center
}

.content .title-image img[data-v-2bdb4ad0] {
    height: 58px;
    margin-bottom: 24px;
    display: block
}

.content .header[data-v-2bdb4ad0] {
    color: #fff
}

.content .header .title[data-v-2bdb4ad0] {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 8px
}

.content .header .welcome[data-v-2bdb4ad0] {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px
}

.content .cards[data-v-2bdb4ad0] {
    border: 1px dotted #6c757a;
    border-radius: 16px;
    max-height: 350px;
    padding: 16px 0;
    margin-top: 24px;
    overflow: scroll
}

.content .cards[data-v-2bdb4ad0]::-webkit-scrollbar {
    display: none
}

.content .card[data-v-2bdb4ad0] {
    width: 320px;
    height: 110px;
    position: relative;
    margin: 0 auto 16px
}

.content .card[data-v-2bdb4ad0]:last-child {
    margin-bottom: 0
}

.content .card .card-bg[data-v-2bdb4ad0] {
    width: 100%;
    display: block
}

.content .card .info[data-v-2bdb4ad0] {
    position: absolute;
    bottom: 16px;
    width: 100%;
    display: flex;
    justify-content: center;
    color: #111214
}

.content .card .info span[data-v-2bdb4ad0] {
    margin-left: 8px;
    font-size: 30px;
    font-weight: 520;
    line-height: 30px;
    color: #111214
}

.content .btns[data-v-2bdb4ad0] {
    text-align: center;
    margin-top: 24px
}

.el-dialog.receive-spirit-dialog {
    background: linear-gradient(174.58deg,#282937 4.74%,#353849 96.08%)!important;
    border: transparent!important;
    padding: 0!important;
    box-shadow: none!important
}

.el-dialog.receive-spirit-dialog .el-dialog__headerbtn {
    margin-top: -32px!important;
    margin-right: -48px!important;
    background-color: #ffffff1f;
    border-radius: 50%;
    width: 32px!important;
    height: 32px!important;
    display: flex;
    justify-content: center;
    align-items: center
}

.el-dialog.receive-spirit-dialog .el-dialog__headerbtn .el-dialog__close {
    color: #cad7db!important
}

.ai-web-cascader {
    width: 100%
}

.ai-web-cascader .el-input.is-focus .el-input__wrapper {
    box-shadow: none;
    border-color: #445b5c
}

.ai-web-cascader .el-input .el-input__wrapper {
    background-color: var(--main-background);
    border: 1px solid transparent;
    box-shadow: none;
    color: #fffc;
    border-radius: 8px
}

.ai-web-cascader .el-input .el-input__wrapper .el-input__inner:focus {
    border: none!important
}

.ai-web-cascader .el-input .el-input__wrapper .el-input__inner::placeholder {
    color: #727485
}

.ai-web-cascader:hover .el-input__wrapper {
    box-shadow: none!important;
    border-color: transparent
}

.ai-web-cascader.error .el-input__wrapper {
    border-color: red!important
}

.ai-web-cascader.light .el-input__wrapper {
    background-color: #0d111699
}

.ai-web-cascader-popover.el-popper {
    background: #21272e!important;
    padding: 4px 0!important
}

.ai-web-cascader-popover.el-popper .el-cascader-menu {
    min-width: 200px;
    border-right-color: #3d5e6666
}

.ai-web-cascader-popover.el-popper .el-cascader-menu .el-scrollbar__bar {
    display: none!important
}

.ai-web-cascader-popover.el-popper .el-cascader-menu .el-cascader-node {
    padding: 0 16px!important;
    justify-content: space-between
}

.ai-web-cascader-popover.el-popper .el-cascader-menu .el-cascader-node:hover {
    background: #2e363d!important;
    border-radius: 0!important;
    color: #fff
}

.ai-web-cascader-popover.el-popper .el-cascader-menu .el-cascader-node.in-active-path {
    color: #1be5ec
}

.ai-web-cascader-popover.el-popper .el-cascader-menu .el-cascader-node.is-active {
    color: #1be5ec;
    flex-direction: row-reverse
}

.ai-web-cascader-popover.el-popper .el-cascader-menu .el-cascader-node:focus {
    background: #2e363d!important
}

.ai-web-cascader-popover.el-popper .el-cascader-menu .el-cascader-node .el-cascader-node__label {
    padding: 0
}

.ai-web-cascader-popover.el-popper .el-cascader-menu .el-cascader-node .el-icon {
    position: static;
    font-size: 12px
}

.header-bg[data-v-5e566682] {
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 200px;
    background-position: right top;
    background-repeat: no-repeat;
    background-image: url(../images/redeem/redeem-cong-bg.html);
    background-size: contain
}

.content[data-v-5e566682] {
    padding: 16px 40px 32px
}

.content .title-image[data-v-5e566682] {
    display: flex;
    justify-content: center
}

.content .title-image img[data-v-5e566682] {
    height: 58px;
    margin-bottom: 24px;
    display: block
}

.content .header[data-v-5e566682] {
    color: #fff
}

.content .header .title[data-v-5e566682] {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 8px
}

.content .header .welcome[data-v-5e566682] {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px
}

.content table[data-v-5e566682] {
    width: 100%;
    margin-top: 24px
}

.content table td[data-v-5e566682] {
    padding: 8px 0
}

.content table td svg[data-v-5e566682] {
    vertical-align: top
}

.content table td sup[data-v-5e566682] {
    color: red;
    margin-left: 4px;
    vertical-align: middle
}

.content table .text-top[data-v-5e566682] {
    vertical-align: top
}

.content table .gifts[data-v-5e566682] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.content table .gifts .gift[data-v-5e566682] {
    position: relative
}

.content table .gifts .gift img[data-v-5e566682] {
    border-radius: 4px;
    width: 106.4px;
    height: 106.4px;
    display: block;
    object-fit: cover
}

.content table .gifts .gift .info[data-v-5e566682] {
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    height: 42px;
    padding-top: 16px;
    background: linear-gradient(180deg,#1f283300,#1f2833cc)
}

.content table .gifts .gift .price[data-v-5e566682] {
    font-size: 8px;
    font-weight: 600;
    line-height: 12px
}

.content table .gifts .gift .name[data-v-5e566682] {
    font-weight: 400;
    font-size: 6px;
    line-height: 10px
}

.content .note[data-v-5e566682] {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #727485;
    margin-top: 8px
}

.content .btns[data-v-5e566682] {
    text-align: right;
    margin-top: 24px
}

.el-dialog.submit-address-dialog {
    min-height: 496px;
    background: linear-gradient(174.58deg,#282937 4.74%,#353849 96.08%)!important;
    border: transparent!important;
    padding: 0!important;
    box-shadow: none!important
}

.el-dialog.submit-address-dialog .el-dialog__headerbtn {
    margin-top: -32px!important;
    margin-right: -48px!important;
    background-color: #ffffff1f;
    border-radius: 50%;
    width: 32px!important;
    height: 32px!important;
    display: flex;
    justify-content: center;
    align-items: center
}

.el-dialog.submit-address-dialog .el-dialog__headerbtn .el-dialog__close {
    color: #cad7db!important
}

.receive-gift-carousel[data-v-8caa3402] {
    width: 100%;
    width: 830px
}

.receive-gift-carousel[data-v-8caa3402] .el-carousel__indicators {
    display: none
}

.receive-gift-carousel .el-carousel__item[data-v-8caa3402] {
    display: flex;
    align-items: center
}

.receive-gift-carousel .receive-gift-item[data-v-8caa3402] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 830px
}

.member-ship-title[data-v-8caa3402] {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top: 60px
}

.member-ship-title .activity-title[data-v-8caa3402] {
    width: 180px
}

.member-ship-title .member-ship-title-tips[data-v-8caa3402] {
    color: #c5c7d5;
    text-align: center;
    font-size: 14px;
    margin-top: 24px
}

.member-ship-title .member-ship-title-tips i[data-v-8caa3402] {
    font-style: normal;
    display: inline-block;
    cursor: pointer;
    color: #43f0b6;
    text-align: center;
    margin-left: 8px;
    font-size: 14px
}

.member-ship-title .membership-receive-gift[data-v-8caa3402] {
    margin-top: 40px;
    width: 830px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border: .5px solid #4c4e5e;
    background: linear-gradient(175deg,#282937 4.74%,#353849 96.08%);
    border-radius: 8px;
    white-space: nowrap;
    font-size: 14px
}

.member-ship-title .membership-receive-gift img[data-v-8caa3402] {
    width: 24px;
    margin-right: 4px
}

.member-ship-title .membership-receive-gift .receive-gift-left[data-v-8caa3402] {
    max-width: 640px;
    overflow: hidden;
    display: flex;
    align-items: center
}

.member-ship-title .membership-receive-gift .receive-gift-left .receive-gift-line[data-v-8caa3402] {
    display: flex;
    align-items: center;
    color: #4eef87;
    font-weight: 500
}

.member-ship-title .membership-receive-gift .receive-gift-left .receive-gift-line .unit[data-v-8caa3402] {
    width: 20px;
    height: 20px;
    margin-right: 0;
    margin-bottom: 2px
}

.member-ship-title .membership-receive-gift .receive-gift-left span[data-v-8caa3402] {
    display: inline-block;
    color: #c5c7d5
}

.member-ship-title .membership-receive-gift .receive-gift-left span .gift-name[data-v-8caa3402] {
    color: #ffbe5c
}

.member-ship-title .membership-receive-gift .receive-gift-left span span[data-v-8caa3402] {
    display: inline-block;
    padding: 0 4px
}

.member-ship-title .membership-receive-gift .receive-gift-right[data-v-8caa3402] {
    cursor: pointer;
    color: #1be5ec
}

body.mobile .benefit-box[data-v-40f0bcca] {
    padding: 32px 24px 24px
}

body.mobile .membership-content[data-v-40f0bcca] {
    justify-content: center
}

body.mobile .membership-content .item[data-v-40f0bcca] {
    height: fit-content;
    flex: auto
}

body.mobile .point-content[data-v-40f0bcca] {
    padding: 12px 8px;
    flex-direction: column;
    align-items: center;
    gap: 12px
}

body.mobile .point-content .item[data-v-40f0bcca] {
    width: 100%
}

body.mobile .gift-card-content[data-v-40f0bcca] {
    padding: 32px 24px;
    gap: 102px
}

body.mobile .gift-card-content .item[data-v-40f0bcca] {
    height: unset
}

body.mobile .gift-card-content .item .img[data-v-40f0bcca] {
    width: 40px;
    height: 40px
}

body.mobile .gift-card-content .item .arrow[data-v-40f0bcca] {
    width: 27px;
    height: 16px;
    right: -86px
}

.benefit-box[data-v-40f0bcca] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-top: 32px;
    padding-bottom: 32px
}

.benefit-box .membership-img[data-v-40f0bcca] {
    height: 57px;
    display: block
}

.benefit-box .point-img[data-v-40f0bcca] {
    display: block;
    height: 62px
}

.benefit-box .gift-card-img[data-v-40f0bcca] {
    height: 56px;
    display: block
}

.benefit-box .title[data-v-40f0bcca] {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    width: 100%;
    text-align: left;
    color: var(--color-text-1)
}

.benefit-box .membership-content[data-v-40f0bcca] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%
}

.benefit-box .membership-content .item[data-v-40f0bcca] {
    flex: 1;
    height: 242px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid transparent
}

.benefit-box .membership-content .item[data-v-40f0bcca]:hover {
    border: 1px solid var(--color-border-hover)
}

.benefit-box .membership-content .item video[data-v-40f0bcca] {
    width: 100%;
    height: 142px;
    display: block;
    object-fit: cover
}

.benefit-box .membership-content .item .bottom[data-v-40f0bcca] {
    width: 100%;
    height: 100px;
    background: var(--color-other-1);
    padding: 16px;
    text-align: center
}

.benefit-box .membership-content .item .bottom-title[data-v-40f0bcca] {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-text-1);
    margin-bottom: 4px
}

.benefit-box .membership-content .item .bottom-description[data-v-40f0bcca] {
    font-weight: 400px;
    font-size: 12px;
    color: var(--color-text-2);
    line-height: 20px
}

.benefit-box .point-content[data-v-40f0bcca] {
    display: flex;
    justify-content: space-between;
    padding: 32px 80px;
    background-color: var(--color-bg-primary);
    border-radius: 16px;
    width: 100%
}

.benefit-box .point-content .item[data-v-40f0bcca] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 160px;
    min-height: 142px
}

.benefit-box .point-content .item__title[data-v-40f0bcca] {
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 2px
}

.benefit-box .point-content .item__description[data-v-40f0bcca] {
    color: var(--color-text-2);
    font-size: 12px;
    line-height: 20px;
    text-align: center
}

.benefit-box .point-content .item img[data-v-40f0bcca] {
    width: 80px;
    height: 80px;
    margin-bottom: 16px
}

.benefit-box .gift-card-content[data-v-40f0bcca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 80px;
    background: var(--color-bg-primary);
    border-radius: 16px;
    width: 100%;
    gap: 176px
}

.benefit-box .gift-card-content .item[data-v-40f0bcca] {
    flex: 1;
    height: 164px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative
}

.benefit-box .gift-card-content .item .arrow[data-v-40f0bcca] {
    width: 54px;
    position: absolute;
    top: calc(50% - 16px);
    right: -115px
}

.benefit-box .gift-card-content .item .img[data-v-40f0bcca] {
    width: 80px;
    height: 80px;
    margin-bottom: 16px
}

.benefit-box .gift-card-content .item .title[data-v-40f0bcca] {
    font-size: 14px;
    line-height: 24px;
    color: var(--color-text-1);
    margin-bottom: 4px;
    text-align: center;
    font-weight: 600
}

.benefit-box .gift-card-content .item .description[data-v-40f0bcca] {
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    white-space: pre;
    color: var(--color-text-2)
}

.paybar[data-v-ac1b6e10] {
    margin-top: 24px;
    height: 36px;
    font-size: 0;
    text-align: right
}

.paybar .sum[data-v-ac1b6e10] {
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    margin-right: 16px;
    display: inline-flex;
    align-items: center;
    color: var(--color-text-1)
}

.paybar .sum i[data-v-ac1b6e10] {
    font-style: normal;
    color: var(--color-theme-2);
    font-weight: 520
}

.paybar .pay[data-v-ac1b6e10] {
    display: inline-block
}

.simple[data-v-bbf67047] {
    color: var(--color-text-1)
}

.active[data-v-bbf67047] {
    background: var(--color-other-1);
    padding: 4px 6px;
    border-radius: 4px;
    box-shadow: 0 2px 8px #00000029;
    color: var(--color-text-1);
    font-size: 11px;
    font-weight: 400;
    line-height: 12px;
    display: inline-block;
    margin-left: 8px;
    vertical-align: top
}

.active.sp-target[data-v-bbf67047] {
    background: var(--color-theme-3);
    color: var(--color-theme-2)
}

ol.membership-list[data-v-ca843366] {
    padding: 0 16px 0 0;
    list-style: none;
    border-radius: 8px;
    background: var(--color-fill-light)
}

ol.membership-list li[data-v-ca843366] {
    position: relative;
    padding: 12px 0 0 44px;
    margin: 0
}

ol.membership-list li.only-one[data-v-ca843366] {
    padding-left: 16px
}

ol.membership-list li h3[data-v-ca843366] {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    margin: 0;
    padding: 0;
    color: var(--color-text-1)!important
}

ol.membership-list li p[data-v-ca843366] {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: var(--color-text-2);
    margin: 4px 0 0
}

ol.membership-list li p[data-v-ca843366]:last-child {
    padding-bottom: 12px;
    border-bottom: solid 1px var(--color-border-container)
}

ol.membership-list li .num[data-v-ca843366] {
    position: absolute;
    margin-top: 4px;
    margin-left: -28px;
    width: 16px;
    height: 16px;
    background: var(--color-theme-3);
    border-radius: 16px
}

ol.membership-list li .num i[data-v-ca843366] {
    color: var(--color-theme-2);
    font-family: MiSans Latin VF;
    font-style: normal;
    font-size: 10px;
    font-weight: 330;
    line-height: 16px;
    width: 16px;
    height: 16px;
    text-align: center;
    display: block
}

ol.membership-list li .bar[data-v-ca843366] {
    position: absolute;
    margin-left: -20px;
    margin-top: 28px;
    border-left: dashed 1px var(--color-theme-3);
    height: var(--bar-height);
    width: 1px
}

ol.membership-list li:last-child .bar[data-v-ca843366] {
    display: none
}

ol.membership-list li:last-child p[data-v-ca843366] {
    border: none
}

ol.membership-list li:last-child p[data-v-ca843366]:last-child {
    border-bottom: none
}

body.mobile .target[data-v-c7f50866] {
    background-size: unset
}

.membership-box[data-v-c7f50866] {
    width: 100%;
    border-radius: 12px;
    border: 1px solid transparent;
    background-clip: padding-box,border-box;
    background-origin: padding-box,border-box;
    overflow: hidden
}

.membership-box.vip[data-v-c7f50866] {
    background-image: var(--color-gradient-standard-bg),var(--color-gradient-standard)
}

.membership-box.svip[data-v-c7f50866] {
    background-image: var(--color-gradient-pro-bg),var(--color-gradient-pro)
}

.membership-box.ssvip[data-v-c7f50866] {
    background-image: var(--color-gradient-premier-bg),var(--color-gradient-premier)
}

.membership-box .target[data-v-c7f50866] {
    border-radius: 8px;
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-1);
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 15px;
    position: relative
}

.membership-box .target .img[data-v-c7f50866] {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 80px;
    width: 80px
}

.membership-box .target .container[data-v-c7f50866] {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.membership-box .target img[data-v-c7f50866] {
    width: 48px;
    height: 48px
}

body.mobile .membership-mobile-box[data-v-9a4f9764] {
    width: 100%;
    overflow-x: auto
}

h1[data-v-9a4f9764] {
    font-size: 22px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: .02em;
    text-align: left;
    margin: 0
}

.update-notice[data-v-9a4f9764] {
    margin-top: 24px;
    font-size: 16px;
    line-height: 24px;
    text-align: left
}

.update-notice a[data-v-9a4f9764] {
    color: var(--color-theme-2)
}

.desc[data-v-9a4f9764] {
    margin-top: 24px;
    color: var(--color-text-1);
    margin-bottom: 16px
}

.box-desc i[data-v-9a4f9764] {
    font-style: normal;
    color: var(--theme-color-primary)
}

.box-desc a[data-v-9a4f9764] {
    color: var(--color-theme-2)
}

body.mobile .prompt[data-v-d73af818] {
    height: fit-content
}

body.mobile .content[data-v-d73af818] {
    grid-template-columns: 1fr
}

.spirit-unit[data-v-d73af818] {
    margin-bottom: 32px
}

.spirit-unit .prompt[data-v-d73af818] {
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: var(--color-text-2);
    margin-bottom: 32px;
    height: 22px
}

.spirit-unit .prompt a[data-v-d73af818] {
    color: var(--color-theme-2);
    margin-left: 4px;
    text-decoration: none
}

.spirit-unit .content[data-v-d73af818] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px
}

.spirit-unit .content .item[data-v-d73af818] {
    height: 200px;
    border-radius: 16px;
    border: 1px solid var(--color-border-container);
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.spirit-unit .content .item .top[data-v-d73af818] {
    height: 140px;
    padding: 40px 0 40px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    background: var(--color-other-1)
}

.spirit-unit .content .item .top .bg[data-v-d73af818] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 140px;
    height: 140px
}

.spirit-unit .content .item .top .title[data-v-d73af818] {
    height: 32px;
    color: var(--color-text-1);
    display: flex;
    justify-content: space-between
}

.spirit-unit .content .item .top .title .left[data-v-d73af818] {
    display: flex;
    gap: 4px;
    align-items: center;
    height: 100%
}

.spirit-unit .content .item .top .title .left .point[data-v-d73af818] {
    font-size: 32px;
    font-weight: 520;
    font-family: MiSans Latin VF;
    line-height: 100%
}

.spirit-unit .content .item .top .title .left .tag[data-v-d73af818] {
    background-color: var(--color-other-2);
    height: 24px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 6px
}

.spirit-unit .content .item .top .title .left .tag span[data-v-d73af818] {
    font-size: 12px;
    font-weight: 600;
    background: var(--color-gradient-standard);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.spirit-unit .content .item .top .gift[data-v-d73af818] {
    font-size: 12px;
    color: var(--color-text-2)
}

.spirit-unit .content .item .top .gift span[data-v-d73af818] {
    color: var(--color-fill-warning)
}

.spirit-unit .content .item .bottom[data-v-d73af818] {
    flex: 1;
    overflow: hidden;
    padding: 14px 24px;
    justify-content: space-between
}

.spirit-unit .content .item .bottom .price[data-v-d73af818] {
    color: var(--color-text-1);
    font-weight: 520
}

.spirit-unit .content .item .bottom .price span[data-v-d73af818]:first-child {
    font-size: 16px;
    margin-right: 4px
}

.spirit-unit .content .item .bottom .price span[data-v-d73af818]:nth-child(2) {
    font-size: 24px
}

body.mobile .ad-box .top[data-v-d487690b],body.mobile .ad-box .bottom[data-v-d487690b] {
    min-width: 900px
}

body.mobile .content[data-v-d487690b] {
    grid-template-columns: 1fr
}

[data-v-d487690b] .el-input-number {
    width: 120px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-border-component)
}

[data-v-d487690b] .el-input-number:hover .el-input__wrapper {
    box-shadow: 0 0 0 1px var(--color-text-1) inset!important
}

[data-v-d487690b] .el-input-number .el-input-number__decrease,[data-v-d487690b] .el-input-number .el-input-number__increase {
    background: var(--color-other-2);
    top: 0;
    color: var(--color-text-1);
    font-weight: 600;
    bottom: 0;
    width: 36px
}

[data-v-d487690b] .el-input-number .el-input-number__decrease:hover,[data-v-d487690b] .el-input-number .el-input-number__increase:hover {
    color: var(--color-text-1)
}

[data-v-d487690b] .el-input-number .el-input-number__decrease.is-disabled,[data-v-d487690b] .el-input-number .el-input-number__increase.is-disabled {
    color: var(--color-text-3)
}

[data-v-d487690b] .el-input-number .el-input-number__decrease {
    left: 0;
    border-right: none
}

[data-v-d487690b] .el-input-number .el-input-number__increase {
    right: 0;
    border-left: none
}

[data-v-d487690b] .el-input-number .el-input__wrapper {
    background-color: transparent;
    border-radius: 8px;
    box-shadow: none!important
}

[data-v-d487690b] .el-input-number .el-input__wrapper .el-input__inner {
    color: var(--color-text-1);
    font-weight: 600
}

[data-v-d487690b] .el-input-number .el-input__wrapper .el-input__inner:focus {
    border: none!important
}

.gift-cards .ad-box[data-v-d487690b] {
    padding: 14px 16px;
    background: var(--color-other-1);
    color: var(--color-text-2);
    border-radius: 8px;
    margin-bottom: 12px
}

.gift-cards .ad-box .top[data-v-d487690b] {
    border-bottom: 1px solid var(--color-other-1);
    height: 34px;
    padding-bottom: 12px;
    margin-bottom: 12px
}

.gift-cards .ad-box .top div[data-v-d487690b]:first-child {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-1);
    height: 22px;
    vertical-align: middle;
    margin-right: 4px
}

.gift-cards .ad-box .top div[data-v-d487690b]:first-child b {
    font-weight: 600;
    font-style: normal;
    background: var(--color-gradient-standard);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.gift-cards .ad-box .top div[data-v-d487690b]:first-child i {
    font-size: 16px;
    font-weight: 520;
    font-style: normal;
    background: var(--color-gradient-standard);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 4px
}

.gift-cards .ad-box .top div[data-v-d487690b]:nth-child(2) {
    height: 22px;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-2)
}

.gift-cards .ad-box .top div[data-v-d487690b]:nth-child(2) b {
    color: var(--color-text-1);
    margin-left: 4px
}

.gift-cards .ad-box .bottom[data-v-d487690b] {
    display: flex;
    gap: 76px
}

.gift-cards .ad-box .bottom .item[data-v-d487690b] {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    position: relative
}

.gift-cards .ad-box .bottom .item .arrow[data-v-d487690b] {
    width: 28px;
    height: 17px;
    position: absolute;
    top: calc(50% - 9px);
    right: -50px
}

.gift-cards .ad-box .bottom .item .right[data-v-d487690b] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 12px
}

.gift-cards .ad-box .bottom .item .right span[data-v-d487690b]:first-child {
    font-weight: 600;
    line-height: 20px
}

.gift-cards .ad-box .bottom .item .right span[data-v-d487690b]:nth-child(2) {
    font-weight: 400;
    line-height: 20px;
    color: var(--color-text-2)
}

.gift-cards .ad-box .bottom .item .right span[data-v-d487690b]:nth-child(2) b {
    list-style: none;
    color: var(--color-text-3)
}

.gift-cards .title[data-v-d487690b] {
    width: 100%;
    font-size: 14px;
    height: 24px;
    padding-left: 8px;
    position: relative;
    margin-bottom: 12px
}

.gift-cards .title[data-v-d487690b]:after {
    content: "";
    width: 4px;
    height: 16px;
    background: var(--color-theme-2);
    position: absolute;
    top: 4px;
    left: 0;
    border-radius: 3px
}

.gift-cards .content[data-v-d487690b] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px 16px
}

.gift-cards .content .item[data-v-d487690b] {
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--color-border-frame)
}

.gift-cards .content .item .price[data-v-d487690b] {
    font-size: 24px;
    font-weight: 520;
    font-family: MiSans Latin VF;
    color: var(--color-text-1)
}

.gift-cards .content .item .price span[data-v-d487690b] {
    font-size: 16px;
    font-weight: 520;
    margin-right: 4px
}

.gift-cards .content .item .old[data-v-d487690b] {
    vertical-align: middle;
    display: inline-block;
    width: fit-content
}

.gift-cards .content .item .old .v[data-v-d487690b] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-3)
}

.gift-cards .content .item .old .b[data-v-d487690b] {
    width: 100%;
    height: 1px;
    background-color: var(--color-text-3);
    transform: translateY(-12px) rotate(-10deg) translate(2px)
}

.gift-cards .content .item .top[data-v-d487690b] {
    width: 100%;
    height: 160px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative
}

.gift-cards .content .item .top span[data-v-d487690b] {
    font-size: 24px;
    font-weight: 520;
    font-family: MiSans Latin VF;
    line-height: 32px
}

.gift-cards .content .item .top .img[data-v-d487690b] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 160px;
    height: 160px;
    z-index: 1
}

.gift-cards .content .item.member-item .type[data-v-d487690b] {
    font-size: 20px;
    font-weight: 600;
    height: 28px
}

.gift-cards .content .item.member-item .benefits-title[data-v-d487690b] {
    height: 28px;
    font-size: 14px;
    font-weight: 600
}

.gift-cards .content .item.member-item .benefits-title[data-v-d487690b] i {
    font-family: MiSans Latin VF;
    font-style: normal
}

.gift-cards .content .item.member-item .benefits-description[data-v-d487690b] {
    height: 20px;
    font-size: 12px;
    font-weight: 400;
    margin-top: 4px;
    color: var(--color-text-2)
}

.gift-cards .content .item.member-item .member-bottom[data-v-d487690b] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    width: 100%
}

.gift-cards .content .item.member-item .member-bottom .bottom-item[data-v-d487690b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px;
    border-radius: 8px;
    border: 1px solid var(--color-border-frame);
    padding: 16px
}

.gift-cards .content .item.member-item .member-bottom .bottom-item .left[data-v-d487690b] {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.gift-cards .content .item.point-item[data-v-d487690b] {
    height: 228px
}

.gift-cards .content .item.point-item .top[data-v-d487690b] {
    background: var(--color-fill-light);
    position: relative
}

.gift-cards .content .item.point-item .top[data-v-d487690b]:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-bg-primary);
    z-index: 0
}

.gift-cards .content .item.point-item .bottom[data-v-d487690b] {
    height: 68px;
    width: 100%;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.gift-cards .content .item.point-item .description[data-v-d487690b] {
    z-index: 1
}

.gift-cards .content .item.point-item .description span[data-v-d487690b] {
    display: block;
    line-height: 18px;
    font-size: 12px;
    font-weight: 400
}

.gift-cards .content .item.point-item .description span[data-v-d487690b] b {
    color: var(--color-text-3);
    list-style: none;
    font-weight: 400
}

.gift-cards .ad b {
    margin: 0 4px 4px;
    font-size: 20px;
    font-weight: 520
}

.best-offer[data-v-a891f6fe] {
    height: 26px;
    padding: 0 12px;
    color: #111214;
    font-size: 14px;
    font-weight: 500;
    gap: 6px;
    border-radius: 0 14px 0 16px
}

.best-offer-ssvip[data-v-a891f6fe] {
    background: linear-gradient(90deg,#e0e9ff,#c3adff)
}

body.mobile .membership-plan .top[data-v-bf4bae93] {
    gap: 8px;
    height: 46px;
    overflow-x: scroll
}

body.mobile .membership-plan .top[data-v-bf4bae93]::-webkit-scrollbar {
    display: none
}

body.mobile .membership-plan .top .tab[data-v-bf4bae93] {
    padding: 0 13px;
    flex-shrink: 0
}

body.mobile .membership-plan .top .tab span[data-v-bf4bae93] {
    font-size: 11px
}

body.mobile .membership-plan .top .tab.non-subs[data-v-bf4bae93] {
    width: 150px
}

body.mobile .membership-plan .content[data-v-bf4bae93] {
    flex-wrap: wrap;
    height: fit-content
}

body.mobile .membership-plan .content .membership[data-v-bf4bae93] {
    width: 100%;
    flex: auto
}

body.mobile .membership-plan .content .membership .membership-top[data-v-bf4bae93] {
    border-radius: 13px;
    overflow: hidden
}

body.mobile .membership-plan .content .membership .membership-top .bg[data-v-bf4bae93] {
    border-radius: 17px
}

body.mobile .membership-plan .content .membership .membership-top__vip[data-v-bf4bae93] {
    background: linear-gradient(12deg,#fff1d6 14.38%,#ffe852 80.65%)
}

body.mobile .membership-plan .content .membership .membership-top__svip[data-v-bf4bae93] {
    background: linear-gradient(12deg,#cef5f0 14.38%,#6ddef7 80.65%)
}

body.mobile .membership-plan .content .membership .membership-top__ssvip[data-v-bf4bae93] {
    background: linear-gradient(12deg,#e0eeff 14.38%,#70a9ff 80.65%)
}

body.lang-zh .membership-plan .membership .benefits h4[data-v-bf4bae93] i {
    margin-left: 4px
}

.membership-plan[data-v-bf4bae93] {
    display: flex;
    flex-direction: column;
    align-items: center
}

.membership-plan .top[data-v-bf4bae93] {
    height: 48px;
    border-radius: 24px;
    border: 1px solid var(--color-border-container);
    gap: 16px;
    padding: 6px
}

.membership-plan .top .tab[data-v-bf4bae93] {
    height: 100%;
    border-radius: 40px;
    padding: 0 24px;
    justify-content: space-between;
    cursor: pointer
}

.membership-plan .top .tab span[data-v-bf4bae93] {
    font-size: 14px;
    color: var(--color-text-1)!important;
    font-weight: 400
}

.membership-plan .top .tab-active[data-v-bf4bae93] {
    background: var(--color-other-3)
}

.membership-plan .top .tab-active span[data-v-bf4bae93] {
    font-weight: 600
}

.membership-plan .top .tab.non-subs[data-v-bf4bae93] {
    width: 183px;
    padding-right: 16px
}

.membership-plan .top .tab.non-subs svg[data-v-bf4bae93] {
    vertical-align: middle;
    margin-left: 4px;
    transition: all .4s;
    transform: rotate(180deg)
}

.membership-plan .top .tab.non-subs svg.expanded[data-v-bf4bae93] {
    transform: rotate(0)
}

.membership-plan .content[data-v-bf4bae93] {
    width: 100%;
    display: flex;
    gap: 16px;
    justify-content: center
}

.membership-plan .content .membership[data-v-bf4bae93] {
    flex: 1;
    background: var(--color-bg-primary);
    border-radius: 16px;
    position: relative;
    border: 1px solid transparent
}

.membership-plan .content .membership[data-v-bf4bae93]:hover {
    border: 1px solid var(--color-border-hover);
    background: var(--color-other-2)
}

.membership-plan .content .membership-top[data-v-bf4bae93] {
    padding: 28px 24px 0
}

.membership-plan .content .membership-dialog[data-v-bf4bae93] {
    background: var(--color-fill-light)
}

.membership-plan .content .membership-active__none[data-v-bf4bae93],.membership-plan .content .membership-active__none-hot[data-v-bf4bae93] {
    border: 1px #abbbcc solid!important
}

.membership-plan .content .membership-active__vip[data-v-bf4bae93] {
    border: 1px #ffc670 solid!important
}

.membership-plan .content .membership-active__vip-hot[data-v-bf4bae93] {
    border: 1px #ffe852 solid!important
}

.membership-plan .content .membership-active__svip[data-v-bf4bae93] {
    border: 1px #70bcff solid!important
}

.membership-plan .content .membership-active__svip-hot[data-v-bf4bae93] {
    border: 1px #6ddef7 solid!important
}

.membership-plan .content .membership-active__ssvip[data-v-bf4bae93] {
    border: 1px solid transparent;
    border-radius: 16px;
    background-clip: padding-box,border-box;
    background-origin: padding-box,border-box;
    background-image: var(--color-active-bg-ssvip),var(--color-gradient-premier)!important
}

.membership-plan .content .membership-active__ssvip-hot[data-v-bf4bae93] {
    border: 1px #70a9ff solid!important
}

.membership-plan .content .membership-active__ssvip[data-v-bf4bae93]:hover {
    border: 1px solid transparent;
    background-clip: padding-box,border-box;
    background-origin: padding-box,border-box;
    background-image: var(--color-active-bg-ssvip),var(--color-gradient-premier)!important
}

.membership-plan .content .membership .bg[data-v-bf4bae93] {
    position: absolute;
    left: -1px;
    width: calc(100% + 2px);
    z-index: 1
}

.membership-plan .content .membership .best-offer-tag[data-v-bf4bae93] {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2
}

.membership-plan .content .membership h3[data-v-bf4bae93] {
    height: 28px;
    z-index: 2;
    position: relative;
    color: var(--color-text-1)
}

.membership-plan .content .membership h3 .hot[data-v-bf4bae93] {
    font-size: 20px;
    font-weight: 400
}

.membership-plan .content .membership h3 span[data-v-bf4bae93] {
    vertical-align: middle;
    font-weight: 400;
    line-height: 28px;
    font-size: 18px
}

.membership-plan .content .membership h3 .discount-tag[data-v-bf4bae93] {
    height: 22px;
    padding: 0 6px;
    background: var(--color-other-2);
    color: var(--color-text-1);
    font-size: 12px;
    border-radius: 4px;
    display: inline-flex;
    margin-left: 4px;
    font-weight: 400
}

.membership-plan .content .membership h3 .discount-tag[data-v-bf4bae93] i {
    font-size: 14px;
    font-weight: 400;
    margin: 0 2px;
    font-style: normal
}

.membership-plan .content .membership .dollar-price[data-v-bf4bae93] {
    display: inline-block;
    vertical-align: middle;
    margin-top: 12px;
    height: 44px;
    z-index: 2;
    position: relative;
    color: var(--color-text-1)
}

.membership-plan .content .membership .dollar-price span.price[data-v-bf4bae93] {
    font-size: 28px;
    font-weight: 520;
    line-height: 40px;
    font-family: MiSans Latin VF
}

.membership-plan .content .membership .dollar-price span.price span[data-v-bf4bae93] {
    font-size: 18px;
    font-weight: 600;
    margin-right: 4px
}

.membership-plan .content .membership .dollar-price .unit[data-v-bf4bae93] {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-1);
    margin-left: 4px
}

.membership-plan .content .membership .dollar-price .old[data-v-bf4bae93] {
    vertical-align: middle;
    display: inline-block;
    margin-left: 10px;
    color: var(--color-text-3)
}

.membership-plan .content .membership .dollar-price .old .v[data-v-bf4bae93] {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px
}

.membership-plan .content .membership .dollar-price .old .b[data-v-bf4bae93] {
    width: 100%;
    height: 1px;
    background: var(--color-text-3);
    transform: translateY(-12px) rotate(-10deg) translate(2px)
}

.membership-plan .content .membership .discount-description[data-v-bf4bae93] {
    height: 40px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--color-text-2);
    margin-top: 4px;
    z-index: 2;
    position: relative
}

.membership-plan .content .membership .buy[data-v-bf4bae93] {
    margin-top: 36px;
    padding-bottom: 24px;
    position: relative;
    z-index: 2
}

.membership-plan .content .membership .buy .rebuy-notice[data-v-bf4bae93] {
    opacity: 1;
    transition: opacity .3s;
    color: var(--color-text-3);
    margin-top: 12px;
    font-size: 12px;
    font-weight: 400;
    height: 20px;
    text-align: center
}

.membership-plan .content .membership .buy .rebuy-notice svg[data-v-bf4bae93] {
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-left: 4px
}

.membership-plan .content .membership .buy .count-down-item[data-v-bf4bae93] {
    position: absolute;
    top: -20px;
    left: calc(50% - 57px);
    height: 20px;
    padding: 0 20px;
    border-radius: 20px 20px 0 0;
    background: var(--color-other-1)
}

.membership-plan .content .membership .line[data-v-bf4bae93] {
    height: 1px;
    width: calc(100% - 48px);
    margin: auto;
    background: var(--color-border-container)
}

.membership-plan .content .membership .benefits[data-v-bf4bae93] {
    padding: 24px 24px 0;
    color: var(--color-text-1)
}

.membership-plan .content .membership .benefits h4[data-v-bf4bae93] {
    font-size: 14px;
    font-weight: 400;
    height: 28px;
    margin: 0 0 4px;
    display: flex;
    align-items: end
}

.membership-plan .content .membership .benefits h4[data-v-bf4bae93] i {
    font-style: normal;
    font-weight: 520;
    font-size: 20px;
    line-height: 28px;
    vertical-align: baseline;
    margin: 0 4px 0 0;
    font-family: MiSans Latin VF
}

.membership-plan .content .membership .benefits h4 span[data-v-bf4bae93] {
    height: 28px;
    display: flex;
    align-items: end
}

.membership-plan .content .membership .benefits p[data-v-bf4bae93] {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    color: var(--color-text-2)
}

.membership-plan .content .membership .benefits .explanations[data-v-bf4bae93] {
    margin-left: 2px;
    color: var(--color-text-2);
    height: 16px;
    margin-bottom: 3px
}

.membership-plan .content .membership ol[data-v-bf4bae93] {
    margin-top: 24px;
    margin-left: 0;
    text-align: left;
    padding: 0 24px 28px
}

.membership-plan .content .membership ol li[data-v-bf4bae93] {
    list-style: none;
    padding-left: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-text-2);
    margin-bottom: 8px
}

.membership-plan .content .membership ol li svg[data-v-bf4bae93] {
    color: var(--color-theme-2)
}

.membership-plan .kol[data-v-bf4bae93] {
    width: 100%;
    background: var(--color-other-1);
    border-radius: 4px
}

.membership-plan .kol-label[data-v-bf4bae93] {
    display: inline-flex;
    border-radius: 4px;
    width: 100%;
    justify-content: center;
    align-items: baseline;
    height: 40px;
    padding: 4px 24px;
    background: var(--color-gradient-premier);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-size: 14px
}

.membership-plan .kol-label b[data-v-bf4bae93] {
    background: var(--color-gradient-premier);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent
}

.membership-plan .kol-label .slim[data-v-bf4bae93] {
    font-weight: 400
}

.membership-plan .kol-label .normal[data-v-bf4bae93] {
    font-weight: 600
}

.membership-plan .kol-label span[data-v-bf4bae93] {
    margin-right: 4px;
    line-height: 22px
}

.membership-plan .kol-label span[data-v-bf4bae93]:last-child {
    margin-right: 0
}

.membership-plan .kol-label span.icon[data-v-bf4bae93] {
    display: flex;
    align-items: center;
    transform: translateY(4px)
}

.membership-plan .kol-label span.icon b[data-v-bf4bae93] {
    margin-left: 2px;
    font-weight: 600
}

.membership-plan .kol-label span.price[data-v-bf4bae93] {
    padding-top: 0;
    font-size: 20px;
    line-height: 28px
}

.membership-plan .kol-label span.price .dollar[data-v-bf4bae93] {
    display: inline-block;
    line-height: 22px;
    font-size: 14px;
    margin-right: 2px
}

.membership-plan .kol-label span.price .number[data-v-bf4bae93] {
    font-weight: 520;
    font-family: MiSans Latin VF
}

[data-v-bf4bae93] .dropdown-item-active {
    color: var(--color-theme-2)!important
}

.renewal-tag[data-v-2e417eb8] {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    color: #ffad33;
    border: 1px solid rgba(255,173,51,.1019607843);
    background: #ffad331f;
    padding: 2px 2px 2px 6px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 8px
}

.renewal-tag svg[data-v-2e417eb8] {
    width: 12px;
    height: 12px;
    margin: 4px 4px 0;
    vertical-align: top
}

body.mobile .membership-box__top[data-v-5e110765] {
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 25px 16px 16px;
    background: var(--color-bg-primary);
    border-radius: 16px
}

body.mobile .membership-box__top .user[data-v-5e110765] {
    font-size: 14px!important;
    position: relative;
    width: 100%
}

body.mobile .membership-box__top .user-right[data-v-5e110765] {
    gap: 0
}

body.mobile .membership-box__top .user[data-v-5e110765]:after {
    content: "";
    position: absolute;
    bottom: -24px;
    left: -16px;
    height: 1px;
    width: calc(100% + 32px);
    background: var(--color-bg-primary)
}

body.mobile .membership-box__top .property[data-v-5e110765] {
    height: 26px;
    gap: 48px;
    margin-top: 32px;
    width: 100%;
    justify-content: space-between;
    position: relative
}

body.mobile .membership-box__top .property-item div[data-v-5e110765] {
    justify-content: space-between
}

body.mobile .membership-box__top .property-item div span[data-v-5e110765] {
    color: var(--color-text-2);
    display: flex;
    gap: 4px
}

body.mobile .membership-box__top .property-item[data-v-5e110765]:nth-child(3) {
    position: absolute;
    bottom: -80px;
    left: -16px;
    width: calc(100% + 32px);
    background: #ffffff0f;
    border-radius: 16px;
    padding: 16px
}

body.mobile .membership-box__top .property-item[data-v-5e110765]:nth-child(3) svg {
    color: #cad7db
}

body.mobile .membership-box__top .property-item[data-v-5e110765]:nth-child(1) {
    width: calc(50% - 24px)
}

body.mobile .membership-box__top .property-item:nth-child(1) div span span[data-v-5e110765] {
    font-weight: 600;
    background: linear-gradient(89deg,#a7ff1a,#82fac2);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

body.mobile .membership-box__top .property-item[data-v-5e110765]:nth-child(1):after {
    content: "";
    height: 12px;
    width: 1px;
    background: #fff3;
    position: absolute;
    top: 6px;
    right: -24px
}

body.mobile .membership-box__top .property-item[data-v-5e110765]:nth-child(2) {
    width: calc(50% - 24px)
}

body.mobile .membership-box__top .property-item[data-v-5e110765]:nth-child(2):after {
    content: "";
    display: none
}

body.mobile .membership-box__tab[data-v-5e110765] {
    margin-top: var(--margin-top);
    padding-left: 12px;
    margin-bottom: 16px
}

body.mobile.lang-en .tabs[data-v-5e110765] {
    gap: 12px
}

.membership-box[data-v-5e110765] {
    width: 100%;
    height: 100%
}

.membership-box__top[data-v-5e110765] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px;
    border-radius: 16px;
    background: var(--color-bg-primary)
}

.membership-box__top .user[data-v-5e110765] {
    display: flex;
    gap: 16px
}

.membership-box__top .user-right[data-v-5e110765] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center
}

.membership-box__top .user-right .name[data-v-5e110765] {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-1)
}

.membership-box__top .user-right .other[data-v-5e110765] {
    font-size: 14px
}

.membership-box__top .user-right .other span[data-v-5e110765] {
    color: var(--color-text-2)
}

.membership-box__top .user-right .other a[data-v-5e110765] {
    color: var(--color-theme-2);
    cursor: pointer
}

.membership-box__top .property[data-v-5e110765] {
    height: 50px;
    display: flex;
    gap: 64px
}

.membership-box__top .property-item[data-v-5e110765] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative
}

.membership-box__top .property-item div[data-v-5e110765]:first-child {
    font-size: 14px;
    gap: 2px;
    cursor: pointer;
    color: var(--color-text-2)
}

.membership-box__top .property-item div[data-v-5e110765]:nth-child(2) {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-1)
}

.membership-box__top .property-item div:nth-child(2).trial-package-next-time[data-v-5e110765] {
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: left
}

.membership-box__top .property-item div:nth-child(2) span[data-v-5e110765] {
    color: var(--color-theme-2);
    font-size: 14px;
    font-weight: 400;
    margin-left: 4px;
    cursor: pointer
}

.membership-box__top .property-item[data-v-5e110765]:not(:last-child):after {
    content: "";
    height: 24px;
    width: 1px;
    background: var(--color-border-component);
    position: absolute;
    top: 13px;
    right: -32px
}

.membership-box__top .no-login .title[data-v-5e110765] {
    height: 32px;
    display: block
}

.membership-box__top .no-login .sub-title[data-v-5e110765] {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-1)
}

.membership-box__tab[data-v-5e110765] {
    width: 100%;
    margin: 32px 0;
    height: 34px
}

.membership-box__content[data-v-5e110765] {
    width: 100%
}

body.lang-en .header-text[data-v-113379de] {
    font-family: PP Editorial New;
    font-style: italic;
    background: var(--color-gradient-button);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800
}

body.mobile .membership-view[data-v-113379de] {
    width: 100%
}

body.mobile .membership-view__content[data-v-113379de] {
    width: 100%;
    margin-top: 20px!important;
    -webkit-backdrop-filter: 0;
    backdrop-filter: 0;
    margin-bottom: 0;
    overflow-y: scroll;
    min-width: 0
}

body.mobile .membership-view__top[data-v-113379de] {
    width: 100%;
    background: none;
    padding: 0 12px
}

.membership-view[data-v-113379de] {
    width: calc(100vw - var(--left-navigation-width));
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px
}

.membership-view .header-text[data-v-113379de] {
    height: 54px;
    font-size: 40px;
    font-weight: 800;
    background: var(--color-gradient-button);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.membership-view__content[data-v-113379de] {
    border-radius: 24px;
    margin-bottom: 48px;
    width: calc(100% - 128px);
    max-width: 1380px;
    min-width: 1092px
}

.membership-view__top[data-v-113379de] {
    width: 100%
}

.membership-view .arrow-content[data-v-113379de] {
    width: 100vw;
    height: 108px;
    border-radius: 16px 16px 0 0;
    background: #151e29cc;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity .5s;
    cursor: pointer
}

.membership-view .arrow-content img[data-v-113379de] {
    width: 179px;
    height: 56px;
    margin-top: 12px;
    margin-bottom: 4px
}

.membership-view .kol-header[data-v-113379de] {
    margin-top: -180px;
    text-align: center;
    padding-top: 32px;
    padding-bottom: 44px
}

.membership-view .kol-header div[data-v-113379de] {
    font-size: 40px;
    font-weight: 630;
    line-height: 48px;
    color: #fff;
    font-family: MiSans Latin VF;
    margin-bottom: 16px
}

.header[data-v-86611e39] {
    padding: 40px 0 24px;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--color-bg-page);
    display: flex;
    justify-content: space-between;
    align-items: center
}

.header .tabs[data-v-86611e39] {
    width: 100%;
    height: 36px
}

.user[data-v-868afc76] {
    display: flex;
    margin-bottom: 36px
}

.user .user-desc[data-v-868afc76] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--color-text-1);
    gap: 4px
}

.user .user-desc .name[data-v-868afc76] {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px
}

.user .user-desc .motivate[data-v-868afc76] {
    display: flex;
    gap: 16px;
    align-items: center;
    font-weight: 400;
    line-height: 20px;
    font-size: 12px;
    color: var(--color-text-2)
}

.user .user-desc .motivate .number[data-v-868afc76] {
    color: var(--color-text-1)
}

.user .avatar[data-v-868afc76] {
    margin-right: 24px;
    width: 64px;
    height: 64px
}

.title[data-v-868afc76] {
    display: flex;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border-container);
    margin-bottom: 16px
}

.title h3[data-v-868afc76] {
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: var(--color-text-1);
    margin-right: 12px
}

.title h4[data-v-868afc76] {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-text-3)
}

.title .complete[data-v-868afc76] {
    background: linear-gradient(89.86deg,#a7ff1a,#82fac2,#47d4ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.milestone[data-v-868afc76] {
    margin-bottom: 48px
}

.milestone .milestone-list[data-v-868afc76] {
    display: flex;
    gap: 10px;
    align-items: center
}

.milestone .milestone-list .milestone-item[data-v-868afc76] {
    position: relative
}

.milestone .milestone-list .milestone-item .tip[data-v-868afc76] {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    background-color: var(--color-fill-light);
    width: 104px;
    height: 40px;
    padding: 8px 0;
    justify-content: center;
    color: var(--color-text-1)
}

.milestone .milestone-list .milestone-item .tip .number[data-v-868afc76] {
    font-family: MiSans Latin VF;
    font-size: 16px;
    font-weight: 380;
    line-height: 24px;
    margin-left: 4px
}

.milestone .milestone-list .milestone-item .tip svg[data-v-868afc76] {
    width: 14px;
    height: 18px
}

.milestone .milestone-list .milestone-item.processing .tip[data-v-868afc76] {
    background-color: var(--color-theme-2);
    color: var(--color-text-5)
}

.milestone .milestone-list .milestone-item.processing .triangle[data-v-868afc76] {
    position: relative;
    left: calc(50% - 6px);
    width: 0;
    height: 0;
    border-top: 7px solid var(--color-theme-2);
    border-right: 6px solid transparent;
    border-left: 6px solid transparent
}

.milestone .milestone-list .milestone-item.done .tip[data-v-868afc76] {
    color: var(--color-text-3)
}

.milestone .milestone-list .milestone-item.done .done-icon[data-v-868afc76] {
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 4px 0 8px;
    width: 14px;
    height: 12px;
    background-color: var(--color-other-3);
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.milestone .milestone-list .milestone-item.done .done-icon svg[data-v-868afc76] {
    width: 10px;
    height: 10px;
    color: var(--color-text-2)
}

.milestone .progress-container[data-v-868afc76] {
    border-radius: 8px;
    height: 6px;
    background-color: var(--color-border-container);
    margin: 16px 0;
    position: relative
}

.milestone .progress-container .progress[data-v-868afc76] {
    position: relative;
    left: 0;
    min-width: 4px;
    background-color: var(--color-theme-2);
    height: 6px;
    border-radius: 8px
}

.milestone .progress-container .end[data-v-868afc76] {
    position: relative;
    top: -11px;
    width: 4px;
    height: 16px;
    border-radius: 8px;
    background-color: var(--color-theme-2)
}

.milestone .threshold-list[data-v-868afc76] {
    display: flex;
    gap: 10px;
    justify-content: center
}

.milestone .threshold-list span[data-v-868afc76] {
    width: 104px;
    text-align: center;
    color: var(--color-text-3);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px
}

.milestone .threshold-list span.processing[data-v-868afc76] {
    color: var(--color-text-1)
}

.publish .skit-task[data-v-868afc76] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-fill-light);
    padding: 16px;
    border-radius: 12px
}

.publish .skit-task .tip[data-v-868afc76] {
    display: flex;
    align-items: center
}

.publish .skit-task .tip span[data-v-868afc76] {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-text-1)
}

.publish .skit-task .tip .spirit[data-v-868afc76] {
    gap: 4px;
    display: inline-flex;
    align-items: center;
    color: var(--color-theme-2);
    font-family: MiSans Latin VF;
    font-size: 16px;
    font-weight: 380;
    line-height: 24px;
    text-align: center;
    margin: 0 8px
}

.publish .skit-task .tip .spirit svg[data-v-868afc76] {
    width: 14px;
    height: 18px
}

.doc[data-v-868afc76] {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    color: var(--color-text-2);
    gap: 4px
}

.doc a[data-v-868afc76] {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-text-2);
    text-decoration: none
}

body.mobile .profile[data-v-58765a0f] {
    padding: 16px;
    position: relative
}

body.mobile .profile .user-info[data-v-58765a0f] {
    gap: 16px
}

body.mobile .profile .user-info .avatar[data-v-58765a0f] {
    width: 40px;
    height: 40px;
    flex-shrink: 0
}

body.mobile .profile .user-info .right[data-v-58765a0f] {
    gap: 12px
}

body.mobile .profile .btn-group[data-v-58765a0f] {
    position: absolute;
    top: 16px;
    right: 16px
}

.sticky-header[data-v-58765a0f] {
    height: 48px;
    background: var(--color-bg-page);
    position: sticky;
    z-index: 2;
    top: 0
}

.profile[data-v-58765a0f] {
    display: flex;
    padding: 32px;
    border-radius: 16px;
    align-items: center;
    justify-content: space-between;
    background: var(--color-bg-primary)
}

.profile .user-info[data-v-58765a0f] {
    display: flex;
    gap: 32px
}

.profile .user-info .avatar[data-v-58765a0f] {
    width: 80px;
    height: 80px;
    border-radius: 50%
}

.profile .user-info .right[data-v-58765a0f] {
    display: flex;
    flex-direction: column
}

.profile .user-info .right .user-name[data-v-58765a0f] {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px
}

.profile .user-info .right .introduction[data-v-58765a0f] {
    margin: 4px 0 8px;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-2)
}

.profile .user-info .right .others[data-v-58765a0f] {
    color: var(--color-text-2);
    display: flex;
    line-height: 20px;
    font-size: 12px;
    gap: 16px
}

.profile .user-info .right .others .font-light[data-v-58765a0f] {
    color: var(--color-text-1)
}

.profile .btn-group[data-v-58765a0f] {
    display: flex;
    gap: 16px
}

.sticky-operation[data-v-58765a0f] {
    position: sticky;
    z-index: 2;
    top: 48px;
    background: var(--color-bg-page)
}

.sticky-operation .tab-container[data-v-58765a0f] {
    margin-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.sticky-operation .common-filter[data-v-58765a0f] {
    margin-top: 32px;
    display: flex;
    color: var(--color-text-1);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border-frame);
    gap: 16px;
    margin-bottom: 24px;
    align-items: center
}

.sticky-operation .common-filter .split[data-v-58765a0f] {
    color: var(--color-border-line)
}

h1[data-v-fd915e68] {
    margin-top: -8px;
    font-size: 22px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: .02em
}

.notice[data-v-fd915e68] {
    margin-top: 20px;
    border: 1px solid;
    background-clip: padding-box,border-box;
    background-origin: padding-box,border-box;
    background-image: linear-gradient(68.56deg,#1e2930 29.44%,#1d1d1d 59.6%,#262a2f 82.91%,#2e4141 101.21%),linear-gradient(89.38deg,#a8ff1a .12%,#60edff 106.24%);
    color: #fff;
    background-color: #0801;
    padding: 16px;
    text-align: center;
    font-size: 14px;
    -webkit-user-select: text;
    user-select: text;
    border-radius: 12px
}

table[data-v-fd915e68] {
    margin-top: 24px;
    margin-left: -12px
}

table h4[data-v-fd915e68] {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    margin-bottom: 8px
}

table h4 sup[data-v-fd915e68] {
    color: red;
    margin-left: 4px;
    vertical-align: middle
}

table h4 span[data-v-fd915e68] {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: var(--color-text-2)
}

table ol[data-v-fd915e68] {
    margin: 8px 0;
    padding: 0;
    list-style: none
}

table ol li[data-v-fd915e68] {
    display: inline-block;
    margin-right: 18px;
    line-height: 24px;
    color: var(--color-text-1);
    cursor: pointer
}

table ol li[data-v-fd915e68]:hover {
    color: var(--theme-color-primary)
}

table ol li svg[data-v-fd915e68] {
    margin-right: 8px;
    vertical-align: middle
}

table ol li span[data-v-fd915e68] {
    vertical-align: middle
}

table textarea[data-v-fd915e68] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: var(--color-text-1);
    background: transparent;
    width: 748px;
    padding: 8px 16px;
    border-radius: 8px;
    border: solid 1px var(--color-border-component);
    resize: none
}

table textarea[data-v-fd915e68]::placeholder {
    color: var(--color-text-3)
}

.btns[data-v-fd915e68] {
    margin-top: 24px;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    gap: 12px
}

p.reply-time[data-v-fd915e68] {
    margin-top: 8px
}

.monetization-bg[data-v-723e3936] {
    width: 1000px;
    margin-left: -24px;
    margin-top: -16px
}

.btns[data-v-723e3936] {
    margin-top: -48px;
    margin-left: 460px;
    padding-left: 11px;
    margin-bottom: 80px
}

.btn-cancel[data-v-723e3936] {
    background: #ffffff1f!important
}

.btn-cancel[data-v-723e3936]:hover {
    background: #ffffff2f!important
}

.btn-cancel[data-v-723e3936]:active {
    background: #ffffff3f!important
}

body.lang-en .btns[data-v-723e3936] {
    margin-left: 390px
}

body.lang-en .btns .btn-ok[data-v-723e3936] {
    width: 292px
}

.el-dialog.monetization-welcome-dialog {
    background: transparent!important;
    border: transparent!important;
    box-shadow: none!important
}

.el-dialog.monetization-welcome-dialog .el-dialog__headerbtn {
    margin-top: 64px!important;
    margin-right: 64px!important
}

.dialog-bg .description[data-v-4440d5d6] {
    margin-top: -8px;
    color: var(--color-text-2)
}

.dialog-bg .main[data-v-4440d5d6] {
    margin-top: 24px;
    display: grid;
    gap: 16px
}

.dialog-bg .main .card[data-v-4440d5d6] {
    height: 104px;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    background: var(--color-fill-light);
    border: 1px solid var(--color-border-container)
}

.dialog-bg .main .card[data-v-4440d5d6]:hover {
    border: 1px solid var(--color-border-hover);
    background-color: var(--color-other-1)
}

.dialog-bg .main .card .content[data-v-4440d5d6] {
    padding: 8px 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center
}

.dialog-bg .main .card .content .title[data-v-4440d5d6] {
    font-size: 14px;
    font-weight: 500;
    line-height: 28px;
    white-space: nowrap
}

.dialog-bg .main .card .content .desc[data-v-4440d5d6] {
    font-size: 12px;
    line-height: 18px;
    color: var(--color-text-2)
}

.dialog-bg .main .card .active .title[data-v-4440d5d6],.dialog-bg .main .card .active .desc[data-v-4440d5d6] {
    color: var(--color-theme-2)
}

.dialog-bg .main .un-active[data-v-4440d5d6] {
    border: 1px solid var(--color-border-container)
}

.dialog-bg .main .active[data-v-4440d5d6] {
    background-clip: padding-box,border-box;
    background-origin: padding-box,border-box;
    background: var(--color-theme-3);
    border: 1px solid var(--color-theme-2)
}

.dialog-bg .input[data-v-4440d5d6] {
    margin-top: 16px
}

.dialog-bg .footer[data-v-4440d5d6] {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.dialog-bg .footer .step[data-v-4440d5d6] {
    font-size: 18px;
    line-height: 26px
}

.dialog-bg .footer .total[data-v-4440d5d6] {
    color: var(--color-text-2)
}

.dialog-bg .footer .actions[data-v-4440d5d6] {
    display: flex;
    gap: 12px
}

.dialog-bg .footer .actions .button[data-v-4440d5d6] {
    width: 96px;
    height: 38px
}

body.mobile .right[data-v-64f99f39] {
    width: 100%
}

body.lang-en .member-content[data-v-64f99f39] {
    height: 644px
}

.member-content[data-v-64f99f39] {
    display: flex;
    height: 600px;
    overflow: hidden;
    border-radius: 12px;
    position: relative
}

.member-content video[data-v-64f99f39] {
    width: 320px;
    height: 100%;
    object-fit: cover
}

.member-content img[data-v-64f99f39] {
    width: 224px;
    height: 66px;
    object-fit: contain;
    position: absolute;
    top: 90px;
    left: 46px
}

.member-content .right[data-v-64f99f39] {
    width: calc(100% - 320px);
    height: 100%;
    padding: 24px;
    position: relative;
    display: flex;
    flex-direction: column
}

.member-content .right .close[data-v-64f99f39] {
    position: absolute;
    top: 20px;
    right: 24px;
    cursor: pointer;
    color: var(--color-text-1)
}

.member-content .right .title[data-v-64f99f39] {
    color: var(--color-text-1);
    font-size: 20px;
    font-weight: 600;
    line-height: 28px
}

.member-content .right .subTitle[data-v-64f99f39] {
    width: 100%;
    color: var(--color-text-1);
    font-size: 12px;
    line-height: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px
}

.member-content .right .subTitle[data-v-64f99f39] b {
    color: var(--color-theme-2);
    font-style: normal;
    margin: 0 4px
}

.member-content .right .content[data-v-64f99f39] {
    width: 100%;
    background: var(--color-fill-light);
    border-radius: 12px;
    padding: 16px 20px 20px;
    margin-bottom: 24px;
    flex-grow: 1
}

.member-content .right .content .discount-detail-first[data-v-64f99f39] {
    font-size: 14px;
    font-weight: 500;
    line-height: 28px;
    display: inline-flex;
    align-items: end
}

.member-content .right .content .discount-detail-first span[data-v-64f99f39] {
    color: var(--color-text-1)
}

.member-content .right .content .discount-detail-first .unit[data-v-64f99f39] {
    font-size: 14px;
    font-weight: 520;
    margin: 0 2px 0 8px
}

.member-content .right .content .discount-detail-first .price[data-v-64f99f39] {
    font-size: 24px;
    font-weight: 520;
    margin-right: 4px
}

.member-content .right .content .discount-detail-first .discount-tag[data-v-64f99f39] {
    height: 22px;
    padding: 0 6px;
    background: var(--color-other-2);
    color: var(--color-theme-2);
    font-size: 12px;
    border-radius: 4px;
    display: inline-flex;
    margin-left: 4px;
    margin-bottom: 3px
}

.member-content .right .content .discount-detail-first .discount-tag[data-v-64f99f39] i {
    margin: 0 4px;
    color: var(--color-theme-2)
}

.member-content .right .content .discount-detail-second[data-v-64f99f39] {
    color: var(--color-text-2);
    font-size: 12px;
    line-height: 20px;
    margin-top: 3px
}

.member-content .right .content .discount-detail-second[data-v-64f99f39] b,.member-content .right .content .discount-detail-second[data-v-64f99f39] i {
    font-style: normal
}

.member-content .right .content .line[data-v-64f99f39] {
    width: 100%;
    height: 1px;
    background: var(--color-border-container);
    margin: 16px 0
}

.member-content .right .content .benefits-points[data-v-64f99f39] {
    font-size: 14px;
    line-height: 24px;
    color: var(--color-text-1)
}

.member-content .right .content .benefits-points[data-v-64f99f39] i {
    font-size: 20px;
    font-weight: 520;
    font-style: normal;
    margin: 0 2px
}

.member-content .right .content .benefits-results[data-v-64f99f39] {
    font-size: 12px;
    line-height: 20px;
    color: var(--color-text-2);
    margin-top: 2px;
    margin-bottom: 8px
}

.member-content .right .content .benefits-list[data-v-64f99f39] {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.member-content .right .content .benefits-list .item[data-v-64f99f39] {
    gap: 6px;
    color: var(--color-text-3);
    font-size: 12px;
    line-height: 20px
}

.member-content .right .bottom[data-v-64f99f39] {
    height: 38px;
    justify-content: space-between;
    color: var(--color-text-1)
}

.golden-member-guide-dialog.el-dialog {
    padding: 0!important
}

.golden-member-guide-dialog .el-dialog__header {
    padding-bottom: 0!important
}

h1[data-v-a73838ac] {
    font-size: 22px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: .02em
}

.content[data-v-a73838ac] {
    padding: 24px 0
}

.content p[data-v-a73838ac] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: center
}

.content p a[data-v-a73838ac] {
    color: #82fac2;
    text-decoration: none
}

.experience-package-detail-box[data-v-bf97e486]::-webkit-scrollbar {
    display: none
}

.experience-package-box .experience-package-next-receive[data-v-bf97e486] {
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 16px
}

.experience-package-box .experience-package-detail-box[data-v-bf97e486] {
    width: 100%;
    height: 314px;
    padding: 4px 20px;
    border-radius: 8px;
    background: var(--color-fill-light);
    overflow-y: scroll
}

.experience-package-box .experience-package-detail-box .experience-package-detail-item[data-v-bf97e486] {
    width: 100%;
    height: 92px;
    border-bottom: 1px solid var(--color-border-container);
    display: flex;
    padding: 12px 0;
    align-items: center;
    justify-content: space-between
}

.experience-package-box .experience-package-detail-box .experience-package-detail-item .item-des .item-title[data-v-bf97e486] {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-text-4);
    margin-bottom: 8px
}

.experience-package-box .experience-package-detail-box .experience-package-detail-item .item-des .item-surplus[data-v-bf97e486] {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-text-4);
    margin-bottom: 4px
}

.experience-package-box .experience-package-detail-box .experience-package-detail-item .item-des .item-time[data-v-bf97e486] {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-text-4)
}

.experience-package-box .experience-package-detail-box .experience-package-detail-item .item-des .item-time .item-time-value[data-v-bf97e486] {
    color: var(--color-text-4)
}

.experience-package-box .experience-package-detail-box .experience-package-detail-item.active .item-des .item-title[data-v-bf97e486] {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-text-1);
    margin-bottom: 8px
}

.experience-package-box .experience-package-detail-box .experience-package-detail-item.active .item-des .item-surplus[data-v-bf97e486] {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-text-2);
    margin-bottom: 4px
}

.experience-package-box .experience-package-detail-box .experience-package-detail-item.active .item-des .item-surplus .item-surplus-value[data-v-bf97e486] {
    color: var(--color-theme-2)
}

.experience-package-box .experience-package-detail-box .experience-package-detail-item.active .item-des .item-time[data-v-bf97e486] {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-text-2)
}

.experience-package-box .experience-package-detail-box .experience-package-detail-item.active .item-des .item-time .item-time-value[data-v-bf97e486] {
    color: var(--color-text-2)
}

body .membership-new-user-dialog {
    background-image: none!important;
    padding: 0!important;
    border: none!important;
    background: linear-gradient(174.58deg,#282937 4.74%,#353849 96.08%)
}

@keyframes scaleAnimation-d5789ef3 {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.06)
    }

    to {
        transform: scale(1)
    }
}

.membership-new-user-dialog[data-v-d5789ef3] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center
}

.membership-new-user-dialog .new-user-content[data-v-d5789ef3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative
}

.membership-new-user-dialog .new-user-content .btn[data-v-d5789ef3] {
    position: absolute;
    bottom: 28px;
    animation-name: scaleAnimation-d5789ef3;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    overflow: hidden
}

.membership-new-user-dialog .new-user-content .btn[data-v-d5789ef3] .inner {
    z-index: 2
}

@keyframes sweep-d5789ef3 {
    0% {
        left: -50%
    }

    to {
        left: 150%
    }
}

.membership-new-user-dialog .new-user-content .btn[data-v-d5789ef3]:before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right,#fff0,#ffffff4d,#fff0);
    animation: sweep-d5789ef3 2s infinite linear;
    z-index: 1
}

.membership-new-user-dialog .new-user-content .count-down-con[data-v-d5789ef3] {
    position: absolute;
    bottom: 90px;
    display: flex;
    align-items: center;
    color: #fff;
    background: #e01e00;
    font-size: 14px;
    padding: 0 8px 0 9px;
    font-weight: 600;
    border-radius: 6px;
    height: 26px
}

.membership-new-user-dialog .new-user-content .count-down-con span[data-v-d5789ef3] {
    font-weight: 600
}

.membership-new-user-dialog .new-user-content .count-down-con .count-down[data-v-d5789ef3] {
    display: flex;
    align-items: center
}

.membership-new-user-dialog .new-user-content .count-down-con .count-down .time-l[data-v-d5789ef3] {
    padding: 0 5px;
    font-weight: 600;
    display: inline-block
}

.membership-new-user-dialog .new-user-content .count-down-con .time[data-v-d5789ef3] {
    color: #fff;
    font-size: 14px;
    border-radius: 3px;
    background: linear-gradient(180deg,#ffcf9966,#ff725c66);
    display: flex;
    width: 20px;
    height: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 700
}

.membership-new-user-dialog .close-top-btn[data-v-d5789ef3] {
    position: absolute;
    right: -60px;
    background: #262a2d;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    cursor: pointer
}

.membership-new-user-dialog .close-top-btn svg[data-v-d5789ef3] {
    width: 25px!important;
    height: 25px!important
}

.membership-gifts-dialog[data-v-59bfa05b] {
    position: fixed;
    top: 70px;
    right: 20px;
    padding: 24px;
    z-index: 2000;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: #1f2329;
    box-shadow: 0 8px 40px #0000003d
}

.membership-gifts-dialog .gift-close-btn[data-v-59bfa05b] {
    position: absolute;
    cursor: pointer;
    right: 5px;
    top: 5px
}

.membership-gifts-dialog .card-bg[data-v-59bfa05b] {
    width: 100%
}

.membership-gifts-dialog .gift-point-info[data-v-59bfa05b] {
    position: absolute;
    top: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #111214
}

.membership-gifts-dialog .gift-point-info span[data-v-59bfa05b] {
    margin-left: 8px;
    font-size: 30px;
    font-weight: 520;
    line-height: 30px
}

.membership-gifts-dialog .gift-point-item[data-v-59bfa05b] {
    width: 266px;
    height: 91px;
    position: relative;
    margin-bottom: 20px
}

.membership-gifts-dialog .gift-item[data-v-59bfa05b] {
    width: 266px;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px
}

.membership-gifts-dialog .gift-item img[data-v-59bfa05b] {
    width: 100%;
    height: 100%
}

.membership-gifts-dialog h2[data-v-59bfa05b] {
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: 600;
    line-height: 28px;
    background: linear-gradient(90deg,#a7ff1a,#82fac2,#47d4ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.membership-gifts-dialog p[data-v-59bfa05b] {
    font-size: 14px;
    margin-bottom: 24px;
    line-height: 22px;
    white-space: nowrap
}

.membership-gifts-dialog .gifts-btn-list[data-v-59bfa05b] {
    display: flex;
    justify-content: flex-end
}

.membership-gifts-dialog .gifts-btn-list .gifts-btn[data-v-59bfa05b] {
    width: 100px
}

body.mobile .header>div[data-v-1d395711]:first-child {
    transform: scale(.7)
}

body.mobile .content[data-v-1d395711] {
    padding: 12px 16px 16px!important
}

body.mobile .content .batch-header[data-v-1d395711] {
    width: 100%
}

body.mobile .content .batch-header img[data-v-1d395711] {
    height: 96px!important;
    width: 96px
}

body.mobile .content .batch-header .results[data-v-1d395711] {
    width: 100%;
    overflow-x: auto;
    margin-top: 12px;
    justify-content: flex-start
}

body.mobile .content .batch-header .results-item[data-v-1d395711] {
    flex-shrink: 0;
    width: 154px;
    height: 96px;
    padding: 12px
}

body.mobile .content .close[data-v-1d395711] {
    top: -43px;
    right: -10px;
    width: 32px;
    height: 32px
}

body.mobile .spirit span[data-v-1d395711] {
    margin: 10px 4px 0!important;
    font-size: 20px!important;
    line-height: 26px!important
}

body.mobile .spirit img[data-v-1d395711] {
    height: 40px
}

body.mobile .deadline[data-v-1d395711] {
    font-size: 14px!important
}

body.mobile .main[data-v-1d395711] {
    width: 100%!important;
    padding: 0!important
}

body.mobile .main .line[data-v-1d395711] {
    width: 60px!important
}

body.mobile .main .title[data-v-1d395711] {
    font-size: 14px!important
}

body.mobile .main .point-content[data-v-1d395711] {
    gap: 8px!important;
    justify-content: space-around!important;
    overflow-x: auto;
    width: 100%
}

body.mobile .main .point-content .item[data-v-1d395711] {
    flex-shrink: 0;
    width: 112px!important;
    min-height: 63px!important
}

body.mobile .main .membership-content[data-v-1d395711] {
    overflow-x: auto;
    width: 100%
}

body.mobile .main .membership-content .item[data-v-1d395711] {
    flex-shrink: 0;
    width: 178px!important;
    flex-shrink: unset!important;
    flex: none!important
}

body.mobile .main .membership-content .item video[data-v-1d395711] {
    height: 78px!important
}

body.mobile .main .membership-content .item .bottom[data-v-1d395711] {
    padding: 10px!important
}

body.mobile .main .membership-content .item .bottom .title[data-v-1d395711] {
    font-size: 12px!important
}

.content[data-v-1d395711] {
    padding: 32px;
    gap: 24px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.content .close[data-v-1d395711] {
    position: absolute;
    top: 0;
    right: -56px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: var(--color-other-3);
    color: var(--color-text-1);
    cursor: pointer
}

.content .batch-header[data-v-1d395711] {
    text-align: center
}

.content .batch-header .title[data-v-1d395711] {
    width: 100%;
    display: flex;
    justify-content: center
}

.content .batch-header .title div[data-v-1d395711] {
    text-align: center
}

.content .results[data-v-1d395711] {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 24px
}

.content .results-item[data-v-1d395711] {
    width: 228px;
    height: 120px;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--color-text-1);
    font-size: 16px;
    position: relative
}

.content .results-item .img[data-v-1d395711] {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 120px;
    width: 120px
}

.content .header[data-v-1d395711] {
    width: 100%;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px
}

.content .header div[data-v-1d395711]:first-child {
    gap: 8px;
    height: 48px
}

.content .header div:first-child div[data-v-1d395711] {
    height: 48px
}

.content .header div:first-child .point[data-v-1d395711] {
    font-size: 32px;
    font-weight: 520;
    color: var(--color-text-1);
    line-height: 48px
}

.content .header .deadline[data-v-1d395711] {
    background: linear-gradient(90deg,#a7ff1a00,#82fac229 46%,#82fac229 54%,#47d4ff00);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    min-width: 320px;
    text-align: center
}

.content .header .deadline span[data-v-1d395711] {
    color: var(--color-text-1)
}

.content .main[data-v-1d395711] {
    gap: 32px;
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    width: 100%
}

.content .main .box[data-v-1d395711] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px
}

.content .main .box .fist-title[data-v-1d395711] {
    display: flex;
    align-items: center
}

.content .main .box .fist-title .line[data-v-1d395711] {
    width: 120px;
    height: 1px
}

.content .main .box .fist-title .line.left[data-v-1d395711] {
    background: linear-gradient(89.86deg,#fff0,#fff9)
}

.content .main .box .fist-title .line.right[data-v-1d395711] {
    background: linear-gradient(89.86deg,#fff9,#fff0)
}

.content .main .box .fist-title .title[data-v-1d395711] {
    color: var(--color-text-1);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    margin: 0 24px
}

.content .main .box .point-content[data-v-1d395711] {
    width: 100%;
    display: flex;
    gap: 48px;
    justify-content: space-between
}

.content .main .box .point-content .item[data-v-1d395711] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 126px
}

.content .main .box .point-content .item img[data-v-1d395711] {
    width: 64px;
    height: 64px;
    display: block;
    margin-bottom: 16px
}

.content .main .box .point-content .item .title[data-v-1d395711] {
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 2px
}

.content .main .box .point-content .item .description[data-v-1d395711] {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-text-2);
    text-align: center
}

.content .main .box .membership-content[data-v-1d395711] {
    display: flex;
    gap: 16px;
    width: 100%;
    justify-content: space-between
}

.content .main .box .membership-content .item[data-v-1d395711] {
    flex: 1;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.content .main .box .membership-content .item video[data-v-1d395711] {
    width: 100%;
    height: 134px;
    display: block;
    object-fit: cover
}

.content .main .box .membership-content .item .bottom[data-v-1d395711] {
    padding: 16px;
    height: 100px;
    background-color: var(--color-bg-secondary)
}

.content .main .box .membership-content .item .bottom .title[data-v-1d395711] {
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 4px
}

.content .main .box .membership-content .item .bottom .description[data-v-1d395711] {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-text-2)
}

.content .btns[data-v-1d395711] {
    text-align: center
}

body.lang-en .sgp-font[data-v-ab300bd8] {
    font-family: PP Editorial New Italic
}

body.lang-en.mobile .use .notice[data-v-ab300bd8] {
    font-size: 9px
}

body.mobile .close[data-v-ab300bd8] {
    width: 32px;
    height: 32px;
    top: -44px;
    right: -10px
}

body.mobile .gift[data-v-ab300bd8] {
    height: 200px
}

body.mobile .gift .title[data-v-ab300bd8] {
    top: 12px;
    font-size: 20px;
    left: 50%;
    transform: translate(-50%)
}

body.mobile .gift .card-text[data-v-ab300bd8] {
    font-size: 18px;
    bottom: 110px;
    left: 52px
}

body.mobile .gift .operation[data-v-ab300bd8] {
    bottom: 8px;
    gap: 8px;
    width: calc(100% - 32px);
    justify-content: center;
    left: 16px
}

body.mobile .gift .operation .generic-button[data-v-ab300bd8] {
    height: 28px;
    padding: 0 12px
}

body.mobile .gift .operation .generic-button[data-v-ab300bd8] .inner {
    font-size: 12px!important;
    font-weight: 500!important
}

body.mobile .gifts .content[data-v-ab300bd8] {
    max-height: calc(80vh - 300px)
}

body.mobile .use .bg[data-v-ab300bd8] {
    height: fit-content
}

body.mobile .use .card-name[data-v-ab300bd8] {
    top: 28px;
    font-size: 20px;
    font-weight: 600
}

body.mobile .use .input-box[data-v-ab300bd8] {
    top: 90px
}

body.mobile .use .btns[data-v-ab300bd8] {
    bottom: 14px
}

body.mobile .use .notice[data-v-ab300bd8] {
    top: 132px
}

.bg img[data-v-ab300bd8] {
    width: 100%;
    display: block
}

.notice[data-v-ab300bd8] {
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: var(--color-text-1)
}

.notice a[data-v-ab300bd8] {
    color: var(--color-theme-2);
    text-decoration: none
}

.close[data-v-ab300bd8] {
    position: absolute;
    top: 0;
    right: -56px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: var(--color-other-3);
    color: var(--color-text-1);
    cursor: pointer
}

.gifts[data-v-ab300bd8] {
    width: 100%;
    padding: 32px;
    background: var(--color-bg-dialog);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: var(--box-shadow-component)
}

.gifts .content[data-v-ab300bd8] {
    width: 100%;
    max-height: calc(100vh - 300px)
}

.gifts .content .item[data-v-ab300bd8] {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    margin-top: 16px
}

.gifts .content .item-top[data-v-ab300bd8] {
    height: 80px;
    padding: 26px 24px;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: var(--color-text-1);
    position: relative
}

.gifts .content .item-top .img[data-v-ab300bd8] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 80px;
    height: 80px
}

.gifts .content .item-content[data-v-ab300bd8] {
    padding: 16px;
    background: var(--color-other-1);
    display: flex;
    flex-direction: column;
    gap: 4px
}

.gifts .content .item-content__item[data-v-ab300bd8] {
    height: 24px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    color: var(--color-text-1)
}

.gifts .content .item-content__item .line[data-v-ab300bd8] {
    flex: 1;
    border-bottom: 1px var(--color-border-line) dashed;
    height: 0
}

.gifts .btns[data-v-ab300bd8] {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 24px
}

.gift[data-v-ab300bd8] {
    position: relative;
    height: 320px
}

.gift .title[data-v-ab300bd8] {
    text-align: center;
    position: absolute;
    width: 100%;
    top: 24px;
    font-weight: 600;
    font-size: 24px;
    height: 32px;
    color: var(--color-text-1)
}

.gift .card-text[data-v-ab300bd8] {
    position: absolute;
    bottom: 188px;
    left: 76px;
    gap: 4px;
    font-size: 24px;
    font-weight: 520;
    height: 32px;
    color: var(--color-text-1)
}

.gift .operation[data-v-ab300bd8] {
    position: absolute;
    bottom: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 16px
}

.gift .operation .copy[data-v-ab300bd8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px;
    width: 320px;
    border-radius: 24px;
    background: var(--color-bg-dialog);
    border: 1px solid var(--color-border-component)
}

.gift .operation .copy .code[data-v-ab300bd8] {
    -webkit-user-select: text;
    user-select: text;
    padding-left: 24px;
    color: var(--color-text-1)
}

.use[data-v-ab300bd8] {
    position: relative
}

.use .bg[data-v-ab300bd8] {
    height: 320px
}

.use .card-name[data-v-ab300bd8] {
    position: absolute;
    top: 56px;
    width: 100%;
    height: 32px;
    text-align: center;
    color: var(--color-text-1);
    font-size: 24px;
    font-weight: 800
}

.use .input-box[data-v-ab300bd8] {
    width: 100%;
    padding: 0 56px;
    position: absolute;
    top: 154px
}

.use .notice[data-v-ab300bd8] {
    height: 24px;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 210px
}

.use .btns[data-v-ab300bd8] {
    position: absolute;
    bottom: 33px;
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100%
}

.use .btns[data-v-ab300bd8] .generic-button {
    border-radius: 18px
}

.kling-dialog .unsubscribe-reason-container[data-v-53fe7d20] {
    cursor: pointer
}

.kling-dialog .unsubscribe-reason-container .unsubscribe-reason-item[data-v-53fe7d20] {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-radius: 4px
}

.kling-dialog .unsubscribe-reason-container .unsubscribe-reason-item .item-name[data-v-53fe7d20] {
    font-size: 14px;
    line-height: 24px;
    color: var(--color-text-1)
}

.kling-dialog .unsubscribe-reason-container .unsubscribe-reason-active[data-v-53fe7d20],.kling-dialog .unsubscribe-reason-container .unsubscribe-reason-item[data-v-53fe7d20]:hover {
    background-color: var(--color-other-1)
}

.kling-dialog .unsubscribe-reason-container .unsubscribe-reason-item[data-v-53fe7d20]:last-child {
    border-bottom: none
}

.kling-dialog .unsubscribe-reason-container .unsubscribe-remarks[data-v-53fe7d20] {
    margin-bottom: 18px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    color: var(--color-text-1)
}

.kling-dialog .unsubscribe-reason-container .unsubscribe-remarks .remarks-icon[data-v-53fe7d20] {
    flex-shrink: 0;
    margin: 4px 4px 0 0
}

.kling-dialog .unsubscribe-reason-container .unsubscribe-remarks .remarks-content[data-v-53fe7d20] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px
}

.kling-dialog .unsubscribe-reason-container .unsubscribe-btn[data-v-53fe7d20] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 24px
}

.kling-dialog .unsubscribe-reason-container .unsubscribe-btn[data-v-53fe7d20]>:first-child {
    margin-right: 12px
}

body.lang-en.mobile .content .item[data-v-0c6bc52f] {
    grid-template-columns: 120px 1fr
}

body.mobile .note[data-v-0c6bc52f],body.mobile .tip[data-v-0c6bc52f] {
    font-size: 12px
}

body.mobile .content .item[data-v-0c6bc52f] {
    font-size: 12px;
    grid-template-columns: 56px 1fr;
    height: fit-content
}

body.mobile .content .item .radio-group[data-v-0c6bc52f] {
    gap: 0px
}

.tip[data-v-0c6bc52f] {
    display: flex;
    gap: 4px;
    font-size: 14px;
    margin-bottom: 24px;
    color: var(--color-text-1)
}

.tip svg[data-v-0c6bc52f] {
    margin-top: 3px;
    flex-shrink: 0
}

.note[data-v-0c6bc52f] {
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    color: var(--color-text-1);
    margin-bottom: 16px
}

.content[data-v-0c6bc52f] {
    font-size: 14px;
    color: var(--color-text-2);
    font-weight: 400;
    line-height: 22px;
    width: 100%;
    padding: 16px;
    min-height: 83px;
    background: var(--color-fill-light);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.content .item[data-v-0c6bc52f] {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    height: 32px
}

.content .item .text[data-v-0c6bc52f] {
    max-width: 200px
}

.content .item .right[data-v-0c6bc52f] {
    display: flex;
    align-items: center;
    color: var(--color-text-1)
}

.content .item .right svg[data-v-0c6bc52f] {
    margin-left: 4px;
    cursor: pointer
}

.content .item.email-item[data-v-0c6bc52f] {
    grid-template-columns: 152px 1fr
}

.content .radio-group[data-v-0c6bc52f] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 2px;
    gap: 24px;
    line-height: 24px
}

.content .radio-group .radio-item[data-v-0c6bc52f] {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--color-text-1)
}

.content .radio-group .radio-item .icon[data-v-0c6bc52f] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 1px solid var(--color-border-component);
    border-radius: 16px
}

.content .radio-group .radio-item .active[data-v-0c6bc52f] {
    border: 5px solid var(--color-theme-2);
    background: var(--color-text-1)
}

.btns[data-v-0c6bc52f] {
    text-align: right;
    margin: 16px 0
}

body.mobile ol[data-v-1f011aae] {
    padding: 4px 8px
}

body.mobile ol .item[data-v-1f011aae],body.mobile .order-name[data-v-1f011aae],body.mobile .invoice-status[data-v-1f011aae] {
    font-size: 12px
}

ol[data-v-1f011aae] {
    margin: -12px 0 0;
    list-style: none;
    padding: 0 10px 0 0
}

ol li[data-v-1f011aae] {
    padding: 16px 0;
    border-top: solid 1px var(--color-border-container)
}

ol li[data-v-1f011aae]:first-child {
    border-top: none
}

ol li h4[data-v-1f011aae] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--color-text-1);
    margin-bottom: 12px
}

ol li h4 .invoice-status[data-v-1f011aae] {
    float: right;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-theme-2);
    gap: 8px
}

ol li h4 .invoice-btn[data-v-1f011aae] {
    cursor: pointer
}

ol li h4 .fail-tip[data-v-1f011aae] {
    color: var(--color-fill-error)
}

ol li .item[data-v-1f011aae] {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-2)
}

ol li .item span[data-v-1f011aae] {
    color: #fff;
    float: right
}

ol li .item span .icon[data-v-1f011aae] {
    color: var(--color-theme-2);
    margin-left: 4px
}

ol li .order-name[data-v-1f011aae] {
    display: inline-flex;
    align-items: center
}

ol li .membership-point[data-v-1f011aae] {
    background: linear-gradient(103.87deg,#47ffa6 9.9%,#47d4ff 90.1%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text
}

body.mobile .left[data-v-63d890f0],body.mobile .left .header .title[data-v-63d890f0] {
    font-size: 12px!important
}

body.mobile .right[data-v-63d890f0] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px
}

body.mobile .right[data-v-63d890f0] .generic-button {
    height: 28px!important;
    padding: 0 8px!important
}

body.mobile .right[data-v-63d890f0] .generic-button .inner {
    font-size: 12px!important
}

body.mobile ol[data-v-63d890f0] {
    padding: 4px 12px
}

ol[data-v-63d890f0] {
    margin: -12px 0 0;
    list-style: none;
    padding: 0 10px 0 0
}

ol li[data-v-63d890f0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border-container);
    margin-top: 12px
}

ol li .checkbox[data-v-63d890f0] {
    cursor: pointer;
    margin-top: 4px
}

ol li .checkbox svg[data-v-63d890f0] {
    width: 16px
}

ol li .left .header[data-v-63d890f0] {
    display: flex;
    align-items: center;
    margin-bottom: 4px
}

ol li .left .header .title[data-v-63d890f0] {
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    color: var(--color-text-1)
}

ol li .left .header .send[data-v-63d890f0] {
    padding: 1px 6px;
    height: 20px;
    margin-left: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    background-color: var(--color-other-1)
}

ol li .left .header .send .status[data-v-63d890f0] {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-1)
}

ol li .left .deadline[data-v-63d890f0] {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-text-2)
}

ol li .left .disabled[data-v-63d890f0],ol li .left .disabled span[data-v-63d890f0] {
    color: var(--color-text-4)!important
}

ol li .right img[data-v-63d890f0] {
    height: 48px;
    display: block;
    transform: rotate(-24deg)
}

ol li[data-v-63d890f0]:last-child {
    border-bottom: none
}

.select-all svg[data-v-0b2dc507] {
    margin-right: 6px
}

body.lang-en.mobile .tabs[data-v-cca2e8ef] .tabs-box .tabs.size-small {
    gap: 8px!important
}

body.mobile .subscription[data-v-cca2e8ef] {
    min-height: 124px!important
}

body.mobile .scrollable[data-v-cca2e8ef] {
    max-height: 50vh
}

body.mobile .subscription-plans-box[data-v-cca2e8ef] {
    max-height: 60vh
}

body.mobile .scrollable-box[data-v-cca2e8ef] {
    padding: 16px 3px 16px 8px
}

body.mobile .subscription h4[data-v-cca2e8ef] {
    font-size: 12px
}

body.mobile .subscription .cancel-btn[data-v-cca2e8ef] .generic-button {
    height: 28px!important;
    padding: 0 10px!important
}

body.mobile .subscription .cancel-btn[data-v-cca2e8ef] .generic-button .inner {
    font-size: 12px!important
}

body.mobile .subscription ol li[data-v-cca2e8ef] {
    font-size: 12px
}

.section[data-v-cca2e8ef] {
    margin-top: 24px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    color: var(--color-text-1)
}

.section .desc[data-v-cca2e8ef] {
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-2)
}

.section .desc a[data-v-cca2e8ef] {
    text-decoration: underline
}

.subscription[data-v-cca2e8ef] {
    padding: 16px;
    border-radius: 8px;
    background: var(--color-fill-light)
}

.subscription .cancel-btn[data-v-cca2e8ef] {
    float: right
}

.subscription h4[data-v-cca2e8ef] {
    font-size: 16px;
    font-weight: 500;
    line-height: 36px;
    margin: 0
}

.subscription ol[data-v-cca2e8ef] {
    margin-top: 8px;
    padding: 0;
    list-style: none
}

.subscription ol li[data-v-cca2e8ef] {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px
}

.subscription ol li label[data-v-cca2e8ef] {
    color: var(--color-text-2)
}

.subscription ol li div.v[data-v-cca2e8ef] {
    color: var(--color-text-1);
    float: right
}

.subscription ol li+li[data-v-cca2e8ef] {
    margin-top: 4px
}

.tabs[data-v-cca2e8ef] {
    position: relative;
    height: 36px;
    margin-bottom: 24px
}

.membership-none[data-v-cca2e8ef] {
    width: 100%;
    min-height: 320px;
    margin-top: 24px;
    color: var(--color-text-1);
    gap: 12px
}

.scrollable-box[data-v-cca2e8ef] {
    overflow-y: hidden;
    padding: 16px 6px 16px 20px;
    background: var(--color-fill-light);
    border-radius: 8px
}

.scrollable-box .scrollable[data-v-cca2e8ef] {
    max-height: 600px
}

.mb-title[data-v-cca2e8ef] {
    font-size: 16px;
    font-weight: 500;
    line-height: 26px
}

.mb-desc[data-v-cca2e8ef] {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-text-2)
}

.mb-desc i[data-v-cca2e8ef] {
    font-style: normal
}

.gift-cards-btns[data-v-cca2e8ef] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px
}

.select-status-box[data-v-cca2e8ef] {
    height: 24px;
    margin-bottom: 16px
}

body.mobile .bill[data-v-9f401cca] {
    height: calc(75vh - 380px)
}

body.mobile .summary[data-v-9f401cca] {
    padding: 16px;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
    border-radius: 8px
}

body.mobile .summary .item[data-v-9f401cca] {
    flex-shrink: 0
}

body.mobile .summary .item h4[data-v-9f401cca] {
    font-size: 12px
}

body.mobile .summary .item p[data-v-9f401cca] {
    font-size: 12px;
    line-height: 12px
}

body.mobile .summary .symbol[data-v-9f401cca] {
    margin-top: 0
}

body.mobile .bottom-area[data-v-9f401cca] {
    flex-direction: column;
    gap: 12px;
    margin-top: 12px
}

body.mobile .bottom-area[data-v-9f401cca] .paybar {
    margin-top: 12px
}

.title[data-v-9f401cca] {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    gap: 4px
}

.title .icon[data-v-9f401cca] {
    cursor: pointer
}

.summary[data-v-9f401cca] {
    background: var(--color-fill-light);
    border-radius: 16px;
    padding: 16px 24px
}

.summary .item[data-v-9f401cca] {
    display: inline-block
}

.summary .item h4[data-v-9f401cca] {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-2)
}

.summary .item p[data-v-9f401cca] {
    margin-top: 4px;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: var(--color-text-1);
    margin-left: -2px
}

.summary .symbol[data-v-9f401cca] {
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: var(--color-text-1);
    text-align: center;
    margin-left: 24px;
    margin-right: 24px;
    vertical-align: top;
    margin-top: 14px
}

.tab-box[data-v-9f401cca] {
    margin-top: 24px;
    position: relative;
    margin-bottom: 16px;
    height: 36px
}

.bottom-area[data-v-9f401cca] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 26px
}

.bottom-area p.bill-desc[data-v-9f401cca] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-2)
}

.bottom-area p.bill-desc svg[data-v-9f401cca] {
    vertical-align: middle;
    margin-bottom: 2px
}

.bottom-area p.bill-desc a[data-v-9f401cca] {
    text-decoration: none;
    color: var(--color-theme-2)
}

.bill[data-v-9f401cca] {
    margin-top: 16px;
    height: calc(75vh - 320px);
    border-radius: 8px;
    overflow-y: scroll;
    background: var(--color-fill-light)
}

.bill[data-v-9f401cca]::-webkit-scrollbar {
    display: none
}

.bill ol[data-v-9f401cca] {
    margin: 0;
    padding: 12px 20px;
    list-style: none
}

.bill ol li[data-v-9f401cca] {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border-container)
}

.bill ol li[data-v-9f401cca]:last-child {
    border-bottom: none
}

.bill ol li i[data-v-9f401cca] {
    float: right;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-text-1);
    font-style: normal
}

.bill ol li i.positive[data-v-9f401cca] {
    color: var(--color-theme-2)
}

.bill ol li i.negative[data-v-9f401cca] {
    color: #fb7171
}

.bill ol li h4[data-v-9f401cca] {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-text-1);
    margin: 0
}

.bill ol li p[data-v-9f401cca] {
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: #999bac
}

.empty[data-v-9f401cca] {
    height: 100%;
    width: 100%;
    gap: 12px;
    color: var(--color-text-1)
}

h1[data-v-d8020a7d] {
    font-size: 22px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: .02em
}

.content[data-v-d8020a7d] {
    margin-top: 24px;
    padding: 24px 0
}

.content p[data-v-d8020a7d] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    white-space: pre-wrap
}

.content p a[data-v-d8020a7d] {
    color: var(--color-theme-2);
    text-decoration: none
}

.content .qrs[data-v-d8020a7d] {
    width: 100%;
    margin-top: 32px;
    text-align: center
}

.content .qrs .qr[data-v-d8020a7d] {
    display: inline-block;
    margin-right: 48px;
    margin-bottom: 24px
}

.content .qrs .qr[data-v-d8020a7d]:last-child {
    margin-right: 0
}

.content .qrs .qr .img[data-v-d8020a7d] {
    width: 128px;
    height: 128px;
    padding: 4px;
    border-radius: 12px;
    background-color: #fff
}

.content .qrs .qr .img img[data-v-d8020a7d] {
    width: 100%
}

.content .qrs .qr p[data-v-d8020a7d] {
    margin-top: 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center
}

body.mobile .dialog-membership-box[data-v-ea4bd96e] {
    margin: 0;
    width: 100%;
    max-height: 80vh
}

body.mobile .dialog-membership-box[data-v-ea4bd96e] .non-subs {
    width: 147px!important
}

body.mobile .dialog-membership-box[data-v-ea4bd96e] .tab {
    padding: 0 4px!important
}

body.mobile .dialog-membership-box[data-v-ea4bd96e] .membership-box {
    max-height: 70vh
}

body.mobile .subtitle[data-v-ea4bd96e] svg {
    width: 90%
}

.dialog-membership-box[data-v-ea4bd96e] {
    margin-top: 16px;
    width: 1168px
}

.dialog-membership-box[data-v-ea4bd96e] .membership-box__top {
    background: var(--color-fill-light)
}

.subtitle[data-v-ea4bd96e] {
    height: 34px;
    text-align: left;
    margin-top: 8px;
    margin-bottom: 24px
}

.bottom-policy[data-v-ea4bd96e] {
    margin-top: 16px;
    font-size: 12px;
    width: 100%;
    text-align: center
}

.bottom-policy a[data-v-ea4bd96e] {
    color: var(--color-theme-2)!important;
    text-decoration: none;
    margin: 0!important
}

.title[data-v-b01ce418] {
    font-size: 22px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: .02em
}

.note[data-v-b01ce418] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #c5c7d5
}

.sheet[data-v-b01ce418] {
    width: 100%;
    margin-top: 24px
}

.sheet td[data-v-b01ce418] {
    padding: 8px 0
}

.sheet td sup[data-v-b01ce418] {
    color: red;
    margin-left: 4px;
    vertical-align: middle
}

.btns[data-v-b01ce418] {
    text-align: right;
    margin-top: 24px;
    margin-bottom: 16px
}

h1[data-v-ee18cb1d] {
    font-size: 22px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: .02em;
    color: #fff;
    margin: -16px 0 24px
}

div.content[data-v-ee18cb1d] {
    color: var(--color-text-1)
}

div.content .qr-container[data-v-ee18cb1d] {
    float: left
}

div.content .qr-container .refresh[data-v-ee18cb1d] {
    width: 120px;
    height: 120px;
    position: absolute;
    z-index: 1
}

div.content .qr-container .qr[data-v-ee18cb1d] {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    overflow: hidden
}

div.content .qr-container .qr img[data-v-ee18cb1d] {
    width: 100%
}

div.content .qr-container .qr.expired[data-v-ee18cb1d] {
    opacity: .3
}

div.content .qr-container .notice[data-v-ee18cb1d] {
    max-width: 120px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    color: var(--color-text-3)
}

div.content .details[data-v-ee18cb1d] {
    padding-left: 136px
}

div.content .details .title[data-v-ee18cb1d] {
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    letter-spacing: .02em
}

div.content .details .title img[data-v-ee18cb1d] {
    vertical-align: middle;
    margin-bottom: 4px
}

div.content .details .title span.dollar[data-v-ee18cb1d] {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    margin-left: 8px;
    margin-right: 4px
}

div.content .details .title span.v[data-v-ee18cb1d] {
    font-size: 28px;
    font-weight: 520;
    line-height: 36px
}

div.content .details ol[data-v-ee18cb1d] {
    margin-top: 4px;
    margin-left: 0;
    margin-bottom: 4px;
    padding-left: 12px;
    list-style: disc;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-text-3)
}

div.content .details p.desc[data-v-ee18cb1d] {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: var(--color-text-3)
}

div.content .details p.desc a[data-v-ee18cb1d] {
    text-decoration: none;
    color: var(--color-theme-2)
}

.content a[data-v-6229adca] {
    color: var(--color-theme-2)
}

.content[data-v-92401a92] {
    text-align: center
}

.content .title[data-v-92401a92] {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px
}

.content .btn[data-v-92401a92] {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #999bac
}

.gift-pack-box[data-v-93c352e1] {
    position: relative
}

.gift-pack-box .gift-pack-bg[data-v-93c352e1] {
    position: absolute
}

.gift-pack-box .gift-pack-bg-image[data-v-93c352e1] {
    position: absolute;
    right: 0;
    top: -100px;
    width: 325px;
    height: 325px
}

.gift-pack-box .gift-pack-box-content[data-v-93c352e1] {
    position: relative;
    z-index: 99
}

.gift-pack-box .gift-pack-box-content .gift-pack-bg-box[data-v-93c352e1] {
    position: relative;
    width: 100%;
    height: 242px
}

.gift-pack-box .gift-pack-box-content .gift-pack-bg-box img[data-v-93c352e1] {
    position: relative;
    width: 100%;
    object-fit: cover
}

.gift-pack-box .gift-pack-box-content .gift-pack-bg-box .gift-pack-bg-title-box[data-v-93c352e1] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 52px
}

.gift-pack-box .gift-pack-box-content .gift-pack-bg-box .gift-pack-bg-title-box .gift-pack-title[data-v-93c352e1] {
    font-size: 40px;
    font-weight: 800;
    line-height: 52px;
    color: var(--color-theme-2);
    margin-bottom: 16px
}

.gift-pack-box .gift-pack-box-content .gift-pack-bg-box .gift-pack-bg-title-box .gift-pack-title p[data-v-93c352e1] {
    font-family: PP Editorial New Ultrabold
}

.gift-pack-box .gift-pack-box-content .gift-pack-bg-box .gift-pack-bg-title-box .gift-pack-subtitle[data-v-93c352e1] {
    width: 510px;
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px
}

.gift-pack-box .gift-pack-box-content .gift-pack-bg-box .gift-pack-bg-title-box .gift-pack-subtitle .important-content[data-v-93c352e1] {
    color: var(--color-theme-2)
}

.gift-pack-box .gift-pack-box-content .concrete-content[data-v-93c352e1] {
    height: calc(80vh - 350px);
    border-radius: 12px;
    padding: 24px;
    overflow-y: scroll
}

.gift-pack-box .gift-pack-box-content .concrete-content .concrete-content-des p[data-v-93c352e1] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    display: flex;
    margin-bottom: 8px;
    color: var(--color-text-1)
}

.gift-pack-box .gift-pack-box-content .concrete-content .concrete-content-des p .keynote-des[data-v-93c352e1] {
    color: var(--color-theme-2)
}

.gift-pack-box .gift-pack-box-content .concrete-content .concrete-content-des[data-v-93c352e1]>:last-child {
    margin: 0
}

.gift-pack-box .gift-pack-box-content .concrete-content .concrete-content-des p[data-v-93c352e1]:before {
    content: "•";
    color: var(--color-theme-2);
    display: inline-block;
    margin-right: .5em;
    font-weight: 700
}

.gift-pack-box .gift-pack-box-content .concrete-content .generation-highlights[data-v-93c352e1] {
    width: 100%
}

.gift-pack-box .gift-pack-box-content .concrete-content .generation-highlights .generation-highlights-title-box[data-v-93c352e1] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px
}

.gift-pack-box .gift-pack-box-content .concrete-content .generation-highlights .generation-highlights-title-box .generation-highlights-title[data-v-93c352e1] {
    margin: 0 24px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    font-family: PP Editorial New Italic
}

.gift-pack-box .gift-pack-box-content .concrete-content .generation-highlights .generation-highlights-des[data-v-93c352e1] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 24px
}

.gift-pack-box .gift-pack-box-content .concrete-content .generation-highlights .generation-highlights-des .des-item[data-v-93c352e1] {
    width: 150px;
    display: flex;
    align-items: center;
    flex-direction: column
}

.gift-pack-box .gift-pack-box-content .concrete-content .generation-highlights .generation-highlights-des .des-item .image-box[data-v-93c352e1] {
    width: 64px;
    height: 64px;
    margin-bottom: 16px
}

.gift-pack-box .gift-pack-box-content .concrete-content .generation-highlights .generation-highlights-des .des-item p[data-v-93c352e1] {
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    color: var(--color-text-2);
    text-align: center
}

.gift-pack-box .gift-pack-box-content .concrete-content .generation-highlights .generation-highlights-des .des-item .highlights-des-title[data-v-93c352e1] {
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
    color: var(--color-text-1)
}

.gift-pack-box .gift-pack-box-content .concrete-content .experience-function[data-v-93c352e1] {
    width: 100%;
    margin: 16px 0
}

.gift-pack-box .gift-pack-box-content .concrete-content .experience-function .experience-function-title-box[data-v-93c352e1] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px
}

.gift-pack-box .gift-pack-box-content .concrete-content .experience-function .experience-function-title-box .experience-function-title[data-v-93c352e1] {
    margin: 0 24px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    font-family: PP Editorial New Italic
}

.gift-pack-box .gift-pack-box-content .concrete-content .experience-function .experience-function-des[data-v-93c352e1] {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.gift-pack-box .gift-pack-box-content .concrete-content .experience-function .experience-function-des .des-item[data-v-93c352e1] {
    width: 268px;
    display: flex;
    flex-direction: column;
    background-color: #ffffff0a;
    border-radius: 8px;
    overflow: hidden
}

.gift-pack-box .gift-pack-box-content .concrete-content .experience-function .experience-function-des .des-item .video-box[data-v-93c352e1] {
    width: 268px;
    height: 140px
}

.gift-pack-box .gift-pack-box-content .concrete-content .experience-function .experience-function-des .des-item .video-box .function-video[data-v-93c352e1] {
    width: 268px;
    height: 140px;
    object-fit: fill;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.gift-pack-box .gift-pack-box-content .concrete-content .experience-function .experience-function-des .des-item .video-des-box[data-v-93c352e1] {
    width: 100%;
    padding: 16px;
    background-color: var(--color-other-1)
}

.gift-pack-box .gift-pack-box-content .concrete-content .experience-function .experience-function-des .des-item .video-des-box p[data-v-93c352e1] {
    line-height: 18px;
    font-weight: 400;
    font-size: 12px;
    color: var(--color-text-2)
}

.gift-pack-box .gift-pack-box-content .concrete-content .experience-function .experience-function-des .des-item .video-des-box .video-des-title[data-v-93c352e1] {
    line-height: 24px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    color: var(--color-text-1)
}

.gift-pack-box .gift-pack-box-content .concrete-content .experience-function .experience-function-des .des-item[data-v-93c352e1]:first-child {
    margin-right: 40px
}

.gift-pack-box .gift-pack-box-content .explore-more[data-v-93c352e1] {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 12px
}

.gift-pack-box .gift-pack-box-content .button-box[data-v-93c352e1] {
    width: 100%;
    padding: 32px 0;
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--color-border-container)
}

.gift-pack-box .gift-pack-box-content .button-box .claimed-btn[data-v-93c352e1] {
    width: 194px;
    height: 40px;
    text-align: center;
    white-space: nowrap;
    background: var(--color-theme-2)
}

.gift-pack-mobile-dialog-content[data-v-93c352e1] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px
}

.gift-pack-mobile-dialog-content img[data-v-93c352e1] {
    width: 290px;
    height: 470px;
    margin-bottom: 24px
}

.gift-pack-mobile-dialog.el-dialog {
    background-image: linear-gradient(252.37deg,#0000 .55%,#0000,#0000 90.08%),linear-gradient(68.56deg,#0000 29.44%,#0000 59.6%,#0000 82.91%,#0000 101.21%)!important;
    border-color: #0000!important;
    --el-dialog-bg-color: rgba(0, 0, 0, 0)
}

body.mobile .title[data-v-0fcb70ae] {
    white-space: pre-line;
    font-size: 16px
}

.dialog-box[data-v-0fcb70ae] {
    padding: 32px;
    color: var(--color-text-1)
}

.dialog-box .header[data-v-0fcb70ae] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px
}

.dialog-box .header span[data-v-0fcb70ae] {
    font-size: 26px;
    font-weight: 900;
    line-height: 40px
}

.dialog-box .content[data-v-0fcb70ae] {
    max-height: 75vh;
    color: var(--color-text-1);
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%
}

.dialog-box .content video[data-v-0fcb70ae] {
    width: 100%;
    border-radius: 10px;
    flex-shrink: 0
}

.dialog-box .content .text-block[data-v-0fcb70ae] {
    margin-top: 16px;
    padding: 16px 12px 24px;
    border-radius: 12px;
    background-color: var(--color-other-1);
    flex-shrink: 1;
    overflow-y: auto;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none
}

.dialog-box .content .text-block ul[data-v-0fcb70ae] {
    margin-top: 16px;
    padding-left: 20px
}

.dialog-box .content .text-block ul li[data-v-0fcb70ae] {
    margin-top: 8px;
    margin-bottom: 8px;
    color: var(--color-theme-2)
}

.dialog-box .content .text-block ul li[data-v-0fcb70ae]::marker {
    color: var(--color-theme-2)
}

.dialog-box .btns[data-v-0fcb70ae] {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: end;
    margin-top: 16px
}

body.mobile .btns[data-v-0fcb70ae] {
    justify-content: center
}

body.mobile .btns button[data-v-0fcb70ae] {
    flex-grow: 1
}

.button-back[data-v-0f48c6f5] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer
}

.button-back svg[data-v-0f48c6f5] {
    width: 16px;
    height: 16px
}

body.mobile .el-dialog.signin-email-dialog {
    width: calc(100vw - 32px)
}

.el-dialog.signin-email-dialog {
    padding: 0!important
}

.el-dialog.signin-email-dialog .el-dialog__close {
    font-size: 30px!important;
    margin-top: 16px;
    margin-left: -8px
}

.signin-email-dialog .el-dialog__body {
    margin-top: -16px;
    border-radius: 18px;
    overflow: hidden
}

.signin-email-dialog .el-dialog__headerbtn {
    margin-top: 16px
}

body.mobile .right-panel[data-v-6e06b177] {
    width: 100%;
    padding: 0 24px
}

body.mobile .right-panel .content[data-v-6e06b177] {
    width: 100%
}

body.mobile .teaser[data-v-6e06b177] {
    display: none
}

.login-container[data-v-6e06b177] {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    background: var(--color-bg-page)
}

.teaser[data-v-6e06b177] {
    width: 50%;
    height: 100%;
    aspect-ratio: 1;
    position: relative;
    flex-shrink: 0;
    flex-grow: 0
}

.teaser video[data-v-6e06b177] {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute
}

.right-panel[data-v-6e06b177] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.content[data-v-6e06b177] {
    width: 456px;
    height: 520px;
    color: var(--color-text-1);
    font-size: 14px;
    display: flex;
    flex-direction: column
}

.content h1[data-v-6e06b177] {
    color: var(--color-text-1);
    font-family: PP Editorial New Regular;
    font-size: 40px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    letter-spacing: .8px;
    text-align: center
}

.content a[data-v-6e06b177] {
    color: var(--color-theme-2);
    text-decoration: none
}

.sign-in-button[data-v-6e06b177] {
    width: 100%;
    height: 48px;
    border: 1px solid var(--color-border-container);
    background: var(--color-gradient-button);
    border-radius: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-text-5);
    cursor: pointer;
    padding: 16px 40px
}

.sign-in-button .sign-in-icon[data-v-6e06b177] {
    margin-right: 10px
}

.separator[data-v-6e06b177] {
    width: 100%;
    height: 24px;
    display: flex;
    flex-direction: row;
    align-items: center
}

.separator .separator-line[data-v-6e06b177] {
    height: 1px;
    background: var(--color-border-container);
    flex-grow: 100;
    flex-shrink: 1
}

.separator .separator-text[data-v-6e06b177] {
    margin-left: 24px;
    margin-right: 24px;
    flex-grow: 0;
    flex-shrink: 0;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: var(--color-text-2)
}

.sign-in-agreements[data-v-6e06b177] {
    font-family: PingFang SC;
    font-size: 10px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-top: 24px
}

.bottom-info[data-v-6e06b177] {
    margin-top: 32px;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%
}

.central[data-v-6e06b177] {
    text-align: center
}

.notice[data-v-6e06b177] {
    color: var(--color-text-1);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px;
    margin-top: 32px
}

.login-container[data-v-1ce923a9] .el-input__suffix {
    height: auto
}

body.mobile .teaser[data-v-1ce923a9] {
    display: none
}

body.mobile .right-panel[data-v-1ce923a9] {
    padding: 0 24px;
    width: 100%
}

body.mobile .content[data-v-1ce923a9] {
    width: 100%
}

body.mobile .content .container .input.scancode span[data-v-1ce923a9] {
    margin-left: calc(100% - 136px)
}

body.mobile .content .desc a[data-v-1ce923a9] {
    margin: 0
}

.custom-padding[data-v-1ce923a9] .el-input__wrapper {
    padding: 1px 4px 1px 11px
}

.login-container[data-v-1ce923a9] {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    background: var(--color-bg-page)
}

.teaser[data-v-1ce923a9] {
    width: 50%;
    height: 100%;
    aspect-ratio: 1;
    position: relative;
    flex-shrink: 0;
    flex-grow: 0
}

.teaser video[data-v-1ce923a9] {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute
}

.right-panel[data-v-1ce923a9] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.content[data-v-1ce923a9] {
    width: 456px;
    min-height: 426px;
    color: var(--color-text-1);
    font-size: 14px
}

.content h1[data-v-1ce923a9] {
    color: var(--color-text-1);
    line-height: normal;
    font-style: normal;
    font-size: 40px;
    font-weight: 500;
    text-align: center;
    font-family: PP Editorial New Regular
}

.content p[data-v-1ce923a9] {
    margin-top: 4px
}

.content .container[data-v-1ce923a9] {
    margin-top: 38px
}

.content .container .countdown[data-v-1ce923a9] {
    width: 102px;
    height: 36px;
    background-color: var(--color-other-2);
    color: var(--color-text-1);
    border-radius: 4px;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0%;
    line-height: 36px;
    text-align: center
}

.content .container .input.scancode span[data-v-1ce923a9] {
    margin-left: 292px;
    width: 80px;
    text-align: center;
    color: #72e52888
}

.content .container .input.scancode span.btn[data-v-1ce923a9] {
    color: #72e528;
    cursor: pointer
}

.content .container .input.scancode span.btn.invalid[data-v-1ce923a9],.content .container .input.scancode span.btn.invalid[data-v-1ce923a9]:hover {
    color: #727485
}

.content .container .input.scancode span.btn.invalid[data-v-1ce923a9]:active {
    filter: none
}

.content .container .input.scancode span.btn[data-v-1ce923a9]:hover {
    color: #fff
}

.content .container .input.scancode span.btn[data-v-1ce923a9]:active {
    filter: brightness(.9)
}

.content .container .input.scancode input[data-v-1ce923a9] {
    padding: 12px 112px 12px 12px
}

.content .desc[data-v-1ce923a9] {
    margin-top: 24px;
    margin-bottom: 32px
}

.content .desc.notice[data-v-1ce923a9] {
    color: var(--color-text-3)
}

.content .desc a[data-v-1ce923a9] {
    color: var(--color-theme-2)
}

.content .desc b[data-v-1ce923a9] {
    font-weight: 400
}

.content .scancode-container[data-v-1ce923a9] {
    margin-top: 38px
}

.content .scancode-container .demo[data-v-1ce923a9] {
    display: flex;
    flex-direction: row;
    justify-content: center
}

.content .scancode-container .qr[data-v-1ce923a9] {
    line-height: 0;
    background-color: #000;
    border-radius: 4px;
    float: left;
    overflow: hidden
}

.content .scancode-container .qr .wait-confirm[data-v-1ce923a9] {
    position: absolute;
    margin-top: -102px
}

.content .scancode-container .qr .wait-confirm .back[data-v-1ce923a9] {
    position: absolute;
    background: #000c;
    width: 102px;
    height: 102px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px)
}

.content .scancode-container .qr .wait-confirm .fore[data-v-1ce923a9] {
    position: absolute;
    font-size: 12px;
    width: 102px;
    height: 102px;
    text-align: center;
    padding-top: 52px;
    color: #fff
}

.content .scancode-container .desc[data-v-1ce923a9] {
    text-align: center;
    margin-top: 24px;
    margin-bottom: 0
}

.content.select-account[data-v-1ce923a9] {
    color: var(--color-text-1)
}

.content.select-account h2[data-v-1ce923a9] {
    text-align: center;
    font-size: 16px;
    margin-top: 16px
}

.content.select-account p.select-account-notice[data-v-1ce923a9] {
    font-size: 14px;
    line-height: 24px;
    text-align: center
}

.content.select-account .accounts[data-v-1ce923a9] {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.content.select-account .accounts .account[data-v-1ce923a9] {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--color-border-component);
    padding: 12px 16px;
    gap: 12px
}

.content.select-account .accounts .account .name[data-v-1ce923a9] {
    color: var(--color-text-1);
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0%;
    flex-grow: 1
}

.content.select-account .accounts .account[data-v-1ce923a9]:hover {
    border: 1px solid var(--color-border-hover)
}

.content.select-account .btn[data-v-1ce923a9] {
    margin-top: 30px;
    width: 24em;
    margin-bottom: 24px;
    margin-left: 170px
}

.app-down-container[data-v-a53a21bf] {
    padding: 0 16px 24px
}

.app-down-container .app-down-title[data-v-a53a21bf] {
    font-size: 40px;
    font-weight: 700;
    line-height: 52px;
    color: var(--color-gradient-button);
    margin-bottom: 24px
}

.app-down-container .app-down-title[data-v-a53a21bf]:first-child {
    margin-bottom: 0
}

.app-down-container .app-down-subTitle[data-v-a53a21bf] {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-1);
    margin-bottom: 8px
}

.app-down-container .margin-more[data-v-a53a21bf] {
    margin-bottom: 16px
}

.app-down-container .app-down-mark[data-v-a53a21bf] {
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-text-2);
    margin-bottom: 24px
}

.app-down-container .app-down-area[data-v-a53a21bf] {
    background-color: var(--color-bg-primary);
    padding: 40px 24px;
    border-radius: 16px;
    display: flex;
    justify-content: space-around;
    align-items: center
}

.app-down-container .app-down-area .app-down-area-item[data-v-a53a21bf] {
    display: flex;
    flex-direction: column;
    align-items: center
}

.app-down-container .app-down-area .app-down-area-item .app-down-img[data-v-a53a21bf] {
    width: 128px;
    height: 128px;
    margin-bottom: 12px
}

.app-down-container .app-down-area .app-down-area-item p[data-v-a53a21bf] {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-text-1)
}

.app-down-container .app-down-area .app-down-area-item p[data-v-a53a21bf] span {
    color: var(--color-theme-2)
}

.app-download-dialog.el-dialog {
    position: relative
}

.content-body h1[data-v-f6b82c4c] {
    font-size: 22px;
    font-weight: 500;
    line-height: 26px;
    color: var(--color-text-1);
    margin-top: -24px
}

.content-body p.short[data-v-f6b82c4c] {
    margin-top: 24px;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: var(--color-text-1)
}

.content-body .time[data-v-f6b82c4c] {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--color-text-3)
}

.content-body p.long[data-v-f6b82c4c] {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-text-2);
    white-space: pre-wrap
}

.content-body p.long[data-v-f6b82c4c] a {
    color: var(--color-theme-2)
}

.content-body .btns[data-v-f6b82c4c] {
    margin-top: 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
}

.content-body img[data-v-f6b82c4c] {
    object-fit: cover;
    margin-top: 24px;
    border-radius: 12px;
    max-width: 100%
}

.content-body .scrollable[data-v-f6b82c4c] {
    max-height: 640px;
    overflow-y: auto
}

.content-body .scrollable[data-v-f6b82c4c]::-webkit-scrollbar {
    width: 4px
}

.content-body .scrollable[data-v-f6b82c4c]::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: transparent
}

.content-body .scrollable[data-v-f6b82c4c]::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #333a45
}

.content-body .scrollable[data-v-f6b82c4c]::-webkit-scrollbar-thumb:hover {
    background-color: #777
}

.notification-container[data-v-7d384574] {
    display: flex;
    padding: 40px 24px;
    flex-direction: column;
    justify-content: start;
    background-color: var(--color-bg-page);
    height: 100vh;
    position: relative
}

.notification-container .close-btn[data-v-7d384574] {
    position: absolute;
    right: 24px;
    cursor: pointer
}

.red-dot[data-v-7d384574] {
    position: absolute;
    top: 6px;
    right: -8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-fill-red)
}

.tabs[data-v-7d384574] {
    background: var(--color-bg-page);
    position: relative;
    width: fit-content
}

.tabs .tab[data-v-7d384574] {
    height: 34px
}

.divider-line[data-v-7d384574] {
    width: 100%;
    border-top: 1px solid var(--color-border-container);
    transform: translateY(-1.5px)
}

.official[data-v-7d384574],.interact[data-v-7d384574] {
    padding-right: 9px;
    overflow-y: auto;
    height: 100%;
    width: 100%
}

.empty[data-v-7d384574] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center
}

.empty img[data-v-7d384574] {
    width: 80px;
    height: 80px;
    margin-top: 218px
}

.empty p[data-v-7d384574] {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: var(--color-text-2)
}

ol[data-v-7d384574] {
    width: 100%;
    list-style: none;
    padding-left: 0;
    margin: 0
}

ol .tooltip[data-v-7d384574] {
    width: 100%;
    display: flex;
    gap: 12px
}

ol li[data-v-7d384574] {
    width: 100%;
    gap: 24px;
    display: flex;
    cursor: pointer;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    background-color: var(--color-bg-primary)
}

ol li .icon[data-v-7d384574] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    padding: 0;
    gap: 10px;
    float: left;
    flex-shrink: 0;
    background: var(--color-gradient-button)
}

ol li .icon .red-dot[data-v-7d384574] {
    top: 0
}

ol li .msg[data-v-7d384574] {
    flex-grow: 1
}

ol li .msg h3[data-v-7d384574] {
    width: 292px;
    color: var(--color-text-1);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical
}

ol li .msg p[data-v-7d384574] {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: var(--color-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical
}

ol li .foot[data-v-7d384574] {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--color-text-3)
}

ol li .avatar[data-v-7d384574] {
    width: 40px;
    height: 40px
}

ol li .interact-msg[data-v-7d384574] {
    width: calc(100% - 52px);
    display: flex;
    gap: 12px
}

ol li .interact-msg .interact-text[data-v-7d384574] {
    width: calc(100% - 60px)
}

ol li .interact-msg .interact-text .interact-title[data-v-7d384574] {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 4px
}

ol li .interact-msg .interact-text .user-name[data-v-7d384574] {
    color: var(--color-text-1);
    margin-right: 4px
}

ol li .interact-msg .interact-text .msg-type[data-v-7d384574] {
    color: var(--color-text-3)
}

ol li .interact-msg .interact-text .interact-comment[data-v-7d384574] {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-text-2);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

ol li .interact-msg .interact-img-box[data-v-7d384574] {
    width: 76px;
    height: 76px;
    background-color: var(--color-other-2);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

ol li .interact-msg .delete-img-box[data-v-7d384574] {
    width: 76px;
    height: 76px;
    border-radius: 8px;
    background-color: var(--color-other-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

ol li .interact-msg .delete-img-box span[data-v-7d384574] {
    color: var(--color-text-3);
    font-size: 12px;
    font-weight: 400;
    line-height: 20px
}

ol li img[data-v-7d384574] {
    display: block;
    width: 76px;
    height: 76px;
    border-radius: 8px;
    object-fit: cover
}

ol li[data-v-7d384574]:last-child {
    margin-bottom: 0
}

ol li:last-child .msg[data-v-7d384574] {
    border: none
}

ol li[data-v-7d384574]:first-child {
    margin-top: 32px
}

ul[data-v-4b647d37] {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

ul div[data-v-4b647d37] {
    width: 100%
}

ul div .menu-item[data-v-4b647d37] {
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 24px;
    font-size: 14px;
    color: var(--color-text-1)
}

ul div .menu-item[data-v-4b647d37]:hover {
    background: var(--color-other-2)
}

ul div .disabled[data-v-4b647d37] {
    pointer-events: none;
    color: var(--color-text-3)
}

ul div .active[data-v-4b647d37] {
    font-weight: 500;
    color: var(--color-theme-2);
    background: var(--color-other-2)
}

ul div .title[data-v-4b647d37] {
    padding: 4px 12px;
    margin-top: 16px;
    margin-bottom: -8px;
    line-height: 24px;
    font-size: 14px;
    color: var(--color-text-3);
    display: flex;
    align-items: center
}

header[data-v-8f844c3b] {
    height: 100vh;
    float: left;
    position: fixed;
    left: 0;
    top: 0;
    width: var(--left-navigation-width);
    background: var(--color-bg-page);
    overflow: hidden;
    padding: 32px 16px 16px;
    z-index: 100;
    display: flex;
    flex-direction: column
}

header .main-logo[data-v-8f844c3b] {
    margin: 8px 12px 16px
}

header .content[data-v-8f844c3b] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: space-between;
    overflow: auto
}

header .content .scroll-area[data-v-8f844c3b] {
    flex: 1;
    overflow: auto
}

header .content .menu-item[data-v-8f844c3b] {
    margin-bottom: 8px;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 40px;
    display: flex;
    align-items: center;
    line-height: 24px;
    gap: 12px;
    font-size: 14px;
    color: var(--color-text-1)
}

header .content .menu-item[data-v-8f844c3b]:hover {
    background: var(--color-other-2)
}

header .content .menu-item .notification[data-v-8f844c3b] {
    position: relative;
    display: flex
}

header .content .menu-item .notification .red-dot[data-v-8f844c3b] {
    position: absolute;
    top: 0;
    right: -4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-fill-red)
}

header .content .avatar-item[data-v-8f844c3b] {
    padding: 6px 11px;
    gap: 11px
}

header .content .login[data-v-8f844c3b] {
    display: flex;
    border-radius: 24px;
    padding: 8px 10px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    background: var(--color-other-2);
    color: var(--color-gradient-button, linear-gradient(148deg, #d3e2f0 0%, #fff 100%));
    font-weight: 600;
    font-size: 14px;
    cursor: pointer
}

header .content .top-up[data-v-8f844c3b] {
    cursor: pointer;
    margin-top: 16px;
    display: flex;
    height: 36px;
    padding: 0 12px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    font-size: 14px;
    color: var(--color-text-1);
    border-radius: 36px;
    border: 1px solid var(-----color-border-container, #2f3133)
}

header .content .top-up .price[data-v-8f844c3b] {
    margin-left: 8px;
    text-align: center;
    font-family: MiSans Latin VF;
    font-size: 14px;
    font-style: normal;
    font-weight: 520;
    line-height: 24px;
    background: var(--color-gradient-standard, );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

header .content .membership[data-v-8f844c3b] {
    height: 36px;
    padding: 0 15.5px;
    margin: 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 36px;
    border: 1px solid var(--color-border-container);
    font-size: 14px
}

header .content .membership span[data-v-8f844c3b] {
    line-height: 24px;
    cursor: pointer;
    white-space: nowrap
}

header .content .membership .divider[data-v-8f844c3b] {
    margin: auto 4px;
    min-width: 1px;
    height: 16px;
    align-self: stretch;
    background: var(--color-other-2)
}

header .content .divider[data-v-8f844c3b] {
    margin: 8px;
    height: 1px;
    align-self: stretch;
    background: var(--color-other-2)
}

header .content .user[data-v-8f844c3b] {
    padding: 8px 14px 8px 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px
}

header .content .user .user-name[data-v-8f844c3b] {
    flex: 1;
    color: var(--color-text-1);
    font-size: 14px;
    line-height: 24px
}

header .content .share-links[data-v-8f844c3b] {
    margin-top: 16px;
    display: flex;
    padding: 0 12px 8px;
    justify-content: space-between
}

header .content .share-links .icon[data-v-8f844c3b] {
    width: 28px;
    height: 28px;
    border-radius: 28px;
    background: var(--color-other-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

header .content .links[data-v-8f844c3b] {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    gap: 16px
}

header .content .links div[data-v-8f844c3b] {
    flex: 1;
    max-width: calc(50% - 16px);
    color: var(--color-text-2);
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    white-space: nowrap
}

header .content .links div[data-v-8f844c3b]:hover {
    color: var(--color-text-1)
}

.site-switcher[data-v-8b2c29ac] {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 252px;
    padding-right: 32px;
    box-sizing: border-box;
    backdrop-filter: blur(120px);
    -webkit-backdrop-filter: blur(120px);
    background-color: #1820293d;
    position: fixed;
    left: 0;
    top: 0
}

.site-switcher .main[data-v-8b2c29ac] {
    display: flex;
    align-items: center;
    gap: .375rem;
    color: var(--text-color-1)
}

.site-switcher .main .text[data-v-8b2c29ac] {
    font-size: 12px
}

.site-switcher .main .text-left[data-v-8b2c29ac] {
    margin-left: 4px
}

.site-switcher .main .text-right[data-v-8b2c29ac] {
    margin-left: 4px;
    cursor: pointer;
    color: var(--color-fill-success)
}

.site-switcher .main .icon[data-v-8b2c29ac] {
    height: 100%;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.mobile-notice[data-v-09648793] {
    position: fixed;
    width: 100%;
    z-index: 2021;
    padding: 16px 12px;
    background-color: var(--main-background);
    line-height: 0
}

.mobile-notice .blk[data-v-09648793] {
    display: inline-block;
    vertical-align: middle
}

.mobile-notice .logo[data-v-09648793] {
    width: 38px;
    height: 38px;
    overflow: hidden;
    background-color: var(--main-background);
    pointer-events: all
}

.mobile-notice .notice[data-v-09648793] {
    display: inline-block;
    margin-left: 8px;
    background: var(--main-background)!important;
    line-height: 36px;
    font-size: 14px
}

.mobile-notice .button[data-v-09648793] {
    float: right
}

.notice-box[data-v-c20c6410] {
    border-radius: 12px
}

.notice-box .notice-header[data-v-c20c6410] {
    height: 120px
}

.notice-box .notice-header .notice-header-image[data-v-c20c6410] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left
}

.notice-box .notice-content-box[data-v-c20c6410] {
    padding: 24px 16px
}

.notice-box .notice-content-box .notice-title[data-v-c20c6410] {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--color-theme-2);
    margin-bottom: 8px;
    width: 80%
}

.notice-box .notice-content-box .notice-content[data-v-c20c6410] :first-child {
    margin-bottom: 8px
}

.notice-box .notice-content-box .notice-content p[data-v-c20c6410] {
    display: flex;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-text-1)
}

.notice-box .notice-content-box .notice-content p[data-v-c20c6410]:before {
    content: "•";
    background: var(--color-theme-2);
    display: inline-block;
    margin-right: .5em;
    font-weight: 700;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.notice-box .notice-content-box .notice-content.without-dot p[data-v-c20c6410]:before {
    display: none
}

.notice-box .notice-content-box .notice-motivate-content[data-v-c20c6410] {
    display: flex;
    flex-direction: column;
    align-items: center
}

.notice-box .notice-content-box .notice-motivate-content[data-v-c20c6410] b {
    color: var(--color-theme-2)
}

.notice-box .notice-content-box .notice-motivate-content .notice-title[data-v-c20c6410] {
    margin-bottom: 4px;
    color: var(--color-text-1)
}

.notice-box .notice-content-box .notice-motivate-content .sub-title[data-v-c20c6410] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 28px;
    color: var(--color-text-1)
}

.notice-box .notice-content-box .notice-motivate-content .sub-title[data-v-c20c6410] b {
    font-size: 18px
}

.notice-box .notice-content-box .notice-motivate-content h4[data-v-c20c6410] {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--color-text-2)
}

.notice-box .notice-content-box .notice-motivate-content h4[data-v-c20c6410] b {
    color: var(--color-text-2)
}

.notice-box .notice-content-box .notice-btn-box[data-v-c20c6410] {
    margin-top: 24px;
    display: flex;
    justify-content: end;
    align-items: center
}

.notice-box .notice-content-box .notice-btn-box .notice-view-btn[data-v-c20c6410] {
    margin-right: 8px
}

.notice-box .notice-content-box .notice-btn-box .notice-create-btn span[data-v-c20c6410] {
    font-weight: 600;
    line-height: 22px
}

.notice-box .notice-content-box .notice-btn-box .notice-create-other-btn[data-v-c20c6410] {
    background: var(--color-theme-2)
}

.success[data-v-5ca6880c] {
    width: 100%
}

.success video[data-v-5ca6880c] {
    width: 100%;
    height: 120px
}

.success .content[data-v-5ca6880c] {
    padding: 24px 0;
    margin-top: -8px
}

.success .content .img[data-v-5ca6880c] {
    width: 90px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden
}

.success .content .text1[data-v-5ca6880c] {
    color: var(--color-text-1);
    margin: 16px 0 6px;
    font-size: 16px;
    font-weight: 600
}

.success .content .text2[data-v-5ca6880c] {
    color: var(--color-text-2)
}

.fail[data-v-5ca6880c] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--color-text-1)
}

main[data-v-61c24089] {
    padding-top: 0;
    margin: 0;
    z-index: -1;
    background-color: transparent;
    height: 100%;
    min-width: var(--body-min-width);
    overflow-y: auto;
    background-color: var(--color-bg-page)
}

body.mobile main[data-v-61c24089] {
    min-width: unset
}

body.mobile main[data-v-61c24089]::-webkit-scrollbar {
    display: none
}

body.mobile .customer-service-box[data-v-61c24089] {
    width: 100vw
}

.customer-service-box[data-v-61c24089] {
    top: var(--top-navigation-height);
    width: 414px;
    height: calc(100vh - var(--top-navigation-height));
    position: fixed;
    right: 0;
    z-index: 999999
}

.customer-service-box iframe[data-v-61c24089] {
    border: none;
    width: 414px;
    height: calc(100vh - var(--top-navigation-height))
}

.customer-service-box div.close[data-v-61c24089] {
    position: absolute;
    right: 16px;
    top: 16px
}

.customer-service-box div.close svg[data-v-61c24089] {
    color: #444;
    cursor: pointer
}

.customer-support[data-v-61c24089] {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #212334;
    z-index: 1;
    width: 48px;
    height: 48px;
    box-shadow: #0000003d 0 3px 8px;
    right: 60px;
    bottom: 134px;
    border-radius: 50%;
    cursor: pointer;
    transition-property: transform;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4,0,.2,1)
}

.customer-support[data-v-61c24089]:hover {
    transform: scaleX(1.1) scaleY(1.1)
}

:root {
    --color-text: #e0e0e0;
    --top-navigation-height: 64px;
    --left-navigation-width: 220px;
    --left-designer-sidebar-width: 72px;
    --main-background: #0d1116;
    --theme-color-primary: #72e528;
    --theme-color-hover: #9ffd38
}

*,*:before,*:after {
    box-sizing: border-box;
    margin: 0;
    text-size-adjust: 100%;
    font-family: PingFang SC,arial,tahoma,Hiragino Sans GB,Microsoft YaHei,sans-serif
}

*::selection {
    background: #557172;
    color: #fff
}

*::-moz-selection {
    background: #557172;
    color: #fff
}

*::-webkit-selection {
    background: #557172;
    color: #fff
}

*:focus {
    outline: none
}

body {
    --body-min-width: 1440px;
    min-height: 100vh;
    height: 100vh;
    color: var(--color-text-1);
    background: var(--color-bg-page);
    line-height: 1.6;
    font-family: PingFang SC,arial,tahoma,Hiragino Sans GB,Microsoft YaHei,sans-serif;
    font-size: 14px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: auto;
    overflow-y: hidden
}

body.mobile {
    --body-min-width: unset
}

body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: transparent
}

body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555
}

body::-webkit-scrollbar-thumb:hover {
    background-color: #777
}

span,div {
    -webkit-user-select: none;
    user-select: none
}

@font-face {
    font-family: MiSans Latin VF;
    src: url(https://p1-kling.klingai.com/kcdn/cdn-kcdn112452/kling-web-aio-prod_aio/assets/fonts/MiSansLatinVF-BxBqiqV4.ttf)
}

@font-face {
    font-family: PP Editorial New Italic;
    src: url(https://p1-kling.klingai.com/kcdn/cdn-kcdn112452/kling-web-aio-prod_aio/assets/PPEditorialNew-Italic-BlENFm4N.otf)
}

@font-face {
    font-family: PP Editorial New Regular;
    src: url(https://p1-kling.klingai.com/kcdn/cdn-kcdn112452/kling-web-aio-prod_aio/assets/PPEditorialNew-Regular-CHymeRq6.otf)
}

@font-face {
    font-family: PP Editorial New Ultrabold;
    src: url(https://p1-kling.klingai.com/kcdn/cdn-kcdn112452/kling-web-aio-prod_aio/assets/PPEditorialNew-Ultrabold-BFfmAO5X.otf)
}

@font-face {
    font-family: PP Editorial New UltraboldItalic;
    src: url(https://p1-kling.klingai.com/kcdn/cdn-kcdn112452/kling-web-aio-prod_aio/assets/PPEditorialNew-UltraboldItalic-BYM9vjzi.otf)
}

.kling-slider.el-slider .el-slider__runway {
    height: 32px;
    background: var(--color-fill-light)
}

.kling-slider.el-slider .el-slider__runway .el-slider__bar {
    background: var(--color-other-4);
    height: 100%;
    border-radius: 0
}

.kling-slider.el-slider .el-slider__runway .el-slider__button-wrapper {
    top: 0;
    height: 32px;
    width: 32px
}

.kling-slider.el-slider .el-slider__runway .el-slider__button-wrapper .el-slider__button {
    background: var(--color-text-1);
    border: none;
    height: 32px;
    width: 6px;
    border-radius: 24px
}

.kling-slider.el-slider .el-slider__runway .el-slider__button-wrapper .el-slider__button.hover {
    transform: scale(1)
}

.kling-slider-simple.el-slider {
    height: 20px
}

.kling-slider-simple.el-slider .el-slider__runway {
    height: 4px;
    background: var(--color-other-5)
}

.kling-slider-simple.el-slider .el-slider__bar {
    height: 4px;
    background: var(--color-theme-1)
}

.kling-slider-simple.el-slider .el-slider__button {
    width: 12px;
    height: 12px;
    border: none
}

.kling-slider-simple.el-slider .el-slider__button-wrapper {
    top: -16px
}

:root {
    --color-theme-1: #fff;
    --color-theme-2: #74ff52ff;
    --color-theme-3: #74ff521f;
    --color-text-1: #f9fbfcff;
    --color-text-2: #b0b4b8ff;
    --color-text-3: #5e6266ff;
    --color-text-4: #484d52ff;
    --color-text-5: #000000ff;
    --color-bg-page: #0e0f0f;
    --color-bg-primary: #17181A;
    --color-bg-secondary: #1C1D1F;
    --color-bg-tertiary: #1f2124ff;
    --color-bg-popover: #2d2f33ff;
    --color-bg-popover-1: #383a3dff;
    --color-bg-dialog: #1e1f21ff;
    --color-bg-contrary: #ffffffff;
    --color-bg-deepseek: #5fe03fff;
    --color-border-frame: #212224ff;
    --color-border-container: #343638ff;
    --color-border-component: #424547ff;
    --color-border-hover: #9da1a3ff;
    --color-border-focused: #e1e6ebff;
    --color-border-line: #5e6366ff;
    --color-fill-success: #2feb48;
    --color-fill-warning: #faca5aff;
    --color-fill-error: #f04b22ff;
    --color-fill-link: #5cbeffff;
    --color-fill-disabled: #ffffff0f;
    --color-fill-dark: #00000033;
    --color-fill-light: #ffffff0a;
    --color-fill-white: #ffffffff;
    --color-fill-black: #000000ff;
    --color-fill-black-1: #00000066;
    --color-fill-black-2: #000000cc;
    --color-fill-black-3: #000000a3;
    --color-fill-red: #e92a1bff;
    --color-fill-error-24: #f04b223d;
    --color-other-1: #ffffff14;
    --color-other-2: #ffffff1f;
    --color-other-3: #ffffff29;
    --color-other-4: #ffffff33;
    --color-other-5: #ffffff3d;
    --color-other-6: #00000052;
    --color-other-7: #0000007a;
    --color-other-8: #090a0a7a;
    --color-gradient-button: linear-gradient(148deg, #d3e2f0 0%, #fff 100%);
    --color-gradient-basic: linear-gradient(148deg, #abbbcc 0%, #fff 100%);
    --color-gradient-standard: linear-gradient(148deg, #ffe4ad 0%, #fff7eb 100%);
    --color-gradient-pro: linear-gradient(148deg, #c2deff 0%, #ebf6ff 100%);
    --color-gradient-premier: linear-gradient(148deg, #ceccff 0%, #ebecff 100%);
    --color-gradient-hot: linear-gradient(90deg, #f60 0%, #f40 100%);
    --color-gradient-black: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .64) 100%);
    --color-gradient-black-revert: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .48) 100%);
    --color-gradient-container: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, #0f0f0f 100%);
    --color-gradient-standard-bg: linear-gradient(135deg, #332f2d 0%, #141413 100%);
    --color-gradient-pro-bg: linear-gradient(136deg, #2c333b 0%, #141414 101.27%);
    --color-gradient-premier-bg: linear-gradient(136deg, #3e3a49 0%, #212b37 32.75%, #1a1a1a 65.5%, #1a1a1a 102.34%);
    --box-shadow-container: 0px 4px 40px 0px rgba(0, 0, 0, .4);
    --box-shadow-component: 0px 2px 16px 0px rgba(0, 0, 0, .24);
    --box-shadow-component-table-fixed-left: 10px 0px 10px -10px #00000066 inset;
    --box-shadow-component-table-fixed-right: -10px 0px 10px -10px #00000066 inset;
    --color-chart-1: #f5c045;
    --color-chart-2: #48e05c;
    --color-chart-3: #8b61ff;
    --color-chart-4: #5fb2fa;
    --color-chart-5: #ff8edf;
    --color-chart-6: #fa7250;
    --color-chart-7: #1bf6fd;
    --color-chart-8: #a3476c;
    --color-chart-9: #f5459d;
    --color-chart-10: #b223c2
}

.light {
    --color-theme-1: #000000ff;
    --color-theme-2: #0b8a1bff;
    --color-theme-3: #0b8a1b29;
    --color-text-1: #121314ff;
    --color-text-2: #56585cff;
    --color-text-3: #939699ff;
    --color-text-4: #bec0c2ff;
    --color-text-5: #ffffffff;
    --color-bg-page: #f7f8faff;
    --color-bg-primary: #f2f3f5ff;
    --color-bg-secondary: #ffffffff;
    --color-bg-tertiary: #ffffffff;
    --color-bg-popover: #ffffffff;
    --color-bg-popover-1: #ffffffff;
    --color-bg-dialog: #ffffffff;
    --color-bg-contrary: #000000ff;
    --color-fill-back-1: #00000066;
    --color-bg-deepseek: #54e031ff;
    --color-border-frame: #e6e7ebff;
    --color-border-container: #e3e4e5ff;
    --color-border-component: #c8caccff;
    --color-border-hover: #9da0a3ff;
    --color-border-focused: #4b4e52ff;
    --color-border-line: #c4c8ccff;
    --color-fill-success: #0ead38;
    --color-fill-warning: #eb9109ff;
    --color-fill-error: #c21711ff;
    --color-fill-link: #1c7cebff;
    --color-fill-disabled: #00000014;
    --color-fill-dark: #ffffff3d;
    --color-fill-light: #0000000a;
    --color-fill-white: #ffffffff;
    --color-fill-black: #000000ff;
    --color-fill-black-1: #00000066;
    --color-fill-black-2: #000000cc;
    --color-fill-black-3: #000000a3;
    --color-fill-red: #e92a1bff;
    --color-fill-error-24: #f04b223d;
    --color-other-1: #09090a0a;
    --color-other-2: #09090a0f;
    --color-other-3: #09090a14;
    --color-other-4: #09090a1f;
    --color-other-5: #09090a24;
    --color-other-6: #ffffff52;
    --color-other-7: #ffffff7a;
    --color-other-7: #ffffffd1;
    --color-gradient-button: linear-gradient(148deg, #1c2129 0%, #101114 100%);
    --color-gradient-basic: linear-gradient(148deg, #565e66 0%, #8996a3 100%);
    --color-gradient-standard: linear-gradient(91deg, #523710 0%, #331f12 100%);
    --color-gradient-pro: linear-gradient(91deg, #102a52 0%, #122433 100%);
    --color-gradient-premier: linear-gradient(91deg, #2b1d52 0%, #252a47 100%);
    --color-gradient-hot: linear-gradient(90deg, #f60 0%, #f40 100%);
    --color-gradient-black: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .64) 100%);
    --color-gradient-black-revert: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .48) 100%);
    --color-gradient-container: linear-gradient(180deg, rgba(239, 240, 242, 0) 0%, #eff0f2 100%);
    --color-gradient-standard-bg: linear-gradient(99deg, #f1eadc 2.49%, #f1ede1 24.04%, #eff0f2 100.46%);
    --color-gradient-pro-bg: linear-gradient(99deg, #def2f3 0%, #daeef4 32%, #eff0f2 100%);
    --color-gradient-premier-bg: linear-gradient(99deg, #e4ecf5 0%, #ecf2ff 32%, #efe6fb 56%, #dff1f6 100%) --box-shadow-container: 0px 4px 40px 0px rgba(0, 0, 0, .4);
    --box-shadow-component: 0px 2px 16px 0px rgba(0, 0, 0, .24);
    --box-shadow-component-table-fixed-left: 10px 0px 10px -10px #0000001f inset;
    --box-shadow-component-table-fixed-right: -10px 0px 10px -10px #0000001f inset;
    --color-chart-1: #2261f5;
    --color-chart-2: #28c792;
    --color-chart-3: #fabf00;
    --color-chart-4: #f06d0a;
    --color-chart-5: #7b34eb;
    --color-chart-6: #09c5db;
    --color-chart-7: #7679a3;
    --color-chart-8: #8fc204;
    --color-chart-9: #f5459d;
    --color-chart-10: #b223c2
}

.gift-pack-dialog.el-dialog {
    background-color: var(--color-bg-dialog)
}

.kling-dialog.el-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    background: var(--color-bg-dialog);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--box-shadow-container)
}

.kling-dialog.el-dialog .el-dialog__title {
    color: var(--color-text-1);
    line-height: 26px;
    font-size: 18px;
    font-weight: 600
}

.kling-dialog.el-dialog .el-dialog__header {
    padding-bottom: 24px
}

.kling-dialog.el-dialog .el-dialog__body {
    color: var(--color-text-1)
}

.kling-dialog.el-dialog .el-icon.el-dialog__close {
    font-size: 20px;
    color: var(--color-text-1)
}

.kling-dialog.el-dialog .el-icon.el-dialog__close svg {
    margin: 0;
    padding: 0
}

.kling-dialog.el-dialog .el-dialog__headerbtn {
    right: 24px;
    top: 24px;
    width: 36px;
    height: 36px;
    transform: translate(8px,-8px)
}

.kling-dialog.el-dialog .el-dialog__footer {
    padding-top: 24px
}

.kling-dialog.el-dialog .el-dialog__footer button {
    margin-left: 12px
}

.kling-dialog.el-dialog.el-dialog.header-underline {
    position: relative
}

.kling-dialog.el-dialog.el-dialog.header-underline .el-dialog__header:after {
    content: "";
    width: 100%;
    height: 1px;
    background: var(--color-border-container);
    position: absolute;
    top: 74px;
    left: 0
}

.kling-dialog-no-padding.el-dialog {
    background: var(--color-bg-dialog);
    border-radius: 16px;
    box-shadow: var(--box-shadow-container);
    padding: 0!important;
    color: var(--color-text-1)
}

.kling-dialog-no-padding.el-dialog .el-dialog__header {
    padding-bottom: 0
}

.kling-dialog-no-padding.el-dialog.has-border {
    border: 1px solid var(--color-border-component)
}

.kling-dialog-transparent.el-dialog {
    background: transparent;
    border-radius: 16px;
    box-shadow: var(--box-shadow-container);
    padding: 0
}

.kling-dialog-transparent.el-dialog .el-dialog__header {
    padding-bottom: 0
}

.kling-dialog-transparent.el-dialog.has-border {
    border: 1px solid var(--color-border-component)
}

.delete-dialog .el-dialog__body {
    margin: 0 36px 18px!important
}

.delete-dialog .el-dialog__header {
    padding: 0!important
}

.delete-dialog .detail-dialog .el-dialog__headerbtn {
    margin-top: 10px!important
}

.delete-dialog .el-icon.el-dialog__close {
    margin-top: 0!important;
    margin-right: -12px
}

.delete-dialog .el-icon.el-dialog__close svg {
    width: 20px;
    height: 20px
}

.extend-dialog .el-icon.el-dialog__close {
    margin-top: 12px;
    margin-left: -6px
}

.extend-dialog .el-icon.el-dialog__close svg {
    width: 20px;
    height: 20px
}

.success-dialog .el-dialog__headerbtn .el-icon.el-dialog__close {
    top: 6px;
    margin: 0!important;
    font-size: 24px!important
}

.success-dialog .el-dialog__headerbtn .el-icon.el-dialog__close svg {
    margin: 0;
    padding: 0
}

.reference-image-dialog .el-icon.el-dialog__close {
    margin-top: 14px;
    margin-left: -8px
}

.reference-image-dialog .el-icon.el-dialog__close svg {
    width: 24px;
    height: 24px
}

body.mobile .reference-image-dialog {
    width: calc(100vw - 32px)
}

body.mobile .reference-image-dialog .reference-image-upload-container {
    width: 100%;
    height: 240px
}

body.mobile .reference-image-dialog .reference-image-recognition-result-options {
    height: auto
}

body.mobile .reference-image-dialog .reference-image-recognition-result-options .options-container {
    flex-direction: column
}

body.mobile .reference-image-dialog .reference-image-recognition-result-options .options-container .options-item {
    margin-bottom: 16px;
    width: 100%;
    margin-right: 0
}

.kling-dialog.kling-fullscreen-dialog.el-dialog {
    border-radius: 0;
    border: none;
    padding: 0
}

.kling-dialog.kling-fullscreen-dialog.el-dialog .el-dialog__header {
    padding-bottom: 0
}

.kling-dialog.kling-fullscreen-dialog.el-dialog .el-dialog__body {
    height: 100%
}

.confirm-dialog.el-dialog .el-dialog__header {
    padding-bottom: 8px
}

.confirm-dialog.el-dialog .el-dialog__footer {
    padding-top: 22px
}

.blossom-effect-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-1);
    font-size: 18px;
    font-weight: 600;
    line-height: 26px
}

.blossom-effect-dialog-failed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--color-text-3);
    font-size: 12px
}

.blossom-effect-dialog-loading {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #000000a3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-text-1)
}

.blossom-effect-dialog-content {
    height: 694px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: var(--color-fill-black-3);
    position: relative
}

.blossom-effect-dialog-content .action {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 2px;
    padding: 2px 8px;
    height: 32px;
    border-radius: 8px;
    background: var(--color-other-6)
}

.blossom-effect-dialog-content .action .action-item {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.blossom-effect-dialog-content img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.blossom-effect-dialog-footer {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    justify-content: flex-end
}

body.mobile .kling-dialog.el-dialog {
    padding: 16px
}

body.mobile .kling-dialog.kling-fullscreen-dialog.el-dialog {
    padding: 0
}

.kling-dropdown .el-popper__arrow {
    display: none
}

.kling-dropdown.el-dropdown__popper.el-popper,.kling-dropdown.el-dropdown__popper.el-popper.is-light {
    border-radius: 8px;
    border: none;
    box-shadow: var(--box-shadow-component);
    background: var(--color-bg-popover)
}

.kling-dropdown.el-dropdown__popper.el-popper .el-scrollbar,.kling-dropdown.el-dropdown__popper.el-popper.is-light .el-scrollbar {
    border-radius: 8px
}

.kling-dropdown.el-dropdown__popper.el-popper .el-dropdown-menu,.kling-dropdown.el-dropdown__popper.el-popper.is-light .el-dropdown-menu {
    padding: 8px 0;
    background: var(--color-bg-popover);
    border-radius: 8px;
    max-height: 304px
}

.kling-dropdown.el-dropdown__popper.el-popper .el-dropdown-menu .el-dropdown-menu__item,.kling-dropdown.el-dropdown__popper.el-popper.is-light .el-dropdown-menu .el-dropdown-menu__item {
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0 12px;
    background: var(--color-bg-popover);
    color: var(--color-text-1)
}

.kling-dropdown.el-dropdown__popper.el-popper .el-dropdown-menu .el-dropdown-menu__item:hover,.kling-dropdown.el-dropdown__popper.el-popper.is-light .el-dropdown-menu .el-dropdown-menu__item:hover {
    background: var(--color-other-1)
}

.kling-dropdown.el-dropdown__popper.el-popper .el-dropdown-menu .active,.kling-dropdown.el-dropdown__popper.el-popper.is-light .el-dropdown-menu .active {
    color: var(--color-theme-2)
}

.kling-dropdown.el-dropdown__popper.el-popper .el-dropdown-menu svg,.kling-dropdown.el-dropdown__popper.el-popper.is-light .el-dropdown-menu svg {
    margin-right: 8px
}

.kling-dropdown.el-dropdown__popper.el-popper.small .el-dropdown-menu,.kling-dropdown.el-dropdown__popper.el-popper.is-light.small .el-dropdown-menu {
    max-height: 240px
}

.kling-dropdown.el-dropdown__popper.el-popper.small .el-dropdown-menu__item,.kling-dropdown.el-dropdown__popper.el-popper.is-light.small .el-dropdown-menu__item {
    height: 28px;
    line-height: 28px;
    padding: 0 8px
}

.kling-dropdown.kling-dropdown-no-scroll.el-popper .el-dropdown-menu,.kling-dropdown.kling-dropdown-no-scroll.el-popper.is-light .el-dropdown-menu {
    max-height: unset
}

:root {
    --el-loading-spinner-size: 42px;
    --el-loading-fullscreen-spinner-size: 50px
}

.el-loading-parent--relative {
    position: relative!important
}

.el-loading-parent--hidden {
    overflow: hidden!important
}

.el-loading-mask {
    background-color: var(--el-mask-color);
    bottom: 0;
    left: 0;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity var(--el-transition-duration);
    z-index: 2000
}

.el-loading-mask.is-fullscreen {
    position: fixed
}

.el-loading-mask.is-fullscreen .el-loading-spinner {
    margin-top: calc((0px - var(--el-loading-fullscreen-spinner-size)) / 2)
}

.el-loading-mask.is-fullscreen .el-loading-spinner .circular {
    height: var(--el-loading-fullscreen-spinner-size);
    width: var(--el-loading-fullscreen-spinner-size)
}

.el-loading-spinner {
    margin-top: calc((0px - var(--el-loading-spinner-size)) / 2);
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%
}

.el-loading-spinner .el-loading-text {
    color: var(--el-color-primary);
    font-size: 14px;
    margin: 3px 0
}

.el-loading-spinner .circular {
    animation: loading-rotate 2s linear infinite;
    display: inline;
    height: var(--el-loading-spinner-size);
    width: var(--el-loading-spinner-size)
}

.el-loading-spinner .path {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90,150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: var(--el-color-primary);
    stroke-linecap: round
}

.el-loading-spinner i {
    color: var(--el-color-primary)
}

.el-loading-fade-enter-from,.el-loading-fade-leave-to {
    opacity: 0
}

@keyframes loading-rotate {
    to {
        transform: rotate(1turn)
    }
}

@keyframes loading-dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -40px
    }

    to {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -120px
    }
}

.el-message {
    --el-message-bg-color: var(--el-color-info-light-9);
    --el-message-border-color: var(--el-border-color-lighter);
    --el-message-padding: 11px 15px;
    --el-message-close-size: 16px;
    --el-message-close-icon-color: var(--el-text-color-placeholder);
    --el-message-close-hover-color: var(--el-text-color-secondary);
    align-items: center;
    background-color: var(--el-message-bg-color);
    border-color: var(--el-message-border-color);
    border-radius: var(--el-border-radius-base);
    border-style: var(--el-border-style);
    border-width: var(--el-border-width);
    box-sizing: border-box;
    display: flex;
    gap: 8px;
    left: 50%;
    max-width: calc(100% - 32px);
    padding: var(--el-message-padding);
    position: fixed;
    top: 20px;
    transform: translate(-50%);
    transition: opacity var(--el-transition-duration),transform .4s,top .4s;
    width: -moz-fit-content;
    width: fit-content
}

.el-message.is-center {
    justify-content: center
}

.el-message.is-plain {
    background-color: var(--el-bg-color-overlay);
    border-color: var(--el-bg-color-overlay);
    box-shadow: var(--el-box-shadow-light)
}

.el-message p {
    margin: 0
}

.el-message--success {
    --el-message-bg-color: var(--el-color-success-light-9);
    --el-message-border-color: var(--el-color-success-light-8);
    --el-message-text-color: var(--el-color-success)
}

.el-message--success .el-message__content {
    color: var(--el-message-text-color);
    overflow-wrap: break-word
}

.el-message .el-message-icon--success {
    color: var(--el-message-text-color)
}

.el-message--info {
    --el-message-bg-color: var(--el-color-info-light-9);
    --el-message-border-color: var(--el-color-info-light-8);
    --el-message-text-color: var(--el-color-info)
}

.el-message--info .el-message__content {
    color: var(--el-message-text-color);
    overflow-wrap: break-word
}

.el-message .el-message-icon--info {
    color: var(--el-message-text-color)
}

.el-message--warning {
    --el-message-bg-color: var(--el-color-warning-light-9);
    --el-message-border-color: var(--el-color-warning-light-8);
    --el-message-text-color: var(--el-color-warning)
}

.el-message--warning .el-message__content {
    color: var(--el-message-text-color);
    overflow-wrap: break-word
}

.el-message .el-message-icon--warning {
    color: var(--el-message-text-color)
}

.el-message--error {
    --el-message-bg-color: var(--el-color-error-light-9);
    --el-message-border-color: var(--el-color-error-light-8);
    --el-message-text-color: var(--el-color-error)
}

.el-message--error .el-message__content {
    color: var(--el-message-text-color);
    overflow-wrap: break-word
}

.el-message .el-message-icon--error {
    color: var(--el-message-text-color)
}

.el-message .el-message__badge {
    position: absolute;
    right: -8px;
    top: -8px
}

.el-message__content {
    font-size: 14px;
    line-height: 1;
    padding: 0
}

.el-message__content:focus {
    outline-width: 0
}

.el-message .el-message__closeBtn {
    color: var(--el-message-close-icon-color);
    cursor: pointer;
    font-size: var(--el-message-close-size)
}

.el-message .el-message__closeBtn:focus {
    outline-width: 0
}

.el-message .el-message__closeBtn:hover {
    color: var(--el-message-close-hover-color)
}

.el-message-fade-enter-from,.el-message-fade-leave-to {
    opacity: 0;
    transform: translate(-50%,-100%)
}

body.mobile .el-message {
    width: calc(100vw - 32px)
}

.el-message {
    padding: 15px 24px;
    border-radius: 56px;
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    background: var(--color-bg-popover);
    border: none;
    justify-content: center;
    align-items: center
}

.el-message i {
    width: 20px!important;
    height: 20px!important
}

.el-message i svg {
    width: 20px!important;
    height: 20px!important
}

.el-message p {
    font-size: 16px;
    color: var(--color-text-1)!important;
    line-height: 26px
}

.notification-box.el-notification {
    width: 400px;
    max-width: 400px;
    background-color: var(--color-bg-popover);
    border: none;
    border-radius: 12px;
    --el-notification-padding: 0
}

.notification-box.el-notification .el-notification__group {
    margin-left: 0;
    margin-right: 0;
    width: 100%
}

.notification-box.el-notification .el-notification__closeBtn {
    color: var(--color-text-1);
    top: 24px;
    right: 24px;
    font-size: 20px
}

.mobile .notification-box.el-notification {
    width: 92%
}

.notification-box-black.el-notification {
    width: 400px;
    max-width: 400px;
    background-color: var(--color-bg-popover);
    border: none;
    box-shadow: var(--box-shadow-component);
    border-radius: 12px;
    --el-notification-padding: 0
}

.notification-box-black.el-notification .el-notification__group {
    margin-left: 0;
    margin-right: 0;
    width: 100%
}

.notification-box-black.el-notification .el-notification__closeBtn {
    color: var(--color-text-1);
    top: 8px;
    right: 8px;
    font-size: 20px
}

.mobile .notification-box-black.el-notification {
    width: 92%
}

.kling-notification.el-notification {
    background: var(--color-bg-popover);
    border: none;
    box-shadow: var(--box-shadow-container);
    padding: 24px;
    border-radius: 16px
}

.kling-notification.el-notification .el-notification__group {
    margin: 0;
    width: 100%
}

.kling-notification.el-notification .el-notification__content {
    padding-right: 10px;
    height: 100%
}

.kling-notification.el-notification .el-notification__closeBtn {
    color: var(--color-text-1)
}

.kling-notification.el-notification .el-notification__closeBtn svg {
    width: 16px;
    height: 16px
}

.kling-notification-lora.el-notification {
    background: var(--color-bg-popover);
    border: none;
    box-shadow: var(--box-shadow-container);
    padding: 0;
    border-radius: 16px;
    width: 360px
}

.kling-notification-lora.el-notification .el-notification__group {
    margin: 0
}

.el-popover {
    --el-popover-bg-color: var(--el-bg-color-overlay);
    --el-popover-font-size: var(--el-font-size-base);
    --el-popover-border-color: var(--el-border-color-lighter);
    --el-popover-padding: 12px;
    --el-popover-padding-large: 18px 20px;
    --el-popover-title-font-size: 16px;
    --el-popover-title-text-color: var(--el-text-color-primary);
    --el-popover-border-radius: 4px
}

.el-popover.el-popper {
    background: var(--el-popover-bg-color);
    border: 1px solid var(--el-popover-border-color);
    border-radius: var(--el-popover-border-radius);
    box-shadow: var(--el-box-shadow-light);
    box-sizing: border-box;
    color: var(--el-text-color-regular);
    font-size: var(--el-popover-font-size);
    line-height: 1.4;
    min-width: 150px;
    overflow-wrap: break-word;
    padding: var(--el-popover-padding);
    z-index: var(--el-index-popper)
}

.el-popover.el-popper--plain {
    padding: var(--el-popover-padding-large)
}

.el-popover__title {
    color: var(--el-popover-title-text-color);
    font-size: var(--el-popover-title-font-size);
    line-height: 1;
    margin-bottom: 12px
}

.el-popover__reference:focus:hover,.el-popover__reference:focus:not(.focusing) {
    outline-width: 0
}

.el-popover.el-popper.is-dark {
    --el-popover-bg-color: var(--el-text-color-primary);
    --el-popover-border-color: var(--el-text-color-primary);
    --el-popover-title-text-color: var(--el-bg-color);
    color: var(--el-bg-color)
}

.el-popover.el-popper:focus,.el-popover.el-popper:focus:active {
    outline-width: 0
}

.kling-tooltip.el-popper,.kling-tooltip.el-popper.is-light {
    max-width: 560px;
    padding: 6px 12px;
    background: var(--color-bg-popover);
    border-radius: 8px;
    color: var(--color-text-1);
    font-size: 14px;
    line-height: 24px;
    border: none;
    box-shadow: var(--box-shadow-component)
}

.kling-tooltip.el-popper .el-popper__arrow:before,.kling-tooltip.el-popper.is-light .el-popper__arrow:before {
    background-color: var(--color-bg-popover);
    border: none
}

.kling-tooltip-media.el-popper,.kling-tooltip-media.el-popper.is-light {
    background: var(--color-bg-popover);
    border: none;
    border-radius: 8px;
    padding: 4px;
    box-shadow: var(--box-shadow-component)
}

.kling-tooltip-media.el-popper .el-popper__arrow:before,.kling-tooltip-media.el-popper.is-light .el-popper__arrow:before {
    background-color: var(--color-bg-popover);
    border: none
}

.el-only-child__content {
    height: 100%;
    display: inline-block
}

.kling-popover.el-popover,.kling-popover.el-popover.is-light {
    background: var(--color-bg-popover);
    border: none;
    padding: 12px;
    border-radius: 8px;
    color: var(--color-text-2);
    font-size: 13px;
    line-height: 22px;
    font-weight: 400;
    box-shadow: var(--box-shadow-component)
}

.kling-popover.el-popover .el-popper__arrow:before,.kling-popover.el-popover.is-light .el-popper__arrow:before {
    background-color: var(--color-bg-popover);
    border: none
}

.kling-popover.el-popover .el-popover__title,.kling-popover.el-popover.is-light .el-popover__title {
    margin-bottom: 4px;
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: 600;
    line-height: 24px
}

.kling-popover-media.el-popover,.kling-popover-media.el-popover.is-light {
    background: var(--color-bg-popover);
    border: none;
    border-radius: 8px;
    color: var(--color-text-2);
    padding: 4px;
    box-shadow: var(--box-shadow-component)
}

.kling-popover-media.el-popover .el-popper__arrow:before,.kling-popover-media.el-popover.is-light .el-popper__arrow:before {
    background-color: var(--color-bg-popover);
    border: none
}

.kling-popover-no-padding.el-popover,.kling-popover-no-padding.el-popover.is-light {
    background: var(--color-bg-popover);
    border: none;
    border-radius: 12px;
    color: var(--color-text-2);
    padding: 0;
    box-shadow: var(--box-shadow-component)
}

.kling-popover-no-padding.el-popover .el-popper__arrow:before,.kling-popover-no-padding.el-popover.is-light .el-popper__arrow:before {
    background-color: var(--color-bg-popover);
    border: none
}

.notification-popover.el-popover,.notification-popover.el-popover.is-light {
    border-left: 1px solid var(--color-border-frame);
    transform: translateY(-2px)
}

.button-confirm-popover.el-popover,.button-confirm-popover.el-popover.is-light {
    padding: 0
}

.motivate-tooltip-publish .open-motivate {
    color: var(--color-theme-2);
    margin-left: 4px;
    cursor: pointer
}

.motivate-tooltip-publish .open-motivate.task {
    margin-right: 4px
}

.blossom-cancel-popover-title {
    font-size: 14px;
    color: var(--color-text-1);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px
}

.blossom-cancel-popover-desc {
    margin-top: 4px;
    font-size: 12px;
    color: var(--color-text-1)
}

.blossom-cancel-popover-footer {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 8px
}

.kling-select.el-select .el-select__wrapper,.kling-select .el-select .el-select__wrapper {
    box-shadow: none;
    border: 1px solid var(--color-border-component);
    background-color: transparent;
    border-radius: 8px;
    height: 32px;
    padding: 6px 12px;
    gap: 8px
}

.kling-select.el-select .el-select__wrapper:hover,.kling-select .el-select .el-select__wrapper:hover {
    cursor: pointer
}

.kling-select.el-select .el-select__wrapper.is-hovering:not(.is-focus),.kling-select .el-select .el-select__wrapper.is-hovering:not(.is-focus) {
    border: 1px var(--color-border-hover) solid
}

.kling-select.el-select .el-select__wrapper.is-focused,.kling-select .el-select .el-select__wrapper.is-focused {
    border: 1px var(--color-text-1) solid
}

.kling-select.el-select .el-select__wrapper.is-focused .el-select__placeholder,.kling-select .el-select .el-select__wrapper.is-focused .el-select__placeholder {
    color: var(--color-text-1)
}

.kling-select.el-select .el-select__wrapper.is-focused .el-select__placeholder.is-transparent,.kling-select .el-select .el-select__wrapper.is-focused .el-select__placeholder.is-transparent {
    color: var(--color-text-3)
}

.kling-select.el-select .el-select__wrapper.is-disabled,.kling-select .el-select .el-select__wrapper.is-disabled {
    background-color: var(--color-fill-disabled);
    cursor: not-allowed
}

.kling-select.el-select .el-select__wrapper.is-disabled.is-hovering,.kling-select .el-select .el-select__wrapper.is-disabled.is-hovering {
    cursor: not-allowed;
    border: 1px solid var(--color-border-component)
}

.kling-select.el-select .el-select__wrapper.is-disabled .el-select__icon path,.kling-select .el-select .el-select__wrapper.is-disabled .el-select__icon path {
    fill: var(--color-text-4)
}

.kling-select.el-select .el-select__wrapper.is-disabled .el-select__placeholder,.kling-select .el-select .el-select__wrapper.is-disabled .el-select__placeholder {
    color: var(--color-text-2);
    cursor: not-allowed
}

.kling-select.el-select .el-select__wrapper.is-disabled .el-select__placeholder.is-transparent,.kling-select .el-select .el-select__wrapper.is-disabled .el-select__placeholder.is-transparent {
    color: var(--color-text-3)
}

.kling-select.el-select .el-select__wrapper .el-select__placeholder,.kling-select .el-select .el-select__wrapper .el-select__placeholder {
    color: var(--color-text-1);
    font-size: 14px
}

.kling-select.el-select .el-select__wrapper .el-select__placeholder.is-transparent,.kling-select .el-select .el-select__wrapper .el-select__placeholder.is-transparent {
    color: var(--color-text-3)
}

.kling-select.el-select.is-error .el-select__wrapper,.kling-select .el-select.is-error .el-select__wrapper {
    border: 1px var(--color-fill-error) solid
}

.kling-select.el-select.small .el-select__wrapper,.kling-select .el-select.small .el-select__wrapper {
    height: 28px;
    padding: 4px 8px
}

.kling-select.el-select.small .el-select__wrapper .el-select__placeholder,.kling-select .el-select.small .el-select__wrapper .el-select__placeholder {
    font-size: 12px
}

.kling-select.el-select.big .el-select__wrapper,.kling-select .el-select.big .el-select__wrapper {
    height: 36px;
    padding: 8px 12px
}

.kling-select.el-select.large .el-select__wrapper,.kling-select .el-select.large .el-select__wrapper {
    height: 40px;
    padding: 10px 16px
}

.kling-select.el-select__popper.el-popper,.kling-select.el-select__popper.el-popper.is-light {
    background: var(--color-bg-popover);
    border: none;
    border-radius: 8px;
    box-shadow: var(--box-shadow-component)
}

.kling-select.el-select__popper.el-popper .el-select-dropdown__wrap,.kling-select.el-select__popper.el-popper.is-light .el-select-dropdown__wrap {
    max-height: 304px
}

.kling-select.el-select__popper.el-popper .el-select-dropdown__list,.kling-select.el-select__popper.el-popper.is-light .el-select-dropdown__list {
    padding: 8px 0
}

.kling-select.el-select__popper.el-popper .el-select-dropdown__list .el-select-dropdown__item,.kling-select.el-select__popper.el-popper.is-light .el-select-dropdown__list .el-select-dropdown__item {
    height: 36px;
    line-height: 36px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--color-text-1);
    display: flex;
    align-items: center;
    justify-content: space-between
}

.kling-select.el-select__popper.el-popper .el-select-dropdown__list .el-select-dropdown__item.is-hovering,.kling-select.el-select__popper.el-popper.is-light .el-select-dropdown__list .el-select-dropdown__item.is-hovering {
    background: var(--color-other-1)!important
}

.kling-select.el-select__popper.el-popper .el-select-dropdown__list .el-select-dropdown__item.is-selected,.kling-select.el-select__popper.el-popper.is-light .el-select-dropdown__list .el-select-dropdown__item.is-selected {
    background: var(--color-bg-popover);
    color: var(--color-theme-2)
}

.kling-select.el-select__popper.el-popper.small .el-select-dropdown__wrap,.kling-select.el-select__popper.el-popper.is-light.small .el-select-dropdown__wrap {
    max-height: 240px
}

.kling-select.el-select__popper.el-popper.small .el-select-dropdown__item,.kling-select.el-select__popper.el-popper.is-light.small .el-select-dropdown__item {
    height: 28px;
    line-height: 28px;
    padding: 0 8px
}

.kling-select .el-popper__arrow {
    display: none
}

.kling-select-multi .el-select__selection {
    gap: 4px
}

.kling-select-multi .el-tag {
    padding: 1px 4px;
    border-radius: 4px;
    border: none;
    background: var(--color-other-1, rgba(255, 255, 255, .08));
    color: var(--color-text-1, #f9fbfc);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.kling-select-multi .el-select__tags-text {
    line-height: inherit
}

.kling-select-multi .el-tag .el-tag__close {
    margin-left: 4px
}

.kling-select-multi .el-tag .el-icon {
    font-size: 14px;
    height: 16px;
    width: 16px
}

.kling-select-multi.el-select__popper .el-select-dropdown {
    width: 220px
}

.kling-select-multi.el-select__popper .el-select-dropdown__header {
    border-bottom: 1px solid var(--color-border-component);
    padding: 8px 0
}

.kling-select-multi.el-select__popper .check-all-wrapper {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    gap: 8px;
    color: var(--color-text-1, #f9fbfc);
    font-size: 14px;
    font-weight: 400
}

.kling-select-multi.el-select__popper .check-all-wrapper {
    cursor: pointer
}

.kling-select-multi.el-select__popper .check-all-wrapper:hover {
    background: var(--color-other-1)
}

.kling-select-multi.el-select__popper .check-all-wrapper:hover .checkbox {
    border-color: var(--color-border-hover)
}

.kling-select-multi.el-select__popper .check-all-wrapper.is-selected,.kling-select-multi.el-select__popper .check-all-wrapper.is-indeterminate {
    color: var(--color-theme-2, #74ff52)
}

.kling-select-multi.el-select__popper .check-all-wrapper.is-selected .checkbox,.kling-select-multi.el-select__popper .check-all-wrapper.is-indeterminate .checkbox {
    border-color: var(--color-theme-2);
    background: var(--color-theme-2)
}

.kling-select-multi.el-select__popper .check-all-wrapper.is-selected .checked-icon,.kling-select-multi.el-select__popper .check-all-wrapper.is-indeterminate .indeterminate-icon {
    display: inline-block
}

.kling-select-multi.el-select__popper .kling-select-multi-option,.kling-select-multi.el-select__popper .check-all-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-1, #f9fbfc);
    font-size: 14px;
    font-weight: 400
}

.kling-select-multi.el-select__popper .kling-select-multi-option .checkbox,.kling-select-multi.el-select__popper .check-all-wrapper .checkbox {
    display: flex;
    border: 1px solid var(--color-border-component, #424547);
    border-radius: 4px;
    height: 16px;
    width: 16px;
    align-items: center;
    justify-content: center
}

.kling-select-multi.el-select__popper .kling-select-multi-option .checked-icon,.kling-select-multi.el-select__popper .kling-select-multi-option .indeterminate-icon,.kling-select-multi.el-select__popper .check-all-wrapper .checked-icon,.kling-select-multi.el-select__popper .check-all-wrapper .indeterminate-icon {
    display: none;
    color: var(--color-text-5)
}

.kling-select-multi.el-select__popper .kling-select-multi-option .label,.kling-select-multi.el-select__popper .check-all-wrapper .label {
    flex: 1
}

.kling-select-multi.el-select__popper .kling-select-multi-option.is-hovering .checkbox,.kling-select-multi.el-select__popper .check-all-wrapper.is-hovering .checkbox {
    border-color: var(--color-border-hover)
}

.kling-select-multi.el-select__popper .kling-select-multi-option.is-selected .checkbox,.kling-select-multi.el-select__popper .check-all-wrapper.is-selected .checkbox {
    border-color: var(--color-theme-2);
    background: var(--color-theme-2)
}

.kling-select-multi.el-select__popper .kling-select-multi-option.is-selected .checkbox .checked-icon,.kling-select-multi.el-select__popper .check-all-wrapper.is-selected .checkbox .checked-icon {
    display: inline-block
}

.kling-select-multi.el-select__popper .el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected:after {
    display: none
}

.el-scrollbar__bar.is-vertical {
    width: 4px;
    right: 8px;
    top: 8px
}

.kling-scroll-light {
    overflow-y: auto
}

.kling-scroll-light::-webkit-scrollbar {
    display: unset;
    width: 6px
}

.kling-scroll-light::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: var(--color-border-component)
}

.kling-scroll-light::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-border-hover);
    cursor: pointer
}

.kling-scroll-light::-webkit-scrollbar-corner {
    background: #0000
}

.kling-scroll-dark {
    overflow-y: auto
}

.kling-scroll-dark::-webkit-scrollbar {
    display: unset;
    width: 6px
}

.kling-scroll-dark::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: var(--color-border-container)
}

.kling-scroll-dark::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-border-hover);
    cursor: pointer
}

.kling-scroll-dark::-webkit-scrollbar-corner {
    background: #0000
}

.kling-scroll-small {
    overflow-y: auto
}

.kling-scroll-small::-webkit-scrollbar {
    display: unset;
    width: 4px
}

.kling-scroll-small::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: var(--color-border-component)
}

.kling-scroll-small::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-border-hover);
    cursor: pointer
}

.kling-scroll-small::-webkit-scrollbar-corner {
    background: #0000
}

.kling-scroll-none::-webkit-scrollbar {
    display: none
}

.kling-scroll-x {
    overflow-x: auto
}

.kling-scroll-x::-webkit-scrollbar {
    display: unset;
    height: 4px
}

.kling-scroll-x::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: var(--color-border-component)
}

.kling-scroll-x::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-border-hover);
    cursor: pointer
}

.kling-scroll-x::-webkit-scrollbar-corner {
    background: #0000
}

.kling-scroll-x-none {
    overflow-x: auto
}

.kling-scroll-x-none::-webkit-scrollbar {
    display: none
}

.theme-image {
    --theme-color-primary: #72e528;
    --theme-color-hover: #9ffd38
}

.theme-video {
    --theme-color-primary: #1be5ec;
    --theme-color-hover: #6bf0dc
}

.clickable a {
    color: #fff;
    margin-left: 6px;
    margin-right: 6px;
    cursor: pointer;
    transition: color .2s
}

.clickable a:hover,.clickable a.active {
    color: var(--color-theme-2)
}

.clickable a:active {
    filter: brightness(.9)
}

.clickable a svg {
    vertical-align: middle
}

.clickable a span {
    vertical-align: middle
}

.clickable a svg+span {
    margin-left: 4px
}

@-webkit-keyframes rotation {
    0% {
        -webkit-transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes rotation {
    0% {
        -webkit-transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg)
    }
}

.rotating {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    animation: rotation 1s linear infinite;
    -moz-animation: rotation 1s linear infinite;
    -webkit-animation: rotation 1s linear infinite;
    -o-animation: rotation 1s linear infinite
}

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

.vertical-center {
    display: flex;
    align-items: center
}

.y-scrollable-without-bar {
    overflow-y: auto
}

.y-scrollable-without-bar::-webkit-scrollbar {
    display: none
}

.membership-none {
    background: var(--color-gradient-basic);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.membership-vip {
    background: var(--color-gradient-standard);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.membership-svip {
    background: var(--color-gradient-pro);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.membership-ssvip {
    background: var(--color-gradient-premier);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.membership-none-hot {
    background: linear-gradient(90deg,#abbbcc,#bdcde0)!important;
    background-clip: text!important;
    -webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent!important
}

.membership-vip-hot {
    color: #47240d!important
}

.membership-svip-hot {
    color: #093247!important
}

.membership-ssvip-hot {
    color: #1a1d5c!important
}

.membership-bg-vip {
    background: var(--color-gradient-standard-bg)
}

.membership-bg-svip {
    background: var(--color-gradient-pro-bg)
}

.membership-bg-ssvip {
    background: var(--color-gradient-premier-bg)
}

.membership-bg-point {
    background: var(--color-fill-light)
}

div.ebank {
    z-index: 100000!important;
    color: #fff;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

div.ebank .ebank-content {
    border-radius: 12px!important;
    border: 1px solid!important;
    background-clip: padding-box,border-box!important;
    background-origin: padding-box,border-box!important;
    background-image: linear-gradient(252.37deg,#1b262b .55%,#171b21,#191d23 90.08%),linear-gradient(68.56deg,#1e2930 29.44%,#1d1d1d 59.6%,#262a2f 82.91%,#2e4141 101.21%)!important;
    border-color: #1e3139!important;
    border: 1px solid
}

div.ebank .ebank-content .ebank-title {
    background: transparent;
    color: #fff
}

div.ebank .ebank-content dt {
    color: #999bac!important
}

div.ebank .count-down {
    border-bottom-color: #3b3c4d
}

div.ebank .ebank-content .qr-box img {
    background-color: #fff;
    margin-top: 32px;
    margin-bottom: 32px
}

div.ebank .ebank-content .ebank-pay-info-qr .tips,div.ebank .ebank-content .ebank-pay-info-qr .limit-time {
    color: #999bac!important
}

.animation-button svg {
    animation-name: var(--animation-button-name);
    animation-duration: 0s
}

.animation-button:active svg {
    animation: none
}

.animation-button.animation-available svg {
    animation-duration: 1s
}

.selecto-selection {
    border: 1px solid var(--color-border-focused)!important;
    box-shadow: var(--box-shadow-component)!important;
    background-color: var(--color-other-3)!important
}

.board-bg {
    width: 100%;
    height: 100%;
    background: #1d1d1d;
    background-image: linear-gradient(45deg,#282828 25%,transparent 0,transparent 75%,#282828 0),linear-gradient(45deg,#282828 25%,transparent 0,transparent 75%,#282828 0);
    background-position: 0 0,10px 10px;
    background-size: 20px 20px
}

.kling-input {
    width: 100%
}

.kling-input.el-textarea {
    background-color: transparent;
    padding: 12px 12px 32px;
    border: 1px solid var(--color-border-component);
    border-radius: 8px
}

.kling-input.el-textarea .el-input__count {
    background: transparent;
    width: calc(100% - 24px);
    height: 12px;
    bottom: 12px;
    line-height: 12px;
    color: var(--color-text-3)
}

.kling-input.el-textarea .el-textarea__inner {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    color: var(--color-text-1);
    font-size: 13px;
    line-height: 22px;
    font-weight: 400;
    border: none
}

.kling-input.el-textarea textarea::placeholder {
    color: var(--color-text-3)
}

.kling-input.el-textarea textarea:hover {
    border: none
}

.kling-input.el-textarea textarea:focus {
    border: none
}

.kling-input.el-textarea textarea::-webkit-scrollbar {
    display: none
}

.kling-input.el-textarea.is-hover {
    border: 1px solid var(--color-border-hover)
}

.kling-input.el-textarea.is-focused {
    border: 1px solid var(--color-border-focused)
}

.kling-input.el-textarea.is-error {
    border: solid 1px var(--color-fill-error)
}

.kling-input.el-textarea.is-disabled {
    border: solid 1px var(--color-border-component);
    background: var(--color-fill-disabled);
    cursor: not-allowed
}

.kling-input.el-textarea.is-disabled .el-textarea__inner {
    background-color: transparent;
    box-shadow: none;
    color: var(--color-text-4)
}

.kling-input.el-textarea.is-disabled .el-textarea__inner::placeholder {
    color: var(--color-text-4)
}

.kling-input.el-input.tel .el-input__prefix {
    margin-right: 17px
}

.kling-input.el-input.tel .el-input__prefix-inner {
    color: var(--color-text-1);
    position: relative
}

.kling-input.el-input.tel .el-input__prefix-inner:after {
    content: "";
    width: 1px;
    height: 18px;
    position: absolute;
    right: -9px;
    top: calc(50% - 9px);
    background: var(--color-text-3)
}

.kling-input.el-input .el-input__wrapper {
    background: transparent;
    border: solid 1px var(--color-border-component);
    box-shadow: none;
    border-radius: 8px;
    font-weight: 400;
    color: var(--color-text-1)
}

.kling-input.el-input .el-input__wrapper:hover {
    border: solid 1px var(--color-border-hover)
}

.kling-input.el-input .el-input__wrapper.is-focus {
    border: solid 1px var(--color-border-focused)
}

.kling-input.el-input .el-input__wrapper .el-input__inner {
    color: var(--color-text-1)
}

.kling-input.el-input .el-input__wrapper .el-input__inner::placeholder {
    color: var(--color-text-3)
}

.kling-input.el-input .el-input__wrapper input[type=number].el-input__inner {
    text-align: center
}

.kling-input.el-input .el-input__wrapper input[type=number].el-input__inner::-webkit-inner-spin-button,.kling-input.el-input .el-input__wrapper input[type=number].el-input__inner::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.kling-input.el-input .el-input__wrapper .el-input__count-inner {
    background: transparent;
    color: var(--color-text-3)
}

.kling-input.el-input .el-input__wrapper .el-icon {
    width: 16px
}

.kling-input.el-input .el-input__wrapper .el-input__clear {
    border: none!important;
    color: var(--color-text-2)
}

.kling-input.el-input .el-input__wrapper svg {
    width: 16px;
    height: 16px
}

.kling-input.el-input .el-input__inner {
    color: var(--color-text-1)
}

.kling-input.el-input.is-disabled .el-input__wrapper {
    background: var(--color-fill-disabled);
    border: solid 1px var(--color-border-component)
}

.kling-input.el-input.is-disabled .el-input__wrapper .el-input__inner {
    color: var(--color-text-4)
}

.kling-input.el-input.is-disabled .el-input__wrapper .el-input__inner::placeholder {
    color: var(--color-text-4)
}

.kling-input.el-input.is-error .el-input__wrapper {
    border: solid 1px var(--color-fill-error)
}

.kling-input.el-input.big {
    height: 36px
}

.kling-input.el-input.big .el-input__wrapper {
    padding: 6px 12px;
    font-size: 14px
}

.kling-input.el-input.small {
    height: 28px
}

.kling-input.el-input.small .el-input__wrapper {
    padding: 4px 8px;
    font-size: 12px
}

.kling-input.el-input.medium {
    height: 32px
}

.kling-input.el-input.medium .el-input__wrapper {
    padding: 4px 12px;
    font-size: 14px
}

.kling-input.el-input.large {
    height: 40px
}

.kling-input.el-input.large .el-input__wrapper {
    padding: 8px 16px;
    font-size: 14px
}

.kling-input-redeem.el-input {
    height: 48px
}

.kling-input-redeem.el-input .el-input__wrapper {
    box-shadow: none;
    font-weight: 400;
    color: var(--color-text-1);
    border-radius: 38px;
    border: 1px solid var(--color-border-component);
    background: var(--color-bg-dialog);
    padding: 12px 24px
}

.kling-input-redeem.el-input .el-input__wrapper:hover {
    border: solid 1px var(--color-border-hover)
}

.kling-input-redeem.el-input .el-input__wrapper.is-focus {
    border: solid 1px var(--color-text-1)
}

.kling-input-redeem.el-input .el-input__wrapper .el-input__inner::placeholder {
    color: var(--color-text-3)
}

.kling-input-redeem.el-input .el-input__wrapper .el-input__count-inner {
    background: transparent
}

.kling-input-redeem.el-input .el-input__wrapper .el-icon {
    width: 16px
}

.kling-input-redeem.el-input .el-input__wrapper svg {
    width: 16px;
    height: 16px
}

.kling-input-redeem.el-input .el-input__inner {
    color: var(--color-text-1)
}

.kling-input-redeem.el-input.is-disabled .el-input__wrapper {
    background: var(--color-bg-dialog);
    border: solid 1px var(--color-border-component)
}

.kling-input-redeem.el-input.is-disabled .el-input__wrapper .el-input__inner {
    color: var(--color-text-4)
}

body.mobile .kling-input-redeem.el-input {
    height: 32px
}

.el-picker-panel.el-date-range-picker,.el-picker-panel__body {
    background-color: transparent
}

.el-picker-panel__content.el-date-range-picker__content.is-left {
    border-right-color: #5a5e66
}

.el-picker-panel__content.el-date-range-picker__content th {
    border-bottom-color: #5a5e66
}

.el-date-editor .el-range-separator {
    color: #fff!important
}

.el-date-editor input.el-range-input {
    border-color: transparent!important;
    color: #fff!important;
    width: 88px
}

.kling-date-picker.el-date-editor.el-input__wrapper:hover {
    box-shadow: none;
    border-color: var(--color-border-hover)
}

.kling-date-picker.el-range-editor.el-input__wrapper {
    padding: 0 12px;
    box-shadow: none;
    border: 1px solid var(--color-border-component);
    background-color: transparent;
    border-radius: 8px
}

.kling-date-picker.el-range-editor.is-active,.kling-date-picker.el-range-editor.is-active:hover {
    border-color: var(--color-border-focused)
}

.kling-date-picker .el-range__icon {
    margin: 0 5px 0 2px
}

.kling-date-picker .el-range-separator {
    color: var(--color-text-1)!important;
    font-size: 12px;
    font-style: normal;
    font-weight: 400
}

.kling-date-picker input.el-range-input {
    width: 125px;
    color: var(--color-text-1)!important;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    --el-text-color-placeholder: var(--color-text-3, #5e6266)
}

.kling-date-picker .el-range__close-icon--hidden {
    display: none
}

.kling-date-picker.el-picker__popper.el-popper {
    border-radius: 8px;
    background: var(--color-bg-popover);
    --el-bg-color-overlay: var(--color-bg-popover);
    --el-border-radius-base: 8px;
    --el-popover-border-radius: 8px
}

.kling-date-picker.el-picker__popper.el-popper.el-picker__popper.el-popper,.kling-date-picker.el-picker__popper.el-popper.el-picker__popper.el-popper.is-light,.kling-date-picker.el-picker__popper.el-popper.el-picker__popper.el-popper .el-popper__arrow:before {
    border: none
}

.kling-date-picker.el-picker__popper.el-popper .el-picker-panel {
    color: var(--color-text-1, #f9fbfc)
}

.kling-date-picker.el-picker__popper.el-popper .el-picker-panel [slot=sidebar],.kling-date-picker.el-picker__popper.el-popper .el-picker-panel__sidebar {
    padding-top: 8px;
    border-radius: 8px 0 0
}

.kling-date-picker.el-picker__popper.el-popper .el-picker-panel__shortcut {
    padding: 6px 16px;
    color: var(--color-text-1, #f9fbfc);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px
}

.kling-date-picker.el-picker__popper.el-popper .el-picker-panel__shortcut:hover {
    background: var(--color-other-1, rgba(255, 255, 255, .08))
}

.kling-date-picker.el-picker__popper.el-popper .el-date-range-picker__time-header {
    padding: 8px 3px 5px
}

.kling-date-picker.el-picker__popper.el-popper .el-date-range-picker {
    --el-datepicker-inner-border-color: var(--color-border-container)
}

.kling-date-picker.el-picker__popper.el-popper .el-input__wrapper {
    border-radius: 8px;
    border: 1px solid var(--color-border-container, #2f3133);
    background: var(--color-other-6, rgba(0, 0, 0, .32));
    box-shadow: none;
    padding: 2px 11px;
    --el-disabled-bg-color: #262727
}

.kling-date-picker.el-picker__popper.el-popper .el-input__wrapper input {
    border: none!important
}

.kling-date-picker.el-picker__popper.el-popper .el-input__wrapper .el-input__inner {
    color: var(--color-text-1, #f9fbfc)
}

.kling-date-picker.el-picker__popper.el-popper .el-date-range-picker__content {
    padding: 8px 8px 16px
}

.kling-date-picker.el-picker__popper.el-popper .el-picker-panel__content.el-date-range-picker__content.is-left {
    border-right-color: var(--color-border-container, #2f3133)
}

.kling-date-picker.el-picker__popper.el-popper .el-picker-panel__icon-btn {
    color: var(--color-text-1, #f9fbfc)
}

.kling-date-picker.el-picker__popper.el-popper .el-picker-panel__content.el-date-range-picker__content th {
    border-bottom-color: var(--color-border-container, #2f3133)
}

.kling-date-picker.el-picker__popper.el-popper .el-date-table th {
    color: var(--color-text-1)
}

.kling-date-picker.el-picker__popper.el-popper .el-date-table th:first-child,.kling-date-picker.el-picker__popper.el-popper .el-date-table th:last-child {
    color: var(--color-text-3)
}

.kling-date-picker.el-picker__popper.el-popper .el-date-table td.next-month,.kling-date-picker.el-picker__popper.el-popper .el-date-table td.prev-month {
    color: var(--color-text-3)
}

.kling-date-picker.el-picker__popper.el-popper .el-date-table td.available:hover {
    color: var(--color-text-1)
}

.kling-date-picker.el-picker__popper.el-popper .el-date-table td.available:hover .el-date-table-cell__text {
    background: var(--color-other-1, rgba(255, 255, 255, .08))
}

.kling-date-picker.el-picker__popper.el-popper .el-date-table td.today .el-date-table-cell__text {
    color: var(--color-theme-2, #74ff52)
}

.kling-date-picker.el-picker__popper.el-popper .el-date-table td .el-date-table-cell {
    padding: 0;
    height: 32px
}

.kling-date-picker.el-picker__popper.el-popper .el-date-table td.start-date .el-date-table-cell {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    margin-left: 6px
}

.kling-date-picker.el-picker__popper.el-popper .el-date-table td.in-range:first-child .el-date-table-cell {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px
}

.kling-date-picker.el-picker__popper.el-popper .el-date-table td.in-range:last-child .el-date-table-cell {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px
}

.kling-date-picker.el-picker__popper.el-popper .el-date-table td.in-range .el-date-table-cell {
    background: var(--color-other-1, rgba(255, 255, 255, .08))
}

.kling-date-picker.el-picker__popper.el-popper .el-date-table td.end-date .el-date-table-cell__text,.kling-date-picker.el-picker__popper.el-popper .el-date-table td.start-date .el-date-table-cell__text {
    border-radius: 8px;
    border: 1px solid var(--color-text-1, #f9fbfc);
    background: var(--color-other-1, rgba(255, 255, 255, .08))
}

.kling-date-picker.el-picker__popper.el-popper .el-date-table td .el-date-table-cell .el-date-table-cell__text {
    border-radius: 8px;
    height: 32px;
    line-height: 32px;
    width: 32px
}

.kling-date-picker.el-picker__popper.el-popper .el-date-table td.disabled {
    cursor: not-allowed
}

.kling-date-picker.el-picker__popper.el-popper .el-date-table td.disabled .el-date-table-cell {
    background-color: transparent;
    color: var(--color-text-3)
}

.kling-date-picker.el-picker__popper.el-popper .el-picker-panel .el-time-panel {
    border-radius: 8px;
    background: var(--color-bg-popover-1, #383a3d);
    box-shadow: 0 2px 16px #0000003d;
    border: none
}

.kling-date-picker.el-picker__popper.el-popper .el-picker-panel .el-time-panel .el-time-spinner__item {
    color: var(--color-text-1);
    font-size: 12px;
    height: 28px;
    line-height: 28px
}

.kling-date-picker.el-picker__popper.el-popper .el-picker-panel .el-time-panel .el-time-spinner__item.is-active:not(.is-disabled) {
    color: var(--color-theme-2)
}

.kling-date-picker.el-picker__popper.el-popper .el-picker-panel .el-time-panel .el-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
    background: var(--color-other-1, rgba(255, 255, 255, .08))
}

.kling-date-picker.el-picker__popper.el-popper .el-picker-panel .el-time-panel .el-time-spinner__wrapper::-webkit-scrollbar {
    display: none
}

.kling-date-picker.el-picker__popper.el-popper .el-picker-panel .el-time-panel .el-scrollbar__bar.is-vertical {
    right: 0
}

.kling-date-picker.el-picker__popper.el-popper .el-picker-panel .el-time-panel .el-time-panel__content:after,.kling-date-picker.el-picker__popper.el-popper .el-picker-panel .el-time-panel .el-time-panel__content:before {
    border-color: var(--color-other-1);
    margin-left: 0;
    margin-right: 0;
    margin-top: -18px
}

.kling-date-picker.el-picker__popper.el-popper .el-time-panel__footer {
    padding: 0;
    height: initial;
    border-color: var(--color-border-component)
}

.kling-date-picker.el-picker__popper.el-popper .el-time-panel__footer .el-time-panel__btn {
    color: var(--color-text-1)
}

.kling-date-picker.el-picker__popper.el-popper .el-time-panel__footer .el-time-panel__btn.confirm {
    color: var(--color-theme-2)
}

.kling-date-picker.el-picker__popper.el-popper .el-picker-panel__footer {
    border-radius: 0 0 8px 8px
}

.kling-date-picker.el-picker__popper.el-popper .el-button {
    border: none;
    background: var(--color-gradient-button);
    color: var(--color-text-5)
}

.kling-date-picker.el-picker__popper.el-popper .el-button:hover {
    background: var(--color-theme-1)
}

.kling-date-picker.el-picker__popper.el-popper .el-button.is-disabled,.kling-date-picker.el-picker__popper.el-popper .el-button.is-disabled:hover {
    background: var(--color-fill-disabled);
    color: var(--color-text-3, #5e6266)
}

.kling-date-picker.el-picker__popper.el-popper .el-popper__arrow {
    display: none
}

.kling-switch.el-switch {
    --el-switch-on-color: var(--color-other-3);
    --el-switch-off-color: var(--color-other-3)
}

.kling-switch.el-switch .el-switch__core {
    height: 8px;
    width: 28px;
    min-width: 28px;
    border: none
}

.kling-switch.el-switch .el-switch__core .el-switch__action {
    left: 0;
    background-color: var(--color-text-2)
}

.kling-switch.el-switch.is-checked .el-switch__core .el-switch__action {
    left: calc(100% - 16px);
    background-color: var(--color-fill-success)
}

.kling-menu.el-menu {
    border: none!important;
    height: auto;
    background-color: transparent
}

.kling-menu.el-menu .el-sub-menu .el-sub-menu__title {
    padding: 0;
    color: var(--color-text-1)!important;
    border: none!important
}

.kling-menu.el-menu .el-sub-menu .el-sub-menu__title .el-sub-menu__icon-arrow {
    display: none
}

.kling-menu.el-menu .el-sub-menu .el-sub-menu__title:hover {
    background-color: transparent
}

.kling-menu.el-popper,.kling-menu.el-popper.is-light {
    border-radius: 8px;
    border: none;
    box-shadow: var(--box-shadow-component);
    background: var(--color-bg-popover)
}

.kling-menu.el-popper .el-menu--popup,.kling-menu.el-popper.is-light .el-menu--popup {
    padding: 8px 0;
    background: var(--color-bg-popover);
    border-radius: 8px;
    min-width: unset
}

.kling-menu.el-popper .el-menu--popup .el-menu-item,.kling-menu.el-popper .el-menu--popup .el-sub-menu,.kling-menu.el-popper.is-light .el-menu--popup .el-menu-item,.kling-menu.el-popper.is-light .el-menu--popup .el-sub-menu {
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0 12px;
    background: var(--color-bg-popover);
    color: var(--color-text-1)
}

.kling-menu.el-popper .el-menu--popup .el-menu-item svg,.kling-menu.el-popper .el-menu--popup .el-sub-menu svg,.kling-menu.el-popper.is-light .el-menu--popup .el-menu-item svg,.kling-menu.el-popper.is-light .el-menu--popup .el-sub-menu svg {
    margin-right: 8px
}

.kling-menu.el-popper .el-menu--popup .el-menu-item .el-sub-menu__title,.kling-menu.el-popper .el-menu--popup .el-sub-menu .el-sub-menu__title,.kling-menu.el-popper.is-light .el-menu--popup .el-menu-item .el-sub-menu__title,.kling-menu.el-popper.is-light .el-menu--popup .el-sub-menu .el-sub-menu__title {
    padding: 0;
    color: var(--color-text-1);
    background: transparent
}

.kling-menu.el-popper .el-menu--popup .el-menu-item .el-sub-menu__title .el-sub-menu__icon-arrow,.kling-menu.el-popper .el-menu--popup .el-sub-menu .el-sub-menu__title .el-sub-menu__icon-arrow,.kling-menu.el-popper.is-light .el-menu--popup .el-menu-item .el-sub-menu__title .el-sub-menu__icon-arrow,.kling-menu.el-popper.is-light .el-menu--popup .el-sub-menu .el-sub-menu__title .el-sub-menu__icon-arrow {
    display: none
}

.kling-menu.el-popper .el-menu--popup .el-menu-item:hover,.kling-menu.el-popper .el-menu--popup .el-sub-menu:hover,.kling-menu.el-popper.is-light .el-menu--popup .el-menu-item:hover,.kling-menu.el-popper.is-light .el-menu--popup .el-sub-menu:hover {
    background: var(--color-other-1)
}

#app {
    min-width: var(--body-min-width);
    height: 100%;
    overflow: hidden
}

@font-face {
    font-family: din1451;
    src: url(https://p1-kling.klingai.com/kcdn/cdn-kcdn112452/kling-web-aio-prod_aio/assets/fonts/font-L9ia5Kwh.woff2) format("woff2"),url(https://p1-kling.klingai.com/kcdn/cdn-kcdn112452/kling-web-aio-prod_aio/assets/fonts/font-YXpbb7if.woff) format("woff"),url(https://p1-kling.klingai.com/kcdn/cdn-kcdn112452/kling-web-aio-prod_aio/assets/fonts/font-DAwDnsic.ttf) format("truetype")
}