@charset "UTF-8";

.svg-icon[data-v-7bfa95ec] {
  display: inline-block;
  overflow: hidden
}

.generic-button[data-v-6dd759a1] {
  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-6dd759a1] {
  display: inline-flex;
  align-items: center
}

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

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

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

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

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

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

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

.generic-button.small.transparent[data-v-6dd759a1] {
  padding: 0
}

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

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

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

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

.generic-button.medium.transparent[data-v-6dd759a1] {
  padding: 0
}

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

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

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

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

.generic-button.big.transparent[data-v-6dd759a1] {
  padding: 0
}

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

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

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

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

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

.generic-button.large.transparent[data-v-6dd759a1] {
  padding: 0
}

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

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

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

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

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

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

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

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

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

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

.generic-button.border[data-v-6dd759a1]:hover {
  border-color: var(--color-border-hover)
}

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

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

.generic-button.border-critical[data-v-6dd759a1] {
  border: 1px solid var(--color-theme-2);
  background: transparent;
  color: var(--color-theme-2)
}

.generic-button.border-critical[data-v-6dd759a1]:hover {
  border-color: var(--color-theme-hover);
  color: var(--color-theme-hover)
}

.generic-button.border-critical[data-v-6dd759a1]:disabled {
  cursor: not-allowed;
  background: transparent;
  color: var(--color-text-3);
  border-color: var(--color-other-1)
}

.generic-button.border-critical[data-v-6dd759a1]:disabled:active {
  filter: none
}

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

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

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

.generic-button.iconic[data-v-6dd759a1] {
  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-6dd759a1] {
  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-6dd759a1] {
  width: 20px !important;
  height: 20px !important
}

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

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

.generic-button.iconic-transparent-small[data-v-6dd759a1] {
  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-6dd759a1]:disabled {
  cursor: not-allowed;
  color: var(--color-text-3);
  border: none
}

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

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

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

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

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

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

.generic-button.none[data-v-6dd759a1]:disabled:active {
  filter: none
}

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

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

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

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

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

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

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

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

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

.generic-button.black[data-v-6dd759a1] {
  color: var(--color-theme-1);
  background: var(--color-bg-page)
}

.generic-button.critical[data-v-6dd759a1] {
  color: var(--color-text-5);
  background: var(--color-theme-2)
}

.generic-button.critical[data-v-6dd759a1]:hover {
  background: var(--color-theme-hover)
}

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

.generic-button.critical[data-v-6dd759a1]:disabled:active {
  filter: none
}

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

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

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

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

.generic-button.pattern-border[data-v-6dd759a1] {
  border-top-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 1px;
  border-right-width: 1px;
  border-color: var(--color-text-1);
  border-style: solid;
  background: transparent;
  color: var(--color-text-1);
  border-radius: 30px;
  position: relative;
  transition: all .4s ease-in-out;
  overflow: hidden
}

.media-tag[data-v-35856ba4] {
  height: 32px;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  cursor: grab;
  color: var(--color-text-1)
}

.media-tag.disabled[data-v-35856ba4] {
  pointer-events: none
}

.media-tag-content[data-v-35856ba4] {
  height: 24px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-other-1);
  border-radius: 4px;
  margin: 0 4px
}

.media-tag .media-icon[data-v-35856ba4] {
  margin-right: 4px;
  height: 100%;
  width: 24px;
  object-fit: cover;
  pointer-events: none
}

.media-tag .media-label[data-v-35856ba4] {
  font-size: 12px;
  line-height: 1;
  margin: 0 8px;
  -webkit-user-select: none;
  user-select: none
}

.media-tag .delete-icon[data-v-35856ba4] {
  margin-right: 8px;
  cursor: pointer
}

.mention-list[data-v-e660d34e] {
  background: var(--color-bg-popover, #2d2f33);
  border-radius: 8px;
  box-shadow: 0 2px 8px #00000026;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  max-height: 300px;
  overflow: auto;
  padding: 8px 0;
  position: relative
}

.mention-list button[data-v-e660d34e] {
  height: 40px;
  display: flex;
  align-items: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0 12px;
  text-align: left;
  transition: background-color .2s;
  width: 100%;
  gap: 8px
}

.mention-list button[data-v-e660d34e]:hover,
.mention-list button.is-selected[data-v-e660d34e]:hover,
.mention-list button.is-selected[data-v-e660d34e] {
  background-color: var(--color-other-1, rgba(255, 255, 255, .0784313725))
}

.mention-icon[data-v-e660d34e] {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover
}

.mention-label[data-v-e660d34e] {
  font-size: 14px;
  color: var(--color-text-1, #f9fbfc)
}

.empty[data-v-e660d34e] {
  color: var(--color-text-1, #f9fbfc);
  font-size: .9rem;
  padding: .5rem .75rem;
  text-align: center
}

.custom-tag[data-v-03349912] {
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  height: 32px;
  color: var(--color-text-1);
  font-size: 12px;
  font-weight: 400
}

.custom-tag-content[data-v-03349912] {
  height: 24px;
  gap: 8px;
  display: flex;
  align-items: center;
  padding: 0 8px 0 12px;
  border-radius: 4px;
  background: var(--color-other-1);
  margin: 0 4px
}

.custom-tag.disabled[data-v-03349912] {
  pointer-events: none
}

.custom-tag .delete-icon[data-v-03349912] {
  cursor: pointer
}

.dropdown-tag[data-v-8a423e68] {
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  height: 32px;
  color: var(--color-text-1);
  font-size: 12px;
  font-weight: 400
}

.dropdown-tag-content[data-v-8a423e68] {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  background: var(--color-other-1);
  margin: 0 4px;
  padding: 0 8px 0 12px;
  position: relative
}

.dropdown-tag .phrase-select[data-v-8a423e68] {
  width: auto;
  position: relative;
  background-color: transparent
}

.dropdown-tag .tag-icon[data-v-8a423e68] {
  position: absolute;
  right: 8px;
  width: 10px;
  height: 10px;
  cursor: pointer
}

.dropdown-tag.disabled[data-v-8a423e68] .el-select .el-select__wrapper .el-select__suffix {
  padding-right: 0 !important
}

.dropdown-tag[data-v-8a423e68] .el-select .el-select__placeholder {
  position: relative;
  transform: none
}

.dropdown-tag[data-v-8a423e68] .el-select .el-select__wrapper {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
  gap: 8px
}

.dropdown-tag[data-v-8a423e68] .el-select .el-select__wrapper.is-hovering:not(.is-focused) {
  box-shadow: none
}

.dropdown-tag[data-v-8a423e68] .el-select .el-select__wrapper .el-select__suffix {
  padding-right: 20px
}

.dropdown-tag[data-v-8a423e68] .el-select .el-select__selected-item {
  width: auto;
  color: var(--color-text-1);
  font-size: 12px;
  padding: 0
}

.editor-container.kling-prompt-editor-container {
  border: 1px solid var(--color-border-container);
  border-radius: 8px;
  position: relative;
  box-sizing: border-box;
  line-height: 28px;
  display: flex;
  flex-direction: column;
  color: var(--color-text-1)
}

.editor-container.kling-prompt-editor-container.disabled {
  color: var(--color-text-2);
  background: var(--color-fill-disabled);
  pointer-events: none
}

.editor-container.kling-prompt-editor-container .editor {
  font-size: 13px;
  position: relative;
  z-index: 0;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-sizing: border-box
}

.editor-container.kling-prompt-editor-container .editor .tiptap.ProseMirror {
  user-select: auto;
  -webkit-user-select: auto;
  height: 0;
  flex: 1;
  overflow-y: auto
}

.editor-container.kling-prompt-editor-container .editor .tiptap.ProseMirror::-webkit-scrollbar {
  display: none
}

.editor-container.kling-prompt-editor-container .editor .tiptap.ProseMirror .ProseMirror-selectednode {
  background: var(--color-bg-selection)
}

.editor-container.kling-prompt-editor-container .editor-placeholder {
  position: absolute;
  padding: 12px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  color: var(--color-text-3);
  pointer-events: none;
  overflow: hidden
}

.prompt-render {
  color: var(--color-text-1);
  font-size: 13px;
  line-height: 28px
}

.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-e5cdc875] {
  color: var(--color-text-1);
  line-height: 22px;
  gap: 8px
}

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

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

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

.empty .content .text[data-v-92b0871a] {
  color: var(--color-text-3);
  font-size: 14px;
  line-height: 24px
}

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

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

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

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

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

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

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

.disabled[data-v-9e19d4fb] {
  color: var(--color-text-3);
  cursor: not-allowed
}

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

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

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

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

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

.image-item-selected[data-v-6b91515f] {
  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-6b91515f] {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain
}

.image-item-info[data-v-6b91515f] {
  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-6b91515f] {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

.audio-item[data-v-5a01de0e] {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  height: 100%
}

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

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

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

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

.audio-item-tags-item[data-v-5a01de0e] {
  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-5a01de0e] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--color-gradient-black-revert)
}

.audio-item-selected[data-v-5a01de0e] {
  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-5a01de0e] {
  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-5a01de0e] {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

.video-controls[data-v-eca59917] {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: end;
  transition: opacity .3s ease;
  z-index: 1
}

.video-controls[data-v-eca59917]:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200%;
  background: var(--color-gradient-black);
  max-height: 160px;
  min-height: 80px;
  z-index: 0;
  pointer-events: none
}

.video-controls.gapControls[data-v-eca59917] {
  flex-direction: column-reverse
}

.video-controls.gapControls .progress-bar-container[data-v-eca59917] {
  padding-left: 24px;
  padding-right: 24px;
  margin-bottom: 16px
}

.video-controls.gapControls .progress-bar-container .progress-thumb[data-v-eca59917] {
  height: 12px !important;
  border-radius: 2px !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important
}

.video-controls.gapControls .bottom-controls[data-v-eca59917] {
  padding: 0 16px 20px
}

.video-controls .progress-bar-container[data-v-eca59917] {
  width: 100%;
  height: 16px;
  padding-top: 12px;
  box-sizing: border-box;
  cursor: pointer
}

.video-controls .progress-bar-container .progress-bar[data-v-eca59917] {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: var(--color-other-5);
  border-radius: 2px
}

.video-controls .progress-bar-container .progress[data-v-eca59917] {
  position: absolute;
  height: 100%;
  background-color: #fffc;
  border-radius: 2px;
  z-index: 2
}

.video-controls .progress-bar-container .progress-thumb[data-v-eca59917] {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  box-shadow: 0 0 4px #0006;
  background-color: #fff;
  bottom: 0;
  transform: translate(-100%);
  z-index: 3;
  opacity: 0;
  transition: opacity .2s ease
}

.video-controls .progress-bar-container:hover .progress-thumb[data-v-eca59917] {
  opacity: 1
}

.video-controls .progress-bar-container .buffered[data-v-eca59917] {
  position: absolute;
  height: 100%;
  background-color: var(--color-fill-white);
  opacity: .2;
  border-radius: 2px;
  z-index: 1
}

.video-controls .progress-bar-container .seek-preview[data-v-eca59917] {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .5))
}

.video-controls .bottom-controls[data-v-eca59917] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0 4px
}

.video-controls .bottom-controls .left-controls[data-v-eca59917] {
  display: flex;
  align-items: center;
  gap: 0
}

.video-controls .bottom-controls .right-controls[data-v-eca59917] {
  display: flex;
  align-items: center
}

.video-controls .bottom-controls .control-btn[data-v-eca59917] {
  background: none;
  border: none;
  color: var(--color-text-1);
  font-size: 20px;
  cursor: pointer;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center
}

.video-controls .bottom-controls .control-btn.disabled[data-v-eca59917] {
  cursor: not-allowed
}

.video-controls .bottom-controls .volume-control[data-v-eca59917] {
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative
}

.video-controls .bottom-controls .volume-control .volume-slider-wrapper[data-v-eca59917] {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%);
  width: 30px;
  padding-bottom: 8px;
  z-index: 100
}

.video-controls .bottom-controls .volume-control .volume-slider-wrapper .volume-slider-content[data-v-eca59917] {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-fill-black-3);
  border-radius: 4px;
  padding: 8px 0 12px
}

.video-controls .bottom-controls .volume-control .volume-percent[data-v-eca59917] {
  height: 20px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  margin-bottom: 4px;
  font-size: 12px
}

.video-controls .bottom-controls .volume-control .volume-slider-container[data-v-eca59917] {
  cursor: pointer
}

.video-controls .bottom-controls .volume-control .volume-slider-track[data-v-eca59917] {
  position: relative;
  width: 4px;
  height: 100px;
  background: var(--color-other-3);
  border-radius: 2px
}

.video-controls .bottom-controls .volume-control .volume-slider-progress[data-v-eca59917] {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: var(--color-fill-white);
  border-radius: inherit;
  cursor: pointer
}

.video-controls .bottom-controls .volume-control .volume-slider-thumb[data-v-eca59917] {
  position: absolute;
  left: -4px;
  width: 12px;
  height: 4px;
  background: var(--color-fill-white);
  border-radius: 8px;
  transform: translateY(50%);
  pointer-events: none;
  cursor: pointer
}

.video-controls .bottom-controls .volume-control .fade-enter-active[data-v-eca59917],
.video-controls .bottom-controls .volume-control .fade-leave-active[data-v-eca59917] {
  transition: opacity .2s
}

.video-controls .bottom-controls .volume-control .fade-enter-from[data-v-eca59917],
.video-controls .bottom-controls .volume-control .fade-leave-to[data-v-eca59917] {
  opacity: 0
}

.video-controls .bottom-controls .time-display[data-v-eca59917] {
  color: #fff;
  font-size: 12px
}

.video-controls .z-1[data-v-eca59917] {
  z-index: 1;
  position: relative
}

.kling-video-player[data-v-40c6dbf2] {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden
}

.kling-video-player[data-v-40c6dbf2]:fullscreen,
.kling-video-player[data-v-40c6dbf2]:-webkit-full-screen,
.kling-video-player[data-v-40c6dbf2]:-moz-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
  overflow: hidden !important
}

.kling-video-player.is-fullscreen[data-v-40c6dbf2] video {
  max-width: 100vw !important;
  max-height: 100vh !important
}

.kling-video-player[data-v-40c6dbf2] [class^=_kwai-player-poster] {
  background-color: transparent !important
}

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

.video-work-box .media[data-v-ac7a7614] {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer
}

.video-item[data-v-2299007c] {
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  height: 100%
}

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

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

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

.video-item-tags-item[data-v-2299007c] {
  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-2299007c] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--color-gradient-black-revert)
}

.video-item-selected[data-v-2299007c] {
  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-2299007c] {
  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-2299007c] {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

.upload-asset-container[data-v-ec388577] {
  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-ec388577] {
  width: 100%;
  height: 100%
}

.upload-asset-container .upload-asset[data-v-ec388577] .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-ec388577] {
  color: var(--color-text-1)
}

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

.upload-asset-container .upload-asset .upload .upload-text[data-v-ec388577] {
  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-ec388577] {
  color: var(--color-text-2)
}

.upload-asset-container.button-style[data-v-ec388577] {
  background-color: unset;
  width: unset;
  height: unset
}

.upload-asset-container.button-style .upload-asset[data-v-ec388577] .el-upload-dragger {
  height: unset
}

.container[data-v-49d78fb8] {
  margin-bottom: 60px
}

.container .trace[data-v-49d78fb8] {
  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-49d78fb8] {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text-1)
}

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

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

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

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

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

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

.container .list-item .count-multiselect[data-v-49d78fb8] {
  position: absolute;
  right: 8px;
  top: 8px;
  height: 20px;
  width: 20px;
  display: flex;
  font-family: MiSans Latin VF;
  align-items: center;
  justify-content: center;
  background: var(--color-theme-2);
  color: var(--color-text-5);
  font-size: 12px;
  font-weight: 520;
  border-radius: 20px;
  z-index: 2
}

.container .list-item .count-multiselect[data-v-49d78fb8]:empty {
  display: none
}

.container .empty-container .empty[data-v-49d78fb8] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 80px
}

.container .loading[data-v-49d78fb8] {
  padding-top: 180px
}

.content[data-v-62f03918] {
  width: 126px;
  height: 126px
}

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

.content.work[data-v-62f03918] {
  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-ac84b86a] {
  padding-bottom: 0 !important
}

[data-v-ac84b86a] .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-ac84b86a] .watermark-switch-item:hover {
  background: var(--color-bg-popover-1) !important
}

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

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

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

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

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

.vip[data-v-ac84b86a] {
  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-ac84b86a] {
  margin-right: 0 !important
}

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

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

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

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

.image-item-expand[data-v-6f73314e] {
  position: absolute;
  top: 8px;
  right: 34px;
  z-index: 5
}

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

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

.image-item-tags-item[data-v-6f73314e] {
  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-6f73314e] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--color-gradient-black-revert)
}

.image-item-inpainting[data-v-6f73314e] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
  z-index: 3
}

.image-item-selected[data-v-6f73314e] {
  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-6f73314e] {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0
}

.image-item-info[data-v-6f73314e] {
  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-6f73314e] {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

.audio-item[data-v-e54fdca8] {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  height: 100%
}

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

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

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

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

.audio-item-tags-item[data-v-e54fdca8] {
  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-e54fdca8] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--color-gradient-black-revert)
}

.audio-item-selected[data-v-e54fdca8] {
  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-e54fdca8] {
  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-e54fdca8] {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

.video-item[data-v-3255c95d] {
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  height: 100%
}

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

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

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

.video-item-tags-item[data-v-3255c95d] {
  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-3255c95d] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--color-gradient-black-revert)
}

.video-item-selected[data-v-3255c95d] {
  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-3255c95d] {
  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-3255c95d] {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

.container[data-v-26591a30] {
  margin-bottom: 60px
}

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

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

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

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

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

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

.container .processing[data-v-26591a30] .effect-wrapper {
  margin: unset
}

.container .processing span[data-v-26591a30] {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text-2)
}

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

.container .list-item .mask[data-v-26591a30] {
  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 .list-item .count-multiselect[data-v-26591a30] {
  position: absolute;
  left: 8px;
  top: 8px;
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: MiSans Latin VF;
  background: var(--color-theme-2);
  color: var(--color-text-5);
  font-size: 12px;
  font-weight: 520;
  border-radius: 20px;
  z-index: 2
}

.container .list-item .count-multiselect[data-v-26591a30]:empty {
  display: none
}

.container .empty-container .empty[data-v-26591a30] {
  padding-top: 80px
}

.container .empty-container .empty .buttons[data-v-26591a30] {
  margin-top: 16px;
  text-align: center
}

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

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

.container .loading[data-v-26591a30] {
  padding-top: 180px
}

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

.secondary-tabs .container[data-v-6f414ed4] {
  cursor: pointer;
  width: 100%;
  display: flex;
  justify-content: center;
  white-space: nowrap;
  position: relative
}

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

.secondary-tabs .container .dot[data-v-6f414ed4] {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: var(--color-fill-red)
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.list-container[data-v-37032e00] {
  height: 436px;
  overflow-x: hidden;
  overflow-y: scroll
}

.list-container[data-v-37032e00]::-webkit-scrollbar {
  display: none
}

.bottom-tools[data-v-37032e00] {
  margin-top: 24px;
  display: flex;
  height: 48px;
  justify-content: space-between;
  align-items: center
}

.bottom-tools .overview[data-v-37032e00] {
  display: flex;
  align-items: center;
  gap: 8px
}

.bottom-tools .overview .info[data-v-37032e00] {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text-2)
}

.bottom-tools .overview .overview-item[data-v-37032e00] {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  position: relative
}

.bottom-tools .overview .overview-item:hover .mask[data-v-37032e00],
.bottom-tools .overview .overview-item:hover a[data-v-37032e00] {
  opacity: 1
}

.bottom-tools .overview .overview-item img[data-v-37032e00] {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.bottom-tools .overview .overview-item .mask[data-v-37032e00] {
  opacity: 0;
  transition: all .2s;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--color-fill-black-3)
}

.bottom-tools .overview .overview-item a[data-v-37032e00] {
  position: absolute;
  transition: all .2s;
  opacity: 0;
  width: 28px;
  height: 28px;
  display: flex;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
  justify-content: center;
  cursor: pointer
}

.bottom-tools .overview .overview-item a[data-v-37032e00]:active {
  filter: brightness(.9)
}

.bottom-tools .buttons[data-v-37032e00] {
  display: flex;
  gap: 12px
}

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

.tab .gap[data-v-37032e00] {
  gap: 16px
}

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

.checkbox svg[data-v-37032e00] {
  margin-right: 6px
}

.checkbox .uncheck[data-v-37032e00] {
  color: var(--color-border-component)
}

.checkbox .uncheck[data-v-37032e00]:hover {
  color: var(--color-border-hover)
}

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

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

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

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

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

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

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

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

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

h3[data-v-75841af2] {
  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-75841af2] {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  gap: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center
}

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

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

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

.section-vertical .title-vertical[data-v-75841af2] {
  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-75841af2] {
  cursor: pointer
}

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

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

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

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

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

.section-vertical .input-image-box .image-tag[data-v-75841af2] {
  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-vertical .input-image-box .image-right-tag[data-v-75841af2] {
  position: absolute;
  top: 4px;
  right: 4px;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-fill-black-1)
}

.section-horizontal[data-v-75841af2] {
  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-75841af2] {
  flex-shrink: 0
}

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

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

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

.info-tags .tag-item[data-v-75841af2] {
  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-75841af2] {
  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-75841af2] {
  display: inline-block;
  vertical-align: middle;
  height: 29px
}

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

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

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

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

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

.prompt-list .prompt-item .time-container .time[data-v-75841af2] {
  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-75841af2] {
  border-right: 1px dashed var(--color-border-component);
  height: 100%;
  margin: 0 auto
}

.prompt-list .prompt-item .prompt-container .prompt-title[data-v-75841af2] {
  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-75841af2] {
  color: var(--color-text-3)
}

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

.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
}

.error-text[data-v-543eba6e] {
  position: absolute;
  bottom: -22px;
  color: var(--color-fill-error);
  font-size: 12px;
  line-height: 18px;
  left: 0
}

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

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

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

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

.send-icon[data-v-543eba6e] {
  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-543eba6e] {
  font-size: 12px;
  height: 100%;
  line-height: 24px;
  font-weight: 400
}

.password-btn[data-v-543eba6e] {
  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-543eba6e]: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
}

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

.upload[data-v-fa6d994d] {
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: transparent;
  height: var(--upload-box-height)
}

.upload .uploading[data-v-fa6d994d] {
  width: 100%;
  height: var(--upload-box-height)
}

.upload .uploading .effect-wrapper[data-v-fa6d994d] {
  margin: 0
}

.upload .uploading .loading-tips[data-v-fa6d994d] {
  line-height: 24px;
  margin-top: 4px
}

.upload .result[data-v-fa6d994d] {
  height: var(--upload-box-height);
  overflow: hidden;
  display: flex;
  align-items: center
}

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

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

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

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

.upload .result .filename[data-v-fa6d994d] {
  height: var(--upload-box-height);
  display: flex;
  align-items: center;
  margin-left: 12px;
  color: var(--color-text-1);
  width: calc(100% - 212px)
}

.upload .result .filename span[data-v-fa6d994d] {
  color: inherit
}

.upload .result .delete-btn a[data-v-fa6d994d] {
  margin: 0 12px;
  width: 16px;
  height: 16px
}

.upload .default-content[data-v-fa6d994d] {
  height: var(--upload-box-height)
}

.upload .default-content .click-here[data-v-fa6d994d] {
  color: var(--color-text-1);
  font-size: 18px;
  display: flex;
  flex-direction: column;
  align-items: center
}

.upload .default-content .click-here svg[data-v-fa6d994d] {
  vertical-align: middle
}

.upload .default-content .click-here[data-v-fa6d994d]:hover {
  color: var(--color-text-1)
}

.upload .default-content .click-here p[data-v-fa6d994d] {
  font-size: 14px;
  margin-top: 4px;
  line-height: 24px
}

.upload .default-content .desc-area .from-history[data-v-fa6d994d] {
  line-height: 22px;
  margin-top: 8px;
  font-size: 12px;
  pointer-events: none
}

.upload .default-content .desc-area .from-history span[data-v-fa6d994d] {
  pointer-events: all;
  color: var(--color-text-2)
}

.upload .default-content .desc-area .from-history a[data-v-fa6d994d] {
  pointer-events: all;
  color: var(--color-text-1);
  margin-left: 6px;
  margin-right: 6px
}

.upload .default-content .desc-area .upload-tips[data-v-fa6d994d] {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px
}

.upload .default-content .desc-area .upload-tips span[data-v-fa6d994d] {
  line-height: 20px;
  font-size: 12px;
  color: var(--color-text-3)
}

body.mobile .narrow-ops .narrow-wrapper[data-v-fa6d994d] {
  opacity: 1
}

.narrow-ops[data-v-fa6d994d] {
  position: absolute;
  color: var(--color-text-1);
  width: 100%;
  height: var(--upload-box-height);
  display: flex;
  justify-content: center;
  align-items: center
}

.narrow-ops[data-v-fa6d994d]:hover {
  border-radius: 4px;
  background-color: var(--color-fill-black-1)
}

.narrow-ops:hover .narrow-wrapper[data-v-fa6d994d] {
  opacity: 1
}

.narrow-ops .narrow-wrapper[data-v-fa6d994d] {
  padding: 2px 8px;
  border-radius: 8px;
  transition: opacity .2s;
  opacity: 0;
  transition: all .2s;
  display: flex;
  align-items: center;
  background-color: var(--color-other-6)
}

.narrow-ops .narrow-wrapper a[data-v-fa6d994d] {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

.narrow-ops .narrow-wrapper a[data-v-fa6d994d]:active {
  filter: brightness(.9)
}

[data-v-fa6d994d] .el-upload-dragger {
  padding: 0;
  background: transparent !important;
  border: none !important;
  height: var(--upload-box-height);
  cursor: pointer
}

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

body.mobile .content[data-v-3d9f50ff] {
  flex-direction: column
}

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

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

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

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

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

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

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

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

.content .left .choose[data-v-3d9f50ff] {
  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-3d9f50ff] {
  color: var(--color-theme-2)
}

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

.content .left .clickable[data-v-3d9f50ff] {
  cursor: pointer
}

.content .left .preview[data-v-3d9f50ff] {
  height: 520px
}

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

.content .left .filename[data-v-3d9f50ff] {
  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-3d9f50ff] {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  vertical-align: middle
}

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

.content .right[data-v-3d9f50ff] {
  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-3d9f50ff] {
  color: var(--color-text-1);
  height: 100%;
  padding-right: 8px
}

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

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

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

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

.content .right .right-content .upload-skit-cover.disabled-upload[data-v-3d9f50ff] {
  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-3d9f50ff] {
  pointer-events: none
}

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

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

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

.activity-link[data-v-3d9f50ff] {
  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-3d9f50ff] {
  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-3d9f50ff]:hover {
  text-decoration: underline
}

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

.info-btn[data-v-3d9f50ff]:hover {
  opacity: 1
}

.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-08bc8769] {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px
}

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

.dialog-wide-picture .wide-picture[data-v-08bc8769] {
  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-08bc8769] {
  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-08bc8769] {
  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-08bc8769] {
  flex-shrink: 0;
  width: 280px;
  position: relative;
  z-index: 1
}

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

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

.dialog-wide-picture .wide-picture-title p[data-v-08bc8769] {
  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-08bc8769] {
  margin-right: 4px
}

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

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

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

.dialog-wide-picture .proportion-list dl dd[data-v-08bc8769] {
  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-08bc8769] {
  border: 2px solid var(--color-fill-success)
}

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

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

.dialog-wide-picture .wide-picture-btn-list .input-top-btn[data-v-08bc8769] {
  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-08bc8769] {
  display: flex;
  align-items: center;
  margin-left: 12px
}

.dialog-wide-picture .wide-picture-btn-list .picture-submit-btn .free-tip[data-v-08bc8769] {
  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-08bc8769] {
  background: #404957;
  box-shadow: none;
  color: #727485
}

.theme-image[data-v-abdf83f6] {
  --theme-color-primary: #72e528;
  --theme-color-hover: #9ffd38
}

.theme-video[data-v-abdf83f6] {
  --theme-color-primary: #1be5ec;
  --theme-color-hover: #6bf0dc
}

.clickable a[data-v-abdf83f6] {
  color: var(--color-text-1);
  margin-left: 6px;
  margin-right: 6px;
  cursor: pointer;
  transition: color .2s
}

.clickable a[data-v-abdf83f6]:hover,
.clickable a.active[data-v-abdf83f6] {
  color: var(--color-theme-2)
}

.clickable a[data-v-abdf83f6]:active {
  filter: brightness(.9)
}

.clickable a svg[data-v-abdf83f6] {
  vertical-align: middle
}

.clickable a span[data-v-abdf83f6] {
  vertical-align: middle
}

.clickable a svg+span[data-v-abdf83f6] {
  margin-left: 4px
}

@-webkit-keyframes rotation-abdf83f6 {
  0% {
    -webkit-transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(360deg)
  }
}

@keyframes rotation-abdf83f6 {
  0% {
    -webkit-transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(360deg)
  }
}

.rotating[data-v-abdf83f6] {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  animation: rotation-abdf83f6 1s linear infinite;
  -moz-animation: rotation-abdf83f6 1s linear infinite;
  -webkit-animation: rotation-abdf83f6 1s linear infinite;
  -o-animation: rotation-abdf83f6 1s linear infinite
}

.all-center[data-v-abdf83f6] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}

.vertical-center[data-v-abdf83f6] {
  display: flex;
  align-items: center
}

.y-scrollable-without-bar[data-v-abdf83f6] {
  overflow-y: auto
}

.y-scrollable-without-bar[data-v-abdf83f6]::-webkit-scrollbar {
  display: none
}

.membership-none[data-v-abdf83f6] {
  background: var(--color-gradient-basic);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.membership-vip[data-v-abdf83f6] {
  background: var(--color-gradient-standard);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.membership-svip[data-v-abdf83f6] {
  background: var(--color-gradient-pro);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.membership-ssvip[data-v-abdf83f6] {
  background: var(--color-gradient-premier);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.membership-bg-vip[data-v-abdf83f6] {
  background: var(--color-gradient-standard-bg)
}

.membership-bg-svip[data-v-abdf83f6] {
  background: var(--color-gradient-pro-bg)
}

.membership-bg-ssvip[data-v-abdf83f6] {
  background: var(--color-gradient-premier-bg)
}

.membership-bg-point[data-v-abdf83f6] {
  background: var(--color-fill-light)
}

.membership-tag-hot-color[data-v-abdf83f6],
.limit.theme-new-hot span[data-v-abdf83f6],
.limit.theme-new-active-hot span[data-v-abdf83f6] {
  background: linear-gradient(94deg, #41ffbb, #11ff4c, #e2ff20);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

div.ebank[data-v-abdf83f6] {
  z-index: 100000 !important;
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px)
}

div.ebank .ebank-content[data-v-abdf83f6] {
  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[data-v-abdf83f6] {
  background: transparent;
  color: #fff
}

div.ebank .ebank-content dt[data-v-abdf83f6] {
  color: #999bac !important
}

div.ebank .count-down[data-v-abdf83f6] {
  border-bottom-color: #3b3c4d
}

div.ebank .ebank-content .qr-box img[data-v-abdf83f6] {
  background-color: #fff;
  margin-top: 32px;
  margin-bottom: 32px
}

div.ebank .ebank-content .ebank-pay-info-qr .tips[data-v-abdf83f6],
div.ebank .ebank-content .ebank-pay-info-qr .limit-time[data-v-abdf83f6] {
  color: #999bac !important
}

.animation-button svg[data-v-abdf83f6] {
  animation-name: var(--animation-button-name);
  animation-duration: 0s
}

.animation-button:active svg[data-v-abdf83f6] {
  animation: none
}

.animation-button.animation-available svg[data-v-abdf83f6] {
  animation-duration: 1s
}

.selecto-selection[data-v-abdf83f6] {
  border: 1px solid var(--color-border-focused) !important;
  box-shadow: var(--box-shadow-component) !important;
  background-color: var(--color-other-3) !important
}

.board-bg[data-v-abdf83f6] {
  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-new-tag[data-v-abdf83f6] {
  border-radius: 4px;
  padding: 0 6px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  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
}

.limit[data-v-abdf83f6] {
  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-abdf83f6] {
  font-weight: 500
}

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

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

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

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

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

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

.limit.theme-new-hot[data-v-abdf83f6] {
  background: linear-gradient(94deg, #41ffbb1f, #11ff4c1f, #e2ff201f)
}

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

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

.limit.theme-new-active-hot[data-v-abdf83f6] {
  background: linear-gradient(136deg, #454d52, #1c2229, #1d1e1f 102.34%)
}

.limit.disabled[data-v-abdf83f6] {
  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-a2e5f99c] {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  position: relative
}

.button-pay-container .cost-detail[data-v-a2e5f99c] {
  position: relative;
  text-align: left;
  margin-right: auto;
  flex: 0 0 130px
}

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

.button-pay-container[data-v-a2e5f99c] .generic-button {
  flex: 1 1 200px
}

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

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

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

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

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

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

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

.ratio-schematic__wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  margin-right: 2px
}

.ratio-schematic__wrapper .ratio-schematic {
  border: 1px solid var(--color-text-1);
  border-radius: 2px
}

.is-selected .ratio-schematic__wrapper .ratio-schematic {
  border: 1px solid var(--color-theme-2)
}

.eraser-pen-stage-container[data-v-93f98770] {
  position: relative;
  width: 100%;
  height: 100%
}

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

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

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

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

.redraw-stage[data-v-b82d86e6] {
  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
}

body.mobile .eraser-pen-tools[data-v-15f19868] {
  width: 100vw
}

body.mobile .eraser-pen-tools div[data-v-15f19868] {
  flex-shrink: 0
}

body.mobile .brush-size-control[data-v-15f19868] {
  flex-shrink: 1 !important;
  gap: 8px;
  width: calc(100vw - 32px)
}

body.mobile .brush-size-control .el-slider[data-v-15f19868] {
  width: 200px !important
}

body.mobile .brush-size-control span[data-v-15f19868] {
  flex-shrink: 0
}

.eraser-pen-tools[data-v-15f19868] {
  width: 100%;
  display: flex;
  align-items: center;
  height: 36px;
  min-width: 640px
}

@media screen and (max-width: 1200px) {
  .eraser-pen-tools[data-v-15f19868] {
    min-width: initial !important
  }
}

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

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

.main-tool-group .tool-item[data-v-15f19868] {
  display: flex;
  height: 36px;
  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-15f19868] {
  color: var(--color-theme-2);
  border-color: var(--color-theme-2)
}

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

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

.divider[data-v-15f19868] {
  width: 1px;
  height: 12px;
  background: var(--color-border-line);
  margin: 0 20px
}

.tool-item[data-v-15f19868] {
  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-15f19868] {
  font-size: 16px
}

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

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

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

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

.scale[data-v-15f19868] {
  height: 36px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--color-border-component);
  position: absolute;
  right: 280px
}

.scale span[data-v-15f19868] {
  padding: 0 12px;
  line-height: 36px
}

.scale .scale-text[data-v-15f19868] {
  cursor: default;
  width: 80px;
  text-align: center
}

.brush-size-control[data-v-15f19868] {
  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;
  box-shadow: 0 2px 12px #0000001a;
  color: var(--color-text-1);
  min-width: 240px;
  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-15f19868] {
  border: 1px solid var(--color-text-1);
  border-radius: 20px;
  padding: 2px;
  cursor: pointer
}

.brush-size-control[data-v-15f19868]:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: -1;
  border-radius: 12px;
  overflow: hidden
}

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

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

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

[data-v-15f19868] .el-slider__button {
  border-color: var(--color-other-2);
  width: 4px;
  height: 12px;
  border-radius: 1px
}

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

body.mobile .redraw-tools[data-v-2654e3f4] {
  width: 100vw
}

body.mobile .redraw-tools div[data-v-2654e3f4] {
  flex-shrink: 0
}

body.mobile .brush-size-control[data-v-2654e3f4] {
  flex-shrink: 1 !important;
  gap: 8px;
  width: calc(100vw - 32px)
}

body.mobile .brush-size-control .el-slider[data-v-2654e3f4] {
  width: 200px !important
}

body.mobile .brush-size-control span[data-v-2654e3f4] {
  flex-shrink: 0
}

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

@media screen and (max-width: 1200px) {
  .redraw-tools[data-v-2654e3f4] {
    min-width: initial !important
  }
}

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

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

.main-tool-group .tool-item[data-v-2654e3f4] {
  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-2654e3f4] {
  color: var(--color-theme-2);
  border-color: var(--color-theme-2)
}

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

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

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

.tool-item[data-v-2654e3f4] {
  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-2654e3f4] {
  font-size: 16px
}

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

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

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

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

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

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

.scale .scale-text[data-v-2654e3f4] {
  cursor: default;
  width: 80px;
  text-align: center
}

.brush-size-control[data-v-2654e3f4] {
  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;
  box-shadow: 0 2px 12px #0000001a;
  color: var(--color-text-1);
  min-width: 240px;
  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-2654e3f4] {
  border: 1px solid var(--color-text-1);
  border-radius: 20px;
  padding: 2px;
  cursor: pointer
}

.brush-size-control[data-v-2654e3f4]:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: -1;
  border-radius: 12px;
  overflow: hidden
}

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

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

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

[data-v-2654e3f4] .el-slider__button {
  border-color: var(--color-other-2);
  width: 4px;
  height: 12px;
  border-radius: 1px
}

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

body.mobile .scale-multiplier[data-v-c27e870b] {
  width: max-content
}

body.mobile .scale-multiplier .multiplier-title[data-v-c27e870b] {
  flex-shrink: 0
}

body.mobile .ratio-group[data-v-c27e870b] {
  max-width: 100%
}

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

@media screen and (max-width: 1200px) {
  .upscale-tools[data-v-c27e870b] {
    min-width: initial !important
  }
}

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

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

.ratio-item[data-v-c27e870b] {
  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-c27e870b] {
  max-height: 16px;
  border: 1px solid var(--color-text-2);
  border-radius: 2px;
  transition: all .3s
}

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

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

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

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

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

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

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

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

.scale-multiplier[data-v-c27e870b] {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translate(-50%);
  background: color-mix(in srgb, var(--color-bg-secondary) 40%, transparent);
  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-c27e870b] {
  color: var(--color-text-2);
  font-size: 14px
}

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

.scale-multiplier .multiplier-item[data-v-c27e870b] {
  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-c27e870b]:hover {
  background: color-mix(in srgb, var(--color-text-1) 8%, transparent)
}

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

.scale-multiplier .multiplier-item[data-v-c27e870b]:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: -1;
  border-radius: 8px;
  overflow: hidden
}

body.mobile .editor-toolbar[data-v-0c778a18] {
  width: 100vw
}

body.mobile .is-mini.is-upscale .canvas-container[data-v-0c778a18] {
  height: calc(100% - 200px)
}

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

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

.editor-main[data-v-0c778a18] {
  flex: 1;
  display: flex;
  overflow: hidden;
  background: var(--color-bg-page)
}

.is-mini .editor-main[data-v-0c778a18] {
  background: none
}

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

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

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

.editor-toolbar[data-v-0c778a18]:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: -1;
  border-radius: 8px;
  pointer-events: none;
  overflow: hidden
}

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

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

.segmentation-loading[data-v-0c778a18] {
  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-0c778a18] {
  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-0c778a18] {
  height: calc(100% - 132px);
  border-radius: 16px;
  overflow: hidden
}

.is-mini.is-redraw .editor-toolbar[data-v-0c778a18] {
  bottom: 0;
  left: 0;
  transform: none;
  width: 100%;
  border-radius: 12px;
  background-color: #24262999
}

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

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

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

.is-mini.is-eraser-pen .canvas-container[data-v-0c778a18] {
  height: calc(100% - 82px);
  border-radius: 16px;
  overflow: hidden
}

.is-mini.is-eraser-pen .editor-toolbar[data-v-0c778a18] {
  bottom: 0;
  left: 0;
  transform: none;
  width: 100%;
  border-radius: 12px;
  background-color: #24262999
}

.is-mini.is-eraser-pen [data-v-0c778a18] .brush-size-control {
  top: -100px
}

.is-eraser-pen .toolbar-up[data-v-0c778a18] {
  min-width: 890px;
  margin-bottom: 0 !important
}

.tool-item[data-v-0c778a18] {
  display: flex;
  height: 32px;
  padding: 0 16px 0 12px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  color: var(--color-theme-2);
  border-color: var(--color-theme-2);
  cursor: pointer
}

.brush-pen[data-v-0c778a18] {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #fff;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  box-shadow: 0 0 10px #0000001a
}

body.mobile .settings[data-v-1155eb4b] {
  flex-wrap: wrap
}

body.mobile .settings .textarea[data-v-1155eb4b] {
  width: 100%
}

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

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

.status-mask-content[data-v-1155eb4b] {
  width: 470px;
  height: 317px;
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--color-other-2);
  background: var(--color-fill-black-3);
  -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-1155eb4b] {
  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-1155eb4b] {
  margin-bottom: 24px
}

.status-mask-content .desc[data-v-1155eb4b] {
  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.no-wrap[data-v-1155eb4b] {
  white-space: nowrap
}

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

.status-mask-content .member-tip[data-v-1155eb4b] {
  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-1155eb4b] {
  margin-top: 24px
}

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

.cfg[data-v-1155eb4b] {
  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-1155eb4b]:hover {
  border: 1px solid var(--color-border-hover)
}

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

.cfg.disabled[data-v-1155eb4b] {
  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-1155eb4b] {
  color: var(--color-text-4)
}

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

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

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

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

body.mobile .image-edit-dialog-body[data-v-5f6f9adf] {
  width: 100%;
  min-width: unset
}

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

body.mobile .kling-dialog.image-edit-expand-redraw-dialog {
  min-width: 0
}

.kling-dialog.image-edit-expand-redraw-dialog {
  min-width: 600px
}

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

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

body.mobile .back-icon.right[data-v-c7ef6e3c] {
  right: 16px
}

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

.content .back-icon[data-v-c7ef6e3c] {
  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-c7ef6e3c] {
  left: 32px
}

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

.thumbnail-strip[data-v-484b22b3] {
  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-484b22b3]::-webkit-scrollbar {
  display: none
}

.thumbnail-strip .thumbnail[data-v-484b22b3] {
  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-484b22b3] {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  transition: none
}

.thumbnail-strip .thumbnail .thumbnail-image-container .thumbnail-stared[data-v-484b22b3] {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 1
}

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

.thumbnail-strip .thumbnail img[data-v-484b22b3] {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 4px
}

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

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

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

.thumbnail-strip .thumbnail.is-work-list.first-of-task[data-v-484b22b3]: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-484b22b3],
.thumbnail-failed[data-v-484b22b3] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-other-1)
}

.generation-status[data-v-e959d400] {
  padding: 4px 16px;
  height: 48px;
  border-radius: 8px;
  background: var(--color-fill-black-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--color-theme-2);
  font-size: 14x;
  z-index: 2
}

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

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

.generation-status .text[data-v-e959d400] {
  margin: 0 12px;
  font-weight: 600
}

.generation-status .btn[data-v-e959d400] {
  margin-right: 4px
}

.stream-item-context-menu[data-v-a0105d3a] {
  position: fixed;
  border-radius: 8px;
  padding: 0;
  z-index: 1000
}

.stream-item-context-menu .el-dropdown-menu__item[data-v-a0105d3a] {
  display: flex;
  align-items: center;
  width: auto;
  white-space: nowrap
}

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

.head svg[data-v-36746c0d] {
  float: right;
  cursor: pointer
}

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

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

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

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

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

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

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

.content .section .list .item[data-v-36746c0d] {
  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-36746c0d]:hover {
  background-color: var(--color-other-2)
}

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

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

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

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

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

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

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

.comment-item-detail .comment-item-detail-content .comment-item-user-box[data-v-2fc4b70c] {
  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-2fc4b70c] {
  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-2fc4b70c] {
  cursor: pointer;
  line-height: 24px
}

.comment-item-detail .comment-item-detail-content .comment-item-content-text[data-v-2fc4b70c] {
  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-2fc4b70c] {
  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-2fc4b70c]:hover {
  color: var(--color-text-1)
}

.comment-item-detail .comment-item-detail-content .comment-item-user-tag[data-v-2fc4b70c] {
  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-2fc4b70c] {
  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-2fc4b70c] {
  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-2fc4b70c] {
  display: flex;
  color: var(--color-text-2)
}

.comment-item-detail .comment-item-detail-content .comment-item-bottom .comment-item-content-info[data-v-2fc4b70c] {
  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-2fc4b70c] {
  margin-right: 4px
}

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

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

.comment-item-detail .comment-item-detail-content .comment-item-bottom .comment-item-content-options[data-v-2fc4b70c] {
  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-2fc4b70c] {
  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-2fc4b70c] {
  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-2fc4b70c]:hover {
  color: var(--color-text-1)
}

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

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

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

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

.comment-detail .comment-detail-content .comment-user-box[data-v-3465a429] {
  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-3465a429] {
  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-3465a429] {
  cursor: pointer;
  line-height: 24px
}

.comment-detail .comment-detail-content .comment-content-text[data-v-3465a429] {
  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-3465a429] {
  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-3465a429] {
  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-3465a429] {
  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-3465a429] {
  display: flex;
  color: var(--color-text-2)
}

.comment-detail .comment-detail-content .comment-bottom .comment-content-info[data-v-3465a429] {
  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-3465a429] {
  margin-right: 4px
}

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

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

.comment-detail .comment-detail-content .comment-bottom .comment-content-options[data-v-3465a429] {
  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-3465a429] {
  width: 16px;
  height: 16px;
  margin-right: 4px
}

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

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

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

.comment-detail .comment-detail-content .comment-list-expand[data-v-3465a429] {
  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-3465a429]:hover {
  color: var(--color-text-1)
}

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

.comment-detail .comment-detail-content .comment-list-options[data-v-3465a429] {
  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-3465a429] {
  margin-right: 12px;
  display: flex;
  align-items: center
}

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

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

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

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

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

.comment-container .comment-title[data-v-9e6455ee] {
  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-9e6455ee] {
  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-9e6455ee] {
  transform: rotate(180deg);
  transition: transform .3s;
  vertical-align: middle
}

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

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

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

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

.comment-container .comment-empty[data-v-9e6455ee] {
  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-9e6455ee] {
  margin-bottom: 16px
}

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

.comment-container .comment-no-more[data-v-9e6455ee] {
  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-330dfa92] {
  display: flex;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--color-border-container)
}

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

.work-detail-content .work-detail-content-tab-box .work-detail-content-tab-item[data-v-330dfa92] {
  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-330dfa92] {
  margin-bottom: 8px
}

.work-detail-content .work-detail-content-tab-box .work-detail-content-tab-item .work-detail-content-tab-item-line[data-v-330dfa92] {
  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-330dfa92] {
  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-330dfa92] {
  margin-bottom: 4px
}

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

.scrollable-content[data-v-330dfa92]::-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-72ee7fce] {
  display: flex;
  align-items: center;
  color: var(--color-text-1);
  cursor: pointer
}

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

body.mobile .kling-popover {
  left: 12px !important;
  right: 12px !important;
  width: calc(100% - 24px) !important
}

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

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

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

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

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

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

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

.tags span[data-v-b29969ae] {
  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-b29969ae] {
  background: var(--color-other-2)
}

.reasons textarea[data-v-b29969ae] {
  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-b29969ae] {
  position: absolute
}

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

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

.issue-pick .content[data-v-b29969ae] {
  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-b29969ae] {
  display: flex;
  align-items: center;
  height: 28px
}

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

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

.el-popper.is-shown[data-v-b29969ae] {
  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-90be1cf0] {
  height: 100%;
  flex-direction: column
}

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

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

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

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

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

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

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

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

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

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

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

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

.container .left .top[data-v-90be1cf0] {
  position: relative;
  width: 100%;
  height: 104px
}

.container .left .top .work-name[data-v-90be1cf0] {
  position: absolute;
  left: 52px;
  right: 0;
  margin-top: 32px;
  display: flex;
  align-items: center;
  height: 40px;
  gap: 8px
}

.container .left .top .work-name p[data-v-90be1cf0] {
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-1);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

.container .left .top .work-name svg[data-v-90be1cf0] {
  cursor: pointer;
  flex-shrink: 0
}

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

.container .left .media .audio-box[data-v-90be1cf0] {
  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-90be1cf0] {
  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-90be1cf0] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

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

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

.container .left .tip .tip-content[data-v-90be1cf0] {
  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-90be1cf0] {
  width: 452px;
  padding-left: 32px;
  height: 100%;
  display: flex;
  flex-direction: column
}

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

.container .right .info-top .header-container[data-v-90be1cf0] {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-frame)
}

.container .right .info-top .header-container .header[data-v-90be1cf0] {
  display: flex;
  align-items: center;
  justify-content: space-between
}

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

.container .right .info-top .header-container .time[data-v-90be1cf0] {
  margin-top: 4px;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--color-text-3)
}

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

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

.container .right .info-top .published .published-user .avatar[data-v-90be1cf0] {
  flex-shrink: 0;
  width: 48px;
  height: 48px
}

.container .right .info-top .published .published-user .user-info[data-v-90be1cf0] {
  flex: 1;
  overflow: hidden
}

.container .right .info-top .published .published-user .user-info h4[data-v-90be1cf0] {
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-1);
  margin-bottom: 4px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

.container .right .info-top .published .published-user .user-info .user-count[data-v-90be1cf0] {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  font-weight: 400;
  line-height: 22px;
  color: var(--color-text-2)
}

.container .right .info-top .published .published-user .user-info .user-count .count[data-v-90be1cf0] {
  color: var(--color-text-1)
}

.container .right .info-top .published .published-user .user-info .user-count .split[data-v-90be1cf0] {
  color: var(--color-border-line)
}

.container .right .info-top .published .published-user .follow[data-v-90be1cf0] {
  flex-shrink: 0
}

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

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

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

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

.container .right .info-top .published .published-title .title h3 .tag[data-v-90be1cf0] {
  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-90be1cf0] {
  color: var(--color-fill-error);
  background-color: var(--color-fill-error-24)
}

.container .right .info-top .published .published-title .introduction[data-v-90be1cf0] {
  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-90be1cf0] {
  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-90be1cf0]:hover {
  text-decoration: underline
}

.container .right .info-top .published .published-title .published-time[data-v-90be1cf0] {
  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-90be1cf0] {
  color: var(--color-border-line);
  margin: 0 12px
}

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

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

.container .right .info-top .operation .active[data-v-90be1cf0] button {
  color: var(--color-theme-2)
}

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

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

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

.divider[data-v-90be1cf0] {
  height: 12px;
  width: 1px;
  background: var(--color-border-line)
}

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

#button-group[data-v-7b7579e8] {
  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-7b7579e8] {
  width: fit-content;
  display: flex;
  gap: 32px;
  align-items: center
}

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

.group-box .button-auto-ellipsis-item[data-v-7b7579e8]: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-7b7579e8] {
  cursor: not-allowed;
  color: var(--color-text-3)
}

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

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

.video-operation-btn-container[data-v-54218316] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px
}

.video-operation-btn-container .operation-btn-container[data-v-54218316] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  cursor: pointer
}

.video-operation-btn-container .operation-btn-container.disabled[data-v-54218316] {
  cursor: not-allowed;
  color: var(--color-text-3)
}

.video-operation-btn-container .operation-btn-container[data-v-54218316]:not(:last-child):after {
  content: "";
  display: block;
  width: 1px;
  height: 12px;
  background-color: var(--color-border-line);
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%)
}

.video-operation-btn-container .operation-btn-text[data-v-54218316] {
  cursor: pointer
}

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

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

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

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

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

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

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

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

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

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

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

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

.waterfall-wrapper .column .item[data-v-261f878b] {
  position: absolute;
  width: 100%;
  transition: transform .3s ease-out
}

.publish-tag[data-v-93f3ad5b] {
  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;
  z-index: 1
}

.cover[data-v-abcaf79e] {
  height: var(--3bb7a5ec);
  will-change: height;
  content-visibility: auto;
  contain-intrinsic-size: 100% var(--3bb7a5ec);
  background: var(--color-other-1);
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  transition: height .3s ease-out
}

.cover .main[data-v-abcaf79e] {
  position: relative;
  display: flex;
  height: var(--2f2ce25e)
}

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

.cover .main .award-badges .award-badge[data-v-abcaf79e] {
  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
}

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

.cover .main .award-badges .award-badge span[data-v-abcaf79e] {
  color: var(--color-text-1)
}

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

.cover .main .bottom-row[data-v-abcaf79e] {
  width: 100%;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  padding: 16px;
  height: 100px;
  background: linear-gradient(0deg, #0003, #0000 50%), linear-gradient(0deg, var(--055dba66) 0%, transparent 50%);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px
}

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

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

.cover .main .bottom-row .user .name[data-v-abcaf79e] {
  font-size: 12px;
  color: var(--color-text-1);
  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-abcaf79e] {
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0
}

.cover .main .ref-image[data-v-abcaf79e] {
  height: 28px;
  border-radius: 4px;
  background: var(--color-fill-dark);
  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-abcaf79e] {
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-text-1);
  margin-left: 2px
}

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

.cover .detail[data-v-abcaf79e] {
  border-radius: 0 0 4px 4px;
  height: 0;
  overflow: hidden;
  position: relative;
  bottom: 0;
  transition: height .3s ease-out
}

.cover .detail .content[data-v-abcaf79e] {
  background: linear-gradient(to bottom, #0003, #0003), var(--055dba66);
  height: 100%;
  padding: 16px 12px;
  -webkit-backdrop-filter: blur(180px);
  backdrop-filter: blur(180px);
  z-index: 2;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px
}

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

.cover .detail .content .work-info[data-v-abcaf79e] {
  display: flex
}

.cover .detail .content .skit-info[data-v-abcaf79e] {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.cover .detail .content .skit-info .title[data-v-abcaf79e] {
  line-height: 20px;
  font-weight: 600
}

.cover .detail .content .skit-info .introduction[data-v-abcaf79e] {
  line-height: 20px;
  font-size: 12px
}

.cover .detail .content .skit-info .introduction.no-title[data-v-abcaf79e] {
  line-height: 22px
}

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

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

.cover .detail.expand[data-v-abcaf79e] {
  height: var(--2981489a)
}

.cover .detail.shrink[data-v-abcaf79e] {
  height: 0
}

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

.back-to-top[data-v-1f877720] {
  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-1f877720]:hover {
  opacity: 1
}

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

.debug-container[data-v-a19ea9ff] {
  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-a19ea9ff] {
  vertical-align: middle;
  font-size: 14px;
  line-height: 24px;
  display: inline-block;
  margin-bottom: 8px
}

.debug-container input[data-v-a19ea9ff] {
  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-b3a0cf1c] {
  width: 100%;
  position: relative;
  min-height: 500px
}

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

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

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

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

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

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

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

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

.activity-zone-detail-box .detail-container .detail-operation[data-v-91ea49b7] {
  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-91ea49b7] {
  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-91ea49b7]:hover {
  border: 1px solid var(--color-border-hover) !important
}

.activity-zone-detail-box .detail-container .detail-operation .detail-operation-btn[data-v-91ea49b7] {
  display: flex
}

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

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

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

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

.activity-zone-detail-box .detail-container .detail-content .detail-info .detail-title[data-v-91ea49b7] {
  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-91ea49b7] {
  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-91ea49b7] {
  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-91ea49b7] {
  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-91ea49b7] {
  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-91ea49b7] {
  color: var(--color-text-3)
}

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

.activity-zone-detail-box .detail-container .detail-activity-description-box .detail-activity-description[data-v-91ea49b7] {
  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-91ea49b7] a {
  color: var(--color-theme-2);
  text-decoration: none
}

.activity-zone-detail-box .detail-container .detail-activity-description-box .detail-activity-description[data-v-91ea49b7] 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-91ea49b7] {
  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-91ea49b7] {
  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-91ea49b7]:hover {
  border-color: var(--color-border-hover) !important
}

.activity-zone-detail-box .detail-container .detail-expand-collapse .expand-btn[data-v-91ea49b7],
.activity-zone-detail-box .detail-container .detail-expand-collapse .collapse-btn[data-v-91ea49b7] {
  display: flex;
  align-items: center
}

.activity-zone-detail-box .detail-container .detail-expand-collapse .icon-arrow-down[data-v-91ea49b7] {
  margin-left: 8px
}

.activity-zone-detail-box .detail-container .detail-work-number-box[data-v-91ea49b7] {
  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-91ea49b7] {
  font-weight: 400;
  line-height: 28px;
  color: var(--color-text-3)
}

.detail-waterfall[data-v-91ea49b7] {
  margin-top: -70px
}

.text-tooltip[data-v-5e1e9710] {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.more-line[data-v-5e1e9710] {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

.activity-zone-card-container[data-v-b0edecee] {
  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-b0edecee]:hover {
  background: var(--color-other-2)
}

.activity-zone-card-container .zone-card-cover[data-v-b0edecee] {
  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-b0edecee] {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.activity-zone-card-container .zone-card-info[data-v-b0edecee] {
  padding: 16px;
  width: calc(100% - 288px)
}

.activity-zone-card-container .zone-card-info .zone-card-info-detail[data-v-b0edecee] {
  height: 96px
}

.activity-zone-card-container .zone-card-info .zone-card-info-detail .zone-card-title[data-v-b0edecee],
.activity-zone-card-container .zone-card-info .zone-card-info-detail .zone-card-subtitle[data-v-b0edecee] {
  margin-bottom: 8px
}

.activity-zone-card-container .zone-card-info .zone-card-info-detail .zone-card-tag[data-v-b0edecee] {
  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-b0edecee] {
  color: var(--color-text-3)
}

.activity-zone-card-container .zone-card-info .zone-card-info-detail .zone-card-tag .start-time[data-v-b0edecee] {
  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-b0edecee],
.activity-zone-card-container .zone-card-info .zone-card-info-detail .zone-card-tag .award-process[data-v-b0edecee] {
  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-b0edecee] {
  color: var(--color-text-3);
  margin-left: 5px
}

.activity-zone-card-container .zone-card-info .zone-card-movements[data-v-b0edecee] {
  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-b0edecee] {
  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 img[data-v-b0edecee] {
  width: 16px;
  height: 16px
}

.activity-zone-card-container .zone-card-info .zone-card-movements .zone-card-award span[data-v-b0edecee] {
  margin-left: 5px;
  color: var(--color-text-1)
}

.activity-zone-card-container .zone-card-info .zone-card-movements .zone-card-contributors[data-v-b0edecee] {
  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-b0edecee] {
  margin-left: 6px
}

@media screen and (max-width: 1920px) {
  .activity-zone-card-container[data-v-b0edecee] {
    width: calc((100% - 16px)/2)
  }
}

.activity-zoon-container[data-v-a8782d69] {
  position: absolute;
  padding: 0 24px 16px;
  height: calc(100vh - 100px);
  width: calc(100% - 220px)
}

.activity-zoon-container[data-v-a8782d69]::-webkit-scrollbar {
  display: none
}

.activity-zoon-container .activity-zone-card-list .activity-zoon-title[data-v-a8782d69] {
  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-a8782d69] {
  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-a8782d69] {
  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-a8782d69] {
  position: relative
}

.bottom-navigator[data-v-64741049] {
  position: fixed;
  pointer-events: all;
  bottom: 0;
  width: 100%;
  height: 70px;
  left: 0;
  background: var(--color-bg-page);
  cursor: pointer;
  display: flex;
  justify-content: space-around;
  align-items: center
}

.bottom-navigator .btn[data-v-64741049] {
  padding: 0 16px;
  height: 100%;
  width: 19vw;
  color: var(--color-text-2)
}

.bottom-navigator .btn .caption[data-v-64741049] {
  font-size: 12px;
  display: block;
  padding: 0;
  margin: 0;
  line-height: 24px
}

.bottom-navigator .btn.active[data-v-64741049] {
  color: var(--theme-color-primary);
  background-color: transparent
}

.demo[data-v-f594784f] {
  width: 328px;
  padding: 12px
}

.demo h3[data-v-f594784f] {
  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-f594784f] {
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  margin-top: 8px
}

.demo img[data-v-f594784f] {
  margin-top: 16px;
  border-radius: 8px;
  width: 100%
}

.demo .content[data-v-f594784f] {
  margin-top: 4px
}

.demo .btn[data-v-f594784f] {
  margin-top: 18px
}

.demo .demo-video[data-v-f594784f] {
  margin-top: 12px
}

.fast-tag[data-v-f594784f] {
  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
}

.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-1dcec7c8] {
  padding-right: 10px
}

body.mobile header .content img.logo[data-v-1dcec7c8] {
  margin-left: 20px
}

body.mobile header .content img.logo.anonymous[data-v-1dcec7c8] {
  position: absolute;
  left: -50px !important;
  top: -16px !important
}

body.mobile .logo-box .logo[data-v-1dcec7c8] {
  position: absolute;
  margin-top: -56px;
  margin-left: calc(-100vw + 88px) !important;
  clip: rect(0px, 32px, 32px, 0px)
}

body.mobile .combo[data-v-1dcec7c8] {
  flex: 0 0 180px
}

body.mobile .designer-select[data-v-1dcec7c8] {
  max-width: 110px
}

header[data-v-1dcec7c8] {
  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-1dcec7c8] {
  float: right;
  height: 100%
}

header .content[data-v-1dcec7c8] {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%
}

header .content .menu-container[data-v-1dcec7c8] {
  overflow: hidden;
  transition: width .2s;
  height: 100%;
  width: 40px;
  flex: none
}

header .content img.logo[data-v-1dcec7c8] {
  margin-left: 20px
}

header .help-btn[data-v-1dcec7c8] {
  display: inline-block;
  vertical-align: middle;
  margin-right: 1em
}

.mobile-top-bar[data-v-1dcec7c8] {
  width: 100vw;
  margin-right: -32px;
  font-size: 14px;
  line-height: 24px
}

.mobile-top-bar .back[data-v-1dcec7c8] {
  float: left;
  margin-left: 16px;
  height: 24px;
  width: 48px
}

.mobile-top-bar .back svg[data-v-1dcec7c8] {
  margin-top: 1px
}

.mobile-top-bar .history[data-v-1dcec7c8] {
  float: right;
  width: 56px;
  text-align: right;
  margin-right: 16px
}

.mobile-top-bar .title[data-v-1dcec7c8] {
  font-weight: 500;
  text-align: center;
  font-size: 16px
}

.mobile-top-bar .right[data-v-1dcec7c8] {
  text-align: left
}

body.mobile #top-navigation-panel-content-history[data-v-1dcec7c8],
body.mobile #top-navigation-panel-content-result[data-v-1dcec7c8] {
  display: none
}

.logo-box[data-v-1dcec7c8] {
  display: flex;
  align-items: center;
  flex: 1;
  padding-right: 55px
}

.logo-box .title[data-v-1dcec7c8] {
  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-1dcec7c8] {
  flex: 0 0 210px;
  display: inline-block
}

.logo-box .video-extend-version[data-v-1dcec7c8] {
  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-1dcec7c8] {
  flex-direction: column
}

.name-new[data-v-1dcec7c8] {
  color: var(--color-text-1) !important
}

.model-header[data-v-1dcec7c8] {
  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-1dcec7c8] {
  margin-left: auto;
  margin-right: 24px;
  cursor: pointer
}

.close-icon[data-v-1dcec7c8] {
  margin-left: auto;
  margin-right: 16px;
  cursor: pointer
}

.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[data-v-cb4e34bd] {
  min-width: 0
}

body.mobile .designer-container .background[data-v-cb4e34bd] {
  display: none
}

body.mobile .property-panel[data-v-cb4e34bd] {
  overflow: hidden
}

body.mobile .property-panel[data-v-cb4e34bd]:after {
  display: none
}

body.mobile .bottom[data-v-cb4e34bd] {
  margin-left: -41px;
  width: calc(100% + 41px);
  height: 76px
}

body.mobile .bottom.back[data-v-cb4e34bd] {
  background: linear-gradient(0deg, #0d111688, #0d111600 50%)
}

body.mobile .bottom.back.tab-setting[data-v-cb4e34bd] {
  background: linear-gradient(0deg, #0d1116 50%, #0d111600)
}

.designer-container[data-v-cb4e34bd] {
  min-width: 450px;
  height: 100vh;
  display: flex;
  position: relative
}

.designer-container .background[data-v-cb4e34bd] {
  position: absolute;
  left: 0;
  top: 0
}

.designer-secondary-panel[data-v-cb4e34bd] {
  height: 100vh;
  border-right: 1px solid var(--color-border-frame);
  width: 400px
}

.designer-secondary-panel.mobile[data-v-cb4e34bd] {
  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-cb4e34bd] {
  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-cb4e34bd] {
  font-size: 16px;
  font-weight: bolder;
  color: var(--color-text-1)
}

.designer-secondary-panel .secondary-title svg[data-v-cb4e34bd] {
  color: var(--color-text-1);
  cursor: pointer
}

.designer-secondary-panel .secondary-content[data-v-cb4e34bd] {
  padding: 20px;
  width: 100%;
  box-sizing: border-box
}

.sidebar-container[data-v-cb4e34bd] {
  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-cb4e34bd] {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center
}

.sidebar-container .sidebar-item-container[data-v-cb4e34bd] {
  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-cb4e34bd] {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

.sidebar-container .sidebar-item-container .sidebar-item[data-v-cb4e34bd]:hover {
  color: var(--color-text-1);
  background: var(--color-other-1)
}

.sidebar-container .sidebar-item-container .sidebar-item.active[data-v-cb4e34bd] {
  color: var(--color-theme-2);
  background: var(--color-other-2)
}

.property-panel[data-v-cb4e34bd] {
  overflow: visible;
  flex: none;
  width: 510px;
  height: 100vh;
  box-sizing: border-box;
  padding: 0;
  position: relative;
  background: var(--color-bg-primary);
  display: flex;
  flex-direction: column;
  -ms-overflow-style: none;
  scrollbar-width: none
}

.property-panel .top-nav-panel-container[data-v-cb4e34bd] {
  float: left;
  flex: none;
  height: 64px
}

.property-panel.mobile[data-v-cb4e34bd] {
  width: 100vw
}

.property-panel .property-content[data-v-cb4e34bd] {
  flex: 1;
  padding: 20px;
  overflow-y: scroll;
  height: calc(100vh - 64px);
  -ms-overflow-style: none;
  scrollbar-width: none
}

.property-panel .property-content[data-v-cb4e34bd]::-webkit-scrollbar {
  display: none
}

.property-panel .property-content.not-sticky[data-v-cb4e34bd] {
  flex: 0 0 auto;
  height: auto;
  overflow-y: visible
}

.property-panel .bottom[data-v-cb4e34bd] {
  flex: none;
  height: 68px;
  position: relative;
  bottom: 0;
  width: 100%;
  background: var(--color-bg-primary)
}

.property-panel .resize-handle[data-v-cb4e34bd] {
  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-cb4e34bd]: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-cb4e34bd]:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: var(--677f56ac);
  z-index: -1
}

.property-panel .resize-handle svg[data-v-cb4e34bd] {
  position: relative;
  z-index: 2
}

.property-panel.resize-hover .resize-handle[data-v-cb4e34bd] {
  opacity: 1
}

.property-panel[data-v-cb4e34bd]: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-cb4e34bd]:after {
  cursor: col-resize;
  background: var(--color-border-component)
}

.property-panel[data-v-cb4e34bd]::-webkit-scrollbar {
  display: none
}

#designer-secondary-panel[data-v-cb4e34bd] {
  flex: none;
  width: 100%;
  height: calc(100vh - 64px);
  background-color: var(--color-bg-primary);
  transition: all .3s ease
}

#designer-secondary-panel.show[data-v-cb4e34bd] {
  transform: translate(0)
}

.designer-component[data-v-cb4e34bd] {
  z-index: 1;
  height: var(--723f4161);
  position: relative;
  background: var(--color-bg-primary);
  display: flex;
  flex-direction: column;
  -ms-overflow-style: none;
  scrollbar-width: none
}

.designer-component[data-v-cb4e34bd]::-webkit-scrollbar {
  display: none
}

.designer-component .bottom-button[data-v-cb4e34bd] {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  flex-shrink: 0;
  padding-top: 16px
}

.designer-component .bottom-button.not-sticky[data-v-cb4e34bd] {
  position: static
}

.bottom[data-v-cb4e34bd] {
  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-cb4e34bd] {
  z-index: 99;
  color: #999bac;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px
}

.try-on-guide-title a[data-v-cb4e34bd] {
  display: inline-block;
  margin-left: 4px;
  color: #1be5ec;
  cursor: pointer;
  text-decoration: none
}

.top-history[data-v-cb4e34bd] {
  position: absolute;
  right: 16px;
  top: 20px;
  font-size: 14px;
  pointer-events: all;
  z-index: 99999
}

.top-back[data-v-cb4e34bd] {
  position: absolute;
  left: 16px;
  top: 24px;
  font-size: 14px;
  pointer-events: all;
  z-index: 99999
}

.top-navigation-panel[data-v-cb4e34bd] {
  z-index: 9
}

.placeholder[data-v-cb4e34bd] {
  min-height: 0;
  position: relative;
  height: auto;
  border-bottom: 1px solid var(--color-border-frame)
}

.placeholder[data-v-cb4e34bd]:empty {
  height: 0;
  margin: 0;
  padding: 0;
  visibility: hidden
}

.placeholder[data-v-cb4e34bd]:before {
  content: "";
  position: absolute;
  left: 0;
  top: -16px;
  width: 100%;
  height: 16px;
  background: linear-gradient(to bottom, #17181a00, #17181acc)
}

.divider[data-v-cb4e34bd] {
  height: 32px;
  display: flex;
  align-items: center
}

.divider .line[data-v-cb4e34bd] {
  width: 24px;
  height: 1px;
  background-color: var(--color-border-container);
  margin: 0 auto
}

.setting-collect-box[data-v-a82d5943] {
  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-a82d5943] {
  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-a82d5943]:hover {
  border: 1px solid var(--color-border-hover)
}

.setting-collect-box .cfg svg[data-v-a82d5943] {
  width: 16px;
  flex-shrink: 0;
  color: var(--color-text-2);
  position: absolute;
  right: 12px
}

.setting-collect-box .cfg.disabled[data-v-a82d5943] {
  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-a82d5943] {
  color: var(--color-text-4)
}

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

.cfg-slider-box[data-v-a82d5943] {
  gap: 16px;
  height: 24px;
  font-size: 14px;
  color: var(--color-text-2)
}

.mode-item[data-v-a82d5943] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px
}

.select-active-item[data-v-a82d5943] {
  display: flex;
  align-items: center;
  gap: 4px
}

.select-active-item[data-v-a82d5943] * {
  flex: 0 0 auto
}

.cfg-text[data-v-a82d5943] {
  font-size: 14px
}

.vip[data-v-a82d5943] {
  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-a82d5943],
.membership[data-v-a82d5943] {
  background: var(--color-theme-3);
  color: var(--color-theme-2)
}

.seed-container[data-v-a82d5943] {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%
}

.seed-container .label[data-v-a82d5943] {
  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-770c21af] {
  font-size: 22px;
  line-height: 32px;
  color: var(--color-text-1)
}

.dialog-select-try-on p[data-v-770c21af] {
  color: var(--color-text-2);
  font-size: 14px;
  line-height: 32px
}

.dialog-select-try-on main[data-v-770c21af] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 0
}

.dialog-select-try-on main div[data-v-770c21af] {
  width: 216px;
  height: 184px;
  border-radius: 12px;
  overflow: hidden;
  position: relative
}

.dialog-select-try-on main div img[data-v-770c21af] {
  width: 100%
}

.dialog-select-try-on main div svg[data-v-770c21af] {
  top: 10px;
  left: 10px;
  position: absolute;
  cursor: pointer
}

.dialog-select-try-on main .right-solid-arrow[data-v-770c21af] {
  color: var(--color-text-3)
}

.dialog-select-try-on main .is-single[data-v-770c21af] {
  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-770c21af] {
  color: #fff3;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400
}

.dialog-select-try-on footer[data-v-770c21af] {
  display: flex;
  align-items: center;
  justify-content: flex-end
}

.dialog-select-try-on footer .input-top-btn[data-v-770c21af] {
  margin-right: 12px
}

.dialog-select-try-on footer button[data-v-770c21af] {
  height: 36px
}

.panel[data-v-7fe0ecfa] {
  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-7fe0ecfa] {
  width: 100%
}

.clothes-recommend ul[data-v-fd34654a],
.clothes-recommend li[data-v-fd34654a] {
  margin: 0;
  padding: 0;
  list-style: none
}

.clothes-recommend .recommend-title[data-v-fd34654a] {
  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-fd34654a] {
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-right: 16px
}

.clothes-recommend .recommend-title .recommend-list[data-v-fd34654a]::-webkit-scrollbar {
  display: unset;
  width: 5px;
  height: 5px;
  background-color: transparent
}

.clothes-recommend .recommend-title .recommend-list[data-v-fd34654a]::-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-fd34654a]::-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-fd34654a]::-webkit-scrollbar-thumb:hover {
  background-color: #777
}

.clothes-recommend .recommend-title .recommend-list li[data-v-fd34654a] {
  border-radius: 8px;
  border: 1px solid transparent;
  margin-right: 8px;
  cursor: pointer
}

.clothes-recommend .recommend-title .recommend-list li div[data-v-fd34654a] {
  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-fd34654a] {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.clothes-recommend .recommend-title .recommend-list li[data-v-fd34654a]:last-child {
  margin-right: 0
}

.clothes-recommend .recommend-title .recommend-list .recommend-active[data-v-fd34654a] {
  border-radius: 10px;
  border: 1px solid var(--color-theme-2)
}

.clothes-recommend .recommend-title .recommend-btn[data-v-fd34654a] {
  margin-left: auto
}

#changePopover[data-v-251636e9] {
  padding: 20px 24px
}

[data-v-251636e9] .el-popper {
  padding: 0 !important
}

.cloth-content[data-v-251636e9] {
  height: 200px;
  width: 100%;
  position: relative;
  overflow: hidden
}

.cloth-content .loading-box[data-v-251636e9] {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 5;
  background: var(--color-fill-black-1);
  gap: 8px
}

.cloth-content .popover-reference[data-v-251636e9] {
  position: absolute
}

.cloth-content img[data-v-251636e9] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
  position: absolute;
  top: 0
}

.cloth-content .dropdown[data-v-251636e9] {
  position: absolute;
  top: 12px;
  right: 12px;
  cursor: pointer;
  z-index: 4
}

.cloth-content .try-on-cloth-operate-btn[data-v-251636e9] {
  width: 20px;
  height: 20px;
  color: var(--color-text-1)
}

.cloth-content__tag[data-v-251636e9] {
  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-251636e9] {
  transform: rotate(180deg)
}

.cloth-content__btns[data-v-251636e9] {
  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-251636e9] {
  display: flex;
  align-items: center
}

.cloth-content__btns.vertical[data-v-251636e9],
.cloth-content__btns.horizontal[data-v-251636e9] {
  gap: 14px
}

.cloth-content-cover[data-v-251636e9] {
  background-color: var(--color-fill-black-1)
}

.cloth-content-cover:hover .cloth-content__btns[data-v-251636e9] {
  background-color: var(--color-other-6);
  opacity: 1
}

.cloth-content-cover[data-v-251636e9]: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-251636e9] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  color: var(--color-text-1)
}

.popover__content[data-v-251636e9] {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px
}

.popover__content-item[data-v-251636e9] {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  position: relative
}

.popover__content-item img[data-v-251636e9] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  overflow: hidden
}

.popover__content-item .checkbox[data-v-251636e9] {
  position: absolute;
  top: 8px;
  left: 8px;
  cursor: pointer
}

.popover__content-item .not-selected[data-v-251636e9] {
  color: var(--color-border-component)
}

.try-on-rule-legend-content[data-v-bca30125] {
  border-radius: 8px;
  position: relative
}

.try-on-rule-legend-content .try-on-rule-legend-image[data-v-bca30125] {
  width: 100%;
  height: 100%;
  border-radius: 8px
}

.try-on-rule-legend-content .try-on-rule-legend-title-box[data-v-bca30125] {
  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-bca30125] {
  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-d101b519] {
  max-height: 500px;
  overflow-y: auto
}

.try-on-rule-clothes-content[data-v-d101b519] {
  position: relative;
  z-index: 100
}

.try-on-rule-clothes-content .try-on-rule-clothes-title-box[data-v-d101b519] {
  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-d101b519] {
  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-d101b519] {
  position: relative;
  z-index: 100;
  cursor: pointer
}

.try-on-rule-clothes-content .try-on-rule-clothes-des[data-v-d101b519] {
  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-d101b519] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px
}

.try-on-rule-clothes-content .try-on-rule-clothes-error-title[data-v-d101b519] {
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  margin: 16px 0 12px
}

.try-on-cloth-content[data-v-8ef89f60] {
  margin-top: 16px;
  border: 1px solid var(--color-border-container);
  border-radius: 8px;
  overflow: hidden
}

.single-box[data-v-8ef89f60] {
  overflow: hidden
}

.multiple-box[data-v-8ef89f60] {
  padding: 8px;
  display: flex;
  gap: 10px
}

.multiple-box__item[data-v-8ef89f60] {
  flex: .5;
  height: 184px;
  border-radius: 12px;
  overflow: hidden
}

.multiple-box .multiple-box-upload[data-v-8ef89f60] {
  background: var(--color-fill-light)
}

.try-on-cloth-header[data-v-8ef89f60] {
  display: flex;
  align-items: center;
  position: relative
}

.try-on-cloth-header .try-on-cloth-tabs[data-v-8ef89f60] {
  display: flex;
  align-items: center;
  cursor: pointer
}

.try-on-cloth-header .try-on-cloth-tabs div[data-v-8ef89f60] {
  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-8ef89f60] {
  color: var(--color-text-1);
  background-color: var(--color-other-2)
}

.try-on-cloth-header .case-popover-box[data-v-8ef89f60] {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center
}

.try-on-cloth-header .case-popover-box .case-box[data-v-8ef89f60] {
  display: flex;
  align-items: center;
  cursor: pointer
}

.try-on-cloth-header .case-popover-box .case-box .info-case-btn[data-v-8ef89f60] {
  width: 16px;
  height: 16px;
  color: var(--color-text-2)
}

.try-on-cloth-header .case-popover-box .case-box .case-title[data-v-8ef89f60] {
  color: var(--color-text-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  padding-left: 4px
}

.upload-tip[data-v-8ef89f60] {
  font-size: 12px;
  color: #999bac;
  margin-top: 12px
}

body.mobile .try-on-model-custom-list[data-v-93e4972e] {
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

body.mobile .try-on-model-header .try-on-model-tabs[data-v-93e4972e] .generic-button.mid-wide {
  padding-left: 16px;
  padding-right: 16px
}

.try-on-model[data-v-93e4972e] {
  margin-bottom: 32px
}

.try-on-model ul[data-v-93e4972e],
.try-on-model li[data-v-93e4972e] {
  margin: 0;
  padding: 0;
  list-style: none
}

.try-on-model .upload-tip[data-v-93e4972e] {
  font-size: 12px;
  color: #999bac;
  margin-top: 12px
}

.try-on-model .try-on-model-header[data-v-93e4972e] {
  display: flex;
  align-items: center;
  position: relative
}

.try-on-model .try-on-model-header .case-popover-box[data-v-93e4972e] {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center
}

.try-on-model .try-on-model-header .case-popover-box .case-box[data-v-93e4972e] {
  display: flex;
  align-items: center;
  cursor: pointer
}

.try-on-model .try-on-model-header .case-popover-box .case-box .info-case-btn[data-v-93e4972e] {
  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-93e4972e] {
  color: var(--color-text-2);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  padding-left: 4px
}

.try-on-model .try-on-model-header .try-on-model-tabs[data-v-93e4972e] {
  display: flex;
  align-items: center;
  cursor: pointer
}

.try-on-model .try-on-model-header .try-on-model-tabs div[data-v-93e4972e] {
  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-93e4972e] {
  color: var(--color-text-1);
  background-color: var(--color-other-2)
}

.try-on-model .try-on-model-list-box[data-v-93e4972e] {
  overflow-y: auto;
  max-height: 304px;
  width: 100%;
  margin-top: 16px
}

.try-on-model .try-on-model-list-box[data-v-93e4972e]::-webkit-scrollbar {
  display: none
}

.try-on-model .try-on-model-list-box .try-on-model-list[data-v-93e4972e] {
  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-93e4972e],
.try-on-model .try-on-model-list-box .try-on-model-list .default-model[data-v-93e4972e] {
  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-93e4972e] {
  border: 1px solid var(--color-theme-2) !important
}

.try-on-model .try-on-model-list-box .try-on-model-list li[data-v-93e4972e] {
  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-93e4972e] {
  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-93e4972e] {
  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-93e4972e] {
  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-93e4972e] {
  position: absolute;
  top: 8px;
  right: 8px
}

.try-on-model .try-on-model-list-box .try-on-model-list li img[data-v-93e4972e] {
  width: 100%;
  height: 100%;
  border-radius: 6px
}

.try-on-model .try-on-model-list-box .try-on-model-list li[data-v-93e4972e]:nth-of-type(4n) {
  margin-right: 0
}

.try-on-model .try-on-model-list-box .try-on-model-custom-list[data-v-93e4972e] {
  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-93e4972e],
.try-on-model .try-on-model-list-box .try-on-model-custom-list .default-model[data-v-93e4972e] {
  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-93e4972e] {
  border: 1px solid var(--color-theme-2) !important
}

.try-on-model .try-on-model-list-box .try-on-model-custom-list li[data-v-93e4972e] {
  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-93e4972e] {
  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-93e4972e] {
  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-93e4972e] {
  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-93e4972e] {
  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-93e4972e] {
  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-93e4972e] {
  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-93e4972e] {
  position: absolute;
  top: 8px;
  right: 8px
}

.try-on-model .try-on-model-list-box .try-on-model-custom-list li img[data-v-93e4972e] {
  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-93e4972e]:nth-of-type(4n) {
  margin-right: 0
}

.try-on-model .try-on-model-custom-area[data-v-93e4972e] {
  width: 100%;
  height: 200px;
  margin-top: 16px
}

.try-on-model .try-on-model-custom-area .try-on-model-custom-upload[data-v-93e4972e] {
  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-93e4972e] {
  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-93e4972e] {
  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-93e4972e]: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-93e4972e]: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-93e4972e] {
  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-93e4972e] {
  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-93e4972e] {
  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-93e4972e] {
  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-93e4972e],
.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-93e4972e] {
  opacity: 1
}

.title[data-v-5d8e892a] {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  height: 32px
}

.title svg[data-v-5d8e892a]:first-child {
  width: 24px;
  height: 24px;
  flex-shrink: 0
}

.title span[data-v-5d8e892a] {
  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-5d8e892a] {
  margin-left: .5em;
  width: 16px;
  height: 16px;
  cursor: pointer
}

.title .desc[data-v-5d8e892a] {
  font-size: 14px;
  color: var(--color-text-3);
  font-weight: 400
}

.content[data-v-5d8e892a] {
  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-1a69b054] {
  z-index: 2
}

#mark .mouse-con[data-v-1a69b054] {
  position: absolute;
  height: 340px;
  top: -150px;
  right: -490px
}

#mark .mark-step[data-v-1a69b054] {
  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-1a69b054] {
  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-1a69b054] {
  position: absolute;
  top: -59px;
  left: 129px;
  height: 0;
  width: 41px;
  border-top: 1px dashed #1be5ec
}

#mark .mark-step .mark-texts[data-v-1a69b054] {
  color: #fff;
  font-size: 16px;
  margin-bottom: 12px;
  font-weight: 600
}

#mark .mark-step .mark-texts span[data-v-1a69b054] {
  font-weight: 600
}

#mark .mark-step .mark-bottom[data-v-1a69b054] {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

#mark .mark-step .mark-bottom span[data-v-1a69b054] {
  color: #c5c7d5
}

.lora-select-content[data-v-c93decff] {
  margin-top: 32px;
  width: 100%;
  border-radius: 10px
}

.lora-select-content .select-avatar-content[data-v-c93decff] {
  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-c93decff] {
  display: flex;
  align-items: center;
  gap: 16px
}

.lora-select-content .select-avatar-content .left-avatar .avatar[data-v-c93decff] {
  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-c93decff] {
  height: 100%;
  width: 100%;
  object-fit: cover
}

.lora-select-content .select-avatar-content .left-avatar .avatar svg[data-v-c93decff] {
  color: var(--color-text-4)
}

.lora-select-content .select-avatar-content .left-avatar .name[data-v-c93decff] {
  color: var(--color-text-3)
}

.lora-select-content .select-avatar-content .left-avatar .name.selected[data-v-c93decff] {
  color: var(--color-text-1)
}

.lora-select-content .select-avatar-content .right-icon[data-v-c93decff] {
  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-c93decff] {
  height: 32px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.lora-select-content .tips .left-tips[data-v-c93decff] {
  display: flex;
  align-items: center
}

.lora-select-content .tips .left-tips .left-tips-title[data-v-c93decff] {
  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-c93decff] {
  cursor: pointer;
  color: var(--color-text-2)
}

.lora-select-content .tips .left-tips svg[data-v-c93decff]:hover {
  color: var(--color-text-1)
}

.lora-select-content .tips .right-clear[data-v-c93decff] {
  width: 16px;
  height: 32px;
  display: flex;
  align-items: center;
  cursor: pointer;
  line-height: 26px
}

.lora-select-content .tips .right-clear svg[data-v-c93decff] {
  color: var(--color-text-4)
}

.lora-select-content .tips .right-clear.active-clear svg[data-v-c93decff] {
  color: var(--color-text-1)
}

.lora-select-content .lora-tips-panel[data-v-c93decff] {
  width: 240px !important
}

body .lora-guide-tip {
  background: transparent !important
}

body .lora-guide-tip .el-popper__arrow {
  display: none
}

.recommend-box[data-v-9c2692a5] {
  display: flex;
  height: auto;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-border-frame);
  padding: 0 16px
}

.recommend-box .recommend-title[data-v-9c2692a5] {
  color: var(--color-text-1)
}

.recommend-box .recommend[data-v-9c2692a5] {
  flex: 1;
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  gap: 6px;
  justify-content: flex-start;
  padding: 0 16px
}

.recommend-box .recommend .recommend-item[data-v-9c2692a5] {
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  height: 32px;
  cursor: pointer;
  display: flex;
  padding: 4px 8px;
  background-color: var(--color-fill-disabled)
}

.recommend-box .recommend .recommend-item img[data-v-9c2692a5] {
  width: 24px;
  height: 24px;
  display: inline-block;
  object-fit: cover;
  margin-right: 8px;
  border-radius: 2px
}

.recommend-box .recommend .recommend-item .bottom[data-v-9c2692a5] {
  width: 100%;
  height: 24px;
  font-size: 12px;
  line-height: 20px;
  color: var(--color-text-1)
}

.recommend-box .recommend-btn[data-v-9c2692a5] {
  width: 28px
}

.popover-content p[data-v-9c2692a5] {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--color-text-2);
  margin-bottom: 4px
}

.popover-content img[data-v-9c2692a5] {
  width: 144px;
  height: 144px;
  border-radius: 6px;
  display: block;
  object-fit: cover
}

.recommend-box[data-v-5907ab53] {
  display: flex;
  height: auto;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-border-frame);
  padding: 10px 16px
}

.recommend-box .recommend-title[data-v-5907ab53] {
  color: var(--color-text-1)
}

.recommend-box .recommend[data-v-5907ab53] {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  gap: 6px;
  justify-content: flex-start;
  padding: 0 16px
}

.recommend-box .recommend a[data-v-5907ab53] {
  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-5907ab53] {
  width: 28px
}

.prompt-operation[data-v-2663ce18] {
  height: 32px;
  gap: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 12px;
  margin-bottom: 12px
}

.prompt-operation .btn[data-v-2663ce18] {
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--color-text-1)
}

.exceeds-limit[data-v-c19f43a2] {
  color: var(--color-text-1);
  font-size: 12px;
  margin-bottom: 8px;
  line-height: 20px;
  padding-left: 32px;
  position: relative
}

.exceeds-limit-icon[data-v-c19f43a2] {
  position: absolute;
  left: 12px;
  top: 2px
}

.prompt-guide[data-v-8598872d] {
  width: 100%;
  z-index: 1;
  color: var(--color-text-3);
  pointer-events: none;
  line-height: 28px;
  font-size: 14px
}

.prompt-guide .deepseek-link[data-v-8598872d],
.prompt-guide[data-v-8598872d] a {
  color: var(--color-text-1);
  pointer-events: all;
  cursor: pointer;
  margin: 0;
  text-decoration: underline
}

body.mobile .prompt-guide {
  width: calc(100% - 36px)
}

#markSeek[data-v-25cfbb63] {
  display: flex;
  flex-direction: column;
  align-items: center
}

#markSeek .mark-dot[data-v-25cfbb63] {
  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-25cfbb63] {
  height: 24px;
  width: 0px;
  border-right: 1px dashed var(--color-border-hover)
}

#markSeek .mark-step[data-v-25cfbb63] {
  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-25cfbb63] {
  font-weight: 600;
  color: #74ff52;
  display: inline-block;
  margin-right: 4px
}

#markSeek .mark-step .mark-texts[data-v-25cfbb63] {
  color: var(--color-text-1)
}

#markSeek .mark-step .mark-texts span[data-v-25cfbb63] {
  font-weight: 600
}

#markSeek .mark-step .mark-bottom[data-v-25cfbb63] {
  display: flex;
  justify-content: flex-end;
  align-items: center
}

#markSeek .mark-step .mark-bottom span[data-v-25cfbb63] {
  color: #c5c7d5
}

.spirit-box[data-v-88a76d5f] {
  position: absolute;
  right: 0;
  top: -45px;
  display: flex;
  align-items: center;
  height: 32px;
  gap: 6px
}

.get-spirit[data-v-88a76d5f] {
  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
}

.get-spirit .deepseek[data-v-88a76d5f] {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center
}

.get-spirit .deepseek svg[data-v-88a76d5f] {
  margin-right: 4px
}

.get-spirit .deepseek.right[data-v-88a76d5f] {
  right: 0;
  top: -40px
}

body .deepseek-guide-tooltip {
  background: transparent !important;
  border: none !important
}

body .deepseek-guide-tooltip .el-popper__arrow {
  display: none
}

.loading-container[data-v-6c33c501] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  margin-right: 4px
}

.loading-spinner[data-v-6c33c501] {
  width: 16px;
  height: 16px;
  animation: rotate-6c33c501 .7s linear infinite;
  display: inline-block
}

@keyframes rotate-6c33c501 {
  0% {
    transform: rotate(0)
  }

  to {
    transform: rotate(360deg)
  }
}

.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
}

.chat-container .kl-query {
  display: flex;
  flex-direction: column;
  align-items: flex-end
}

.chat-container .query-img-list {
  display: flex;
  margin: 32px 0 24px;
  flex-wrap: wrap;
  justify-content: flex-end
}

.chat-container .query-img-list .query-img-item {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  margin: 4px;
  background: var(--color-other-1);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden
}

.chat-container .query-img-list .query-img-item.single {
  width: 200px;
  height: 200px
}

.chat-container .query-img-list .query-img-item img {
  width: 100%;
  height: 100%
}

.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 {
  margin-left: 8px
}

.chat-container .thinking .thinking-control svg:first-child {
  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 .thinking-control .arrow-down {
  transform: rotate(180deg)
}

.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 {
  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
}

.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;
  width: fit-content
}

.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
}

.options {
  display: flex;
  margin-top: 12px
}

.options .left-btn {
  width: 102px;
  margin-right: 8px
}

.options .right-btn {
  margin-left: 8px
}

.multiple-upload {
  height: 72px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--color-border-container);
  display: flex;
  align-items: center
}

.multiple-upload .upload-trigger {
  display: flex;
  flex-direction: column;
  width: 64px;
  height: 64px;
  padding: 4px 0;
  margin-right: 4px;
  border-radius: 8px;
  background: var(--color-other-1);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  color: var(--color-text-1)
}

.multiple-upload .upload-trigger .add {
  margin-top: 8px
}

.multiple-upload .img-list {
  display: flex
}

.multiple-upload .img-list .img-item {
  margin-right: 4px;
  width: 64px;
  height: 64px;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 8px;
  background-size: cover;
  gap: 4px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #ffffff0a
}

.multiple-upload .img-list .img-item .img-inner {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--color-fill-black-1);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: none
}

.multiple-upload .img-list .img-item:hover .img-inner {
  display: flex
}

:deep(.el-textarea__inner)::placeholder {
  color: var(--color-text-3);
  opacity: 1
}

:deep(.el-textarea__inner)::-webkit-input-placeholder {
  color: var(--color-text-3)
}

:deep(.el-textarea__inner):-ms-input-placeholder {
  color: var(--color-text-3)
}

:deep(.el-textarea__inner)::-ms-input-placeholder {
  color: var(--color-text-3)
}

.input-area {
  margin-top: 20px;
  height: 204px;
  position: relative;
  border: 1px solid var(--color-border-container);
  border-radius: 8px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column
}

.input-area:hover,
.input-area.focus {
  border: 1px solid var(--color-border-hover)
}

.input-area .input-container {
  flex: 1;
  display: flex
}

.input-area .send-icon {
  position: absolute;
  z-index: 10;
  right: 12px;
  bottom: 8px;
  display: flex;
  justify-content: flex-end
}

.input-area .send-icon .icon-container {
  cursor: pointer
}

.disclaimer {
  color: var(--color-text-3);
  font-size: 12px;
  line-height: 22px;
  margin-top: 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
}

.kl-message-list {
  flex: 1;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none
}

.kl-message-list::-webkit-scrollbar {
  display: none
}

.lora-select-teleport[data-v-87fa167f] {
  height: 100%;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.lora-select-teleport[data-v-87fa167f]::-webkit-scrollbar {
  display: none
}

.lora-select-teleport .lora-select-item[data-v-87fa167f] {
  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-87fa167f] {
  width: calc(100% - 32px);
  height: 100%;
  display: flex;
  align-items: center
}

.lora-select-teleport .lora-select-item .left .avatar[data-v-87fa167f] {
  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-87fa167f] {
  height: 100%;
  width: 100%;
  object-fit: cover
}

.lora-select-teleport .lora-select-item .left .avatar svg[data-v-87fa167f] {
  color: var(--color-text-4)
}

.lora-select-teleport .lora-select-item .left .name[data-v-87fa167f] {
  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-87fa167f] {
  color: var(--color-theme-2)
}

.lora-select-teleport .lora-select-item .left .message[data-v-87fa167f] {
  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-87fa167f] {
  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-87fa167f] {
  display: none
}

.lora-select-teleport .lora-select-item:hover .right-icon svg[data-v-87fa167f] {
  display: block
}

.preset-box[data-v-ce491cb7] {
  overflow: hidden;
  flex-grow: 1;
  display: flex;
  flex-direction: column
}

.preset-box .preset-edit[data-v-ce491cb7] {
  display: flex;
  flex-direction: column
}

.preset-box .preset-edit .preset-edit-title[data-v-ce491cb7] {
  height: 24px;
  line-height: 24px;
  color: var(--color-text-1);
  margin-bottom: 8px
}

.preset-box .preset-edit .edit-content[data-v-ce491cb7] {
  margin-bottom: 24px
}

.preset-box .preset-edit .edit-operation[data-v-ce491cb7] {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end
}

.preset-box .preset-edit .edit-operation button[data-v-ce491cb7] {
  margin-left: 10px
}

.preset-box .operation[data-v-ce491cb7] {
  height: 36px;
  flex-shrink: 0;
  display: flex;
  margin-bottom: 24px
}

.preset-box .operation-query[data-v-ce491cb7] {
  flex: 1
}

.preset-box .operation-btn[data-v-ce491cb7] {
  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
}

.preset-box .operation-btn span[data-v-ce491cb7] {
  display: none
}

.preset-box .operation-btn:hover span[data-v-ce491cb7] {
  display: inline-block;
  margin-left: 4px
}

.preset-box .preset-wrap[data-v-ce491cb7] {
  overflow-y: scroll;
  flex-grow: 1;
  flex-shrink: 1
}

.preset-box .preset-wrap[data-v-ce491cb7]::-webkit-scrollbar {
  display: none
}

.preset-box .presets-list .preset-item[data-v-ce491cb7] {
  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
}

.preset-box .presets-list .preset-item[data-v-ce491cb7]:hover {
  background: var(--color-other-1)
}

.preset-box .presets-list .preset-item:hover .content-wrap[data-v-ce491cb7] {
  width: calc(100% - 84px)
}

.preset-box .presets-list .preset-item:hover .operation-wrap[data-v-ce491cb7] {
  display: inline-flex;
  display: flex;
  align-items: center;
  flex-shrink: 0
}

.preset-box .presets-list .preset-item .content-wrap[data-v-ce491cb7] {
  width: 100%
}

.preset-box .presets-list .preset-item .operation-wrap[data-v-ce491cb7] {
  display: none
}

.preset-box .presets-list .preset-item .operation-wrap svg[data-v-ce491cb7] {
  height: 20px;
  width: 20px;
  cursor: pointer;
  margin-right: 16px
}

.preset-box .presets-list .preset-item .operation-wrap svg[data-v-ce491cb7]:last-child {
  margin-right: 0
}

.preset-box .presets-list .preset-item .operation-wrap svg[data-v-ce491cb7]:hover {
  color: #6bf0dc
}

.preset-box .presets-list .preset-item-name[data-v-ce491cb7] {
  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
}

.preset-box .presets-list .preset-item-prompt[data-v-ce491cb7] {
  height: 22px;
  line-height: 22px;
  font-size: 13px;
  color: var(--color-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.phrase-box[data-v-ada89a42] {
  overflow-y: scroll;
  border-radius: 12px;
  flex-grow: 1
}

.phrase-box[data-v-ada89a42]::-webkit-scrollbar {
  display: none
}

.phrase-box .category[data-v-ada89a42] {
  margin-bottom: 32px
}

.phrase-box .category[data-v-ada89a42]:last-child {
  margin-bottom: 0
}

.phrase-box .category .category-caption[data-v-ada89a42] {
  color: var(--color-text-1);
  font-size: 14px;
  height: 24px;
  line-height: 24px;
  font-weight: 600;
  margin-bottom: 12px
}

.phrase-box .category .category-phrases[data-v-ada89a42] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.phrase-box .category .category-phrases .category-phrases-item[data-v-ada89a42] {
  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
}

.phrase-box .category .category-phrases .category-phrases-item.active[data-v-ada89a42] {
  background-color: var(--color-other-2);
  border: 1px solid var(--color-text-1)
}

.phrase-box .category .category-phrases .category-phrases-item.active.multiple[data-v-ada89a42] {
  position: relative;
  overflow: hidden
}

.phrase-box .category .category-phrases .category-phrases-item.active.multiple .multiple-tag[data-v-ada89a42] {
  width: 14px;
  height: 12px;
  border-radius: 4px 0;
  position: absolute;
  right: 0;
  bottom: 0;
  background: var(--color-text-1)
}

.phrase-box .category .category-phrases .category-phrases-item.active.multiple .multiple-tag[data-v-ada89a42] svg {
  width: 6.88px;
  height: 4.79px
}

body.mobile.lang-en .tabs-box[data-v-875e1f2b] {
  font-size: 14px
}

body.mobile .tabs[data-v-875e1f2b] {
  width: fit-content
}

body.browser-safari .tabs-box .tab[data-v-875e1f2b] {
  letter-spacing: -.5px
}

.tabs-box[data-v-875e1f2b] {
  position: relative;
  height: fit-content
}

.tabs-box .tabs[data-v-875e1f2b] {
  display: flex
}

.tabs-box .tabs .tab[data-v-875e1f2b] {
  cursor: pointer;
  position: relative
}

.tabs-box .tabs .tab .dot[data-v-875e1f2b] {
  position: absolute;
  top: 2px;
  right: -9px;
  margin-left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: var(--color-fill-red)
}

.tabs-box .tabs .tab.disabled[data-v-875e1f2b] {
  color: var(--color-text-4);
  cursor: not-allowed
}

.tabs-box .tabs.size-normal[data-v-875e1f2b] {
  gap: 24px;
  font-size: 16px;
  line-height: 26px
}

.tabs-box .tabs.size-small[data-v-875e1f2b] {
  gap: 24px;
  font-size: 14px;
  line-height: 24px
}

.tabs-box .tabs.size-big[data-v-875e1f2b] {
  gap: 32px;
  font-size: 16px;
  line-height: 26px
}

.tabs-box .bar[data-v-875e1f2b] {
  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-875e1f2b] {
  color: var(--color-text-2)
}

.tabs-box.theme-colorful .tab .tag[data-v-875e1f2b] {
  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-875e1f2b] {
  color: var(--color-theme-2);
  font-weight: 600
}

.tabs-box.theme-colorful .bar[data-v-875e1f2b] {
  background: var(--color-theme-2)
}

.tabs-box.theme-simple .tab[data-v-875e1f2b] {
  color: var(--color-text-2)
}

.tabs-box.theme-simple .tab.active[data-v-875e1f2b] {
  color: var(--color-theme-1);
  font-weight: 600
}

.tabs-box.theme-simple .bar[data-v-875e1f2b] {
  background: var(--color-theme-1)
}

.tabs-box.theme-member[data-v-875e1f2b] {
  line-height: 22px
}

.tabs-box.theme-member .tab[data-v-875e1f2b] {
  color: #fff;
  font-weight: 400
}

.tabs-box.theme-member .tab[data-v-875e1f2b]:hover {
  color: #fff
}

.tabs-box.theme-member .tab.active[data-v-875e1f2b] {
  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-875e1f2b] {
  height: 3px;
  margin-top: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #a7ff1a, #82fac2, #47d4ff)
}

.tabs-box.tab-underline[data-v-875e1f2b]: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-a4259ab4] {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%
}

.prompt-library-box .tabs-box[data-v-a4259ab4] {
  margin-bottom: 34px
}

.prompt-library-box .hasBorder[data-v-a4259ab4] {
  border-radius: 12px;
  border: 1px dashed var(---_, rgba(255, 255, 255, .2))
}

.prompt-box[data-v-a9ab4fd8] {
  position: relative
}

body.lang-en .delete[data-v-a9ab4fd8] {
  margin-left: 100px
}

body.mobile .prompt-guide[data-v-a9ab4fd8] {
  width: calc(100% - 36px)
}

.container[data-v-28a05f0d] {
  gap: 12px
}

.container .model-settings-title[data-v-28a05f0d] {
  font-size: 14px;
  font-weight: 600;
  line-height: 26px;
  color: var(--color-text-1);
  margin-bottom: 12px
}

.container .row[data-v-28a05f0d] {
  gap: 12px;
  line-height: 24px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-1)
}

.container .row .radio-group[data-v-28a05f0d] {
  display: flex;
  align-items: center;
  margin: 8px 0 12px;
  gap: 8px;
  line-height: 24px
}

.container .row .radio-group .skin[data-v-28a05f0d] {
  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-28a05f0d]:hover {
  border: 1px solid var(--color-border-focused)
}

.container .row .radio-group .skin .content[data-v-28a05f0d] {
  width: 76%;
  background: transparent;
  height: 100%;
  border-radius: 4px;
  margin-right: 8px
}

.container .row .radio-group .skin .select-radio-active[data-v-28a05f0d] {
  flex-shrink: 0
}

.container .row .radio-group .skin .select-radio[data-v-28a05f0d] {
  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-28a05f0d] {
  border: 1px solid var(--color-border-focused);
  background: var(--color-other-2)
}

.container .row .radio-group .radio-item[data-v-28a05f0d] {
  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-28a05f0d]:hover {
  border: 1px solid var(--color-border-focused)
}

.container .row .radio-group .radio-item .icon[data-v-28a05f0d] {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 1px solid #dfe0e2;
  border-radius: 16px
}

.container .row .radio-group .radio-item .active[data-v-28a05f0d] {
  border: 5px solid #72e528
}

.container .row .radio-group .radio-item-active[data-v-28a05f0d] {
  border: 1px solid var(--color-border-focused)
}

.tab[data-v-655d2725] {
  position: relative;
  z-index: 2;
  opacity: var(--property-title-alpha);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px
}

.tab .try-on-guide-use[data-v-655d2725] {
  cursor: pointer
}

.tab .try-on-guide-use a[data-v-655d2725] {
  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-655d2725] {
  margin-left: 4px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400
}

.model-setting-panel[data-v-9cef4328] {
  margin-bottom: 20px
}

#mark[data-v-c2bad998] {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: var(--color-fill-black-1);
  z-index: 2200
}

#mark .mark-step[data-v-c2bad998] {
  position: relative;
  background: var(--color-bg-popover);
  opacity: 1;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px
}

#mark .mark-step .mark-dot[data-v-c2bad998] {
  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-c2bad998] {
  position: absolute
}

#mark .mark-step .mark-line__vertical[data-v-c2bad998] {
  width: 0px;
  height: 36px;
  border-left: 1px dashed var(--color-border-hover)
}

#mark .mark-step .mark-line__horizontal[data-v-c2bad998] {
  height: 0px;
  width: 36px;
  border-top: 1px dashed var(--color-border-hover)
}

#mark .mark-step .mark-texts[data-v-c2bad998] {
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px
}

#mark .mark-step .title[data-v-c2bad998] {
  display: flex;
  flex-direction: column;
  gap: 4px
}

#mark .mark-step .title .mark-title[data-v-c2bad998] {
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  color: var(--color-text-1)
}

#mark .mark-step img[data-v-c2bad998],
#mark .mark-step video[data-v-c2bad998] {
  width: 100%;
  border-radius: 4px;
  display: block
}

#mark .mark-step .mark-bottom[data-v-c2bad998] {
  display: flex;
  justify-content: space-between;
  align-items: center
}

#mark .mark-step .mark-bottom .step[data-v-c2bad998] {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--color-text-2)
}

.component__timeline-scroll[data-v-3ca9eeca] {
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  position: relative
}

.component__timeline-scroll .component__timeline-scroll__inner[data-v-3ca9eeca] {
  display: flex;
  flex-direction: column;
  justify-content: flex-start
}

.component__timeline-scroll .component__timeline-scroll__slide-calliper[data-v-3ca9eeca] {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: 999;
  pointer-events: none
}

.component__timeline-scroll .component__timeline-scroll__slide-calliper .component__timeline-scroll__cursor[data-v-3ca9eeca] {
  position: absolute;
  pointer-events: all;
  cursor: col-resize;
  width: 12px;
  top: 12px;
  bottom: 0
}

.component__timeline-scroll .component__timeline-scroll__slide-calliper .component__timeline-scroll__cursor[data-v-3ca9eeca]:before,
.component__timeline-scroll .component__timeline-scroll__slide-calliper .component__timeline-scroll__cursor[data-v-3ca9eeca]:after {
  content: "";
  display: block;
  position: absolute
}

.component__timeline-scroll .component__timeline-scroll__slide-calliper .component__timeline-scroll__cursor[data-v-3ca9eeca]:before {
  width: 12px;
  height: 20px;
  background: linear-gradient(#d3e2f0, #fff);
  clip-path: polygon(0 0, 0 15px, 5px 20px, 7px 20px, 12px 15px, 12px 0)
}

.component__timeline-scroll .component__timeline-scroll__slide-calliper .component__timeline-scroll__cursor[data-v-3ca9eeca]:after {
  width: 2px;
  left: 5px;
  top: 12px;
  bottom: 0;
  background-color: #fff
}

.component__audio-slider[data-v-49c1ad40] {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: transparent;
  left: 0;
  top: 0;
  pointer-events: none
}

.component__audio-slider__bar--left[data-v-49c1ad40],
.component__audio-slider__bar--right[data-v-49c1ad40] {
  width: 10px;
  height: 100%;
  background-color: var(--color-text-1);
  position: absolute;
  left: 0;
  top: 0;
  cursor: ew-resize;
  pointer-events: all
}

.component__audio-slider__bar--left.disabled[data-v-49c1ad40],
.component__audio-slider__bar--right.disabled[data-v-49c1ad40] {
  display: none;
  background-color: var(--color-text-2);
  cursor: not-allowed
}

.component__audio-slider__bar--left[data-v-49c1ad40]:after,
.component__audio-slider__bar--right[data-v-49c1ad40]:after {
  content: "";
  width: 2px;
  height: 16px;
  border-radius: 2px;
  background-color: var(--color-text-5);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}

.component__audio-slider__bar--left[data-v-49c1ad40] {
  border-radius: 4px 0 0 4px
}

.component__audio-slider__bar--right[data-v-49c1ad40] {
  border-radius: 0 4px 4px 0
}

.component__audio-slider__center-border[data-v-49c1ad40] {
  height: 100%;
  box-sizing: border-box;
  border-top: 1px solid var(--color-text-1);
  border-bottom: 1px solid var(--color-text-1);
  pointer-events: none
}

.component__audio-slider__center-border.disabled[data-v-49c1ad40] {
  display: none
}

.component__lip-audio-track[data-v-b41d2655] {
  width: 100%;
  margin-top: 2px;
  background-color: #ffffff0a;
  box-sizing: border-box;
  overflow: hidden
}

.component__lip-audio-track .component__lip-audio-track__inner[data-v-b41d2655] {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  position: relative
}

.component__lip-audio-track .component__lip-audio-track__inner .component__lip-audio-track__clip[data-v-b41d2655] {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none
}

.component__lip-audio-track .component__lip-audio-track__inner .component__lip-audio-track__clip .component__lip-audio-track__move-event-handler[data-v-b41d2655] {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: all;
  cursor: move
}

.component__lip-audio-track.disabled .component__lip-audio-track__inner .component__lip-audio-track__clip.move[data-v-b41d2655] {
  cursor: default
}

.video-timeline__best-area-range[data-v-1e9679fc] {
  position: relative;
  width: 100%;
  height: 100%
}

.video-timeline__best-area-range .mask[data-v-1e9679fc] {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background-color: #00000080;
  -webkit-mask-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  mask-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-origin: border-box, border-box;
  mask-origin: border-box, border-box
}

.video-timeline__best-area-range .ranges-box[data-v-1e9679fc] {
  position: absolute;
  height: 100%;
  top: 0;
  border: 1px solid #fff;
  border-radius: 4px;
  overflow: hidden
}

.video-timeline__best-area-range .ranges-box .description[data-v-1e9679fc] {
  overflow: hidden;
  position: absolute;
  top: 4px;
  left: 4px;
  border-radius: 4px;
  background-color: #785acc;
  color: #fff;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  padding: 0 6px;
  white-space: nowrap
}

.custom-cursor[data-v-9a874bdf] {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20000;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: none;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center
}

.custom-cursor .tip[data-v-9a874bdf] {
  white-space: nowrap;
  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);
  position: absolute;
  left: 50%;
  transform: translate(-50%, -100%);
  top: -6px;
  cursor: none;
  pointer-events: none
}

.custom-cursor .tip[data-v-9a874bdf]:before {
  content: "";
  background-color: var(--color-bg-popover);
  border: none;
  border-bottom-right-radius: 2px;
  position: absolute;
  height: 10px;
  width: 10px;
  bottom: -5px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  z-index: -1
}

.audio-clipper[data-v-1429e5ca] {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  position: relative
}

.audio-clipper .audio-clipper__item[data-v-1429e5ca] {
  background: #ffffff14
}

.audio-clipper.allow-cut .audio-clipper__bar--left[data-v-1429e5ca],
.audio-clipper.allow-cut .audio-clipper__bar--right[data-v-1429e5ca] {
  display: block
}

.audio-clipper__item[data-v-1429e5ca] {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  left: var(--4552c5b0);
  width: var(--63cc5676);
  border-radius: 4px;
  overflow: hidden
}

.audio-clipper__volume-box[data-v-1429e5ca] {
  width: 100%;
  height: 100%;
  position: relative;
  pointer-events: none
}

.audio-clipper__volume[data-v-1429e5ca] {
  width: 100%;
  height: 9px;
  position: absolute;
  left: 0;
  bottom: var(--79b52f51);
  cursor: none;
  pointer-events: all
}

.audio-clipper__volume[data-v-1429e5ca]:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  top: 4px;
  cursor: none;
  background-color: var(--2ad4d2b2)
}

.audio-clipper__volume[data-v-1429e5ca]:hover:before {
  background-color: #74ff52
}

.audio-clipper__volume.disabled[data-v-1429e5ca] {
  cursor: default
}

.audio-clipper__volume.disabled[data-v-1429e5ca]:hover:before {
  cursor: default;
  background-color: var(--2ad4d2b2)
}

.audio-clipper__meta[data-v-1429e5ca] {
  position: absolute;
  left: 4px;
  top: 4px;
  border-radius: 4px;
  height: 28px;
  padding: 2px 8px 2px 2px;
  box-sizing: border-box;
  background: var(--color-gradient-button);
  display: flex;
  align-items: center;
  gap: 4px
}

.audio-clipper__avatar[data-v-1429e5ca] {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover
}

.audio-clipper__name[data-v-1429e5ca] {
  font-size: 12px;
  color: var(--color-text-5)
}

.audio-clipper__delete[data-v-1429e5ca] {
  cursor: pointer;
  position: absolute;
  pointer-events: all;
  right: 4px;
  top: 4px;
  border-radius: 4px;
  height: 28px;
  width: 28px;
  background: var(--color-gradient-button);
  display: flex;
  align-items: center;
  justify-content: center
}

.audio-clipper .waveform-container[data-v-1429e5ca] {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  --clip-top: 0;
  --clip-right: calc(100% - var(--4552c5b0) - var(--63cc5676));
  --clip-bottom: 0;
  --clip-left: var(--4552c5b0);
  clip-path: inset(var(--clip-top) var(--clip-right) var(--clip-bottom) var(--clip-left))
}

.audio-clipper .waveform-background[data-v-1429e5ca] {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: var(--2f50e0b2);
  border-radius: 4px
}

.audio-clipper .waveform[data-v-1429e5ca] canvas {
  width: 100%;
  height: var(--7503dd6e) !important;
  position: absolute;
  left: 0;
  bottom: 0
}

.component__video-timeline[data-v-b69aeeb8] {
  overflow: hidden;
  position: relative
}

.component__video-timeline canvas[data-v-b69aeeb8],
.component__video-timeline .component__video-timeline__covering[data-v-b69aeeb8] {
  position: absolute;
  width: 100%;
  border-radius: 4px
}

.component__video-timeline canvas[data-v-b69aeeb8] {
  z-index: 1
}

.component__video-timeline .component__video-timeline__covering[data-v-b69aeeb8] {
  z-index: 3
}

.component__video-timeline .component__video-timeline__loading[data-v-b69aeeb8] {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 2
}

.component__video-timeline .component__video-timeline__loading .desc[data-v-b69aeeb8] {
  font-size: 12px;
  margin-top: 6px
}

.component__scale-ruler[data-v-a870d3eb] {
  width: 100%;
  height: 48px;
  overflow: hidden
}

.component__scale-ruler canvas[data-v-a870d3eb] {
  width: 100%;
  height: 100%
}

.lip__video-preview[data-v-eea37570] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

.lip__video-preview .lip__video-preview__main[data-v-eea37570] {
  flex-shrink: 1;
  width: 100%;
  height: 100%;
  position: relative
}

.lip__video-preview .lip__video-preview__main .lip__video-preview__face-range-container[data-v-eea37570] {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none
}

.lip__video-preview .lip__video-preview__main .lip__video-preview__face-range-container .lip__video-preview__face-range-inner[data-v-eea37570] {
  object-fit: contain;
  width: 100%;
  height: 100%
}

.lip__video-preview .lip__video-preview__main .lip__video-preview__player-container[data-v-eea37570],
.lip__video-preview .lip__video-preview__main .lip__video-preview__loading-container[data-v-eea37570] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0
}

.lip__video-preview .lip__video-preview__main .lip__video-preview__player-container[data-v-eea37570] {
  z-index: 1
}

.lip__video-preview .lip__video-preview__main .lip__video-preview__player-container .lip__video-preview__player[data-v-eea37570] {
  pointer-events: none;
  width: 100%;
  height: 100%
}

.lip__video-preview .lip__video-preview__main .lip__video-preview__loading-container[data-v-eea37570] {
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center
}

.lip__video-preview .lip__video-preview__footer[data-v-eea37570] {
  flex-shrink: 0;
  width: 100%;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  background-color: var(--color-fill-light)
}

.lip__video-preview .lip__video-preview__footer .lip__video-preview__footer__left[data-v-eea37570] {
  display: flex;
  justify-content: flex-start;
  align-items: center
}

.lip__video-preview .lip__video-preview__footer .lip__video-preview__footer__left a[data-v-eea37570] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-text-1);
  margin-right: 6px;
  cursor: pointer
}

.lip__video-preview .lip__video-preview__footer .lip__video-preview__footer__left a[data-v-eea37570]:hover {
  background-color: #fff
}

.lip__video-preview .lip__video-preview__footer .lip__video-preview__footer__right[data-v-eea37570] {
  display: flex;
  justify-content: flex-end;
  align-items: center
}

.lip__video-preview .lip__video-preview__footer .lip__video-preview__footer__right .divider[data-v-eea37570] {
  width: 1px;
  height: 12px;
  background-color: var(--color-border-line);
  margin: 0 16px
}

.lip__video-preview .lip__video-preview__footer .lip__video-preview__footer__right .lip__video-preview__footer__origin-audio-switch[data-v-eea37570] {
  display: flex;
  align-items: center
}

.lip__video-preview .lip__video-preview__footer .lip__video-preview__footer__right .kling-switch[data-v-eea37570] {
  margin-left: 8px
}

.lip__video-preview .lip__video-preview__footer .lip__video-preview__footer__right .lip__video-preview__footer__scale-controller[data-v-eea37570] {
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #424547;
  border-radius: 8px;
  padding: 0 12px
}

.lip__video-preview .lip__video-preview__footer .lip__video-preview__footer__right .lip__video-preview__footer__scale-controller img[data-v-eea37570] {
  width: 16px;
  height: 16px
}

.lip__video-preview .lip__video-preview__footer .lip__video-preview__footer__right .lip__video-preview__footer__scale-controller[data-v-eea37570] .el-slider {
  width: 50px;
  margin: 0 12px;
  --el-slider-main-bg-color: var(--color-other-2)
}

.lip__video-preview .lip__video-preview__footer .lip__video-preview__footer__right .lip__video-preview__footer__scale-controller[data-v-eea37570] .el-slider__runway {
  background-color: #424547;
  height: 2px
}

.lip__video-preview .lip__video-preview__footer .lip__video-preview__footer__right .lip__video-preview__footer__scale-controller[data-v-eea37570] .el-slider__bar {
  background-color: transparent;
  height: 2px
}

.lip__video-preview .lip__video-preview__footer .lip__video-preview__footer__right .lip__video-preview__footer__scale-controller[data-v-eea37570] .el-slider__button-wrapper {
  top: -17px
}

.lip__video-preview .lip__video-preview__footer .lip__video-preview__footer__right .lip__video-preview__footer__scale-controller[data-v-eea37570] .el-slider__button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #5e6266
}

.lip__video-preview .lip__video-preview__footer .lip__video-preview__footer__right .lip__video-preview__footer__scale-controller[data-v-eea37570] .el-slider__button:hover {
  transform: scale(1.1)
}

.lip__video-prev__original-audio__tooltip[data-v-eea37570] {
  max-width: 200px
}

.lip-video-edit-section[data-v-05bed68d] {
  flex-shrink: 1;
  width: 100%;
  height: 100%;
  padding: 32px 0 32px 32px;
  display: flex;
  flex-direction: column
}

.lip-video-edit-section .video-preview-wrapper[data-v-05bed68d] {
  flex-shrink: 1;
  width: 100%;
  height: 100%;
  border-radius: 10px 10px 0 0;
  background: var(--color-fill-light);
  overflow: hidden
}

.lip-video-edit-section .timeline-wrapper[data-v-05bed68d] {
  flex-shrink: 0;
  width: 100%;
  background: #17181a;
  border-radius: 0 0 10px 10px
}

.lip-video-edit-section .timeline-wrapper .video-timeline[data-v-05bed68d] {
  padding: 8px 24px;
  background-color: #ffffff0a;
  position: relative
}

.lip-video-edit-section .timeline-wrapper .original-audio-track-wrapper[data-v-05bed68d] {
  width: 100%;
  height: 28px;
  position: relative
}

.lip-video-edit-section .timeline-wrapper .original-audio-track-wrapper .original-audio-track-inner[data-v-05bed68d] {
  position: absolute;
  height: 100%;
  top: 0
}

.lip-video-edit-section .timeline-wrapper .video-timeline__best-range-area[data-v-05bed68d] {
  position: absolute;
  border-radius: 4px;
  pointer-events: none;
  z-index: 2
}

.lip-video-edit-section .audio-track__empty[data-v-05bed68d] {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #ffffff14;
  color: #b0b4b8;
  font-size: 12px;
  overflow: hidden
}

.lip-video-edit-section .audio-track__empty .audio-track__empty-character[data-v-05bed68d] {
  position: absolute;
  left: 4px;
  top: 4px;
  border-radius: 4px;
  height: 28px;
  padding: 2px 8px 2px 2px;
  box-sizing: border-box;
  background: var(--color-gradient-button);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2
}

.lip-video-edit-section .audio-track__empty .audio-track__empty-character .avatar[data-v-05bed68d] {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover
}

.lip-video-edit-section .audio-track__empty .audio-track__empty-character .name[data-v-05bed68d] {
  font-size: 12px;
  color: var(--color-text-5);
  white-space: nowrap
}

.lip-video-edit-section .audio-track__empty .audio-track__empty-desc[data-v-05bed68d] {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center
}

.lip-video-edit-section .audio-track__empty .audio-track__empty-desc span[data-v-05bed68d] {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.character-select-container[data-v-7ebaa642] {
  width: 100%;
  display: flex;
  align-items: center
}

.character-select-container .character-list[data-v-7ebaa642] {
  width: 0;
  flex-grow: 1;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  padding-right: 48px;
  overflow-x: auto;
  scroll-behavior: smooth
}

.character-select-container .character-list[data-v-7ebaa642]::-webkit-scrollbar {
  display: none
}

.character-item[data-v-7ebaa642] {
  height: 48px;
  width: fit-content;
  border: 1px solid var(--color-border-component);
  border-radius: 8px;
  padding: 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 18px;
  color: var(--color-text-1)
}

.character-item.active[data-v-7ebaa642] {
  border-color: var(--color-theme-2);
  color: var(--color-theme-2)
}

.character-item-content[data-v-7ebaa642] {
  width: 100%;
  display: flex;
  align-items: center
}

.character-item-content .name[data-v-7ebaa642] {
  margin-left: 12px;
  margin-right: 12px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap
}

.character-item-content .avatar[data-v-7ebaa642] {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0
}

.character-item-content .avatar[data-v-7ebaa642] .el-image__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-3);
  background: var(--color-border-container);
  border-radius: 4px
}

.character-item-content .icon[data-v-7ebaa642] {
  flex-shrink: 0
}

.control-btns[data-v-7ebaa642] {
  width: 72px;
  height: 100%;
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  color: var(--color-text-1)
}

.control-btns div[data-v-7ebaa642] {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-other-2);
  border-radius: 18px;
  cursor: pointer;
  z-index: 1
}

.control-btns div.disabled[data-v-7ebaa642] {
  color: var(--color-text-3);
  cursor: not-allowed
}

.control-btns[data-v-7ebaa642]:before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 136px;
  background: linear-gradient(90deg, #17181a00, #0e0f0f 48%);
  z-index: 0
}

.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-7899f84b] {
  margin: 24px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-1);
  display: flex;
  align-items: center;
  gap: 16px
}

.speed-box .title[data-v-7899f84b] {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.speed-box .speed-show[data-v-7899f84b] {
  width: 64px;
  height: 32px;
  background: var(--color-other-1);
  border-radius: 8px
}

.speed-box .slider-box[data-v-7899f84b] {
  flex: 1;
  display: flex
}

.speed-box .slider-box .icon[data-v-7899f84b] {
  width: 32px;
  height: 32px;
  background: var(--color-other-1);
  color: var(--color-text-1);
  cursor: pointer
}

.speed-box .slider-box .slider[data-v-7899f84b] {
  flex: 1
}

body.mobile .audio-box .item[data-v-ca5c1726] {
  min-width: 154px
}

.audio-box[data-v-ca5c1726] {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px
}

.audio-box .item[data-v-ca5c1726] {
  height: 36px;
  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-ca5c1726] {
  width: 36px;
  height: 36px;
  overflow: hidden;
  flex-shrink: 0
}

.audio-box .item__left .avatar[data-v-ca5c1726] {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.audio-box .item__left .avatar[data-v-ca5c1726] .el-image__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-3);
  background-color: transparent
}

.audio-box .item__right[data-v-ca5c1726] {
  width: 36px;
  height: 36px;
  color: var(--color-text-2);
  flex-shrink: 0
}

.audio-box .item__right[data-v-ca5c1726] svg {
  width: 16px
}

.audio-box .item__middle[data-v-ca5c1726] {
  width: 0;
  flex: 1;
  display: flex;
  gap: 8px;
  padding: 6px 12px
}

.audio-box .item__middle .title[data-v-ca5c1726] {
  font-size: 12px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.audio-box .item__middle .new-tag[data-v-ca5c1726] {
  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__middle .last-used[data-v-ca5c1726] {
  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-ca5c1726] {
  color: var(--color-text-3);
  font-size: 12px
}

.audio-box .item-active[data-v-ca5c1726] {
  border: 1px solid var(--color-border-focused);
  color: var(--color-text-1)
}

.tabs-box[data-v-07cbbc9a] {
  width: 100%;
  margin: 12px 0 0;
  overflow: hidden;
  position: relative;
  height: 32px
}

.tabs-box[data-v-07cbbc9a]::-webkit-scrollbar {
  display: none
}

.tabs-box .tabs[data-v-07cbbc9a] {
  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
}

.tabs-box .tabs__item[data-v-07cbbc9a] {
  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
}

.tabs-box .tabs__item[data-v-07cbbc9a]:hover {
  border: 1px solid var(--color-border-hover)
}

.tabs-box .tabs__item-active[data-v-07cbbc9a] {
  color: var(--color-text-1);
  background: var(--color-other-2);
  font-weight: 600
}

.tabs-box .tabs__item-active[data-v-07cbbc9a]:hover {
  border: 1px solid transparent
}

.tabs-box .control-btns[data-v-07cbbc9a] {
  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)
}

.tabs-box .control-btns div[data-v-07cbbc9a] {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-other-2);
  border-radius: 18px;
  cursor: pointer;
  z-index: 1
}

.tabs-box .control-btns[data-v-07cbbc9a]:before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100px;
  background: linear-gradient(90deg, #17181a00, #17181a 48%);
  z-index: 0
}

.read-top[data-v-708adc1e] {
  width: 100%;
  height: 144px;
  border-radius: 12px;
  position: relative;
  padding: 12px 16px;
  border: var(--color-border-container) 1px solid
}

.read-top textarea[data-v-708adc1e] {
  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-708adc1e]::placeholder {
  color: var(--color-text-3);
  font-size: 12px
}

.read-top textarea[data-v-708adc1e]::-webkit-scrollbar {
  display: none !important
}

.read-top .textarea-bottom[data-v-708adc1e] {
  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-708adc1e] {
  color: var(--color-text-2);
  line-height: 24px;
  font-size: 14px
}

.read-top .textarea-bottom__icon[data-v-708adc1e] {
  width: 16px;
  height: 16px;
  cursor: pointer
}

.read-top .textarea-bottom .play-icon[data-v-708adc1e] {
  cursor: pointer
}

.read-top .textarea-bottom .play-icon[data-v-708adc1e] path {
  fill: var(--color-text-1);
  stroke: var(--color-text-1)
}

.format[data-v-708adc1e] {
  color: red;
  font-size: 13px
}

.recommend-audio__item[data-v-4c37455d] {
  flex-grow: 1;
  width: 0;
  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-4c37455d] {
  border: 1px solid var(--color-border-focused)
}

.recommend-audio__item.active[data-v-4c37455d] path {
  fill: var(--color-text-1);
  stroke: var(--color-text-1)
}

.recommend-audio__item .right[data-v-4c37455d] {
  width: 32px;
  height: 32px;
  background: var(--color-other-1);
  cursor: pointer
}

.recommend-audio__item .right.active[data-v-4c37455d] {
  color: var(--color-text-3);
  cursor: not-allowed
}

.recommend-audio__item .click-area[data-v-4c37455d] {
  cursor: pointer;
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
  color: var(--color-text-2)
}

.recommend-audio__item .click-area .left[data-v-4c37455d] {
  width: 32px;
  height: 32px;
  background: var(--color-other-1);
  flex-shrink: 0
}

.recommend-audio__item .click-area .text[data-v-4c37455d] {
  flex: 1;
  margin: 0 12px;
  overflow: hidden
}

.recommend-audio__item .click-area .text-play[data-v-4c37455d] {
  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-4c37455d] {
  position: absolute;
  left: 0;
  white-space: nowrap
}

.recommend-audio[data-v-498a1cfe] {
  margin-top: 32px;
  width: 100%;
  display: flex;
  gap: 12px;
  flex-direction: column
}

.recommend-audio__header[data-v-498a1cfe] {
  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-498a1cfe] {
  width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px
}

.recommend-audio__box--wrap[data-v-498a1cfe] {
  display: flex;
  align-items: center
}

.audio[data-v-8a29f259] {
  width: 100%
}

.audio .audio-control[data-v-8a29f259] {
  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-8a29f259] {
  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-8a29f259] {
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px
}

.audio .audio-control .control-right .top[data-v-8a29f259] {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.audio .audio-control .control-right .top .name[data-v-8a29f259] {
  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-8a29f259] {
  cursor: pointer;
  color: #f9fbfc
}

.audio .audio-progress[data-v-8a29f259] {
  height: 20px;
  display: flex;
  align-items: center;
  gap: 8px
}

.audio .audio-progress .time[data-v-8a29f259] {
  width: 32px;
  color: var(--color-text-1);
  font-size: 12px;
  text-align: center
}

.upload-area[data-v-ce584a47] {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--color-border-component);
  overflow: hidden
}

.main[data-v-14229a3e] {
  margin-top: 10px;
  flex-grow: 1;
  height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: 8px;
  background-color: var(--color-bg-primary);
  overflow: hidden
}

.main-header[data-v-14229a3e] {
  padding: 12px;
  box-sizing: border-box
}

.main-content[data-v-14229a3e] {
  padding: 0 12px;
  flex: 1;
  height: 0;
  width: 100%
}

.main-content .read-box[data-v-14229a3e] {
  overflow: hidden;
  display: flex;
  flex-direction: column
}

.main-content .read-box .read-bottom[data-v-14229a3e] {
  margin-top: 28px
}

.main-content .read-box .read-bottom__title[data-v-14229a3e] {
  font-size: 14px;
  font-weight: 600;
  height: 24px;
  color: var(--color-text-1)
}

.main-content .audio-list-wrapper[data-v-14229a3e] {
  background-color: var(--color-bg-page);
  border-radius: 8px;
  margin-top: 12px;
  padding: 12px
}

.main-content .audio-list-wrapper[data-v-14229a3e] .el-scrollbar__bar.is-vertical {
  right: 4px
}

.main[data-v-14229a3e] .secondary-tabs {
  width: 100% !important
}

.footer[data-v-14229a3e] {
  margin-top: 12px;
  width: 100%;
  height: 68px;
  padding: 0 16px;
  box-sizing: border-box;
  border-top: 1px solid var(--color-border-container);
  background-color: var(--color-bg-primary);
  display: flex;
  align-items: center;
  justify-content: end
}

.footer .add-btn[data-v-14229a3e] {
  position: relative
}

.footer .adding[data-v-14229a3e] {
  position: absolute;
  left: calc(50% - 8px);
  top: calc(50% - 8px)
}

.lip-audio-setting[data-v-5d076e92] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-sizing: border-box
}

.lip-audio-popover[data-v-8c5a624f] {
  position: relative;
  width: 100%;
  min-width: 1280px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-page)
}

.lip-audio-popover .header[data-v-8c5a624f],
.lip-audio-popover .main[data-v-8c5a624f],
.lip-audio-popover .footer[data-v-8c5a624f] {
  width: 100%;
  flex-shrink: 0
}

.lip-audio-popover .header[data-v-8c5a624f] {
  padding: 16px 32px;
  border-bottom: 1px solid var(--color-border-frame);
  display: flex;
  justify-content: flex-start;
  align-items: center
}

.lip-audio-popover .header .back-icon[data-v-8c5a624f] {
  cursor: pointer;
  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)
}

.lip-audio-popover .header .title[data-v-8c5a624f] {
  margin-left: 12px;
  font-size: 18px;
  line-height: 32px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.lip-audio-popover .main[data-v-8c5a624f] {
  flex-shrink: 1;
  height: 100%;
  display: flex
}

.lip-audio-popover .main .left[data-v-8c5a624f] {
  flex-shrink: 1;
  width: 100%;
  height: 100%;
  padding: 32px 0 32px 32px;
  display: flex;
  flex-direction: column
}

.lip-audio-popover .main .left .video-preview-wrapper[data-v-8c5a624f] {
  flex-shrink: 1;
  width: 100%;
  height: 100%;
  border-radius: 10px 10px 0 0;
  background: var(--color-fill-light);
  overflow: hidden
}

.lip-audio-popover .main .left .timeline-wrapper[data-v-8c5a624f] {
  flex-shrink: 0;
  width: 100%;
  background: #17181a;
  border-radius: 0 0 10px 10px
}

.lip-audio-popover .main .left .original-audio-track-wrapper[data-v-8c5a624f] {
  width: 100%;
  height: 28px;
  background-color: #ffffff0a;
  padding: 0 24px 8px
}

.lip-audio-popover .main .left .audio-track__empty[data-v-8c5a624f] {
  width: 100%;
  height: 100%;
  background-color: #ffffff14;
  color: #b0b4b8;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px
}

.lip-audio-popover .main .right[data-v-8c5a624f] {
  flex-shrink: 0;
  width: 544px;
  height: 100%;
  padding: 32px;
  box-sizing: border-box
}

.lip-audio-popover .footer[data-v-8c5a624f] {
  border-top: 1px solid var(--color-border-frame);
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.lip-audio-popover .footer .tips[data-v-8c5a624f] {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: var(--color-text-2);
  gap: 4px
}

.lip-audio-popover .footer .options[data-v-8c5a624f] {
  margin-top: 0;
  gap: 8px
}

.video-to-lip__panel-audio-info .audio-info-header[data-v-531553c3] {
  width: 100%;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.video-to-lip__panel-audio-info .audio-info-header .audio-info-title[data-v-531553c3] {
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: 600
}

.video-to-lip__panel-audio-info .audio-info-header .success[data-v-531553c3] {
  color: var(--color-theme-2)
}

.video-to-lip__panel-audio-info .audio-info-block[data-v-531553c3] {
  width: 100%;
  height: 64px;
  border: 1px solid var(--color-border-container);
  border-radius: 8px;
  padding: 0 16px 0 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer
}

.video-to-lip__panel-audio-info .audio-info-block .audio-info__left[data-v-531553c3] {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden
}

.video-to-lip__panel-audio-info .audio-info-block .audio-info__left img[data-v-531553c3] {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.video-to-lip__panel-audio-info .audio-info-block .audio-info__middle[data-v-531553c3] {
  flex-shrink: 1;
  width: 100%;
  margin-left: 12px
}

.video-to-lip__panel-audio-info .audio-info-block .audio-info__middle .character-name[data-v-531553c3] {
  margin-bottom: 4px
}

.video-to-lip__panel-audio-info .audio-info-block .audio-info__middle .labels[data-v-531553c3] {
  display: flex;
  justify-content: flex-start;
  align-items: center
}

.video-to-lip__panel-audio-info .audio-info-block .audio-info__middle .labels span[data-v-531553c3] {
  height: 24px;
  line-height: 24px;
  background-color: #ffffff1f;
  border-radius: 4px;
  padding: 0 8px;
  color: #fff;
  margin-right: 4px
}

.video-to-lip__panel-audio-info.disabled[data-v-531553c3] {
  cursor: not-allowed;
  color: var(--color-text-3)
}

.video-to-lip__panel-audio-info.disabled .audio-info-block[data-v-531553c3] {
  cursor: not-allowed
}

.confirm-box[data-v-6546bdc0] {
  padding: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-1)
}

.confirm-box .btns[data-v-6546bdc0] {
  margin-top: 12px;
  gap: 8px;
  justify-content: flex-end
}

.item[data-v-6546bdc0] {
  position: relative;
  padding: 3px;
  border: solid 1px transparent;
  aspect-ratio: 1/1;
  border-radius: 4px
}

.item img[data-v-6546bdc0] {
  width: 48px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 4px;
  display: block
}

.item .tag[data-v-6546bdc0] {
  position: absolute;
  bottom: 4px;
  left: 4px;
  border-radius: 4px;
  background: var(--color-fill-black-1);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  height: 20px;
  padding: 0 4px;
  color: var(--color-text-1);
  font-size: 12px
}

.item-active[data-v-6546bdc0] {
  border: solid 1px var(--color-theme-2);
  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-1060b9cf] {
  margin-top: 32px
}

.audio-panel-box[data-v-1060b9cf] .title {
  background: var(--color-other-1);
  border-radius: 8px;
  padding: 8px 16px;
  height: 40px
}

.audio-panel-box[data-v-1060b9cf] .title span {
  font-size: 14px
}

body.mobile .recommend-video-box .content[data-v-1060b9cf] {
  overflow-x: auto
}

body.mobile .recommend-video-box .content[data-v-1060b9cf]::-webkit-scrollbar {
  display: none
}

.role-video-box[data-v-1060b9cf] {
  border: 1px solid var(--color-border-container);
  border-radius: 8px;
  overflow: hidden
}

.role-video-box .top[data-v-1060b9cf] {
  height: 200px
}

.role-video-box .top .video-box[data-v-1060b9cf] {
  position: relative;
  width: 100%;
  height: 200px;
  background: var(--color-bg-page);
  padding: 8px;
  box-sizing: border-box
}

.role-video-box .top .video-box .buttons[data-v-1060b9cf] {
  display: flex;
  gap: 12px;
  position: absolute;
  top: 8px;
  right: 8px;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
  background: var(--color-other-6);
  padding: 0 8px;
  height: 28px;
  color: var(--color-text-1)
}

.role-video-box .error-reason[data-v-1060b9cf] {
  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-1060b9cf] {
  width: 16px;
  height: 16px;
  flex-shrink: 0
}

.role-video-box .recommend-video-box[data-v-1060b9cf] {
  border-top: 1px solid var(--color-border-container);
  padding: 16px;
  color: var(--color-text-1);
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer
}

.role-video-box .recommend-video-box span[data-v-1060b9cf] {
  flex-shrink: 0
}

.role-video-box .recommend-video-box .content[data-v-1060b9cf] {
  gap: 2px;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr)
}

.extra-line[data-v-1060b9cf] {
  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-1060b9cf] {
  margin-left: auto;
  color: var(--color-text-1)
}

.extra-line svg[data-v-1060b9cf] {
  margin-right: 8px
}

.extra-line.disabled[data-v-1060b9cf] {
  cursor: not-allowed;
  opacity: .5
}

.face-checking[data-v-e26c86f2] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000c;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center
}

.face-checking .checking-content[data-v-e26c86f2] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--color-text-1);
  font-size: 16px
}

.face-checking .checking-content .progress[data-v-e26c86f2] {
  width: 300px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-other-5)
}

.face-checking .checking-content .progress .progress-bar[data-v-e26c86f2] {
  height: 100%;
  border-radius: inherit;
  background: var(--color-fill-white)
}

.item[data-v-c324aa00] {
  cursor: pointer;
  position: relative;
  border-radius: 12px;
  border: 1px solid transparent;
  height: var(--531348af);
  overflow: hidden
}

.item .img[data-v-c324aa00] {
  width: var(--bf2b3584);
  border-radius: 4px;
  display: block
}

.item .video[data-v-c324aa00] {
  border-radius: 4px;
  width: var(--bf2b3584);
  top: 0;
  z-index: 0
}

.item .title[data-v-c324aa00] {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 64px;
  padding: 16px;
  background: linear-gradient(180deg, #0f0f0f00, #0f0f0f);
  display: flex;
  align-items: center;
  gap: 8px
}

.item .title .text[data-v-c324aa00] {
  line-height: 26px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-1);
  white-space: nowrap
}

.item .title .hot-tag[data-v-c324aa00] {
  border-radius: 6px;
  background: var(---, linear-gradient(90deg, #f70 -15.32%, #ff2b0a 100%));
  display: flex;
  align-items: center
}

.active[data-v-c324aa00] {
  border: 1px solid var(--color-border-focused);
  padding: 3px
}

.active .video[data-v-c324aa00] {
  border-radius: 4px
}

.prompt-area .title[data-v-f56af433] {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-text-1)
}

.effect-switch[data-v-89fa1013] {
  margin-top: -20px;
  border-radius: 8px;
  background: var(--color-other-1);
  padding: 0 16px;
  height: 40px;
  display: flex;
  align-items: center;
  color: var(--color-text-1);
  font-size: 14px;
  line-height: 24px
}

.effect-switch .label[data-v-89fa1013] {
  margin-right: 4px
}

.effect-switch .switch[data-v-89fa1013] {
  margin-left: auto;
  margin-right: 0
}

.effect-switch .value[data-v-89fa1013] {
  margin-left: 16px
}

.effect-switch-video[data-v-89fa1013] {
  max-width: 240px;
  max-height: 240px;
  object-fit: contain
}

.block[data-v-d3277b44] {
  height: 150px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  color: var(--color-text-2);
  font-size: 14px;
  line-height: 24px;
  text-align: center
}

.uploader-area .tip-container[data-v-4c9853d3] {
  height: 100px;
  padding: 10px 12px 10px 0;
  border-radius: 8px;
  background: var(--color-other-1);
  display: flex;
  gap: 12px
}

.uploader-area .tip-container img[data-v-4c9853d3] {
  margin-left: 13px;
  border-radius: 8px
}

.uploader-area .tip-container .tip[data-v-4c9853d3] {
  height: 100%;
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px
}

.uploader-area .tip-container .tip .tip-title[data-v-4c9853d3] {
  color: var(--color-text-1);
  font-weight: 600
}

.uploader-area .tip-container .tip .desc[data-v-4c9853d3] {
  color: var(--color-text-2);
  font-size: 12px;
  line-height: 20px
}

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

.uploader-area .title .example-tip[data-v-4c9853d3] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  color: var(--color-text-2)
}

.uploader-area .tabs[data-v-4c9853d3] {
  width: 100%;
  margin: 12px 0
}

.uploader-area .uploader[data-v-4c9853d3] {
  border-radius: 8px;
  border: 1px solid var(--color-border-container)
}

.uploader-area .tip-container[data-v-d8a4a26c],
.prompt-area .tip-container[data-v-d8a4a26c] {
  margin-bottom: 12px;
  height: 100px;
  padding: 10px 12px 10px 0;
  border-radius: 8px;
  background: var(--color-other-1);
  display: flex;
  gap: 12px
}

.uploader-area .tip-container img[data-v-d8a4a26c],
.prompt-area .tip-container img[data-v-d8a4a26c] {
  margin-left: 13px;
  max-height: 100%;
  border-radius: 8px
}

.uploader-area .tip-container .tip[data-v-d8a4a26c],
.prompt-area .tip-container .tip[data-v-d8a4a26c] {
  height: 100%;
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px
}

.uploader-area .tip-container .tip .tip-title[data-v-d8a4a26c],
.prompt-area .tip-container .tip .tip-title[data-v-d8a4a26c] {
  color: var(--color-text-1);
  font-weight: 600
}

.uploader-area .tip-container .tip .desc[data-v-d8a4a26c],
.prompt-area .tip-container .tip .desc[data-v-d8a4a26c] {
  color: var(--color-text-2);
  font-size: 12px;
  line-height: 20px
}

.uploader-area .title[data-v-d8a4a26c],
.prompt-area .title[data-v-d8a4a26c] {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-text-1)
}

.uploader-area .uploader[data-v-d8a4a26c],
.prompt-area .uploader[data-v-d8a4a26c] {
  border-radius: 8px;
  border: 1px solid var(--color-border-container)
}

body.mobile .effect-dialog-content[data-v-dfdc35cd] {
  height: 60vh
}

.swap-icon[data-v-dfdc35cd] {
  z-index: 2;
  position: absolute;
  right: 12px;
  top: 12px;
  cursor: pointer
}

.uploader-area .tip-container[data-v-dfdc35cd],
.prompt-area .tip-container[data-v-dfdc35cd] {
  margin-bottom: 12px;
  height: 100px;
  padding: 10px 12px 10px 0;
  border-radius: 8px;
  background: var(--color-other-1);
  display: flex;
  gap: 12px
}

.uploader-area .tip-container img[data-v-dfdc35cd],
.prompt-area .tip-container img[data-v-dfdc35cd] {
  margin-left: 13px;
  border-radius: 8px
}

.uploader-area .tip-container .tip[data-v-dfdc35cd],
.prompt-area .tip-container .tip[data-v-dfdc35cd] {
  height: 100%;
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px
}

.uploader-area .tip-container .tip .tip-title[data-v-dfdc35cd],
.prompt-area .tip-container .tip .tip-title[data-v-dfdc35cd] {
  color: var(--color-text-1);
  font-weight: 600
}

.uploader-area .tip-container .tip .desc[data-v-dfdc35cd],
.prompt-area .tip-container .tip .desc[data-v-dfdc35cd] {
  color: var(--color-text-2);
  font-size: 12px;
  line-height: 20px
}

.uploader-area .title[data-v-dfdc35cd],
.prompt-area .title[data-v-dfdc35cd] {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-text-1)
}

.uploader-area .uploader[data-v-dfdc35cd],
.prompt-area .uploader[data-v-dfdc35cd] {
  border-radius: 8px;
  border: 1px solid var(--color-border-container)
}

.title[data-v-8653df91] {
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-1);
  margin-bottom: 12px
}

.current-effect[data-v-8653df91] {
  height: 64px;
  margin-bottom: 32px;
  padding: 0 16px 0 8px;
  border-radius: 8px;
  border: 1px solid var(--color-border-container);
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-1);
  cursor: pointer
}

.current-effect .img[data-v-8653df91] {
  width: 48px;
  height: 48px;
  border-radius: 8px
}

.current-effect .icon[data-v-8653df91] {
  margin-left: auto
}

.effects[data-v-8653df91] {
  max-height: 100%;
  overflow: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px
}

.effects[data-v-8653df91]::-webkit-scrollbar {
  display: none
}

.container[data-v-8653df91] {
  display: flex;
  flex-direction: column;
  gap: 32px
}

h1[data-v-a999cf72] {
  font-size: 22px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: .02em;
  color: var(--color-text-1)
}

p[data-v-a999cf72] {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  margin-top: 24px
}

ol[data-v-a999cf72] {
  border-radius: 16px;
  border: dashed 1px #3b3c4d;
  margin-top: 16px;
  padding: 12px 24px 12px 40px
}

ol li[data-v-a999cf72] {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  margin-top: 8px;
  margin-bottom: 8px;
  color: var(--color-text-1)
}

.description[data-v-a999cf72] {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-text-2);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px
}

.btn[data-v-a999cf72] {
  margin-top: 24px;
  margin-bottom: 12px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: 12px
}

.cropper-wrapper[data-v-9ef4acb5] {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative
}

.cropper-wrapper .thumb-list[data-v-9ef4acb5] {
  display: flex;
  gap: 8px;
  margin-top: 24px
}

.cropper-wrapper .thumb-list .thumb-item[data-v-9ef4acb5] {
  width: 80px;
  height: 80px;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid transparent;
  cursor: pointer;
  filter: brightness(.7)
}

.cropper-wrapper .thumb-list .thumb-item.active[data-v-9ef4acb5] {
  filter: brightness(1.05);
  border-color: var(--color-border-focused)
}

.cropper-wrapper .thumb-list .thumb-item img[data-v-9ef4acb5] {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.cropper-wrapper .thumb-list .thumb-item .element-body[data-v-9ef4acb5] {
  text-align: center;
  position: absolute;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background-color: var(--color-fill-black-1);
  bottom: 0;
  width: 100%;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--color-text-1)
}

.cropper-wrapper .loading-wrapper[data-v-9ef4acb5] {
  position: absolute;
  width: 100%;
  left: 0;
  top: -12px;
  bottom: 0;
  background-color: var(--color-fill-black-3);
  cursor: not-allowed
}

.cropper-wrapper .loading-wrapper .loading[data-v-9ef4acb5] {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  pointer-events: none
}

.cropper-wrapper .container[data-v-9ef4acb5] {
  width: 732px;
  height: 492px;
  background-color: var(--color-bg-primary)
}

.cropper-wrapper .container .operation[data-v-9ef4acb5] {
  position: absolute;
  color: var(--color-text-1);
  top: 8px;
  right: 8px;
  text-align: center;
  border-radius: 8px;
  padding: 2px 8px;
  display: flex;
  gap: 2px;
  background-color: var(--color-other-6)
}

.cropper-wrapper .container .operation a[data-v-9ef4acb5] {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

.cropper-wrapper .container .operation a[data-v-9ef4acb5]:active {
  filter: brightness(.9)
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-view-box {
  outline: 1px dashed var(--color-border-focused)
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-hide {
  display: none
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-modal {
  background-color: var(--color-bg-primary)
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-bg {
  background: none !important
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-line {
  background: none
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-line.line-e,
.cropper-wrapper .container[data-v-9ef4acb5] .cropper-line.line-w {
  width: 8px
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-line.line-n,
.cropper-wrapper .container[data-v-9ef4acb5] .cropper-line.line-s {
  height: 8px
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-line.line-e {
  right: -4px
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-line.line-w {
  left: -4px
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-line.line-n {
  top: -4px
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-line.line-s {
  bottom: -4px
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-point {
  width: 8px;
  height: 8px;
  border: 2px solid var(--color-fill-white);
  background-color: var(--color-fill-black-3);
  opacity: 1
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-point.point-ne {
  right: -4px;
  top: -4px
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-point.point-nw {
  top: -4px;
  left: -4px
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-point.point-sw {
  bottom: -4px;
  left: -4px
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-point.point-se {
  bottom: -4px;
  right: -4px
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-point.point-e {
  right: -4px;
  margin-top: -8px
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-point.point-w {
  left: -4px;
  margin-top: -8px
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-point.point-n {
  top: -4px;
  margin-left: -8px
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-point.point-s {
  bottom: -4px;
  margin-left: -8px
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-point.point-e,
.cropper-wrapper .container[data-v-9ef4acb5] .cropper-point.point-w {
  height: 16px;
  width: 8px
}

.cropper-wrapper .container[data-v-9ef4acb5] .cropper-point.point-n,
.cropper-wrapper .container[data-v-9ef4acb5] .cropper-point.point-s {
  width: 16px;
  height: 8px
}

.cut-dialog-tip[data-v-9ef4acb5] {
  margin: -8px 0 24px;
  color: var(--color-text-2);
  line-height: 24px
}

.footer[data-v-9ef4acb5] {
  width: 100%;
  margin-top: 24px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: 12px
}

.upload-guide[data-v-d1e1738b] {
  display: flex;
  align-items: center
}

.upload-guide .upload-guide-mark-dot[data-v-d1e1738b] {
  background: var(--color-fill-black-1);
  outline: solid 3px var(--color-border-hover);
  width: 8px;
  height: 8px;
  border-radius: 13px
}

.upload-guide .upload-guide-mark-line[data-v-d1e1738b] {
  height: 0px;
  width: 36px;
  border-top: 1px dashed var(--color-border-hover)
}

.upload-guide .upload-guide-mark-content[data-v-d1e1738b] {
  width: 386px;
  min-height: 106px;
  gap: 8px;
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--box-shadow-container);
  background: var(--color-bg-popover);
  border: 1px solid rgba(255, 255, 255, .24)
}

.upload-guide .upload-guide-mark-content p[data-v-d1e1738b] {
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-1)
}

.upload-guide .upload-guide-mark-content .select-box[data-v-d1e1738b] {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer
}

.upload-guide .upload-guide-mark-content .select-box .uncheck[data-v-d1e1738b] {
  color: var(--color-border-component)
}

.upload-guide .upload-guide-mark-content .select-box p[data-v-d1e1738b] {
  font-weight: 400;
  font-size: 14px;
  color: var(--color-text-2)
}

.recommend-box[data-v-a590c04c] {
  border-top: 1px solid var(--color-border-frame);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px
}

.recommend-box .recommend-title[data-v-a590c04c] {
  flex-shrink: 0;
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: 400
}

.recommend-box .recommend-container[data-v-a590c04c] {
  flex: 1;
  display: flex;
  gap: 8px
}

.recommend-box .recommend-container .item[data-v-a590c04c] {
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 4px;
  height: 48px;
  width: 48px
}

.recommend-box .recommend-container .item-bg[data-v-a590c04c] {
  position: relative;
  top: -2px;
  right: -1px;
  transform: rotate(12deg);
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: var(--color-other-5)
}

.recommend-box .recommend-container .item .image[data-v-a590c04c] {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.recommend-box .recommend-container .item-count[data-v-a590c04c] {
  position: absolute;
  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
}

.multi-reference-recommends-tip .image-group-grid {
  display: grid;
  gap: 4px;
  grid-template-rows: 120px 120px
}

.multi-reference-recommends-tip .image-group-grid-column-2 {
  grid-template-columns: 120px 120px
}

.multi-reference-recommends-tip .image-group-grid-column-3 {
  grid-template-columns: 120px 120px 120px
}

.multi-reference-recommends-tip .image-group-flex {
  display: flex;
  gap: 4px
}

.multi-reference-recommends-tip .image-container {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 4px;
  overflow: hidden
}

.multi-reference-recommends-tip .image-container img {
  width: 120px;
  height: 120px;
  display: block
}

.multi-reference-recommends-tip .image-container .caption {
  bottom: 8px;
  left: 8px;
  position: absolute;
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  background-color: var(--color-other-6)
}

.image-ready[data-v-ac51bd8c] {
  flex: 1;
  height: 104px;
  position: relative;
  overflow: hidden;
  border-radius: 6px
}

.image-ready:hover .operation[data-v-ac51bd8c] {
  opacity: 1
}

.image-ready img.preview-background[data-v-ac51bd8c] {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  filter: blur(24px);
  opacity: .5
}

.image-ready img[data-v-ac51bd8c] {
  position: absolute;
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block
}

.image-ready .operation[data-v-ac51bd8c] {
  transition: all .2s;
  position: absolute;
  color: var(--color-text-1);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: transparent;
  border-radius: 8px;
  padding: 2px 8px;
  display: flex;
  gap: 2px;
  opacity: 0;
  background-color: var(--color-other-6)
}

.image-ready .operation a[data-v-ac51bd8c] {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

.image-ready .operation a[data-v-ac51bd8c]:active {
  filter: brightness(.9)
}

.upload-grid[data-v-c300e02d] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  flex: 1
}

.upload-grid .image-ready[data-v-c300e02d] {
  position: relative;
  background-color: var(--color-fill-light);
  overflow: hidden;
  border-radius: 6px;
  width: 100%;
  height: 100%
}

.upload-grid .image-ready:hover .operation[data-v-c300e02d] {
  opacity: 1
}

.upload-grid .image-ready img.preview-background[data-v-c300e02d] {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: calc(100% - 24px);
  filter: blur(24px);
  opacity: .5
}

.upload-grid .image-ready img[data-v-c300e02d] {
  position: absolute;
  object-fit: contain;
  object-position: center;
  width: 100%;
  display: block;
  height: calc(100% - 24px)
}

.upload-grid .image-ready .element-body[data-v-c300e02d] {
  background-color: var(--color-other-1);
  position: absolute;
  bottom: 0;
  width: 100%;
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  text-align: center
}

.upload-grid .image-ready .operation[data-v-c300e02d] {
  transition: all .2s;
  position: absolute;
  color: var(--color-text-1);
  top: calc((100% - 24px)/2);
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 8px;
  padding: 2px 8px;
  display: flex;
  gap: 2px;
  opacity: 0;
  background-color: var(--color-other-6)
}

.upload-grid .image-ready .operation a[data-v-c300e02d] {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

.upload-grid .image-ready .operation a[data-v-c300e02d]:active {
  filter: brightness(.9)
}

.upload-grid .upload-content[data-v-c300e02d] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-fill-light)
}

.upload-grid .upload-content .add[data-v-c300e02d] {
  color: var(--color-text-1)
}

.upload-grid .upload-content .title[data-v-c300e02d] {
  margin-top: 4px;
  color: var(--color-text-1);
  font-size: 14px;
  line-height: 24px
}

.upload-grid .upload-content .desc[data-v-c300e02d] {
  color: var(--color-text-3);
  font-size: 12px;
  line-height: 20px;
  text-align: center
}

.upload-grid .upload-content .desc[data-v-c300e02d] a {
  color: var(--color-text-1);
  text-decoration: underline
}

.upload-grid .loading[data-v-c300e02d] {
  gap: 12px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  justify-content: center;
  flex-direction: column;
  background-color: var(--color-fill-light)
}

body.mobile .operation[data-v-c300e02d] {
  background-color: var(--color-other-6);
  opacity: 1
}

.multi-image-reference[data-v-f3927ca3] {
  margin-top: 16px
}

.multi-image-reference .panel .header[data-v-f3927ca3] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 400;
  font-size: 13px;
  line-height: 22px
}

.multi-image-reference .panel .header p[data-v-f3927ca3] {
  color: var(--color-text-2)
}

.multi-image-reference .panel .header .reference-tip[data-v-f3927ca3] {
  cursor: pointer;
  gap: 2px;
  color: var(--color-text-3)
}

.multi-image-reference .panel .content[data-v-f3927ca3] {
  border-radius: 8px;
  border: 1px solid var(--color-border-container);
  position: relative
}

.multi-image-reference .panel .content .uploader[data-v-f3927ca3] {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.multi-image-reference .panel .content .uploader[data-v-f3927ca3] .upload-image {
  border-radius: 8px;
  background-color: var(--color-fill-light);
  display: flex;
  align-items: center;
  padding: 8px 8px 8px 16px
}

.multi-image-reference .panel .content .uploader[data-v-f3927ca3] .upload-image .header-type {
  display: flex;
  align-items: center
}

.multi-image-reference .panel .content .uploader[data-v-f3927ca3] .upload-image .header-type .type {
  width: 32px;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text-2)
}

.multi-image-reference .panel .content .uploader[data-v-f3927ca3] .upload-image .header-type .icon {
  color: var(--color-text-2);
  transform: translate(-12px)
}

.multi-image-reference .panel .content .uploader[data-v-f3927ca3] .upload-image .header-type .split {
  width: 1px;
  height: 104px
}

.multi-image-reference .panel .content .uploader[data-v-f3927ca3] .upload-image .loading {
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  flex: 1
}

.multi-image-reference .panel .content .uploader[data-v-f3927ca3] .empty-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-left: 16px
}

.multi-image-reference .panel .content .uploader[data-v-f3927ca3] .empty-content .left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  min-width: 156px
}

.multi-image-reference .panel .content .uploader[data-v-f3927ca3] .empty-content .left .add {
  color: var(--color-text-1)
}

.multi-image-reference .panel .content .uploader[data-v-f3927ca3] .empty-content .left .title {
  margin-top: 4px;
  color: var(--color-text-1);
  font-size: 14px;
  line-height: 24px;
  text-wrap: nowrap
}

.multi-image-reference .panel .content .uploader[data-v-f3927ca3] .empty-content .left .title-left {
  margin-left: -4px
}

.multi-image-reference .panel .content .uploader[data-v-f3927ca3] .empty-content .left .title-right {
  margin-right: -4px
}

.multi-image-reference .panel .content .uploader[data-v-f3927ca3] .empty-content .left .desc {
  color: var(--color-text-3);
  font-size: 12px;
  line-height: 20px;
  text-align: center
}

.multi-image-reference .panel .content .uploader[data-v-f3927ca3] .empty-content .left .desc a {
  color: var(--color-text-1);
  text-decoration: underline
}

.multi-image-reference .panel .content .uploader[data-v-f3927ca3] .empty-content .demo-video {
  flex: 1;
  border-radius: 6px;
  min-width: 182px;
  height: 100%
}

.multi-image-upload-guide-popover.el-popover,
.multi-image-upload-guide-popover.el-popover.is-light {
  background-color: transparent !important;
  box-shadow: none !important
}

body.mobile .multi-reference-tip-wrapper-popover {
  width: auto
}

.multi-reference-tip-wrapper-popover {
  width: 460px
}

.multi-reference-tip-wrapper-popover h3 {
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-1);
  margin-bottom: 4px
}

.multi-reference-tip-wrapper-popover h4 {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text-2);
  margin-bottom: 12px
}

.multi-reference-tip-wrapper-popover .video {
  width: 100%;
  height: auto
}

.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
}

.facial-recognition-frame-container[data-v-c3586b4d] {
  position: absolute;
  z-index: 7;
  border-radius: 10px;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid transparent
}

.facial-recognition-frame-container .hover-mask[data-v-c3586b4d] {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translate(-50%)
}

.facial-recognition-frame-container .frame-top-left[data-v-c3586b4d] {
  position: absolute;
  top: -2px;
  left: -2px;
  width: var(--border-width);
  height: var(--border-width);
  border-top-left-radius: var(--border-width);
  border-top: var(--border-size) solid var(--color-border-focused);
  border-left: var(--border-size) solid var(--color-border-focused)
}

.facial-recognition-frame-container .frame-top-right[data-v-c3586b4d] {
  position: absolute;
  top: -2px;
  right: -2px;
  width: var(--border-width);
  height: var(--border-width);
  border-top-right-radius: var(--border-width);
  border-top: var(--border-size) solid var(--color-border-focused);
  border-right: var(--border-size) solid var(--color-border-focused)
}

.facial-recognition-frame-container .frame-bottom-left[data-v-c3586b4d] {
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: var(--border-width);
  height: var(--border-width);
  border-bottom-left-radius: var(--border-width);
  border-bottom: var(--border-size) solid var(--color-border-focused);
  border-left: var(--border-size) solid var(--color-border-focused)
}

.facial-recognition-frame-container .frame-bottom-right[data-v-c3586b4d] {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: var(--border-width);
  height: var(--border-width);
  border-bottom-right-radius: var(--border-width);
  border-bottom: var(--border-size) solid var(--color-border-focused);
  border-right: var(--border-size) solid var(--color-border-focused)
}

.active-frame .frame-top-left[data-v-c3586b4d],
.active-frame .frame-top-right[data-v-c3586b4d],
.active-frame .frame-bottom-left[data-v-c3586b4d],
.active-frame .frame-bottom-right[data-v-c3586b4d] {
  border-color: var(--color-theme-2)
}

.hover-item[data-v-c3586b4d] {
  border-color: var(--color-border-focused)
}

#reference-confirm-popover[data-v-930e5d5f] {
  padding: 12px
}

.title[data-v-930e5d5f] {
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  color: var(--color-text-1)
}

.description[data-v-930e5d5f] {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-1);
  margin-top: 4px
}

.bottom[data-v-930e5d5f] {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px
}

.tabs-item[data-v-930e5d5f] {
  height: 100%;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  flex-shrink: 0;
  color: var(--color-text-3);
  font-size: 14px;
  cursor: pointer;
  position: relative;
  overflow: visible
}

.tabs-item[data-v-930e5d5f]:hover {
  color: var(--color-text-1)
}

.tabs-item-active[data-v-930e5d5f] {
  color: var(--color-text-1);
  font-weight: 600
}

.tabs-item-active[data-v-930e5d5f]:hover {
  border: 1px solid transparent
}

.single-panel-reference[data-v-b4e5b505] {
  padding: 8px;
  border: 1px solid var(--color-border-container);
  border-radius: 8px
}

.empty-content[data-v-b4e5b505] {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px
}

.empty-content .left[data-v-b4e5b505] {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  min-width: 120px
}

.empty-content .left .add[data-v-b4e5b505] {
  color: var(--color-text-1)
}

.empty-content .left .title[data-v-b4e5b505] {
  margin-top: 4px;
  color: var(--color-text-1);
  font-size: 14px;
  line-height: 24px
}

.empty-content .left .title .title-left[data-v-b4e5b505] {
  margin-left: -4px
}

.empty-content .left .title .title-right[data-v-b4e5b505] {
  margin-right: -4px
}

.empty-content .left .desc[data-v-b4e5b505] {
  color: var(--color-text-4);
  font-size: 12px;
  line-height: 20px;
  text-align: center
}

.empty-content .left .desc a[data-v-b4e5b505] {
  color: var(--color-text-1);
  text-decoration: underline
}

.empty-content .example-video[data-v-b4e5b505] {
  min-width: 204px;
  height: 100%;
  border-radius: 6px;
  flex: 1
}

.slider-container[data-v-b4e5b505] {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.slider-container .fidelity[data-v-b4e5b505] {
  width: 32px;
  text-align: center;
  height: 16px;
  line-height: 16px;
  margin-left: 8px;
  color: var(--color-text-2)
}

.slider-container .slider[data-v-b4e5b505] {
  flex: 0
}

.question-icon[data-v-b4e5b505] {
  margin-left: 4px;
  vertical-align: middle;
  cursor: pointer;
  color: var(--color-text-2);
  flex-shrink: 0
}

.panel .tabs-box[data-v-b4e5b505] {
  position: relative
}

.panel .tabs-box .tabs[data-v-b4e5b505] {
  margin-bottom: 8px;
  display: flex;
  gap: 8px;
  height: 32px;
  white-space: nowrap
}

.panel>.title[data-v-b4e5b505] {
  width: 100%;
  display: flex;
  align-items: center
}

.panel>.title span[data-v-b4e5b505] {
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  vertical-align: middle;
  color: var(--color-text-1)
}

.panel>.title .info-btn[data-v-b4e5b505] {
  margin-left: .5em;
  width: 16px;
  height: 16px;
  cursor: pointer
}

.panel>.title .desc[data-v-b4e5b505] {
  font-size: 14px;
  color: var(--color-text-3);
  margin-left: 6px
}

.panel>.title .control-tips[data-v-b4e5b505] {
  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-b4e5b505] {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 8px;
  overflow: hidden
}

.result .recognition-result-no-face[data-v-b4e5b505] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 11
}

.result .recognition-result-no-face p[data-v-b4e5b505] {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-1);
  margin: 8px 0 16px
}

.result .recognition-result-no-face .recognition-result-no-face-btn[data-v-b4e5b505],
.result .recognition-result-no-face .recognition-result-no-face-btn[data-v-b4e5b505]:hover {
  border: 1px solid var(--color-fill-white)
}

.result .result-background-image[data-v-b4e5b505] {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  object-position: center;
  filter: blur(8px);
  display: block
}

.result .result-background-image-mask[data-v-b4e5b505] {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 6;
  background: var(--color-fill-black-1)
}

.result .result-background-image-mask-bg[data-v-b4e5b505] {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  background: var(--color-fill-black-1)
}

.result .result-recognition[data-v-b4e5b505] {
  width: 100%;
  height: 100%;
  position: absolute;
  background: var(--color-fill-black-1);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8
}

.result .result-recognition .recognition-loading-icon[data-v-b4e5b505] {
  margin: 0
}

.result .result-recognition .recognition-text[data-v-b4e5b505] {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-1)
}

.result .result-preview-image[data-v-b4e5b505],
.result .result-preview-image .recognition-result-container[data-v-b4e5b505] {
  width: 100%;
  height: 200px;
  position: absolute
}

.result .result-preview-image img[data-v-b4e5b505] {
  height: 200px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  object-fit: contain;
  object-position: center;
  z-index: 4
}

.result .clickable[data-v-b4e5b505] {
  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;
  z-index: 10
}

.result .clickable span[data-v-b4e5b505] {
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center
}

.result .clickable span[data-v-b4e5b505]:active {
  filter: brightness(.9)
}

.result:hover .clickable[data-v-b4e5b505] {
  opacity: 1;
  z-index: 11
}

.result[data-v-b4e5b505]:hover:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--color-fill-black-1);
  z-index: 10
}

.disabled-hover[data-v-b4e5b505]:hover:after {
  display: none
}

.tips[data-v-b4e5b505] {
  color: var(--color-text-3);
  font-size: 12px;
  margin-bottom: 12px
}

[data-v-b4e5b505] .custom-tip {
  color: var(--color-text-3);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin-top: 16px
}

.upload-container-background[data-v-b4e5b505] {
  background: var(--color-fill-disabled)
}

.upload-container[data-v-b4e5b505] {
  position: relative;
  z-index: 1;
  border-radius: 8px
}

.upload-container[data-v-b4e5b505] .el-upload-dragger {
  padding: 16px
}

.upload-container .reference-setting-options .reference-image-recognition-result[data-v-b4e5b505] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px 0
}

.upload-container .reference-setting-options .reference-image-recognition-result .reference-image-recognition-result-item[data-v-b4e5b505]:last-child {
  margin-right: 0
}

.upload-container .reference-setting-options .reference-image-recognition-result .reference-image-recognition-result-item[data-v-b4e5b505] {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  margin-right: 16px;
  padding: 1px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent
}

.upload-container .reference-setting-options .reference-image-recognition-result .reference-image-recognition-result-item img[data-v-b4e5b505] {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  object-fit: cover;
  border-radius: 8px;
  object-position: center
}

.upload-container .reference-setting-options .reference-image-recognition-result .reference-image-recognition-result-item[data-v-b4e5b505]:hover {
  border-color: var(--color-border-focused)
}

.upload-container .reference-setting-options .reference-image-recognition-result .reference-image-recognition-result-item-selected[data-v-b4e5b505] {
  border-color: var(--color-theme-2)
}

.upload-container .reference-setting-options .reference-rendition[data-v-b4e5b505] {
  border-top: 1px solid var(--color-border-container);
  height: 80px;
  padding: 16px;
  gap: 16px;
  display: flex;
  align-items: center
}

.upload-container .reference-setting-options .reference-rendition span[data-v-b4e5b505] {
  flex-shrink: 0
}

.upload-container .reference-setting-options .reference-rendition .recommends[data-v-b4e5b505] {
  display: flex;
  gap: 8px;
  flex: 1
}

.upload-container .reference-setting-options .reference-rendition .recommends .recommend-refer-item[data-v-b4e5b505] {
  flex-shrink: 0;
  display: flex;
  cursor: pointer;
  flex-direction: column;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  align-items: center
}

.upload-container .reference-setting-options .reference-rendition .recommends .recommend-refer-item img[data-v-b4e5b505] {
  width: 48px;
  height: 48px;
  object-fit: cover
}

.upload-container .reference-setting-options .reference-rendition .recommends .recommend-refer-item span[data-v-b4e5b505] {
  position: absolute;
  bottom: 0;
  width: 100%;
  flex: 1;
  background-color: var(--color-fill-black-1);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  font-size: 9px;
  line-height: 14px;
  text-align: center
}

.upload-container .setting-border[data-v-b4e5b505] {
  border-top: 1px solid var(--color-border-frame)
}

.upload-container .setting[data-v-b4e5b505] {
  margin-top: 8px
}

.upload-container .setting .title-container[data-v-b4e5b505] {
  display: flex;
  align-items: center
}

.upload-container .setting .title-container .title[data-v-b4e5b505] {
  color: var(--color-text-1);
  font-size: 14px;
  height: 24px;
  white-space: nowrap
}

.upload-container .setting .one-slider[data-v-b4e5b505] {
  border-radius: 6px;
  padding: 0 16px;
  background-color: var(--color-fill-light);
  height: 42px;
  display: flex;
  margin-top: 16px;
  align-items: center;
  justify-content: space-between
}

.upload-container .setting .one-slider .slider[data-v-b4e5b505] {
  margin-top: 0
}

.upload-container .setting.two-slider[data-v-b4e5b505] {
  padding-top: 16px
}

.upload-container .setting.two-slider .slider-item[data-v-b4e5b505] {
  padding: 0 16px;
  border-radius: 6px;
  background-color: var(--color-fill-light);
  height: 42px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.upload-container .setting.two-slider .slider-item[data-v-b4e5b505]:last-child {
  margin-bottom: 0
}

.upload-container .setting .tip[data-v-b4e5b505] {
  font-size: 12px;
  margin-left: 6px
}

.__panel_prompt_reference_slider {
  height: 16px
}

.__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 {
  height: 4px;
  background-color: var(--color-other-2)
}

.__panel_prompt_reference_slider .el-slider__bar {
  height: 4px;
  background: var(--color-text-1)
}

.__panel_prompt_reference_slider .el-slider__button-wrapper {
  top: -16px
}

.single-image-reference[data-v-4627f478] {
  margin-top: 16px
}

#dropping-image[data-v-4627f478] {
  width: 0;
  height: 0;
  left: 0;
  top: 0;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  object-fit: contain;
  background-size: cover;
  border-radius: 12px;
  z-index: 20
}

.tab-container[data-v-434c60b9] {
  position: relative;
  z-index: 2;
  opacity: var(--property-title-alpha);
  padding-bottom: 24px
}

[data-v-b83d7602] .el-dropdown-menu__item--divided {
  border-top-color: var(--color-border-component)
}

.recommend-popover[data-v-b83d7602] {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.recommend-popover .recommend-content[data-v-b83d7602] {
  height: 24px
}

.recommend-popover .recommend-audio[data-v-b83d7602] {
  height: 64px
}

.recommend-popover .recommend-audio[data-v-b83d7602] canvas {
  height: 36px
}

.audio-setting-box[data-v-b83d7602] {
  border-radius: 8px
}

.audio-setting-box.overLimit[data-v-b83d7602] {
  border: 1px solid var(---color_font_8, #f5ba31)
}

.audio-setting-box[data-v-b83d7602] .prompt-wrap {
  border-radius: 8px 8px 0 0
}

.audio-setting-box[data-v-b83d7602] .prompt-wrap.overLimit {
  border: 1px solid transparent
}

.recommend-box[data-v-b83d7602] {
  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-b83d7602] {
  margin-right: 8px;
  flex-shrink: 0;
  color: var(--color-text-1)
}

.recommend-box .recommend[data-v-b83d7602] {
  flex: 1;
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  gap: 6px
}

.recommend-box .recommend-item[data-v-b83d7602] {
  height: 32px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  flex: 0 0 auto;
  cursor: pointer
}

.recommend-box .recommend-item .img[data-v-b83d7602] {
  position: absolute;
  width: 100%;
  height: 100%;
  filter: blur(15px)
}

.recommend-box .recommend-btn[data-v-b83d7602] {
  width: 28px;
  margin-left: 6px
}

.audio-setting-collect-box[data-v-b83d7602] {
  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-b83d7602] {
  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-b83d7602] {
  height: 24px;
  width: 24px;
  margin-right: 8px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0
}

.recommend-content .recommend-cover img[data-v-b83d7602] {
  width: 100%;
  height: 100%
}

.prase-result-box[data-v-b83d7602] {
  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-b83d7602] {
  min-height: 28px;
  display: flex;
  align-items: center
}

.prase-result-box .parse-result-content[data-v-b83d7602] {
  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-b83d7602] {
  position: absolute;
  left: 0;
  top: 4px
}

.prase-result-box .parse-result-btn[data-v-b83d7602] {
  flex-shrink: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px
}

.prase-result-box .prase-result-prompt[data-v-b83d7602] {
  margin-top: 12px;
  color: var(--color-text-2);
  line-height: 20px;
  font-size: 12px
}

.audio-panel-box .audio-upload-box[data-v-b83d7602] {
  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-b83d7602] {
  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-b83d7602] {
  margin-top: 8px;
  height: 20px;
  line-height: 20px;
  font-size: 12px
}

.audio-panel-box .audio-upload-box .video-box[data-v-b83d7602] {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 8px;
  box-sizing: border-box
}

.audio-panel-box .audio-upload-box .video-box .buttons[data-v-b83d7602] {
  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-b83d7602] {
  cursor: pointer;
  width: 100%;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.audio-panel-box .upload-box .from-history .btn[data-v-b83d7602] {
  pointer-events: all;
  display: inline-block;
  font-size: 12px
}

.audio-panel-box .upload-box .from-history .btn span[data-v-b83d7602] {
  color: var(--color-text-3)
}

.audio-panel-box .upload-box .from-history .btn a[data-v-b83d7602] {
  color: var(--color-text-1);
  margin-left: .5em;
  margin-right: .5em
}

.audio-panel-box .upload-box .custom-tip[data-v-b83d7602] {
  line-height: 18px;
  font-size: 12px;
  color: var(--color-text-3)
}

.audio-custom-duration[data-v-b83d7602] {
  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-b83d7602] {
  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-b83d7602] {
  color: var(--color-text-4)
}

.audio-custom-duration[data-v-b83d7602]:hover {
  border: 1px solid var(--color-border-hover)
}

.audio-custom-duration .arrow-icon[data-v-b83d7602] {
  margin-left: 9px;
  transition: transform .4s;
  transform: rotate(180deg)
}

.audio-custom-duration .arrow-icon.arrowDown[data-v-b83d7602] {
  transform: rotate(0)
}

.extend-panel-box[data-v-88925b80] {
  width: 100%
}

.extend-upload-box[data-v-88925b80] {
  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-88925b80] {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 8px;
  box-sizing: border-box
}

.extend-upload-box .video-box .buttons[data-v-88925b80] {
  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-88925b80] svg {
  width: 22px
}

.extend-upload-box .video-box .buttons[data-v-88925b80] path {
  fill: #fff
}

.extend-upload-box .upload-box[data-v-88925b80] {
  cursor: pointer;
  width: 100%;
  padding: 20px 0
}

.extend-upload-box .from-history[data-v-88925b80] {
  margin-top: 15px
}

.extend-upload-box .from-history .btn[data-v-88925b80] {
  pointer-events: all;
  display: inline-block;
  font-size: 12px
}

.extend-upload-box .from-history .btn span[data-v-88925b80] {
  color: var(--color-text-3)
}

.extend-upload-box .from-history .btn a[data-v-88925b80] {
  color: var(--color-text-1);
  margin-left: .5em;
  margin-right: .5em
}

body.mobile .result[data-v-88925b80] {
  padding-bottom: 30px;
  height: calc(100vh - 100px);
  width: 100%
}

body.mobile .result .tools[data-v-88925b80] {
  transform: scale(.8);
  flex-wrap: wrap;
  justify-content: center
}

body.mobile .footer-btn[data-v-88925b80] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px
}

body.mobile .footer-btn__item[data-v-88925b80] {
  display: flex;
  gap: 16px
}

body.lang-en .new-version-tip[data-v-88925b80] {
  height: 50px;
  width: 637px
}

.design-main-box[data-v-88925b80] {
  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-88925b80] {
  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-88925b80] {
  line-height: 18px
}

.design-main-box .new-version-tip[data-v-88925b80] path {
  fill: #e92a1b
}

.design-main-box .design-main-container[data-v-88925b80] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: auto
}

.design-main-box .design-main-container[data-v-88925b80]::-webkit-scrollbar {
  display: none
}

.design-main-box .design-main-container .video-button-group[data-v-88925b80] {
  position: sticky;
  top: 0;
  display: flex;
  gap: 12px;
  margin-bottom: 16px
}

.design-main-box .design-main-container .no-work[data-v-88925b80] {
  background-color: #191d21;
  border-radius: 12px;
  color: #e0e0e0;
  font-size: 14px
}

.design-main-box .design-main-container .mask[data-v-88925b80] {
  background-color: #191d21b3;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%
}

.design-main-box .design-main-container .fail-work-box[data-v-88925b80] {
  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-88925b80] {
  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-88925b80] {
  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-88925b80] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px
}

.design-main-box .design-main-container .fail-work-box .fail-work .reason[data-v-88925b80] {
  margin-top: 2em;
  color: #4b4b5a
}

.design-main-box .design-main-container .fail-work-box .fail-work span.text a[data-v-88925b80] {
  color: var(--theme-color-primary)
}

.design-main-box .design-main-container .fail-work-box .fail-work span.text a[data-v-88925b80]:hover {
  filter: brightness(1.05)
}

.design-main-box .design-main-container .fail-work-box .fail-work span.text a[data-v-88925b80]:active {
  filter: brightness(.9)
}

.design-main-box .design-main-container .icons[data-v-88925b80] {
  position: absolute;
  top: 12px;
  left: 12px
}

.single-result[data-v-88925b80] {
  flex-direction: row !important;
  margin: 0 auto !important
}

.result[data-v-88925b80] {
  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-88925b80]::-webkit-scrollbar {
  display: none
}

.result video[data-v-88925b80] {
  width: 100%;
  border-radius: 12px
}

.result .tools[data-v-88925b80] {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-direction: row;
  align-items: center
}

.panel-box[data-v-88925b80] {
  position: relative
}

.extension-history[data-v-88925b80] {
  text-align: center
}

.extension-history .extension-history-content[data-v-88925b80] {
  text-align: left;
  display: inline-block;
  margin-top: 24px
}

.empty-container[data-v-88925b80] {
  width: 100%;
  height: 100%
}

.empty-container .empty[data-v-88925b80] {
  padding-top: 0;
  margin-bottom: 112px
}

.extend-history-btn[data-v-88925b80] {
  cursor: pointer;
  vertical-align: middle;
  color: #fff;
  float: left;
  padding-left: 4px;
  padding-right: 4px
}

.extend-history-btn[data-v-88925b80]:hover {
  color: var(--theme-color-primary)
}

.extend-history-btn svg[data-v-88925b80] {
  vertical-align: middle;
  margin-bottom: 5px
}

.video-box[data-v-88925b80] {
  position: relative
}

.footer-btn[data-v-88925b80] {
  display: flex;
  gap: 16px;
  justify-content: space-between
}

.footer-btn__item[data-v-88925b80] {
  display: flex;
  gap: 16px
}

.primary-panel[data-v-88925b80] {
  overflow-y: auto;
  height: 100%
}

.primary-panel[data-v-88925b80]::-webkit-scrollbar {
  display: none
}

body.mobile .multimodal-video-box[data-v-f6ca9a70] {
  padding: 16px 24px 24px
}

body.mobile .multimodal-video-box .top[data-v-f6ca9a70] {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  white-space: nowrap
}

body.mobile .multimodal-video-box .operation-tip svg[data-v-f6ca9a70] {
  flex-shrink: 0
}

body.mobile .video-operation[data-v-f6ca9a70] {
  width: 100%
}

body.mobile .video-operation .buttons[data-v-f6ca9a70] {
  flex-shrink: 0 !important
}

.multimodal-video-box[data-v-f6ca9a70] {
  padding: 32px;
  display: flex;
  background-color: var(--color-bg-page);
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  overflow: hidden;
  gap: 24px
}

.multimodal-video-box .top[data-v-f6ca9a70] {
  width: 100%;
  height: 56px;
  font-weight: 600;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-frame);
  font-size: 18px;
  line-height: 40px;
  padding-left: 56px
}

.multimodal-video-box .video-content[data-v-f6ca9a70] {
  height: calc(100% - 156px);
  display: flex;
  flex-direction: column;
  gap: 16px
}

.multimodal-video-box .video-content .operation-tip[data-v-f6ca9a70] {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text-2)
}

.multimodal-video-box .video-content .video-box[data-v-f6ca9a70] {
  width: 100%;
  height: calc(100% - 240px);
  background-color: var(--color-bg-primary);
  border-radius: 16px;
  position: relative
}

.multimodal-video-box .video-content .video-box .video-container[data-v-f6ca9a70] {
  pointer-events: none;
  width: 100%;
  height: 100%
}

.multimodal-video-box .video-content .video-box .click-area[data-v-f6ca9a70] {
  position: absolute
}

.multimodal-video-box .video-content .video-box .click-area.add-area[data-v-f6ca9a70] {
  cursor: pointer
}

.multimodal-video-box .video-content .video-box .click-area.add-area .click-icons span[data-v-f6ca9a70],
.multimodal-video-box .video-content .video-box .click-area.disabled[data-v-f6ca9a70] {
  cursor: default
}

.multimodal-video-box .video-content .video-box .click-area canvas[data-v-f6ca9a70] {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none
}

.multimodal-video-box .video-content .video-box .click-area .click-icons[data-v-f6ca9a70] {
  width: 100%;
  height: 100%
}

.multimodal-video-box .video-content .video-box .click-area .click-icons span[data-v-f6ca9a70] {
  position: absolute;
  cursor: pointer;
  color: var(--color-fill-white);
  transform: translate(-50%, -50%)
}

.multimodal-video-box .video-content .video-box .mask-loading[data-v-f6ca9a70] {
  position: absolute;
  cursor: not-allowed;
  width: 100%;
  height: 100%;
  background-color: var(--color-fill-black-3)
}

.multimodal-video-box .video-content .video-box .mask-loading[data-v-f6ca9a70] .effect-wrapper {
  margin: unset
}

.multimodal-video-box .video-content .video-box .mask-loading span[data-v-f6ca9a70] {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  margin-top: 12px;
  margin-bottom: 16px
}

.multimodal-video-box .video-content .video-box .mask-loading .cancel[data-v-f6ca9a70] {
  border: 1px solid var(--color-border-hover)
}

.multimodal-video-box .video-content .video-operation[data-v-f6ca9a70] {
  padding: 12px 16px;
  display: flex;
  margin: 0 auto;
  background-color: var(--color-other-1);
  border-radius: 12px;
  align-items: center
}

.multimodal-video-box .video-content .video-operation .button[data-v-f6ca9a70] {
  color: var(--color-text-2);
  margin-right: 8px
}

.multimodal-video-box .video-content .video-operation .button.active[data-v-f6ca9a70] {
  color: var(--color-theme-2);
  border-color: var(--color-theme-2)
}

.multimodal-video-box .video-content .video-operation .button.disabled[data-v-f6ca9a70] {
  color: var(--color-text-3);
  border-color: transparent
}

.multimodal-video-box .video-content .video-operation .button[data-v-f6ca9a70]:last-child {
  margin-right: 0
}

.multimodal-video-box .video-content .video-operation .history-group[data-v-f6ca9a70] {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: 24px;
  margin-right: 48px
}

.multimodal-video-box .video-content .video-operation .history-group .tool-item[data-v-f6ca9a70] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 32px;
  color: var(--color-text-1);
  cursor: pointer
}

.multimodal-video-box .video-content .video-operation .history-group .tool-item.disabled[data-v-f6ca9a70] {
  cursor: not-allowed;
  color: var(--color-text-3)
}

.multimodal-video-box .video-content .video-operation .internally[data-v-f6ca9a70] {
  margin-left: 24px
}

.multimodal-video-box .video-content .video-control[data-v-f6ca9a70] {
  background-color: var(--color-other-2);
  padding: 16px;
  border-radius: 8px;
  width: 80%;
  margin: 0 auto
}

.multimodal-video-box .video-content .video-control .video-bar[data-v-f6ca9a70] {
  display: flex;
  align-items: center;
  gap: 8px
}

.multimodal-video-box .video-content .video-control .video-bar .play-button[data-v-f6ca9a70] {
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  height: 56px;
  width: 56px;
  border-radius: 4px;
  overflow: hidden
}

.multimodal-video-box .video-content .video-control .video-bar .play-button .mask[data-v-f6ca9a70] {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--color-fill-black-1)
}

.multimodal-video-box .video-content .video-control .video-bar .play-button img[data-v-f6ca9a70] {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.multimodal-video-box .video-content .video-control .video-bar .play-button svg[data-v-f6ca9a70] {
  z-index: 1
}

.multimodal-video-box .video-content .video-control .video-frame-object[data-v-f6ca9a70] {
  margin-top: 12px;
  height: 12px;
  margin-left: 64px;
  position: relative
}

.multimodal-video-box .video-content .video-control .video-frame-object.disabled .dot[data-v-f6ca9a70] {
  background-color: var(--color-text-3) !important;
  cursor: not-allowed
}

.multimodal-video-box .video-content .video-control .video-frame-object.disabled .over-line[data-v-f6ca9a70] {
  display: none
}

.multimodal-video-box .video-content .video-control .video-frame-object .base-line[data-v-f6ca9a70] {
  position: absolute;
  top: 5px;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-other-3)
}

.multimodal-video-box .video-content .video-control .video-frame-object .over-line[data-v-f6ca9a70] {
  position: absolute;
  top: 5px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-border-focused)
}

.multimodal-video-box .video-content .video-control .video-frame-object .dot[data-v-f6ca9a70] {
  position: absolute;
  cursor: pointer;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translate(-6px);
  background-color: var(--color-text-1)
}

.multimodal-video-box .video-content .video-control .video-frame-object .dot.active[data-v-f6ca9a70] {
  background-color: var(--color-theme-2)
}

.multimodal-video-box .footer[data-v-f6ca9a70] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-frame)
}

.multimodal-video-box .footer .buttons[data-v-f6ca9a70] {
  gap: 8px
}

.extra-line[data-v-3517be1a] {
  height: 40px;
  justify-content: space-between;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  background-color: var(--color-other-1);
  padding: 4px 16px 4px 8px
}

.extra-line .text[data-v-3517be1a] {
  color: var(--color-text-1);
  line-height: 1.2;
  display: flex;
  align-items: center
}

.extra-line .text .label[data-v-3517be1a] {
  height: 20px;
  padding: 4px 8px;
  font-size: 12px;
  background: linear-gradient(147.61deg, #ffe4ad, #fff7eb);
  color: var(--color-text-5);
  border-radius: 4px;
  margin-right: 8px
}

.extra-line .text svg[data-v-3517be1a] {
  color: var(--color-text-2);
  margin-left: 4px;
  cursor: pointer
}

.extra-line .button[data-v-3517be1a] {
  color: var(--color-text-1);
  cursor: pointer;
  text-align: right;
  padding-left: 10px;
  margin-right: 8px
}

.extra-line .add-icon[data-v-3517be1a] {
  margin-left: auto;
  color: var(--color-text-1);
  margin-right: 8px
}

.cropper-wrapper[data-v-fac66887] {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative
}

.cropper-wrapper .container[data-v-fac66887] {
  width: 732px;
  height: 492px;
  background-color: var(--color-bg-primary)
}

.cropper-wrapper .container[data-v-fac66887] .cropper-view-box {
  outline: 1px dashed var(--color-border-focused)
}

.cropper-wrapper .container[data-v-fac66887] .cropper-bg {
  background: none !important
}

.cropper-wrapper .container[data-v-fac66887] .cropper-hide {
  display: none
}

.cropper-wrapper .container[data-v-fac66887] .cropper-line {
  background: none
}

.cropper-wrapper .container[data-v-fac66887] .cropper-line.line-e,
.cropper-wrapper .container[data-v-fac66887] .cropper-line.line-w {
  width: 8px
}

.cropper-wrapper .container[data-v-fac66887] .cropper-line.line-n,
.cropper-wrapper .container[data-v-fac66887] .cropper-line.line-s {
  height: 8px
}

.cropper-wrapper .container[data-v-fac66887] .cropper-line.line-e {
  right: -4px
}

.cropper-wrapper .container[data-v-fac66887] .cropper-line.line-w {
  left: -4px
}

.cropper-wrapper .container[data-v-fac66887] .cropper-line.line-n {
  top: -4px
}

.cropper-wrapper .container[data-v-fac66887] .cropper-line.line-s {
  bottom: -4px
}

.cropper-wrapper .container[data-v-fac66887] .cropper-point {
  width: 8px;
  height: 8px;
  border: 2px solid var(--color-fill-white);
  background-color: var(--color-fill-black-3);
  opacity: 1
}

.cropper-wrapper .container[data-v-fac66887] .cropper-point.point-ne {
  right: -4px;
  top: -4px
}

.cropper-wrapper .container[data-v-fac66887] .cropper-point.point-nw {
  top: -4px;
  left: -4px
}

.cropper-wrapper .container[data-v-fac66887] .cropper-point.point-sw {
  bottom: -4px;
  left: -4px
}

.cropper-wrapper .container[data-v-fac66887] .cropper-point.point-se {
  bottom: -4px;
  right: -4px
}

.cropper-wrapper .container[data-v-fac66887] .cropper-point.point-e {
  right: -4px;
  margin-top: -8px
}

.cropper-wrapper .container[data-v-fac66887] .cropper-point.point-w {
  left: -4px;
  margin-top: -8px
}

.cropper-wrapper .container[data-v-fac66887] .cropper-point.point-n {
  top: -4px;
  margin-left: -8px
}

.cropper-wrapper .container[data-v-fac66887] .cropper-point.point-s {
  bottom: -4px;
  margin-left: -8px
}

.cropper-wrapper .container[data-v-fac66887] .cropper-point.point-e,
.cropper-wrapper .container[data-v-fac66887] .cropper-point.point-w {
  height: 16px;
  width: 8px
}

.cropper-wrapper .container[data-v-fac66887] .cropper-point.point-n,
.cropper-wrapper .container[data-v-fac66887] .cropper-point.point-s {
  width: 16px;
  height: 8px
}

.cropper-wrapper .loading-wrapper[data-v-fac66887] {
  position: absolute;
  width: 100%;
  left: 0;
  top: -12px;
  bottom: -12px;
  background-color: var(--color-fill-black-3);
  cursor: not-allowed
}

.cropper-wrapper .loading-wrapper .loading[data-v-fac66887] {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  pointer-events: none
}

.cut-dialog-tip[data-v-fac66887] {
  margin: -8px 0 24px;
  color: var(--color-text-2);
  line-height: 24px
}

.footer[data-v-fac66887] {
  width: 100%;
  margin-top: 24px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: 12px
}

.click-here[data-v-99172d6c] {
  color: var(--color-text-2);
  font-size: 12px;
  line-height: 20px;
  display: flex;
  align-items: center
}

.click-here[data-v-99172d6c]:hover {
  color: var(--color-text-1)
}

.click-here svg[data-v-99172d6c] {
  vertical-align: middle;
  margin-right: 6px
}

.btn-unique[data-v-99172d6c] {
  font-size: 12px;
  line-height: 20px
}

.btn-unique a[data-v-99172d6c] {
  display: inline-block;
  color: var(--color-text-2);
  text-decoration: underline;
  transition: all .2s ease;
  padding: 0 4px
}

.btn-unique a.active[data-v-99172d6c] {
  color: var(--color-text-2);
  cursor: pointer
}

.btn-unique a[data-v-99172d6c]:hover {
  color: var(--color-text-1);
  cursor: pointer
}

.btn-unique span[data-v-99172d6c] {
  color: #6c757a
}

.upload-grid[data-v-99172d6c] {
  margin: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  position: relative
}

.upload-grid-single[data-v-99172d6c] {
  margin: 8px;
  display: flex;
  position: relative
}

.upload-grid .upload-item[data-v-99172d6c],
.upload-grid-single .upload-item[data-v-99172d6c] {
  position: relative;
  height: var(--cf504d16);
  width: 100%;
  gap: 8px;
  border-radius: 4px;
  background: #ffffff0a;
  border: none !important
}

.upload-grid .upload-item .upload-item-content[data-v-99172d6c],
.upload-grid-single .upload-item .upload-item-content[data-v-99172d6c] {
  height: 100%
}

.upload-grid .upload-item .cut-icon[data-v-99172d6c],
.upload-grid-single .upload-item .cut-icon[data-v-99172d6c] {
  cursor: pointer;
  position: absolute;
  z-index: 100;
  bottom: 10px;
  margin: auto;
  left: 50%;
  transform: translate(-50%);
  padding: 0 12px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-fill-black-3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text-1);
  white-space: nowrap
}

.upload-grid .grid-icon[data-v-99172d6c],
.upload-grid-single .grid-icon[data-v-99172d6c] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.prompt-reset[data-v-3b3eef16] {
  position: absolute;
  bottom: 12px;
  right: 12px;
  cursor: pointer
}

body.mobile .empty-content[data-v-3b3eef16] {
  gap: 16px
}

body.mobile .empty-content img[data-v-3b3eef16] {
  object-fit: cover
}

.tabs[data-v-3b3eef16] {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.upload-video[data-v-3b3eef16] {
  background: var(--color-bg-page);
  margin-top: 16px;
  border: 1px solid var(--color-border-container);
  border-radius: 8px;
  overflow: hidden
}

.upload-video[data-v-3b3eef16] .el-upload-dragger {
  padding: 16px 24px
}

.upload-video .video-box[data-v-3b3eef16] {
  position: relative;
  width: 100%;
  height: 200px;
  background: var(--color-bg-page);
  padding: 8px;
  box-sizing: border-box
}

.upload-video .video-box .buttons[data-v-3b3eef16] {
  display: none;
  gap: 12px;
  position: absolute;
  top: 8px;
  right: 8px;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
  background: var(--color-other-6);
  padding: 0 8px;
  height: 28px;
  color: var(--color-text-1)
}

.upload-image[data-v-3b3eef16] {
  margin-top: 16px;
  border-radius: 8px;
  border: 1px solid var(--color-border-container);
  background: var(--color-bg-page)
}

.upload-image[data-v-3b3eef16] .el-upload-dragger {
  padding: 16px 24px
}

.empty-content[data-v-3b3eef16] {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px
}

.empty-content .left[data-v-3b3eef16] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: start
}

.empty-content .left .title[data-v-3b3eef16] {
  color: var(--color-text-1);
  font-size: 14px;
  line-height: 24px
}

.empty-content img[data-v-3b3eef16] {
  border-radius: 6px
}

.desc[data-v-3b3eef16] {
  color: var(--color-text-3);
  font-size: 12px;
  line-height: 20px
}

.desc a[data-v-3b3eef16] {
  color: var(--color-text-1);
  text-decoration: underline
}

.recommends[data-v-3b3eef16] {
  max-height: 100%;
  overflow: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px
}

.recommends[data-v-3b3eef16]::-webkit-scrollbar {
  display: none
}

.recommends img[data-v-3b3eef16] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
  border-radius: 4px;
  background: var(--color-text-3)
}

.reference-video-guide-container[data-v-f23af98e] {
  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-f23af98e] {
  font-size: 14px;
  font-weight: 500;
  line-height: 26px;
  color: var(--color-text-1)
}

.reference-video-guide-container .reference-video-guide-item .guide-item-video[data-v-f23af98e] {
  width: 100%;
  margin: 12px 0
}

.reference-video-guide-container .guide-item-button[data-v-f23af98e] {
  position: absolute;
  right: 16px;
  bottom: 16px
}

body.mobile .size-limit-container[data-v-1fb6fc05],
body.mobile .size-limit-container .size-limit[data-v-1fb6fc05] {
  height: fit-content
}

.uploader[data-v-1fb6fc05] {
  display: flex;
  flex-direction: column
}

.uploader .size-limit-container[data-v-1fb6fc05] {
  position: relative;
  margin-top: 16px;
  margin-bottom: 8px
}

.uploader .size-limit[data-v-1fb6fc05] {
  width: 100%;
  font-size: 13px;
  line-height: 22px;
  color: var(--color-text-3)
}

.uploader .main[data-v-1fb6fc05] {
  border: 1px solid var(--color-border-container);
  border-radius: 8px;
  margin-bottom: 32px
}

.uploader .main .recommend-row[data-v-1fb6fc05] {
  border-top: 1px solid var(--color-border-frame);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px
}

.uploader .main .recommend-row .recommends-container[data-v-1fb6fc05] {
  flex: 1;
  display: flex;
  gap: 8px;
  -ms-overflow-style: none;
  scrollbar-width: none
}

.uploader .main .recommend-row .recommends-container[data-v-1fb6fc05]::-webkit-scrollbar {
  display: none
}

.uploader .main .recommend-row .recommends-container .item[data-v-1fb6fc05] {
  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-1fb6fc05] {
  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-1fb6fc05] {
  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-1fb6fc05] {
  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-1fb6fc05] {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column
}

.multi-id-recommends-tip .image-group-grid {
  display: grid;
  grid-template-columns: 120px 120px;
  grid-template-rows: 120px 120px;
  gap: 4px
}

.multi-id-recommends-tip .image-group-flex {
  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-791f04c5] {
  height: 40px;
  line-height: 40px;
  padding: 0 16px
}

body.mobile .content .main-view[data-v-791f04c5] {
  width: calc(100vw - 68px);
  display: flex;
  justify-content: center;
  align-items: center
}

body.mobile .content .main-view .container[data-v-791f04c5] {
  width: calc(100vw - 68px)
}

body.mobile .content .main-view .back[data-v-791f04c5],
body.mobile .content .main-view .view[data-v-791f04c5] {
  width: calc(100vw - 208px);
  margin: 0
}

.r-content[data-v-791f04c5] {
  flex: 1;
  display: flex;
  gap: 8px
}

.r-content .types-container[data-v-791f04c5] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.r-content .types-container .wholeScreen[data-v-791f04c5] {
  width: 100%
}

.r-content .types-container .wholeScreen[data-v-791f04c5] .generic-button .content {
  padding: 0
}

.r-content .types-container .wholeScreen[data-v-791f04c5] .content {
  display: flex;
  padding: 0 12px;
  width: 100%
}

.r-content .types-container .wholeScreen[data-v-791f04c5] .content .inner {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between
}

.r-content .types-container .wholeScreen.selected[data-v-791f04c5] {
  background: var(--color-other-2);
  border-radius: 8px
}

.r-content .types-container .wholeScreen .btn-txt[data-v-791f04c5] {
  color: var(--color-text-2);
  font-weight: 400;
  display: flex;
  justify-content: space-between
}

.r-content .types-container .wholeScreen .btn-txt img[data-v-791f04c5] {
  width: 30px
}

.r-content .types-container .vip-img[data-v-791f04c5] {
  width: 30px;
  height: 20px
}

.disable-reason[data-v-791f04c5] {
  font-size: 14px;
  color: #999bac;
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px
}

.title-bar[data-v-791f04c5] {
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-left: auto;
  gap: 8px
}

.title-bar span[data-v-791f04c5] {
  font-size: 14px;
  color: #999bac
}

.title-bar a[data-v-791f04c5] {
  pointer-events: all;
  color: #fff;
  cursor: pointer
}

.title-bar a[data-v-791f04c5]:hover {
  color: var(--theme-color-primary)
}

.title-bar svg[data-v-791f04c5] {
  transform: rotate(180deg);
  transition: all .4s;
  float: right
}

.title-bar.expand a svg[data-v-791f04c5] {
  transform: rotate(0)
}

.content[data-v-791f04c5] {
  height: 20px;
  transition: height .2s
}

.content.expand[data-v-791f04c5] {
  height: auto
}

.content.disabled .main-view[data-v-791f04c5] {
  opacity: 30%
}

.content.disabled .main-view .view[data-v-791f04c5] {
  opacity: 0
}

.content.disabled .movement-type[data-v-791f04c5],
.content.disabled .parameter[data-v-791f04c5] {
  opacity: 30%
}

.content .main-view[data-v-791f04c5] {
  height: 220px;
  width: 100%;
  border-radius: 10px;
  background-color: #0d1116
}

.content .main-view .container[data-v-791f04c5] {
  position: absolute;
  overflow: hidden;
  width: 418px;
  border-radius: 10px;
  height: 220px
}

.content .main-view .back[data-v-791f04c5] {
  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-791f04c5] {
  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-791f04c5] {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -10px;
  margin-top: -10px
}

.content .movement-type[data-v-791f04c5] {
  margin-top: 16px;
  width: 100%;
  gap: 24px
}

.content .movement-type .title[data-v-791f04c5] {
  color: #fff;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 600
}

.content .movement-type .title svg[data-v-791f04c5] {
  color: #fff;
  vertical-align: middle;
  margin-bottom: 1px;
  margin-left: 4px
}

.content .movement-type button[data-v-791f04c5] {
  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-791f04c5] {
  color: var(--color-text-2)
}

.content .movement-type button.selected[data-v-791f04c5] {
  background: var(--color-other-2);
  border-color: transparent
}

.content .movement-type button.selected .btn-txt[data-v-791f04c5] {
  color: var(--color-text-1);
  font-weight: 600
}

.parameter[data-v-791f04c5] {
  margin-top: 12px
}

.switch[data-v-78965dbe] {
  position: relative;
  width: 32px;
  height: 16px
}

.switch.disabled[data-v-78965dbe] {
  cursor: not-allowed
}

.switch.disabled .back[data-v-78965dbe] {
  background: #666;
  cursor: not-allowed
}

.switch.disabled .btn[data-v-78965dbe] {
  background: #ccc;
  cursor: not-allowed
}

.switch.disabled .btn[data-v-78965dbe]:hover {
  background: #ccc
}

.switch .back[data-v-78965dbe] {
  position: absolute;
  margin: 4px 0;
  width: 32px;
  height: 8px;
  border-radius: 10em;
  background: var(--color-other-5);
  cursor: pointer
}

.switch .btn[data-v-78965dbe] {
  transition: margin-left .2s;
  position: absolute;
  border-radius: 10em;
  width: 16px;
  height: 16px;
  background: var(--color-theme-2);
  cursor: pointer
}

.switch .btn[data-v-78965dbe]:not(.on) {
  background: var(--color-text-2)
}

.switch .btn.on[data-v-78965dbe] {
  margin-left: 16px
}

.title-container[data-v-91b5aa38] {
  display: flex;
  align-items: center
}

.title-container .back[data-v-91b5aa38] {
  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-91b5aa38] {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  margin: 0 6px 0 16px
}

.title-container .delete[data-v-91b5aa38] {
  cursor: pointer
}

.top-bar[data-v-91b5aa38] {
  min-width: 1440px;
  display: flex;
  align-items: center
}

.top-bar .label[data-v-91b5aa38] {
  color: var(--color-text-2)
}

.top-bar .detecting[data-v-91b5aa38] {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px
}

.top-bar .pipe[data-v-91b5aa38] {
  display: inline-block;
  margin: 0 16px;
  width: 1px;
  background-color: var(--color-border-line);
  height: 12px;
  vertical-align: bottom
}

.top-bar .brush-size[data-v-91b5aa38] {
  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-91b5aa38] {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.top-bar .brush-size .content .el-slider-container[data-v-91b5aa38] {
  width: 240px
}

.top-bar .brush-size .content .slider-val[data-v-91b5aa38] {
  width: 32px;
  display: block;
  color: var(--color-text-2);
  text-align: center
}

.top-bar .brush-size .content .slider-val.disabled[data-v-91b5aa38] {
  color: var(--color-text-4)
}

.top-bar .brush-size .content .icon-container[data-v-91b5aa38] {
  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-91b5aa38] {
  color: var(--color-text-2);
  cursor: pointer
}

.top-bar .detect-container[data-v-91b5aa38] {
  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-91b5aa38] {
  margin-left: 10px
}

.top-bar .desc[data-v-91b5aa38] {
  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-91b5aa38] {
  width: 100%;
  margin-top: 24px;
  height: calc(100vh - 248px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  min-width: 1440px;
  min-height: 550px
}

.main .left-panel[data-v-91b5aa38] {
  flex: 1;
  background-color: var(--color-bg-primary);
  border-radius: 12px;
  position: relative
}

.main .left-panel .board-container[data-v-91b5aa38] {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center
}

.main .left-panel .board[data-v-91b5aa38] {
  position: relative
}

.main .left-panel .board img[data-v-91b5aa38] {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain
}

.main .left-panel .board canvas[data-v-91b5aa38] {
  position: absolute;
  width: 100%;
  height: 100%
}

.main .left-panel .board canvas.region[data-v-91b5aa38] {
  opacity: 50%
}

.main .left-panel .board canvas.highlight[data-v-91b5aa38] {
  opacity: 40%
}

.main .left-panel .board .bounding-rect[data-v-91b5aa38] {
  position: absolute;
  border: 2px solid var(--color-fill-white);
  border-radius: 4px;
  pointer-events: none
}

.main .left-panel .board .bounding-rect .delete[data-v-91b5aa38] {
  width: 20px;
  height: 20px;
  background-color: var(--color-fill-white);
  border-radius: 12px;
  color: var(--color-fill-black);
  cursor: pointer;
  position: absolute;
  top: -10px;
  right: -10px;
  pointer-events: all
}

.main .left-panel .board .brush-circle[data-v-91b5aa38] {
  position: absolute;
  border: 2px solid;
  pointer-events: none
}

.main .left-panel .board .brush-circle.auto-region[data-v-91b5aa38] {
  border: none
}

.main .left-panel .board .brush-circle.auto-region svg[data-v-91b5aa38] {
  margin-left: 6px;
  margin-top: 6px
}

.main .right-panel[data-v-91b5aa38] {
  width: 420px;
  margin-left: 32px;
  position: relative
}

.main .right-panel h2[data-v-91b5aa38] {
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  color: var(--color-text-1)
}

.main .right-panel .brushes[data-v-91b5aa38] {
  min-width: 364px;
  margin-bottom: 16px
}

.main .right-panel .brushes .title[data-v-91b5aa38] {
  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-91b5aa38] {
  display: inline-block;
  width: 184px
}

.main .right-panel .brushes .title .track[data-v-91b5aa38] {
  display: inline-block;
  width: 184px;
  margin-left: 8px
}

.main .right-panel .brushes .brush[data-v-91b5aa38] {
  display: flex;
  gap: 8px;
  margin-bottom: 8px
}

.main .right-panel .brushes .brush .brush-inner[data-v-91b5aa38] {
  display: flex;
  align-items: center
}

.main .right-panel .brushes .brush.disabled .box[data-v-91b5aa38] {
  cursor: not-allowed;
  background: var(--color-fill-disabled);
  border-color: var(--color-border-component);
  color: var(--color-text-4) !important
}

.main .right-panel .brushes .brush.disabled .box.active[data-v-91b5aa38] {
  background: var(--color-fill-disabled);
  border-color: var(--color-border-component)
}

.main .right-panel .brushes .brush.disabled .box .dot[data-v-91b5aa38] {
  background-color: var(--color-text-4) !important
}

.main .right-panel .brushes .brush.disabled .mark-item[data-v-91b5aa38] {
  color: var(--color-text-1) !important
}

.main .right-panel .brushes .brush.disabled .mark-item.region-block.mark-item-guide-1[data-v-91b5aa38] {
  color: var(--color-text-1);
  background: var(--color-fill-light) !important
}

.main .right-panel .brushes .brush.disabled .mark-item.region-block.mark-item-guide-1 .dot[data-v-91b5aa38] {
  background-color: #72e528 !important
}

.main .right-panel .brushes .brush.disabled .mark-item.traj-block.mark-item-guide-2[data-v-91b5aa38] {
  background: var(--color-fill-light) !important;
  color: var(--color-text-1) !important
}

.main .right-panel .brushes .brush.disabled .mark-item.traj-block.mark-item-guide-2 svg.icon[data-v-91b5aa38] {
  color: #72e528 !important
}

.main .right-panel .brushes .brush.disabled .mark-item.static-region.mark-item-guide-3[data-v-91b5aa38] {
  background: var(--color-fill-light) !important
}

.main .right-panel .brushes .brush.disabled .mark-item.static-region.mark-item-guide-3 .dot[data-v-91b5aa38] {
  background-color: #000 !important
}

.main .right-panel .brushes .brush .box[data-v-91b5aa38] {
  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-91b5aa38] {
  background-color: var(--color-fill-disabled) !important;
  border-color: var(--color-border-component) !important;
  cursor: not-allowed;
  color: var(--color-text-4)
}

.main .right-panel .brushes .brush .box.disabled.mark-item-guide-2[data-v-91b5aa38] {
  background: var(--color-fill-light) !important;
  color: var(--color-text-1) !important
}

.main .right-panel .brushes .brush .box.disabled.mark-item-guide-2 svg.icon[data-v-91b5aa38] {
  color: #72e528 !important
}

.main .right-panel .brushes .brush .box.active[data-v-91b5aa38] {
  border-color: var(--color-text-1)
}

.main .right-panel .brushes .brush .check-container[data-v-91b5aa38] {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center
}

.main .right-panel .brushes .brush .region-block[data-v-91b5aa38] {
  color: var(--color-text-1);
  font-size: 14px;
  line-height: 24px
}

.main .right-panel .brushes .brush .region-block.static-region[data-v-91b5aa38] {
  flex: 1
}

.main .right-panel .brushes .brush .region-block .dot[data-v-91b5aa38] {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  margin-right: 8px
}

.main .right-panel .brushes .brush .traj-block[data-v-91b5aa38] {
  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-91b5aa38] {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px
}

.main .right-panel .brushes .brush .traj-block.active[data-v-91b5aa38] {
  color: var(--color-text-1)
}

.main .right-panel .brushes .brush .traj-block.disabled[data-v-91b5aa38] {
  color: var(--color-text-4)
}

.main .right-panel .brushes .brush .traj-block svg.icon[data-v-91b5aa38] {
  margin-top: 3px;
  vertical-align: top
}

.main .right-panel .right-tools[data-v-91b5aa38] {
  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-91b5aa38]:disabled {
  cursor: not-allowed;
  color: var(--color-text-4)
}

.main .right-panel .right-tools .generic-button[data-v-91b5aa38]:disabled:active {
  filter: none
}

.main .right-panel .right-tools .pipe[data-v-91b5aa38] {
  width: 0;
  height: 12px;
  border-left: 1px solid var(--color-border-line)
}

.mark-item[data-v-91b5aa38] {
  color: var(--color-text-1);
  background: var(--color-fill-light) !important
}

.mark-item.region-block.mark-item-guide-1[data-v-91b5aa38] {
  color: var(--color-text-1)
}

.mark-item.region-block.mark-item-guide-1 .dot[data-v-91b5aa38] {
  background-color: #72e528 !important
}

.mark-item.traj-block.mark-item-guide-2[data-v-91b5aa38] {
  background: var(--color-fill-light) !important;
  color: var(--color-text-1) !important
}

.mark-item.traj-block.mark-item-guide-2 svg.icon[data-v-91b5aa38] {
  color: #72e528 !important
}

.mark-item.static-region.mark-item-guide-3 .dot[data-v-91b5aa38] {
  background-color: #000 !important
}

.mark-box[data-v-91b5aa38] {
  z-index: 99999;
  position: relative;
  width: fit-content;
  border-radius: 8px
}

.static-tip[data-v-91b5aa38] {
  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-91b5aa38] {
  margin-right: 4px;
  vertical-align: middle;
  margin-bottom: 2px
}

[data-v-91b5aa38] .el-slider__runway {
  height: 4px;
  background-color: var(--color-other-2)
}

[data-v-91b5aa38] .el-slider__runway .el-slider__bar {
  height: 4px;
  background-color: var(--color-text-1)
}

[data-v-91b5aa38] .el-slider__runway .el-slider__button {
  background-color: var(--color-text-1)
}

[data-v-91b5aa38] .el-slider__runway.is-disabled {
  background-color: var(--color-other-2)
}

[data-v-91b5aa38] .el-slider__runway.is-disabled .el-slider__bar,
[data-v-91b5aa38] .el-slider__runway.is-disabled .el-slider__button {
  background-color: var(--color-text-3)
}

[data-v-91b5aa38] .el-slider__button-wrapper {
  height: 12px;
  width: 4px;
  border-radius: 4px;
  top: -8px
}

[data-v-91b5aa38] .el-slider__button-wrapper .el-slider__button {
  border: none;
  height: 12px;
  width: 4px;
  border-radius: 4px
}

.bottom-bar[data-v-91b5aa38] {
  margin-top: 24px;
  width: 100%;
  height: 36px
}

.bottom-bar .bottom-btns[data-v-91b5aa38] {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end
}

.bottom-bar .bottom-btns .generic-button[data-v-91b5aa38]:not(:last-child) {
  margin-right: 8px
}

.bottom-bar .bottom-btns .guide[data-v-91b5aa38] {
  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-a176eda9] {
  padding: 12px 16px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer
}

.btn[data-v-a176eda9]:active {
  background: #1d242e
}

.btn.disabled[data-v-a176eda9] {
  cursor: default;
  color: #3b3c4d
}

.btn.disabled[data-v-a176eda9]:active {
  background: #0d1116
}

.btn span[data-v-a176eda9] {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px
}

.btn svg[data-v-a176eda9] {
  margin-top: 2px;
  float: right
}

.preview[data-v-a176eda9] {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.preview img[data-v-a176eda9] {
  width: 100%;
  border-radius: 8px
}

.extra-line[data-v-a176eda9] {
  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-a176eda9] {
  color: var(--color-text-3);
  line-height: 1.2
}

.extra-line span.selected[data-v-a176eda9] {
  color: var(--color-text-1)
}

.extra-line .button[data-v-a176eda9] {
  padding-left: 10px;
  color: var(--color-text-1);
  text-align: right
}

.extra-line svg[data-v-a176eda9] {
  margin-right: 8px
}

.dialog-motion-3dagreement .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--color-border-container)
}

.dialog-motion-3dagreement .header span {
  font-size: 26px;
  font-weight: 900;
  line-height: 40px
}

.dialog-motion-3dagreement-title {
  font-size: 18px;
  line-height: 26px;
  font-weight: 500
}

.dialog-motion-3dagreement-content {
  height: 466px;
  overflow-y: scroll;
  padding: 24px;
  border-radius: 10px;
  line-height: 24px
}

.dialog-motion-3dagreement-content .bvh-title {
  color: var(--color-text-1);
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 12px;
  margin-left: -8px
}

.dialog-motion-3dagreement-content .bvh-title :nth-child(2) {
  margin-top: 32px
}

.dialog-motion-3dagreement-content .bvh-row {
  line-height: 24px;
  color: var(--color-font-1)
}

.dialog-motion-3dagreement-content .bvh-example {
  background: var(--color-fill-light);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 22px;
  color: var(--color-text-2);
  margin: 8px 0
}

.dialog-motion-3dagreement-content .tip {
  display: inline-block;
  color: var(--color-theme-2);
  text-decoration: underline;
  padding: 0 5px;
  cursor: pointer
}

.dialog-motion-3dagreement-content .bvh-grids {
  height: 190px;
  margin: 8px 0 24px;
  display: flex;
  gap: 18px
}

.dialog-motion-3dagreement-content .bvh-grids video,
.dialog-motion-3dagreement-content .bvh-grids img {
  background-color: var(--color-bg-page);
  height: 100%;
  border-radius: 6px
}

.dialog-motion-3dagreement-content .bvh-grids img {
  width: 307px
}

.dialog-motion-3dagreement-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--color-border-container);
  padding: 24px
}

.secend-tabs[data-v-32047eac] {
  margin-top: 16px;
  margin-bottom: 24px
}

.trigger[data-v-32047eac] {
  width: 100px;
  margin-left: 50px
}

.motion-gallary[data-v-32047eac] {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 32px
}

.gallarys[data-v-32047eac] {
  padding-top: 10px
}

.gallarys.disabled .gallary[data-v-32047eac] {
  cursor: not-allowed
}

.gallarys>div[data-v-32047eac] {
  height: calc(100vh - 540px);
  overflow-y: scroll;
  padding-bottom: 50px
}

.gallary[data-v-32047eac] {
  display: flex;
  flex-direction: column;
  background-color: var(--color-other-1);
  border-radius: 4px;
  margin-bottom: 4px;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid transparent;
  overflow: hidden
}

.gallary .video-container[data-v-32047eac] {
  width: 157px;
  height: 157px
}

.gallary .video-container img[data-v-32047eac] {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.gallary .motion-type[data-v-32047eac] {
  background-color: var(--color-other-2);
  height: 36px;
  line-height: 36px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 5px
}

.gallary.selected[data-v-32047eac] {
  border: 1px solid var(--color-border-focused)
}

.gallary.selected .motion-type[data-v-32047eac] {
  background: var(--color-gradient-button);
  color: var(--color-text-5);
  font-weight: 600
}

.gallary[data-v-32047eac]:hover {
  border: 1px solid var(--color-border-focused)
}

.gallary:hover .motion-type[data-v-32047eac] {
  background: var(--color-gradient-button);
  color: var(--color-text-5);
  font-weight: 600
}

.toggle-motion-angle[data-v-46c45e06] {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 100px;
  display: flex;
  justify-content: center
}

.toggle-motion-angle .toggle-controls[data-v-46c45e06] {
  padding: 0 24px;
  display: flex;
  height: 46px;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  border-radius: 66px;
  background: #ffffff21
}

.toggle-motion-angle .toggle-controls.disable[data-v-46c45e06] {
  cursor: not-allowed
}

.toggle-motion-angle .toggle-controls svg[data-v-46c45e06] {
  width: 16px;
  height: 16px;
  margin-left: 6px
}

.media-control[data-v-62170aaf] {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0
}

.media-control .audio-control[data-v-62170aaf] {
  height: 72px;
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  align-items: center;
  background: var(--color-other-1);
  padding: 16px 12px
}

.media-control .audio-control .control-left[data-v-62170aaf] {
  height: 40px;
  width: 40px;
  border-radius: 8px;
  cursor: pointer;
  background: var(--color-other-1);
  color: var(--color-text-1)
}

.media-control .audio-control .control-right[data-v-62170aaf] {
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px
}

.media-control .audio-control .control-right .top[data-v-62170aaf] {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.media-control .audio-control .control-right .top .name[data-v-62170aaf] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 12px;
  font-size: 14px;
  color: var(--color-text-1)
}

.media-control .audio-control .control-right .top .btns[data-v-62170aaf] {
  cursor: pointer;
  color: #f9fbfc
}

.media-control .audio-progress[data-v-62170aaf] {
  height: 20px;
  display: flex;
  align-items: center;
  gap: 8px
}

.media-control .audio-progress .time[data-v-62170aaf] {
  width: 32px;
  color: var(--color-text-1);
  font-size: 12px;
  text-align: center
}

.container[data-v-21b4291c] {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #000
}

.three-container[data-v-21b4291c] {
  width: 100%;
  height: 100%
}

.controls[data-v-21b4291c] {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 100;
  display: flex;
  gap: 10px
}

.motion-capture[data-v-2e292ed7] {
  width: 208px;
  position: absolute;
  z-index: 2000;
  top: 8px;
  left: 8px;
  background: var(--color-bg-popover-1);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 4px
}

.motion-capture .img-container[data-v-2e292ed7] {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
  display: flex;
  justify-content: center;
  align-items: center
}

.motion-capture .img-container .media[data-v-2e292ed7] {
  width: 100%;
  height: 100%
}

.motion-capture .img-container .media-sections-container[data-v-2e292ed7] {
  position: absolute;
  z-index: 10;
  left: 4px;
  right: 4px;
  top: 0;
  bottom: 36px;
  display: flex;
  justify-content: center;
  align-items: center
}

.motion-capture .img-container .media-sections[data-v-2e292ed7] {
  position: relative
}

.motion-capture .img-container .media-sections div[data-v-2e292ed7] {
  position: absolute;
  border: 1px solid transparent;
  background-color: var(--color-other-3);
  border-color: var(--color-other-5);
  border-radius: 3px
}

.motion-capture .img-container .media-sections div.selected[data-v-2e292ed7] {
  background: var(--color-theme-3);
  border-color: var(--color-theme-2)
}

.motion-capture .img-container .media-sections div.disabled[data-v-2e292ed7] {
  cursor: not-allowed
}

.motion-capture .options[data-v-2e292ed7] {
  width: 100%;
  height: 32px;
  background: var(--color-other-1);
  padding: 0 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  margin-top: 0;
  cursor: pointer
}

.motion-capture.editing[data-v-2e292ed7] {
  width: 648px
}

.motion-capture.editing .img-container .media-sections[data-v-2e292ed7] {
  bottom: 10px
}

.motion-capture.editing .img-container .media-sections div[data-v-2e292ed7] {
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}

.motion-capture.editing .img-container .media-sections div .shut[data-v-2e292ed7] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  position: absolute;
  right: -8px;
  top: -8px;
  border-radius: 8px;
  background: var(--color-text-1);
  display: flex;
  justify-content: center;
  align-items: center
}

.motion-capture.editing .img-container .media-sections div button.secondary[data-v-2e292ed7] {
  background: var(--color-fill-black-3);
  color: var(--color-text-1)
}

.motion-capture.editing .img-container .media-sections div[data-v-2e292ed7]:hover {
  border-color: var(--color-fill-white)
}

.motion-capture.editing .section-options[data-v-2e292ed7] {
  height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px
}

.motion-capture.editing .section-options .section-options-left[data-v-2e292ed7] {
  display: flex;
  align-items: center
}

.motion-capture.editing .section-options .section-options-left span[data-v-2e292ed7] {
  display: inline-block;
  margin-left: 8px
}

.motion-capture.editing .section-options .section-options-right[data-v-2e292ed7] {
  display: flex;
  justify-content: flex-end;
  align-items: center
}

.motion-capture.editing .section-options .section-options-right button[data-v-2e292ed7]:first-child {
  margin-right: 12px
}

.motion-capture.disabled[data-v-2e292ed7] {
  cursor: not-allowed
}

.motion-capture.disabled .options[data-v-2e292ed7] {
  opacity: .5
}

.action-content[data-v-e8a9e587] .feedback-dialog .feedback-header {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.action-content[data-v-e8a9e587] .feedback-dialog .el-dialog__header {
  padding-bottom: 8px
}

.action-content[data-v-e8a9e587] .feedback-dialog .feedback-content .feedback-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 16px
}

.action-content[data-v-e8a9e587] .feedback-dialog .feedback-content .feedback-option {
  cursor: pointer;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, .7)
}

.action-content[data-v-e8a9e587] .feedback-dialog .feedback-content .feedback-option.selected,
.action-content[data-v-e8a9e587] .feedback-dialog .feedback-content .feedback-option:hover {
  background: #ffffff4d
}

.action-content[data-v-e8a9e587] .feedback-dialog .feedback-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  height: 32px
}

.content-header[data-v-e8a9e587] {
  color: var(--color-text-1);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  height: 26px;
  margin-bottom: 20px;
  display: flex;
  align-items: center
}

.top[data-v-e8a9e587] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px
}

.top .t-left[data-v-e8a9e587] {
  height: 24px;
  font-weight: 600;
  color: var(--color-text-1)
}

.top[data-v-e8a9e587] .secondary-tabs .disabled {
  cursor: not-allowed
}

.top[data-v-e8a9e587] .secondary-tabs .container {
  white-space: nowrap
}

.top .t-right[data-v-e8a9e587] {
  display: flex;
  align-items: center;
  gap: 16px
}

.top .t-right .guide[data-v-e8a9e587] {
  display: flex;
  align-items: center;
  cursor: pointer
}

.top .t-right .guide svg[data-v-e8a9e587] {
  margin-right: 6px
}

.genrete[data-v-e8a9e587] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px
}

.genrete .error-tip[data-v-e8a9e587] {
  font-size: 12px;
  line-height: 18px;
  padding-left: 22px;
  position: relative;
  color: var(--color-fill-error)
}

.genrete .error-tip svg[data-v-e8a9e587] {
  position: absolute;
  left: 0;
  top: 1px
}

.generate-container[data-v-e8a9e587] {
  height: 236px;
  border-radius: 12px;
  border: 1px solid var(--color-border-container);
  overflow: hidden;
  position: relative
}

.generate-container.text2motion[data-v-e8a9e587] {
  border: none;
  height: 188px
}

.generate-container.text2motion .prompt-box[data-v-e8a9e587] {
  height: 100%
}

.generate-container.text2motion .prompt-box[data-v-e8a9e587] .prompt-wrap {
  height: 100% !important;
  border-radius: 12px
}

.generate-container.text2motion .prompt-box[data-v-e8a9e587] .prompt-wrap .prompt {
  height: 100%
}

.generate-container.text2motion.error[data-v-e8a9e587] .prompt-wrap {
  border-color: var(--color-fill-error)
}

.generate-container .video-box[data-v-e8a9e587] {
  height: 100%;
  position: relative;
  border-radius: 12px;
  overflow: hidden
}

.generate-container .video-box video[data-v-e8a9e587] {
  height: 100%;
  width: 100%
}

.generate-container .video-box video[data-v-e8a9e587]::-webkit-media-controls-mute-button {
  display: none
}

.generate-container .video-box video[data-v-e8a9e587]::-webkit-media-controls-fullscreen-button {
  display: none
}

.generate-container .video-box .buttons[data-v-e8a9e587] {
  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);
  z-index: 2
}

.generate-container .video-box .mask-box[data-v-e8a9e587] {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: var(--color-fill-black-3);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 3;
  border-radius: 12px
}

.generate-container .video-box .loading-box[data-v-e8a9e587] {
  gap: 4px
}

.generate-container .video-box .loading-box .loading-info[data-v-e8a9e587] {
  z-index: inherit;
  color: var(--color-text-1);
  font-size: 12px;
  line-height: 22px
}

.generate-container .video-box .loading-box .effect-wrapper[data-v-e8a9e587] {
  margin: 0
}

.generate-container .video-box .error-box[data-v-e8a9e587] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.generate-container .video-box .error-box svg[data-v-e8a9e587] {
  margin-bottom: 10px
}

.generate-container .video-box .error-box .error-info[data-v-e8a9e587] {
  line-height: 26px;
  color: var(--color-text-1)
}

.generate-container .video-box .error-box .error-info span[data-v-e8a9e587] {
  text-decoration: underline;
  cursor: pointer
}

.generate-container .first-upload-hotzone[data-v-e8a9e587] {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 3
}

.dialog-motion-control.el-dialog {
  margin: 0 !important;
  border-radius: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  position: fixed;
  overflow: hidden !important;
  top: 0;
  left: 0;
  background: var(--color-bg-page) !important
}

.dialog-motion-control .el-dialog__body {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden
}

.dialog-motion-control .el-dialog__header {
  padding-bottom: 0 !important
}

.title-container[data-v-e0a4cfcd] {
  margin: 12px 0;
  height: 40px;
  display: flex;
  align-items: center
}

.title-container .back[data-v-e0a4cfcd] {
  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-e0a4cfcd] {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--color-text-1);
  margin: 0 6px 0 16px
}

.divide[data-v-e0a4cfcd] {
  height: 1px;
  border-radius: 8px;
  background: var(--color-other-2);
  flex-shrink: 0
}

.motion-play-page[data-v-e0a4cfcd] {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-grow: 1
}

.motion-play-page .main[data-v-e0a4cfcd] {
  margin-top: 32px;
  width: 100%;
  display: flex;
  flex-direction: row;
  height: calc(100vh - 180px);
  align-items: stretch;
  justify-content: space-between
}

.motion-play-page .main .r-content[data-v-e0a4cfcd] {
  height: 100%;
  width: 480px;
  margin-left: 32px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding-right: 8px
}

.motion-play-page .main .l-content[data-v-e0a4cfcd] {
  width: calc(100% - 512px);
  flex: 1;
  display: flex;
  flex-direction: column
}

.motion-play-page .main .l-content .content-header[data-v-e0a4cfcd] {
  font-size: 16px;
  height: 26px;
  margin-bottom: 16px;
  line-height: 26px;
  color: var(--color-text-1);
  font-weight: 600
}

.motion-play-page .main .l-content .playground[data-v-e0a4cfcd] {
  height: calc(100vh - 222px);
  position: relative
}

.motion-play-page .origin-img-upload[data-v-e0a4cfcd] {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.motion-play-page .origin-img-upload .extrace-fail[data-v-e0a4cfcd] {
  display: flex;
  align-items: center;
  justify-content: center
}

.motion-play-page .origin-img-upload .extrace-fail .bvh-guide[data-v-e0a4cfcd] {
  text-decoration: underline;
  color: var(--color-text-1);
  margin-left: 6px;
  cursor: pointer
}

.motion-play-page .origin-img-upload .extrace-fail .bvh-guide[data-v-e0a4cfcd]:hover {
  color: var(--color-theme-2)
}

.motion-play-page .origin-img-upload .from-history-prefix[data-v-e0a4cfcd] {
  display: inline-flex;
  font-size: 12px;
  color: var(--color-text-2)
}

.motion-play-page .origin-img-upload .from-history-prefix span[data-v-e0a4cfcd]:first-child {
  color: var(--color-text-1)
}

.motion-play-page .global-loading[data-v-e0a4cfcd] {
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 65px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--color-fill-black-2);
  z-index: 2
}

.motion-play-page .global-loading .page-loading[data-v-e0a4cfcd] {
  height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.motion-play-page .global-loading .page-loading .loading-tips[data-v-e0a4cfcd] {
  line-height: 22px;
  margin-top: 4px
}

.motion-play-page .global-loading .effect-wrapper[data-v-e0a4cfcd] {
  margin: 0
}

.motion-play-page .footer[data-v-e0a4cfcd] {
  width: 100%;
  height: 68px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-border-component);
  background: var(--color-bg-dialog);
  position: absolute;
  padding: 0 24px;
  left: 0;
  right: 0;
  bottom: 0
}

.motion-play-page .footer .guide[data-v-e0a4cfcd] {
  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
}

.motion-play-page .footer .l-footer[data-v-e0a4cfcd] {
  display: flex;
  align-items: center
}

.motion-play-page .footer .l-footer span[data-v-e0a4cfcd] {
  margin-left: 4px
}

.motion-play-page .footer .r-footer .big[data-v-e0a4cfcd] {
  margin-left: 16px
}

.mark-box[data-v-e0a4cfcd] {
  z-index: 2200;
  outline: 8px solid #181c22;
  position: absolute;
  border-radius: 8px;
  pointer-events: none
}

.mark-box-content[data-v-e0a4cfcd] {
  z-index: 2201;
  pointer-events: none
}

.motion-control-panel .title-wrap[data-v-9ed3d0e2] {
  height: 32px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.motion-control-panel .title-wrap-left[data-v-9ed3d0e2] {
  display: flex;
  align-items: center
}

.motion-control-panel .title-wrap-left .beta[data-v-9ed3d0e2] {
  height: 20px;
  padding: 0 6px;
  margin-left: 6px;
  line-height: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-theme-2);
  border-radius: 4px;
  background: var(--color-theme-3)
}

.motion-control-panel .title-wrap .title[data-v-9ed3d0e2] {
  font-weight: 600;
  color: var(--color-text-1)
}

.motion-control-panel .title-wrap .title-tips[data-v-9ed3d0e2] {
  height: 100%;
  display: flex;
  align-items: center;
  color: var(--color-text-2)
}

.motion-control-panel .title-wrap .title-tips .info-btn[data-v-9ed3d0e2] {
  margin-right: 6px
}

.motion-control-panel .extra-line[data-v-9ed3d0e2] {
  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
}

.motion-control-panel .extra-line.selected[data-v-9ed3d0e2] {
  height: 64px
}

.motion-control-panel .extra-line span[data-v-9ed3d0e2] {
  color: var(--color-text-3);
  line-height: 1.2
}

.motion-control-panel .extra-line .button[data-v-9ed3d0e2] {
  padding-left: 10px;
  color: var(--color-text-1);
  text-align: right
}

.motion-control-panel .extra-line svg[data-v-9ed3d0e2] {
  margin-right: 8px;
  cursor: pointer
}

.motion-control-panel .extra-line .selected[data-v-9ed3d0e2] {
  display: flex;
  gap: 4px
}

.motion-control-panel .extra-line .selected-item[data-v-9ed3d0e2] {
  height: 48px;
  width: 48px;
  border-radius: 4px;
  overflow: hidden
}

.motion-control-panel .extra-line .selected-item img[data-v-9ed3d0e2] {
  height: 100%;
  width: 100%
}

.preview .preview-img[data-v-9ed3d0e2] {
  display: flex;
  gap: 9px;
  margin-bottom: 12px
}

.preview .preview-img-item[data-v-9ed3d0e2] {
  width: 240px;
  height: 240px;
  border-radius: 4px;
  overflow: hidden;
  position: relative
}

.preview .preview-img-item .delete-icon[data-v-9ed3d0e2] {
  position: absolute;
  right: 4px;
  top: 4px;
  height: 28px;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-fill-black-1);
  border-radius: 8px;
  cursor: pointer
}

.preview .preview-img-item img[data-v-9ed3d0e2] {
  width: 100%;
  height: 100%
}

.preview .preview-img-item .character[data-v-9ed3d0e2] {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 48px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  background: var(--color-gradient-black);
  font-size: 12px;
  color: var(--color-text-1)
}

.motion-control-guide-popover .motion-control-guide .title[data-v-9ed3d0e2] {
  color: var(--color-text-1);
  font-weight: 600;
  height: 24px;
  line-height: 24px;
  margin-bottom: 4px;
  font-size: 14px
}

.motion-control-guide-popover .motion-control-guide .content[data-v-9ed3d0e2] {
  font-size: 13px;
  color: var(--color-text-2);
  line-height: 22px;
  margin-bottom: 16px
}

.motion-control-guide-popover .motion-control-guide video[data-v-9ed3d0e2] {
  width: 335px;
  height: 244px;
  border-radius: 16px
}

.picture-select-menu__wrapper[data-v-2a39c2e6] {
  position: relative
}

.picture-select-menu__wrapper .picture-select-menu[data-v-2a39c2e6] {
  position: absolute;
  width: 100%;
  top: 100%;
  z-index: 999
}

body.mobile .recommends-box[data-v-a88947f6] {
  gap: 8px;
  overflow-x: auto
}

body.mobile .recommends-box[data-v-a88947f6]::-webkit-scrollbar {
  display: none
}

.key-frames-box[data-v-a88947f6] {
  margin-top: 16px;
  border-radius: 8px;
  border: 1px solid var(--color-border-container);
  display: flex;
  flex-direction: column
}

.key-frames-box .uploader[data-v-a88947f6] {
  padding: 8px;
  display: flex;
  gap: 8px
}

.key-frames-box .first-uploader-box[data-v-a88947f6] {
  height: 100%;
  width: 100%;
  position: relative
}

.key-frames-box .first-uploader-box .first-frame-narrow[data-v-a88947f6] {
  position: absolute;
  transition: all .2s;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  display: flex;
  gap: 16px
}

.key-frames-box .first-uploader-box .first-frame-narrow[data-v-a88947f6] .vertical-center {
  align-items: flex-start
}

.key-frames-box .first-uploader-box .first-frame-narrow[data-v-a88947f6]:hover {
  border-radius: 4px;
  background-color: #00000080
}

.key-frames-box .first-uploader-box .first-frame-narrow[data-v-a88947f6]:hover svg {
  opacity: 1
}

.key-frames-box .first-uploader-box .first-frame-narrow[data-v-a88947f6] svg {
  opacity: 0;
  transition: all .2s;
  cursor: pointer;
  width: 20px;
  height: 20px
}

.key-frames-box .first-uploader-box .first-frame-narrow[data-v-a88947f6] svg:active {
  filter: brightness(.9)
}

.key-frames-box .controls[data-v-a88947f6] {
  border-top: 1px solid var(--color-border-frame);
  padding: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px
}

.key-frames-box .controls .swap-button[data-v-a88947f6] {
  cursor: pointer
}

.key-frames-box .controls .swap-button.disabled[data-v-a88947f6] {
  cursor: not-allowed;
  color: var(--color-text-3)
}

.key-frames-box .controls .end-frame-confirm[data-v-a88947f6] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

.key-frames-box .controls .end-frame-confirm[data-v-a88947f6] .vertical-center {
  width: 100% !important;
  overflow: hidden;
  opacity: 0
}

.key-frames-box .controls .control[data-v-a88947f6] {
  width: 130px;
  height: 40px;
  padding: 4px;
  background-color: var(--color-fill-light);
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
  color: var(--color-text-1)
}

.key-frames-box .controls .control[data-v-a88947f6]:hover {
  border: 1px solid var(--color-border-hover)
}

.key-frames-box .controls .control:hover .delete-button[data-v-a88947f6] {
  display: unset
}

.key-frames-box .controls .control.active[data-v-a88947f6] {
  border: 1px solid var(--color-border-focused)
}

.key-frames-box .controls .control.disabled[data-v-a88947f6] {
  border: none;
  color: var(--color-text-3)
}

.key-frames-box .controls .control img[data-v-a88947f6] {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background-color: var(--color-other-2);
  object-fit: contain
}

.key-frames-box .controls .control .title[data-v-a88947f6] {
  line-height: 24px;
  flex-grow: 1;
  text-align: center
}

.key-frames-box .controls .control .delete-button[data-v-a88947f6] {
  position: absolute;
  cursor: pointer;
  transform: translate(50%, -50%);
  top: 0;
  right: 0;
  display: none
}

.key-frames-box .recommends-box[data-v-a88947f6] {
  width: 100%;
  height: 80px;
  border-top: 1px solid var(--color-border-frame);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  justify-content: space-between;
  border-radius: 0 0 12px 12px
}

.key-frames-box .recommends-box .image-list[data-v-a88947f6] {
  flex: 1;
  display: flex;
  gap: 8px;
  -ms-overflow-style: none;
  scrollbar-width: none
}

.key-frames-box .recommends-box .image-list[data-v-a88947f6]::-webkit-scrollbar {
  display: none
}

.key-frames-box .recommends-box .image-list .recommend-item[data-v-a88947f6] {
  flex-shrink: 0;
  cursor: pointer;
  height: 48px;
  width: 48px;
  position: relative
}

.key-frames-box .recommends-box .image-list .recommend-item-bg[data-v-a88947f6] {
  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-a88947f6] {
  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-a88947f6] {
  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-a88947f6] {
  font-size: 14px
}

.disabled-reason .reason[data-v-a88947f6] {
  color: var(--color-text-3)
}

.disabled-reason .button[data-v-a88947f6] {
  color: var(--color-theme-2)
}

.prompt-container[data-v-4ff5104f] {
  margin-top: 32px;
  display: flex;
  flex-direction: column
}

.extra-line[data-v-4ff5104f] {
  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-4ff5104f] {
  color: var(--color-text-3);
  line-height: 1.2
}

.extra-line .reason .arg[data-v-4ff5104f] {
  color: var(--color-text-1)
}

.extra-line .button[data-v-4ff5104f] {
  text-align: right;
  color: var(--color-text-1);
  padding-left: 10px;
  margin-right: 8px
}

.extra-line .add-icon[data-v-4ff5104f] {
  margin-left: auto;
  color: var(--color-text-1);
  margin-right: 8px
}

body.mobile .result[data-v-8be81947] {
  padding-bottom: 30px;
  height: calc(100vh - 100px);
  width: 100%
}

body.mobile .result .tools[data-v-8be81947] {
  transform: scale(.8);
  flex-wrap: wrap;
  justify-content: center
}

body.mobile .footer-btn[data-v-8be81947] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px
}

body.mobile .footer-btn__item[data-v-8be81947] {
  display: flex;
  gap: 16px
}

body.lang-en .new-version-tip[data-v-8be81947] {
  height: 50px;
  width: 637px
}

.single-result[data-v-8be81947] {
  flex-direction: row !important;
  margin: 0 auto !important
}

.result[data-v-8be81947] {
  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-8be81947]::-webkit-scrollbar {
  display: none
}

.result video[data-v-8be81947] {
  width: 100%;
  border-radius: 12px
}

.result .tools[data-v-8be81947] {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-direction: row;
  align-items: center
}

.panel-box[data-v-8be81947] {
  position: relative
}

.tab-container[data-v-8be81947] {
  position: relative;
  z-index: 2;
  opacity: var(--property-title-alpha);
  padding-bottom: 24px
}

.extension-history[data-v-8be81947] {
  text-align: center
}

.extension-history .extension-history-content[data-v-8be81947] {
  text-align: left;
  display: inline-block;
  margin-top: 24px
}

.empty-container[data-v-8be81947] {
  width: 100%;
  height: 100%
}

.empty-container .empty[data-v-8be81947] {
  padding-top: 0;
  margin-bottom: 112px
}

.extend-history-btn[data-v-8be81947] {
  cursor: pointer;
  vertical-align: middle;
  color: #fff;
  float: left;
  padding-left: 4px;
  padding-right: 4px
}

.extend-history-btn[data-v-8be81947]:hover {
  color: var(--theme-color-primary)
}

.extend-history-btn svg[data-v-8be81947] {
  vertical-align: middle;
  margin-bottom: 5px
}

.video-box[data-v-8be81947] {
  position: relative
}

.footer-btn[data-v-8be81947] {
  display: flex;
  gap: 16px;
  justify-content: space-between
}

.footer-btn__item[data-v-8be81947] {
  display: flex;
  gap: 16px
}

.primary-panel[data-v-8be81947] {
  overflow-y: auto;
  height: 100%
}

.primary-panel[data-v-8be81947]::-webkit-scrollbar {
  display: none
}

.extra-line[data-v-8be81947] {
  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-8be81947] {
  color: var(--color-text-3);
  line-height: 1.2
}

.extra-line .reason .arg[data-v-8be81947] {
  color: var(--color-text-1)
}

.extra-line .button[data-v-8be81947] {
  color: var(--color-text-1);
  cursor: pointer;
  text-align: right;
  padding-left: 10px;
  margin-right: 8px
}

.extra-line .add-icon[data-v-8be81947] {
  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-819bcffa] {
  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-819bcffa] {
  left: 0;
  transform: translate(-100%)
}

.drawer.right[data-v-819bcffa] {
  right: 0
}

.drawer-content[data-v-819bcffa] {
  padding: 20px
}

.close-button[data-v-819bcffa] {
  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-787e0615] {
  width: calc(100vw - 40px)
}

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

.cover .main[data-v-787e0615] {
  position: relative;
  display: flex;
  min-height: var(--4dabd7ac);
  height: var(--115a374e)
}

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

.cover .main .bottom-row[data-v-787e0615] {
  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-787e0615] {
  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-787e0615] {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  flex-shrink: 0
}

.cover .main .bottom-row .user .name[data-v-787e0615] {
  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-787e0615] {
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 3
}

.cover .detail[data-v-787e0615] {
  border-radius: 0 0 4px 4px;
  height: 0;
  position: relative;
  bottom: 0
}

.cover .detail[data-v-787e0615]:before {
  content: "";
  position: absolute;
  bottom: var(--1f99f6a0);
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to top, #1f2224, #1f222400);
  z-index: 2
}

.cover .detail .content[data-v-787e0615] {
  height: 100%;
  padding: 12px 16px 16px;
  -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-787e0615] {
  width: 100%;
  line-height: 20px;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-1);
  pointer-events: none
}

.cover .detail .content .introduction[data-v-787e0615] {
  width: 100%;
  color: var(--color-text-1);
  font-size: 12px;
  line-height: 20px;
  pointer-events: none
}

.cover .detail .content .introduction.no-title[data-v-787e0615] {
  line-height: 22px
}

.cover .expand[data-v-787e0615] {
  height: var(--1f99f6a0)
}

.back-to-top[data-v-55850b58] {
  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-55850b58]:hover {
  opacity: 1
}

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

.resource[data-v-99fd4273] {
  display: flex;
  gap: 5%
}

.resource .activity[data-v-99fd4273] {
  width: 74%;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.resource .activity .title[data-v-99fd4273] {
  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-99fd4273] {
  display: flex;
  gap: 12px
}

.resource .activity .images .activity-image[data-v-99fd4273] {
  border-radius: 16px;
  cursor: pointer;
  object-fit: cover
}

.resource .activity .images .count-3[data-v-99fd4273] {
  width: calc((100% - 24px) / 3)
}

.resource .activity .images .count-4[data-v-99fd4273] {
  width: calc((100% - 36px)/4)
}

.resource .activity .images .more[data-v-99fd4273] {
  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-99fd4273] {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-1)
}

.resource .activity-sgp[data-v-99fd4273] {
  width: 100%
}

.resource .college[data-v-99fd4273] {
  width: 21%;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.resource .college .title[data-v-99fd4273] {
  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-99fd4273] {
  object-fit: cover;
  height: 100%;
  border-radius: 12px;
  cursor: pointer
}

.tools[data-v-99fd4273] {
  background: var(--color-bg-page);
  pointer-events: all;
  padding: 40px 0 16px;
  position: sticky;
  z-index: 2;
  top: -2px
}

.tools .main[data-v-99fd4273] {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between
}

.tools .main .left[data-v-99fd4273] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px
}

.tools .main .left .divider[data-v-99fd4273] {
  width: 1px;
  height: 16px;
  margin: 0 24px;
  background-color: var(--color-border-line)
}

.tools .main .left .filter[data-v-99fd4273] {
  display: flex;
  gap: 8px;
  align-items: center
}

.tools .main .left .filter div[data-v-99fd4273] {
  color: var(--color-text-2);
  font-size: 14px;
  line-height: 24px;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  position: relative
}

.tools .main .left .filter div .dot[data-v-99fd4273] {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: var(--color-fill-red)
}

.tools .main .left .filter .active[data-v-99fd4273] {
  color: var(--color-text-1);
  background: var(--color-other-2)
}

.tools .main .search[data-v-99fd4273] {
  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-99fd4273] .el-input__wrapper {
  flex: 1;
  border: none !important;
  font-size: 14px
}

.tools .main .search[data-v-99fd4273]:hover {
  border-color: var(--color-border-hover)
}

.tools .main .search-active[data-v-99fd4273] {
  border-color: var(--color-border-focused) !important
}

.tools .secondary[data-v-99fd4273] {
  margin-top: 16px;
  display: flex;
  gap: 24px;
  overflow: auto
}

.tools .secondary div[data-v-99fd4273] {
  color: var(--color-text-2);
  font-size: 14px;
  line-height: 24px;
  cursor: pointer;
  white-space: nowrap
}

.tools .secondary .active[data-v-99fd4273] {
  color: var(--color-text-1);
  font-weight: 500
}

.el-dropdown-menu[data-v-99fd4273] {
  background-color: transparent
}

span[data-v-cf06babe] {
  position: absolute;
  bottom: -20px;
  color: var(--color-fill-error);
  font-size: 12px
}

.title[data-v-02d40c4c] {
  font-size: 18px;
  font-weight: 500;
  height: 32px;
  margin-bottom: 16px
}

.sub-title[data-v-02d40c4c] {
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--color-text-2)
}

.gender-box[data-v-02d40c4c] {
  display: flex;
  gap: 16px;
  color: var(--color-text-1)
}

.gender-box__item[data-v-02d40c4c] {
  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-02d40c4c] {
  width: 24px;
  height: 24px;
  border-radius: 12px
}

.gender-box__item.active[data-v-02d40c4c] {
  border: 1px solid var(--color-theme-2)
}

.content[data-v-53e3ce60] {
  width: 100%;
  margin-top: 16px
}

.content .bottom[data-v-53e3ce60] {
  width: 100%;
  gap: 12px
}

.close[data-v-a0bac989] {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer
}

.inform-title[data-v-a0bac989] {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  color: var(--color-text-1)
}

.inform-title .close-icon[data-v-a0bac989] {
  cursor: pointer
}

.content[data-v-a0bac989] {
  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-a0bac989] {
  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-4af144eb] {
  position: relative
}

.kling-dialog-no-padding .loading[data-v-4af144eb] {
  width: 100%;
  height: 100%;
  min-width: 30vw;
  min-height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center
}

.kling-dialog-no-padding .video[data-v-4af144eb] {
  max-width: 80vw;
  max-height: 80vh;
  border-radius: 12px !important;
  display: block
}

.kling-dialog-no-padding .close[data-v-4af144eb] {
  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-0e373469] {
  width: 100%;
  height: 100%;
  position: relative;
  margin-top: 18px
}

.lora-ideas[data-v-0e373469] .virtual-waterfall {
  padding: 0 !important
}

.lora-ideas .lora-ideas-header[data-v-0e373469] {
  height: 40px;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.lora-ideas .lora-ideas-header span[data-v-0e373469] {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: var(--color-text-1)
}

.lora-ideas .lora-ideas-header span[data-v-0e373469]:last-child {
  cursor: pointer
}

.lora-ideas .lora-shadow-bottom-btn[data-v-0e373469] {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 42px 0;
  justify-content: center
}

[data-v-883ce8ca] .create-lora .content .top {
  flex-shrink: 0
}

.lora-training-progress[data-v-883ce8ca] {
  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-883ce8ca] {
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto
}

.lora-training-progress .video-img[data-v-883ce8ca]: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-883ce8ca]: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-883ce8ca] {
  position: absolute
}

.lora-training-progress .video-img .img1[data-v-883ce8ca] {
  height: 100%;
  z-index: 3
}

.lora-training-progress .video-img .img2[data-v-883ce8ca] {
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 1
}

.lora-training-progress .lora-progress-content[data-v-883ce8ca] {
  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-883ce8ca] .el-progress-bar__outer {
  background-color: var(--color-fill-disabled) !important
}

.lora-training-progress .lora-progress-content[data-v-883ce8ca] .el-progress__text {
  margin-left: 12px
}

.lora-training-progress .lora-progress-content[data-v-883ce8ca] .el-progress__text span {
  color: var(--color-theme-2)
}

.lora-training-progress .lora-progress-content .lora-progress[data-v-883ce8ca] {
  width: 502px
}

.lora-training-progress .lora-progress-content .lora-progress-text[data-v-883ce8ca] {
  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-883ce8ca] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  gap: 12px
}

.lora-training-progress .lora-progress-content .success-btn-list[data-v-883ce8ca] {
  margin-top: 32px
}

.lora-training-progress .lora-success-img[data-v-883ce8ca] {
  width: 108px;
  height: 144px;
  border-radius: 8px
}

.lora-training-progress .lora-progress-tips[data-v-883ce8ca] {
  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-883ce8ca] {
  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-883ce8ca] {
  padding: 6px 24px
}

.lora-progress-loading[data-v-883ce8ca] {
  display: flex;
  justify-content: center
}

.delete-icon[data-v-883ce8ca] {
  position: absolute;
  top: 16px;
  right: 16px
}

.example-item[data-v-8814297a] {
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%
}

.example-item__bottom[data-v-8814297a] {
  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-8814297a] {
  flex: 1;
  overflow: hidden
}

.example-item .play-icon[data-v-8814297a] {
  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-94db1d65] {
  overflow: hidden;
  position: relative
}

.supplement-video-item .cover[data-v-94db1d65] {
  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-94db1d65] {
  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-94db1d65] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.supplement-video-item .msg .del[data-v-94db1d65] {
  cursor: pointer;
  width: 20px;
  height: 20px
}

.supplement-video-item .fail-box[data-v-94db1d65] {
  width: 100%;
  height: 100%
}

.supplement-video-item .fail-box[data-v-94db1d65]: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-94db1d65] {
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative
}

.supplement-video-item .progress-box__content[data-v-94db1d65] {
  z-index: 2;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  gap: 8px;
  font-size: 12px;
  background-color: var(--color-other-1)
}

[data-v-8fc3570b] .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-8fc3570b] .el-upload-dragger:hover {
  filter: brightness(1.1)
}

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

[data-v-8fc3570b] .el-upload {
  width: 100%;
  height: 100%;
  cursor: pointer
}

[data-v-8fc3570b] .el-upload.is-disabled .el-upload-dragger {
  background-color: var(--upload-background)
}

.upload[data-v-8fc3570b] {
  width: 100%;
  color: var(--color-text-1)
}

.upload .title[data-v-8fc3570b] {
  color: var(--color-text-1);
  font-size: 14px;
  gap: 8px;
  margin-top: var(--title-margin-top)
}

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

.upload .upload-item[data-v-8fc3570b] {
  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
}

.membership-and-property[data-v-1960bc5a] {
  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-1960bc5a] {
  display: inline-flex;
  align-items: center;
  cursor: pointer
}

.membership-and-property .property svg[data-v-1960bc5a] {
  margin-right: 2px
}

.membership-and-property .property .value[data-v-1960bc5a] {
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: 600
}

.membership-and-property .pipe[data-v-1960bc5a] {
  padding: 0 16px;
  color: var(--color-text-3)
}

.membership-and-property .membership[data-v-1960bc5a] {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-1);
  cursor: pointer
}

.membership-and-property .membership .member-tip[data-v-1960bc5a] {
  display: inline-flex;
  align-items: center;
  gap: 2px
}

.membership-and-property .coupon-activity-tag[data-v-1960bc5a] {
  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-1960bc5a] {
  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-b4167148] {
  width: 100%;
  height: 100%;
  background: var(--color-bg-page);
  display: flex;
  flex-direction: column
}

.create-lora .header[data-v-b4167148] {
  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-b4167148] {
  position: absolute;
  left: 0;
  height: 64px
}

.create-lora .header .left .name[data-v-b4167148] {
  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-b4167148] {
  gap: 12px;
  font-size: 14px;
  height: 32px;
  position: relative
}

.create-lora .header .left .input-box .input-box-operation[data-v-b4167148] {
  flex-shrink: 0;
  cursor: pointer
}

.create-lora .header .left .bar[data-v-b4167148] {
  width: 1px;
  height: 16px;
  background: var(--color-border-line);
  margin-right: 16px
}

.create-lora .header .right[data-v-b4167148] {
  position: absolute;
  right: 32px
}

.create-lora .content[data-v-b4167148] {
  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-b4167148] {
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  color: var(--color-text-1)
}

.create-lora .content .progress-explain[data-v-b4167148] {
  padding: 16px 0
}

.create-lora .content .center[data-v-b4167148] {
  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-b4167148] {
  width: 100%;
  height: 100%;
  position: relative
}

.create-lora .content .center .center-initial__content[data-v-b4167148] {
  width: 100%;
  height: calc(100% - 56px)
}

.create-lora .content .center .center-initial__content .main-video[data-v-b4167148] {
  width: 100%;
  height: 100%;
  position: relative
}

.create-lora .content .center .center-initial__content .main-video .filename[data-v-b4167148] {
  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-b4167148] {
  z-index: 1;
  position: absolute;
  bottom: 24px;
  left: 24px
}

.create-lora .content .center .center-initial__content .main-video .filename[data-v-b4167148]: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-b4167148] {
  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-b4167148] {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 16px
}

.create-lora .content .center .center-initial__content .other-video[data-v-b4167148]::-webkit-scrollbar {
  display: none
}

.create-lora .content .center .center-initial__content .other-video .text[data-v-b4167148] {
  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-b4167148] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px
}

.create-lora .content .center .center-initial__content .other-video__items .item[data-v-b4167148] {
  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-b4167148] {
  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-b4167148] {
  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-b4167148] {
  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-b4167148] {
  flex: 1
}

.create-lora .content .center .center-initial .example[data-v-b4167148] {
  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-b4167148] {
  flex: 1
}

.create-lora .content .trainingContent[data-v-b4167148] {
  overflow-y: auto
}

.create-lora .content .trainingContent[data-v-b4167148]::-webkit-scrollbar {
  display: none
}

.create-lora .footer[data-v-b4167148] {
  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-b4167148] {
  text-decoration: underline;
  text-underline-position: from-font;
  cursor: pointer
}

.create-lora .footer .bottom-btns[data-v-b4167148] {
  display: flex;
  gap: 12px;
  justify-content: flex-end
}

.create-lora .footer .bottom-btns .submit-btn[data-v-b4167148] {
  position: relative
}

.create-lora .footer .bottom-btns .submit-btn img[data-v-b4167148] {
  position: absolute;
  top: -17px;
  right: -6px
}

.create-lora .footer .bottom-btns .origin-price[data-v-b4167148] {
  position: relative
}

.create-lora .footer .bottom-btns .origin-price[data-v-b4167148]:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 6%;
  height: 1px;
  width: 88%;
  background: var(--line-color);
  opacity: .6;
  transform: rotate(6deg)
}

body.mobile .add-edit-project[data-v-4c519900] {
  width: calc(50% - 4px)
}

body.mobile .edit-project-item[data-v-4c519900] {
  width: calc(50% - 4px) !important
}

.container[data-v-4c519900] {
  margin-bottom: 60px
}

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

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

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

.container .add-edit-project[data-v-4c519900] {
  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-4c519900] {
  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-4c519900] {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-text-1);
  margin-top: 30px
}

.container .group-add[data-v-4c519900] {
  margin-bottom: 24px
}

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

.container .list-container .edit-project-item[data-v-4c519900] {
  width: 240px;
  height: 288px;
  border-radius: 12px;
  overflow: hidden;
  position: relative
}

.container .list-container .edit-project-item .edit-project-delete[data-v-4c519900] {
  opacity: 0
}

.container .list-container .edit-project-item:hover .edit-project-delete[data-v-4c519900] {
  opacity: 1
}

.container .list-container .edit-project-item .select-box[data-v-4c519900] {
  top: 10px;
  left: 10px;
  position: absolute;
  cursor: pointer;
  z-index: 1
}

.container .list-container .edit-project-item .edit-project-item-image-box-hover[data-v-4c519900]:hover {
  cursor: pointer
}

.container .list-container .edit-project-item .edit-project-item-image-box-hover:hover .edit-project-item-btn[data-v-4c519900] {
  opacity: 1;
  z-index: 2
}

.container .list-container .edit-project-item .edit-project-item-image-box-hover[data-v-4c519900]: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-4c519900] {
  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-4c519900] {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.container .list-container .edit-project-item .edit-project-item-operate[data-v-4c519900] {
  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-4c519900] {
  color: var(--color-text-2)
}

.container .list-container .edit-project-item .edit-project-item-btn[data-v-4c519900] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0
}

.container .empty-container .empty[data-v-4c519900] {
  padding-top: 80px
}

.container .empty-container .empty .buttons[data-v-4c519900] {
  text-align: center
}

body.mobile .my-edit-container .header-bar[data-v-c9106dda] {
  justify-content: flex-start
}

.header-bar[data-v-c9106dda] {
  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-c9106dda] {
  color: var(--color-border-line)
}

.header-bar .operation[data-v-c9106dda] {
  display: flex;
  gap: 16px;
  align-items: center
}

.header-bar .operation .checkbox svg[data-v-c9106dda] {
  margin-right: 6px
}

.header-bar .folder-name[data-v-c9106dda] {
  display: flex;
  max-width: 120px;
  font-weight: 600;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text-1)
}

.my-edit-list[data-v-c9106dda] {
  margin-bottom: 60px
}

.my-edit-list .my-edit-list-container[data-v-c9106dda] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.motion-item[data-v-d48566a2] {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-other-1)
}

.motion-item[data-v-d48566a2]:hover {
  border: 1px solid var(--color-border-component)
}

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

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

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

.motion-item-bottom[data-v-d48566a2] {
  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
}

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

.motion-item-bottom svg[data-v-d48566a2] {
  flex-shrink: 0
}

.my-motions-box .filter[data-v-66c88a8a] {
  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-motions-box .filter-right[data-v-66c88a8a] {
  display: flex;
  align-items: center;
  gap: 16px
}

.my-motions-box .filter .checkbox svg[data-v-66c88a8a] {
  margin-right: 6px
}

.my-motions-box .filter .checkbox .uncheck[data-v-66c88a8a] {
  color: var(--color-border-component)
}

.my-motions-box .filter .checkbox .uncheck[data-v-66c88a8a]:hover {
  color: var(--color-border-hover)
}

.my-motions-box .filter .bar[data-v-66c88a8a] {
  color: var(--color-border-line)
}

.my-motions-box .motion-list[data-v-66c88a8a] {
  display: flex;
  gap: 1px;
  flex-wrap: wrap
}

.my-motions-box .empty-container .empty[data-v-66c88a8a] {
  padding-top: 80px
}

.my-motions-box .empty-container .empty .buttons[data-v-66c88a8a] {
  text-align: center
}

.kling-dialog .upload-cover-content[data-v-7ac1bb27] {
  display: flex;
  gap: 24px
}

.kling-dialog .upload-cover-content .upload-left[data-v-7ac1bb27] {
  width: 330px;
  height: 440px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-fill-light)
}

.kling-dialog .upload-cover-content .upload-left[data-v-7ac1bb27] .el-upload-dragger {
  padding: 0
}

.kling-dialog .upload-cover-content .upload-right[data-v-7ac1bb27] {
  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-7ac1bb27],
.kling-dialog .upload-cover-content .upload-right .upload-cover-tip[data-v-7ac1bb27] {
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 22px
}

.kling-dialog .upload-cover-content .upload-right .upload-right-tips[data-v-7ac1bb27] {
  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-7ac1bb27] {
  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-7ac1bb27] {
  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-7ac1bb27] {
  height: 100%
}

.kling-dialog .upload-cover-content .upload-right .upload-right-tips .upload-lora-cover .lora-cover .lora-cover-name[data-v-7ac1bb27] {
  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-7ac1bb27]: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-7ac1bb27]: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-7ac1bb27] {
  flex: 1;
  overflow: hidden
}

.kling-dialog .upload-cover-content .upload-right .upload-right-tips .upload-lora-head .lora-avatar[data-v-7ac1bb27] {
  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-7ac1bb27] {
  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-7ac1bb27] {
  width: 100%
}

.kling-dialog .upload-cover-content .upload-right .upload-right-tips .upload-lora-head .lora-avatar p[data-v-7ac1bb27] {
  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 .uploading[data-v-7ac1bb27] {
  height: 100%;
  width: 100%
}

.kling-dialog .uploading .effect-wrapper[data-v-7ac1bb27] {
  margin: 0
}

.kling-dialog .uploading .loading-tips[data-v-7ac1bb27] {
  line-height: 24px;
  margin-top: 4px
}

.kling-dialog .upload-lora-card[data-v-7ac1bb27] {
  cursor: pointer;
  height: 100%;
  width: 100%;
  position: relative
}

.kling-dialog .upload-lora-card .upload-cover-img[data-v-7ac1bb27] {
  width: 100%;
  flex: 1;
  overflow: hidden
}

.kling-dialog .upload-lora-card .upload-cover-img img[data-v-7ac1bb27] {
  width: 100%;
  height: 100%
}

.kling-dialog .upload-lora-card .upload-cover-name[data-v-7ac1bb27] {
  position: absolute;
  bottom: 0;
  left: 0;
  cursor: pointer;
  height: 80px;
  width: 100%;
  padding: 40px 16px 12px;
  overflow: hidden;
  color: var(--color-text-1);
  background: var(--color-gradient-container)
}

.kling-dialog .upload-lora-card .upload-cover-name .wrapper[data-v-7ac1bb27] {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.kling-dialog .upload-lora-card .upload-cover-name span[data-v-7ac1bb27] {
  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;
  line-height: 28px
}

.kling-dialog .upload-lora-card .upload-cover-name .icon[data-v-7ac1bb27] {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: var(--color-fill-black-1)
}

.kling-dialog .lora-body-content[data-v-dfc8d956] {
  overflow: hidden;
  display: flex;
  flex-direction: column
}

.kling-dialog .input-box[data-v-dfc8d956] {
  gap: 16px;
  position: relative
}

.kling-dialog span[data-v-dfc8d956] {
  display: inline-block
}

.kling-dialog .left-content[data-v-dfc8d956] {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%
}

.kling-dialog .left-content .lora-bottom-list[data-v-dfc8d956] {
  border-radius: 8px;
  padding-top: 24px;
  min-height: 228px
}

.kling-dialog .left-content .lora-bottom-list .list-title[data-v-dfc8d956] {
  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-dfc8d956] {
  color: var(--color-text-2)
}

.kling-dialog .left-content .lora-bottom-list .bottom-list[data-v-dfc8d956] {
  display: flex;
  flex-wrap: wrap;
  max-height: 220px;
  overflow-y: auto
}

.kling-dialog .left-content .lora-bottom-list .bottom-list .vide-card[data-v-dfc8d956] {
  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-dfc8d956]:nth-of-type(4n) {
  margin-right: 0
}

.kling-dialog .left-content .lora-bottom-list .bottom-list .video-player-item[data-v-dfc8d956] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  top: 0
}

.kling-dialog .lora-body-head[data-v-dfc8d956] {
  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-dfc8d956] {
  display: flex;
  align-items: center
}

.kling-dialog .lora-body-head .head-con[data-v-dfc8d956] {
  margin-right: 64px
}

.kling-dialog .lora-body-head .head-con .head-title[data-v-dfc8d956] {
  color: var(--color-text-2);
  font-size: 14px;
  margin-bottom: 8px;
  line-height: 24px
}

.kling-dialog .lora-body-head .head-con .name[data-v-dfc8d956] {
  height: 36px;
  color: var(--color-text-1)
}

.kling-dialog .lora-body-head .head-con .time[data-v-dfc8d956] {
  color: var(--color-text-1);
  height: 36px
}

.kling-dialog .lora-body-head .lora-head[data-v-dfc8d956] {
  margin-right: 32px;
  width: 90px;
  height: 120px;
  overflow: hidden;
  position: relative;
  border-radius: 8px
}

.kling-dialog .lora-body-head .lora-head img[data-v-dfc8d956] {
  height: 100%
}

.kling-dialog .lora-body-head .lora-head .upload-cover-icon[data-v-dfc8d956] {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: var(--color-fill-black-1);
  color: var(--color-text-1);
  cursor: pointer
}

.kling-dialog .video-item-slot[data-v-dfc8d956] {
  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-dfc8d956] {
  display: flex;
  justify-content: space-between
}

.kling-dialog .video-item-slot .video-item_bottom[data-v-dfc8d956] {
  display: flex;
  align-items: center
}

.kling-dialog .video-item-slot .video-item_bottom div[data-v-dfc8d956] {
  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-dfc8d956] {
  display: flex;
  margin-top: 16px
}

.kling-dialog .lora-body-bottom .fail-btns__item[data-v-dfc8d956] {
  margin-right: 12px
}

.img[data-v-e485292f] {
  width: 100%;
  border-radius: 8px 8px 0 0;
  overflow: hidden
}

.content[data-v-e485292f] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px
}

.content .text[data-v-e485292f] {
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: var(--color-text-1)
}

.content .text2[data-v-e485292f] {
  margin-top: 4px;
  margin-bottom: 24px
}

body.mobile .lora-item[data-v-10a4d40f] {
  flex: .5
}

.lora-item[data-v-10a4d40f] {
  width: 210px;
  height: 280px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  font-size: 14px;
  background: var(--color-other-2)
}

.lora-item__del[data-v-10a4d40f] {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4
}

.lora-item__favor[data-v-10a4d40f] {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 4
}

.lora-item__checkbox[data-v-10a4d40f] {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4
}

.lora-item-content[data-v-10a4d40f] {
  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-10a4d40f] {
  z-index: 2;
  position: absolute;
  bottom: 8px;
  width: 100%;
  display: flex;
  gap: 8px;
  padding: 0 8px
}

.lora-item .fail-btns__item[data-v-10a4d40f] {
  padding: unset;
  width: 100%;
  height: 32px
}

.lora-item .fail-btns__item.border[data-v-10a4d40f] {
  border: 1px solid var(--color-border-focused)
}

.lora-item .success-bottom[data-v-10a4d40f] {
  width: 100%;
  position: absolute;
  bottom: 8px;
  padding: 0 8px;
  display: flex;
  justify-content: center;
  z-index: 2
}

.lora-item .success-bottom__unHover[data-v-10a4d40f] {
  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-10a4d40f] {
  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-10a4d40f] {
  flex: 1
}

.lora-item[data-v-10a4d40f]: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-10a4d40f] {
  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-10a4d40f] {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 24px);
  margin-bottom: 4px
}

.lora-cover[data-v-10a4d40f]:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-fill-black-3);
  width: 100%;
  height: 100%;
  z-index: 1
}

.ellipsis[data-v-10a4d40f] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  color: var(--color-text-1)
}

.ellipsis-box[data-v-10a4d40f] {
  max-width: calc(100% - 16px);
  justify-content: center
}

.fail-tip[data-v-10a4d40f] {
  display: flex;
  gap: 8px;
  align-items: center
}

.fail-tip__left[data-v-10a4d40f] {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  background-color: var(--color-bg-tertiary)
}

.fail-tip__right[data-v-10a4d40f] {
  height: 100%;
  color: var(--color-text-1)
}

body.mobile .create-item[data-v-a92c9f79] {
  flex: .5
}

.lora-list[data-v-a92c9f79] {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.lora-list .create-item[data-v-a92c9f79] {
  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-a92c9f79] {
  width: 40px;
  height: 40px;
  background: var(--color-other-1);
  border-radius: 4px
}

.lora-list .empty[data-v-a92c9f79] {
  width: 100%;
  gap: 12px;
  padding-top: calc(25% - 62px);
  color: var(--color-text-3)
}

body.mobile .top[data-v-8421f3dc] {
  flex-direction: column;
  gap: 12px
}

.lora[data-v-8421f3dc] {
  height: calc(100% - 68px)
}

.lora .top[data-v-8421f3dc] {
  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-8421f3dc] {
  height: 32px;
  display: flex;
  align-items: center;
  color: var(--color-text-1)
}

.lora .top .top-right .batch-btns[data-v-8421f3dc] {
  display: flex;
  align-items: center;
  gap: 16px
}

.lora .top .top-right .batch-btns .bar[data-v-8421f3dc] {
  color: var(--color-border-line)
}

.lora .top .top-right .batch-btns .checkbox svg[data-v-8421f3dc] {
  margin-right: 6px
}

.lora .content[data-v-8421f3dc] {
  overflow: auto
}

body.mobile .preset-item-table[data-v-c13e1678] {
  width: 100% !important
}

body.mobile .filter[data-v-c13e1678] {
  gap: 12px
}

.my-presets-box .filter[data-v-c13e1678] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 24px;
  position: sticky;
  top: 100px;
  background: var(--color-bg-page);
  z-index: 2;
  gap: 16px
}

.my-presets-box .filter .checkbox svg[data-v-c13e1678] {
  margin-right: 6px
}

.my-presets-box .filter .bar[data-v-c13e1678] {
  color: var(--color-border-line)
}

.my-presets-box .preset-list[data-v-c13e1678] {
  display: flex
}

.my-presets-box .preset-list .preset-empty-wrap[data-v-c13e1678] {
  width: 100%;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 80px
}

.my-presets-box .preset-list .preset-empty-wrap .empty[data-v-c13e1678] {
  padding-top: 80px;
  margin-bottom: 16px
}

.my-presets-box .preset-list .preset-list-view[data-v-c13e1678] {
  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-c13e1678] {
  width: 100%;
  display: flex;
  height: 88px
}

.my-presets-box .preset-list .preset-list-view .list-item.header[data-v-c13e1678] {
  height: 36px
}

.my-presets-box .preset-list .preset-list-view .list-item.header>div[data-v-c13e1678] {
  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-c13e1678] {
  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-c13e1678] {
  margin-right: 16px;
  cursor: pointer;
  vertical-align: middle
}

.my-presets-box .preset-list .preset-list-view .list-item .name .select-box svg[data-v-c13e1678] {
  transform: translateY(2px)
}

.my-presets-box .preset-list .preset-list-view .list-item .preset[data-v-c13e1678] {
  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-c13e1678] {
  flex: 0 0 212px;
  display: flex;
  gap: 24px
}

.my-presets-box .preset-list .preset-list-view .list-item .operation-btn[data-v-c13e1678] {
  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-c13e1678] {
  color: var(--color-text-3);
  cursor: not-allowed
}

.my-presets-box .preset-list .preset-list-view .list-item>div[data-v-c13e1678] {
  padding: 0 32px;
  color: var(--color-text-1)
}

.my-presets-box .preset-list .preset-list-view .list-item[data-v-c13e1678]:nth-child(odd) {
  background: var(--color-fill-light)
}

.my-presets-box .preset-list.table[data-v-c13e1678] {
  flex-wrap: wrap;
  gap: 12px
}

.my-presets-box .preset-list .preset-item-table[data-v-c13e1678] {
  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-c13e1678] {
  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-c13e1678] {
  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-c13e1678] {
  cursor: pointer
}

.my-presets-box .preset-list .preset-item-table .prompt[data-v-c13e1678] {
  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-c13e1678] {
  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-c13e1678] {
  color: var(--color-text-1);
  cursor: pointer
}

.my-presets-box .preset-list .preset-item-table .operation.disabled svg[data-v-c13e1678] {
  color: var(--color-text-3);
  cursor: not-allowed
}

.edit-preset-dialog-content[data-v-c13e1678] {
  display: flex;
  flex-direction: column
}

.edit-preset-dialog-content .title[data-v-c13e1678] {
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  color: var(--color-text-1);
  margin-bottom: 8px
}

.edit-preset-dialog-content .edit-input[data-v-c13e1678] {
  margin-bottom: 24px
}

.edit-preset-dialog-content .edit-operation[data-v-c13e1678] {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px
}

.operation[data-v-92c85f7a] {
  margin-top: -12px
}

.operation p[data-v-92c85f7a] {
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  color: var(--color-text-2);
  margin-bottom: 4px
}

.operation .error[data-v-92c85f7a] {
  margin-top: 4px;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--color-fill-error)
}

.guide-container[data-v-fa5668a2] {
  position: fixed;
  z-index: 2200
}

.guide-container .mark[data-v-fa5668a2] {
  display: flex;
  flex-direction: column;
  align-items: center
}

.guide-container .mark .mark-dot[data-v-fa5668a2] {
  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-fa5668a2] {
  width: 0px;
  height: 40px;
  border-left: 1px dashed var(--color-border-hover)
}

.guide-container .guide-content[data-v-fa5668a2] {
  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-fa5668a2] {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: var(--text-color-1)
}

.guide-container .guide-content .btn[data-v-fa5668a2] {
  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-1cf33d30] {
  position: relative;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  background: var(--color-other-2)
}

.folder-item-container .img-full[data-v-1cf33d30] {
  width: 200px;
  height: 200px
}

.folder-item-container .img-full img[data-v-1cf33d30] {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.folder-item-container .img-empty[data-v-1cf33d30] {
  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-1cf33d30] {
  color: var(--color-text-3);
  font-weight: 400;
  font-size: 12px;
  line-height: 20px
}

.folder-item-container .img-list[data-v-1cf33d30] {
  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-1cf33d30] {
  width: 99.5px;
  background-color: var(--color-other-2);
  overflow: hidden
}

.folder-item-container .img-list .img-item[data-v-1cf33d30]:nth-child(1) {
  grid-column: 1/2;
  grid-row: 1/3
}

.folder-item-container .img-list .img-item[data-v-1cf33d30]:nth-child(2) {
  grid-column: 2/3;
  grid-row: 1/2
}

.folder-item-container .img-list .img-item[data-v-1cf33d30]:nth-child(3) {
  grid-column: 2/3;
  grid-row: 2/3
}

.folder-item-container .img-list .img-item img[data-v-1cf33d30] {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.folder-item-container[data-v-1cf33d30]:last-child {
  margin-bottom: 0
}

.folder-item-container .pinned[data-v-1cf33d30] {
  cursor: default;
  border-radius: 4px;
  padding: 0 8px;
  background-color: var(--color-fill-black-1);
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  position: absolute;
  right: 8px;
  top: 8px;
  color: var(--color-text-1)
}

.folder-item-container .folder-controls[data-v-1cf33d30] {
  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-1cf33d30] {
  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-1cf33d30] {
  margin-right: 4px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  flex: 1
}

.folder-item-container .folder-controls .left .number[data-v-1cf33d30] {
  color: var(--color-text-2)
}

.folder-item-container.selected[data-v-1cf33d30] {
  border-color: var(--color-border-focused)
}

.folder-item-container.selected .folder-controls[data-v-1cf33d30] {
  color: var(--color-text-5);
  background-color: var(--color-theme-1)
}

.folder-item-container.selected .folder-controls .name[data-v-1cf33d30] {
  font-weight: 600
}

.folder-item-container.selected .folder-controls .number[data-v-1cf33d30],
.folder-item-container.selected .folder-controls[data-v-1cf33d30] button {
  color: var(--color-text-5)
}

.folder-item-container.active[data-v-1cf33d30] {
  border-color: var(--color-theme-2)
}

.folders-container[data-v-21b9b530] {
  opacity: 0;
  width: 0;
  overflow-y: auto;
  transition: width .3s
}

.folders-container.expend[data-v-21b9b530] {
  opacity: 1;
  width: 227px;
  padding-right: 24px;
  border-right: 1px solid var(--color-border-frame)
}

.folders-container .top-controls[data-v-21b9b530] {
  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-21b9b530] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  cursor: pointer
}

.folders-container .top-controls svg[data-v-21b9b530] {
  cursor: pointer
}

.folders-container .empty-container[data-v-21b9b530] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px
}

.folders-container .folders[data-v-21b9b530] {
  margin-bottom: 60px
}

body.mobile .header-bar[data-v-bc3b9d8b] {
  flex-direction: column;
  height: fit-content;
  align-items: flex-start;
  gap: 12px
}

body.mobile .header-bar .operation[data-v-bc3b9d8b] {
  width: 100%
}

body.mobile .header-bar .operation>div[data-v-bc3b9d8b] {
  flex-shrink: 0
}

body.mobile .my-materials-container[data-v-bc3b9d8b] {
  left: 0;
  padding: 0 24px
}

body.mobile .my-materials-container .batch-operation[data-v-bc3b9d8b] {
  left: 24px;
  right: 24px;
  transform: translate(0);
  overflow: auto
}

body.mobile .main-content[data-v-bc3b9d8b] {
  min-width: unset
}

.my-materials-container[data-v-bc3b9d8b] {
  display: flex;
  position: fixed;
  top: 100px;
  left: 220px;
  bottom: 0;
  right: 0;
  padding: 0 32px
}

.my-materials-container .main-content[data-v-bc3b9d8b] {
  flex: 1;
  overflow-y: auto;
  min-width: 720px
}

.my-materials-container .main-content.shrink[data-v-bc3b9d8b] {
  padding-left: 24px
}

.checkbox svg[data-v-bc3b9d8b] {
  margin-right: 6px
}

.checkbox .uncheck[data-v-bc3b9d8b] {
  color: var(--color-border-component)
}

.checkbox .uncheck[data-v-bc3b9d8b]:hover {
  color: var(--color-border-hover)
}

.header-bar[data-v-bc3b9d8b] {
  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-bc3b9d8b] {
  display: flex;
  gap: 16px;
  align-items: center
}

.header-bar .selected-folder[data-v-bc3b9d8b] {
  display: flex;
  gap: 8px;
  align-items: center
}

.header-bar .selected-folder .folder-name[data-v-bc3b9d8b] {
  display: flex;
  max-width: 120px;
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-1)
}

.split[data-v-bc3b9d8b] {
  color: var(--color-border-line)
}

.split.margin-gap[data-v-bc3b9d8b] {
  margin: 0 8px
}

.batch-operation[data-v-bc3b9d8b] {
  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-bc3b9d8b] {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0
}

.batch-operation .operation-buttons.select-status[data-v-bc3b9d8b] {
  min-width: 136px
}

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

.description[data-v-e81f4a84] {
  color: var(--color-text-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 28px
}

.footer[data-v-e81f4a84] {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.footer .remind[data-v-e81f4a84] {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--color-text-2);
  gap: 6px;
  height: 24px;
  line-height: 24px
}

.footer .remind svg[data-v-e81f4a84] {
  color: var(--color-border-component)
}

.footer .remind svg[data-v-e81f4a84]:hover {
  color: var(--color-border-hover)
}

.upload-container[data-v-1ed13c2a] {
  display: flex;
  background-color: var(--color-bg-page);
  height: 100%;
  overflow: hidden
}

.upload-container .main-content[data-v-1ed13c2a] {
  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-1ed13c2a] {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 64px
}

.upload-container .main-content .top .filename[data-v-1ed13c2a] {
  flex: 1;
  margin-left: 52px;
  right: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  gap: 8px
}

.upload-container .main-content .top .filename p[data-v-1ed13c2a] {
  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 .filename svg[data-v-1ed13c2a] {
  cursor: pointer;
  flex-shrink: 0
}

.upload-container .main-content .top .operation[data-v-1ed13c2a] {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: 8px;
  align-items: center
}

.upload-container .main-content .top .operation .favor[data-v-1ed13c2a] {
  color: var(--color-text-1)
}

.upload-container .main-content .media[data-v-1ed13c2a] {
  width: 80% !important;
  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-1ed13c2a] {
  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-1ed13c2a] {
  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-1ed13c2a] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

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

.upload-container .main-content .bottom[data-v-1ed13c2a] {
  display: flex;
  gap: 8px
}

.upload-container .image-list[data-v-1ed13c2a] {
  padding-top: 24px;
  padding-bottom: 32px;
  height: 100%;
  padding-right: 32px
}

body.mobile .main-content[data-v-1ed13c2a] {
  width: 100%;
  padding: 16px
}

body.mobile .main-content .media[data-v-1ed13c2a] {
  width: 100% !important
}

body.mobile .main-content .media .audio-box[data-v-1ed13c2a] {
  padding: 0;
  width: 100%;
  height: unset;
  gap: 8px;
  background: unset
}

body.mobile .main-content .media .audio-box[data-v-1ed13c2a] .play-btn {
  margin-right: 12px
}

body.mobile .main-content .media .audio-box .audio-cover[data-v-1ed13c2a] {
  margin-bottom: 24px
}

body.mobile .header-bar[data-v-b60b192b] {
  flex-direction: column;
  height: fit-content;
  align-items: flex-start;
  gap: 12px
}

body.mobile .header-bar .operation[data-v-b60b192b] {
  width: 100%
}

body.mobile .header-bar .operation>div[data-v-b60b192b] {
  flex-shrink: 0
}

.header-bar[data-v-b60b192b] {
  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-b60b192b] {
  color: var(--color-border-line)
}

.header-bar .operation[data-v-b60b192b] {
  display: flex;
  gap: 16px;
  align-items: center
}

.header-bar .operation .checkbox svg[data-v-b60b192b] {
  margin-right: 6px
}

.header-bar .operation .checkbox .uncheck[data-v-b60b192b] {
  color: var(--color-border-component)
}

.header-bar .operation .checkbox .uncheck[data-v-b60b192b]:hover {
  color: var(--color-border-hover)
}

.header[data-v-2dc83b9b] {
  padding: 8px 0 24px;
  width: 100%;
  background: var(--color-bg-page);
  display: flex;
  justify-content: space-between;
  align-items: center
}

.header .tabs[data-v-2dc83b9b] {
  width: 100%;
  height: 36px
}

.dialog-asset-manage-body[data-v-2dc83b9b] {
  z-index: 1000
}

.dialog-asset-manage-content[data-v-2dc83b9b] .my-materials-container {
  top: 156px;
  left: 0
}

.dialog-asset-manage-content[data-v-2dc83b9b] .uploads-container .header-bar,
.dialog-asset-manage-content[data-v-2dc83b9b] .lora .top,
.dialog-asset-manage-content[data-v-2dc83b9b] .my-presets-box .filter {
  top: 156px
}

.dialog-asset-manage-content[data-v-2dc83b9b] .my-edit-container {
  left: 0;
  top: 158px
}

.dialog-asset-manage-content .header[data-v-2dc83b9b] {
  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-2dc83b9b] {
  width: 100%;
  height: 36px
}

.dialog-asset-manage-content .header .operation-query[data-v-2dc83b9b] {
  margin-left: 12px;
  flex-shrink: 0;
  width: 240px
}

.dialog-asset-manage-content .header .operation-query[data-v-2dc83b9b] svg {
  color: var(--color-text-3)
}

.title-container[data-v-2dc83b9b] {
  display: flex;
  align-items: center;
  height: 64px;
  position: relative;
  box-sizing: border-box
}

.title-container[data-v-2dc83b9b]:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -32px;
  right: -32px;
  height: 1px;
  background-color: var(--color-border-frame)
}

.title-container .back[data-v-2dc83b9b] {
  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-2dc83b9b] {
  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)
}

.virtual-history-stream[data-v-51c3e169] {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  -ms-overflow-style: none;
  scrollbar-width: none
}

.virtual-history-stream[data-v-51c3e169]::-webkit-scrollbar {
  display: none
}

.total-height[data-v-51c3e169] {
  position: relative;
  width: 100%
}

.height-enforcer[data-v-51c3e169] {
  position: absolute;
  width: 1px;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: -1
}

.virtual-item[data-v-51c3e169] {
  position: absolute;
  width: 100%;
  left: 0;
  will-change: transform
}

.virtual-item.active-item[data-v-51c3e169] {
  z-index: 1
}

.content-wrapper[data-v-51c3e169] {
  width: 100%;
  height: auto
}

.item-container[data-v-c976a43a] {
  margin-top: 16px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-bg-secondary)
}

.video-container[data-v-c976a43a] {
  position: relative
}

.video-container .video-bg-box[data-v-c976a43a] {
  overflow: hidden;
  position: absolute;
  top: 0;
  opacity: .5
}

.video-container .video-bg-box[data-v-c976a43a],
.video-container .content[data-v-c976a43a] {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 50vh;
  min-width: 160px
}

.video-container .video-bg-box[data-v-c976a43a] video,
.video-container .content[data-v-c976a43a] video {
  max-height: 50vh
}

.video-container .content[data-v-c976a43a] {
  position: relative;
  z-index: 1;
  object-fit: contain
}

.video-container .video-bg[data-v-c976a43a] {
  width: 100%;
  height: 100%;
  filter: blur(120px)
}

.actions[data-v-c976a43a] {
  height: 56px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.actions .left[data-v-c976a43a] {
  display: flex;
  gap: 8px
}

.actions .right[data-v-c976a43a] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-radius: 8px
}

.actions .right .right-item[data-v-c976a43a] {
  width: 28px !important;
  display: flex;
  justify-content: center;
  gap: 12px;
  cursor: pointer
}

.actions .right .divider[data-v-c976a43a] {
  height: 12px;
  width: 1px;
  background: var(--color-border-line);
  margin: 0 8px
}

.loading[data-v-f9aeb4a7] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center
}

.loading .title[data-v-f9aeb4a7] {
  color: var(--color-theme-2)
}

.loading .sub-title[data-v-f9aeb4a7] {
  flex-shrink: 0;
  font-weight: 400;
  color: var(--color-text-2)
}

.loading .loading-content[data-v-f9aeb4a7] {
  position: relative;
  display: flex;
  gap: 3px
}

.loading .loading-content .highlight[data-v-f9aeb4a7] {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%)
}

body.lang-en .tip[data-v-370cda0c] {
  flex-direction: column
}

.inner[data-v-370cda0c] {
  max-width: calc(100% - 48px);
  display: flex;
  flex-direction: column
}

.inner .membership-primary[data-v-370cda0c] {
  color: #ffffff7a
}

.inner .membership-none[data-v-370cda0c] {
  background: none;
  -webkit-text-fill-color: var(--color-text-1)
}

.inner .progress-box[data-v-370cda0c] {
  margin-bottom: 16px;
  gap: 8px
}

.inner .progress-box svg[data-v-370cda0c] {
  width: 24px;
  flex-shrink: 0
}

.inner .tip1[data-v-370cda0c] {
  color: var(--color-other-9)
}

.inner .tip[data-v-370cda0c] {
  color: var(--color-other-9);
  font-size: 12px;
  line-height: 18px;
  margin-top: 4px;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}

.inner .purchase[data-v-370cda0c] {
  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-5e1d1cb6] {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover
}

.progress.mask[data-v-5e1d1cb6] {
  position: relative;
  width: 100%;
  height: 100%
}

.progress.mask[data-v-5e1d1cb6]: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-5e1d1cb6] {
  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%;
  background: var(--color-fill-dark)
}

.progress .content .failed-inner[data-v-5e1d1cb6] {
  height: 100%;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--color-text-2)
}

.progress .content .failed-inner img[data-v-5e1d1cb6] {
  min-height: 40px;
  flex-basis: 80px
}

.progress .content .failed-inner .reason[data-v-5e1d1cb6] {
  margin-top: 2em;
  color: var(--color-text-3)
}

@keyframes lightAnimation-5e1d1cb6 {
  0% {
    left: -240px
  }

  to {
    left: 100%
  }
}

.progress .content .light[data-v-5e1d1cb6] {
  width: 240px;
  height: 100%;
  background: linear-gradient(270deg, #ffffff0a, #fff0);
  position: absolute;
  animation: lightAnimation-5e1d1cb6 1.8s .3s infinite linear
}

.progress .inner[data-v-5e1d1cb6] {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2
}

.top-right-actions[data-v-5cec5908] {
  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-5cec5908] {
  width: 28px;
  height: 28px;
  cursor: pointer
}

.top-right-actions[data-v-5cec5908] .disabled-icon {
  color: var(--color-text-4);
  cursor: pointer
}

.top-right-actions .divider[data-v-5cec5908] {
  height: 12px;
  width: 1px;
  background: var(--color-border-line);
  margin: 0 8px
}

.bottom-center-actions[data-v-5cec5908] {
  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 12px;
  justify-content: center
}

.bottom-center-actions .box[data-v-5cec5908] {
  width: 100%;
  display: flex;
  justify-content: center
}

.stream-video-add-audio[data-v-fe14b080] {
  border-radius: 8px;
  background: var(--color-other-1);
  width: 100%
}

.stream-video-add-audio .content[data-v-fe14b080] {
  width: 100%;
  display: block;
  height: var(--ec1adf46)
}

.stream-video-add-audio .works[data-v-fe14b080] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px
}

.stream-video-add-audio .works .work[data-v-fe14b080] {
  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-fe14b080] {
  border-color: var(--color-theme-2)
}

.stream-video-add-audio .works .work-inner[data-v-fe14b080] {
  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-fe14b080] {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover
}

.ancestor[data-v-7b091d87] {
  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-7b091d87] {
  object-fit: cover;
  width: 24px;
  height: 24px;
  border-radius: 4px
}

.ancestor .source-icon[data-v-7b091d87] {
  display: flex;
  background-color: var(--color-other-7);
  position: absolute;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center
}

.creation-item-ancestors-images .image-group-grid {
  display: grid;
  gap: 4px;
  grid-template-rows: 200px 200px
}

.creation-item-ancestors-images .image-group-grid-column-2 {
  grid-template-columns: 200px 200px
}

.creation-item-ancestors-images .image-group-grid-column-3 {
  grid-template-columns: 200px 200px 200px
}

.creation-item-ancestors-images .image-group-flex {
  display: flex;
  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 .item-image .item-image-name {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 0 8px;
  height: 24px;
  font-weight: 400;
  font-size: 12px;
  text-align: center;
  line-height: 22px;
  color: var(--color-text-1);
  background-color: var(--color-other-6)
}

.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;
  padding: 0 4px
}

.creation-item-ancestors-images .item .caption {
  position: absolute;
  bottom: 8px;
  left: 8px;
  border-radius: 4px;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  padding: 0 4px;
  background-color: var(--color-other-6);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px)
}

.creation-item-ancestors-images .item img {
  display: block;
  border-radius: 4px;
  object-fit: contain;
  width: 200px;
  height: 200px;
  background-color: var(--color-bg-popover-1)
}

.creation-item-ancestors-images .item .video {
  background-color: var(--color-bg-popover-1)
}

.title[data-v-bb735e32] {
  color: var(--color-text-1);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.title .divider[data-v-bb735e32] {
  width: 1px;
  height: 12px;
  background: var(--color-border-line);
  margin: auto 10px
}

.title .left[data-v-bb735e32] {
  flex-grow: 0;
  display: flex;
  align-items: center;
  gap: 6px
}

.title .left span[data-v-bb735e32] {
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.title .left .tag[data-v-bb735e32] {
  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)
}

.title .right[data-v-bb735e32] {
  display: flex;
  gap: 8px
}

.title .right .top-action[data-v-bb735e32] {
  padding: 6px;
  background: #ffffff1f;
  border-radius: 8px;
  display: flex;
  cursor: pointer
}

.prompt-area[data-v-bb735e32] {
  margin-top: 12px;
  position: relative;
  line-height: 22px;
  display: flex
}

.prompt-area .prompt[data-v-bb735e32] {
  color: var(--color-text-2);
  font-size: 13px;
  line-height: 22px;
  max-height: 66px;
  text-overflow: ellipsis;
  overflow: hidden
}

.prompt-area .copy .icon[data-v-bb735e32] {
  height: 22px;
  width: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center
}

.prompt-area .multi-line[data-v-bb735e32] {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 56px;
  padding: 0 8px 0 32px;
  background: linear-gradient(90deg, #0f0f0f00, #0e0f0f 60%)
}

.hidden[data-v-f0458f08] {
  visibility: hidden
}

.creation-stream-item[data-v-f0458f08] {
  position: relative
}

.creation-stream-item .sticky-header[data-v-f0458f08] {
  position: fixed;
  background: var(--color-bg-1);
  box-shadow: 0 2px 8px #00000026
}

.creation-stream-item .videos[data-v-f0458f08] {
  display: flex;
  flex-direction: column;
  gap: 32px
}

.creation-stream-item .title[data-v-f0458f08] {
  color: var(--color-text-1);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.creation-stream-item .title .divider[data-v-f0458f08] {
  width: 1px;
  height: 12px;
  background: var(--color-border-line);
  margin: auto 10px
}

.creation-stream-item .title .left[data-v-f0458f08] {
  flex-grow: 0;
  display: flex;
  align-items: center;
  gap: 6px
}

.creation-stream-item .title .left span[data-v-f0458f08] {
  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-f0458f08] {
  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-f0458f08] {
  display: flex;
  gap: 8px
}

.creation-stream-item .title .right .top-action[data-v-f0458f08] {
  padding: 6px;
  background: #ffffff1f;
  border-radius: 8px;
  display: flex;
  cursor: pointer
}

.creation-stream-item .prompt-area[data-v-f0458f08] {
  margin-top: 12px;
  position: relative;
  line-height: 22px;
  display: flex
}

.creation-stream-item .prompt-area .prompt[data-v-f0458f08] {
  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-f0458f08] {
  height: 22px;
  width: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center
}

.creation-stream-item .prompt-area .multi-line[data-v-f0458f08] {
  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-f0458f08] {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 50vh;
  min-width: 160px;
  object-fit: contain
}

.creation-stream-item .content[data-v-f0458f08] video {
  max-height: 50vh
}

.creation-stream-item .content-wrapper[data-v-f0458f08] {
  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-f0458f08],
.creation-stream-item .content-wrapper.audio[data-v-f0458f08] {
  background: transparent
}

.creation-stream-item .content-wrapper.audio[data-v-f0458f08] .top-right-actions {
  background: var(--color-other-2);
  top: 50%;
  transform: translateY(-50%)
}

.creation-stream-item .content-wrapper .grid[data-v-f0458f08] {
  display: grid;
  gap: 8px;
  width: 100%
}

.creation-stream-item .content-wrapper .image[data-v-f0458f08] {
  width: 100%
}

.creation-stream-item .content-wrapper .grid[data-v-f0458f08],
.creation-stream-item .content-wrapper .image[data-v-f0458f08] {
  position: relative
}

.creation-stream-item .audio-item-box[data-v-f0458f08] {
  height: 96px;
  width: 100%
}

.creation-stream-item .audio-item-box.generating[data-v-f0458f08] {
  background-color: var(--color-other-1);
  border-radius: 16px
}

.creation-stream-item .audio-item-box .audio-item-uncompleted[data-v-f0458f08] {
  display: flex;
  height: 100%;
  padding: 8px
}

.creation-stream-item .audio-item-box .audio-item-completed[data-v-f0458f08] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 8px 0
}

.creation-stream-item .audio-item-box .audio-item-completed .cover[data-v-f0458f08] {
  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-f0458f08] {
  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-f0458f08] {
  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-f0458f08] .progress-box {
  margin-bottom: 8px
}

.creation-stream-item .audio-item-box .audio-item-uncompleted[data-v-f0458f08] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%
}

.creation-stream-item .audio-item-box .audio-item-uncompleted-left[data-v-f0458f08] {
  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-f0458f08] {
  cursor: pointer;
  color: var(--color-text-1)
}

.creation-stream-item .audio-item-box .audio-item-uncompleted-left svg[data-v-f0458f08] {
  margin-right: 16px
}

.creation-stream-item .image-placeholder[data-v-f0458f08] {
  display: block;
  background-color: transparent
}

.creation-stream-item .content[data-v-f0458f08] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}

.creation-stream-item .grid[data-v-f0458f08]>* {
  overflow: hidden
}

.creation-stream-item .grid[data-v-f0458f08] {
  display: grid;
  gap: 8px
}

.history-stream-sticky-header {
  position: fixed;
  padding-bottom: 16px;
  background: #0f0f0fe6;
  width: var(--7bd10b3a);
  z-index: 2;
  top: 88px;
  left: var(--6cfe7b2a)
}

body.mobile .history-stream[data-v-0671b5a8] {
  width: 100vw;
  min-width: 0
}

.history-stream[data-v-0671b5a8] {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg-page)
}

.history-stream .filter-bar[data-v-0671b5a8] {
  height: 64px;
  padding: 16px 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-0671b5a8] {
  color: var(--color-border-line);
  margin: 0 16px
}

.history-stream .filter-bar .checkbox[data-v-0671b5a8] {
  margin-left: 16px
}

.history-stream .filter-bar .checkbox svg[data-v-0671b5a8] {
  margin-right: 6px
}

.history-stream .filter-bar .checkbox .uncheck[data-v-0671b5a8] {
  color: var(--color-border-component)
}

.history-stream .filter-bar .checkbox .uncheck[data-v-0671b5a8]:hover {
  color: var(--color-border-hover)
}

.history-stream .filter-bar .right[data-v-0671b5a8] {
  display: flex;
  align-items: center;
  gap: 8px
}

.history-stream .content-container[data-v-0671b5a8] {
  flex: 1;
  display: flex;
  overflow: hidden;
  padding: 24px 32px 10px
}

.history-stream .content-container.mobile[data-v-0671b5a8] {
  padding: 24px 10px 10px
}

.history-stream .content-container .creation-stream[data-v-0671b5a8] {
  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-0671b5a8]::-webkit-scrollbar {
  display: none
}

.history-stream .content-container .thumbnail-list[data-v-0671b5a8] {
  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-0671b5a8]::-webkit-scrollbar {
  display: none
}

.history-stream .content-container .thumbnail-list .thumbnail[data-v-0671b5a8] {
  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-0671b5a8]:last-child {
  margin-bottom: 0
}

.history-stream .content-container .thumbnail-list .thumbnail img[data-v-0671b5a8] {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.fixed-status[data-v-0671b5a8] {
  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-0671b5a8] {
  right: 32px
}

.el-dropdown-menu[data-v-0671b5a8] {
  background-color: transparent
}

.thumbnail--active[data-v-0671b5a8] {
  border: 2px solid rgb(116, 255, 82);
  box-shadow: 0 0 8px #4caf5080
}

.thumbnail-list[data-v-0671b5a8] {
  overflow-y: auto;
  scrollbar-width: thin;
  position: relative
}

.thumbnail[data-v-0671b5a8] {
  transition: border-color .3s ease;
  position: relative
}

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

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

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

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

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

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

.empty-history[data-v-0671b5a8] {
  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-0671b5a8] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.video-design-view[data-v-51f042ac] {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: auto
}

.video-design-view[data-v-51f042ac] .video-designer {
  flex: 0 1 auto;
  min-width: 0
}

.video-design-view[data-v-51f042ac] .history-stream {
  flex: 1;
  min-width: 665px
}

.effects-view .title[data-v-618eece1] {
  margin-bottom: 24px;
  color: var(--color-text-1);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600
}

.effects-view .effects[data-v-618eece1] {
  margin-top: 16px;
  max-height: 100%;
  overflow: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: grid;
  gap: 8px
}

.effects-view .effects[data-v-618eece1]::-webkit-scrollbar {
  display: none
}

.qr-list[data-v-834bf37d] {
  float: right
}

.qr-list .qr img[data-v-834bf37d] {
  width: 112px;
  height: 112px
}

body.mobile .qr-list[data-v-834bf37d] {
  display: block;
  float: none;
  width: 100%;
  text-align: center;
  margin-top: 20px
}

body.mobile .copyright .content .logo[data-v-834bf37d] {
  display: none
}

body.mobile .copyright .content .list[data-v-834bf37d] {
  margin-right: 24px;
  padding: 0
}

body.mobile .copyright .content .list.no-margin[data-v-834bf37d] {
  float: right;
  margin-right: 0
}

body.mobile .copyright .content .qr[data-v-834bf37d] {
  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-834bf37d] {
  margin-bottom: 84px
}

body.mobile .container[data-v-834bf37d] {
  padding-left: 20px;
  padding-right: 20px
}

.container[data-v-834bf37d] {
  padding-top: 42px;
  border-top: 1px solid var(--color-border-frame)
}

.copyright[data-v-834bf37d] {
  font-size: 14px
}

.copyright.first[data-v-834bf37d] {
  padding-bottom: 32px
}

.copyright.bottom[data-v-834bf37d] {
  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-834bf37d] {
  margin-bottom: .2em
}

.copyright.bottom a[data-v-834bf37d] {
  display: inline;
  margin-left: 1em;
  margin-right: 1em
}

.copyright .content .logo[data-v-834bf37d] {
  vertical-align: top;
  display: inline-block;
  margin-right: 5em
}

.copyright .content .list[data-v-834bf37d] {
  vertical-align: top;
  margin-right: 5em;
  display: inline-block
}

.copyright .content .list h3[data-v-834bf37d] {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 48px;
  color: var(--color-text-1)
}

.copyright .content .list p[data-v-834bf37d] {
  margin-bottom: 1em;
  color: var(--color-text-2)
}

.copyright .content .qr[data-v-834bf37d] {
  float: right;
  text-align: center;
  margin-left: 2em;
  color: var(--color-text-2)
}

.copyright .content .qr div.img[data-v-834bf37d] {
  display: inline-block;
  border-radius: 8px;
  background-color: #fff;
  padding: 2px;
  line-height: 0;
  margin-bottom: 1em
}

.copyright .content .qr .qr-label[data-v-834bf37d] {
  width: 255px
}

.copyright a[data-v-834bf37d] {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all .4s
}

.copyright a[data-v-834bf37d]:hover {
  color: var(--color-text-1)
}

img.police[data-v-834bf37d] {
  width: 16px;
  height: 16px;
  margin-bottom: -4px
}

body.mobile .card[data-v-4e574779] {
  padding-top: 16px;
  padding-left: 16px
}

body.mobile .card img[data-v-4e574779] {
  display: none
}

body.mobile .card h2>span[data-v-4e574779] {
  font-size: 14px
}

body.mobile .card p[data-v-4e574779] {
  font-size: 11px
}

.card[data-v-4e574779] {
  cursor: pointer;
  height: 100%;
  width: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #dbecff1a, #f5f8ff0f);
  padding-top: 24px;
  padding-left: 20px;
  position: relative;
  overflow: hidden
}

.card img[data-v-4e574779] {
  position: absolute;
  width: 30%;
  bottom: 0;
  right: 0
}

.card h2[data-v-4e574779] {
  margin-bottom: 6px;
  line-height: 26px
}

.card h2 span[data-v-4e574779] {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  background: var(--color-gradient-button);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.card p[data-v-4e574779] {
  font-size: 13px;
  font-weight: 400;
  line-height: 22px;
  color: var(--color-text-2)
}

.card p sup[data-v-4e574779] {
  position: absolute;
  margin-top: -4px;
  margin-left: 3px
}

.card .round-btn[data-v-4e574779] {
  pointer-events: none;
  float: right;
  margin-top: 12px;
  margin-right: 24px
}

.card:hover .round-btn[data-v-4e574779] {
  border-color: #fff
}

.card[data-v-4e574779]:last-child {
  margin-right: 0
}

body.mobile .resource .main[data-v-f575f313] {
  padding: 24px
}

body.mobile .resource-b .center>span[data-v-f575f313] {
  font-size: 20px
}

body.mobile .resource-b .center .input-box[data-v-f575f313] {
  width: calc(100vw - 128px)
}

body.mobile .create-tools[data-v-f575f313] {
  grid-template-columns: repeat(2, 2fr);
  gap: 10px
}

body.mobile .create-tools .item[data-v-f575f313] {
  height: 96px
}

body.mobile .mobile-header[data-v-f575f313] {
  height: 56px;
  display: flex;
  justify-content: space-between;
  padding: 14px 0
}

body.mobile .mobile-header .member-box[data-v-f575f313] {
  display: flex;
  gap: 10px;
  height: 28px;
  border-radius: 4px;
  background: var(--color-bg-secondary);
  align-items: center;
  padding: 0 8px
}

body.mobile .mobile-header .member-box .divider[data-v-f575f313] {
  width: 1px;
  height: 14px;
  background: #ffffff1f;
  border-radius: 6px
}

body.mobile .mobile-header .top-up .price[data-v-f575f313] {
  background: var(--color-gradient-standard);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.resource-b[data-v-f575f313] {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  position: relative
}

.resource-b .center[data-v-f575f313] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  gap: 16px
}

.resource-b .center>span[data-v-f575f313] {
  font-size: 30px;
  font-weight: 600;
  line-height: 32px;
  color: var(--color-text-1)
}

.resource-b .center .input-box[data-v-f575f313] {
  height: 36px;
  width: 360px;
  border-radius: 80px;
  border: .5px solid var(--color-border-focused);
  background: #00000052;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding-right: 4px;
  gap: 10px
}

.resource-b .center .input-box>span[data-v-f575f313] {
  flex: 1;
  padding-left: 16px;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px
}

.resource[data-v-f575f313] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px;
  overflow: hidden
}

.resource .main[data-v-f575f313] {
  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-f575f313] {
  padding: 28px 10px
}

.resource .main .title[data-v-f575f313] {
  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-f575f313] {
  font-family: PP Editorial New Italic;
  font-style: italic
}

.resource .main .description[data-v-f575f313] {
  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-f575f313] {
  width: 100%;
  height: 100%;
  border-radius: 12px
}

.resource .carousel[data-v-f575f313] .el-carousel__container {
  height: 100%
}

.resource .carousel[data-v-f575f313] .el-carousel__indicators {
  left: unset;
  right: 16px;
  transform: none
}

.create-tools[data-v-f575f313] {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

.create-tools .item[data-v-f575f313] {
  height: 104px
}

.button[data-v-f575f313] {
  border-radius: 40px;
  padding: 0 24px !important
}

.tab[data-v-f575f313] {
  padding-top: 32px;
  width: 100%;
  background: var(--color-bg-page);
  position: sticky;
  top: -2px;
  z-index: 100;
  padding-bottom: 16px
}

.bottom[data-v-f575f313] {
  text-align: center;
  margin-top: 32px;
  margin-bottom: 56px
}

.video-container[data-v-f575f313] {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  flex: 1
}

.video-container[data-v-f575f313]: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-f575f313] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%
}

.tools-video[data-v-f575f313] {
  cursor: pointer
}

.tools-video[data-v-f575f313]:before {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--color-fill-black-1);
  z-index: 1
}

.default[data-v-7a03e0b3] {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px
}

.default .uploader[data-v-7a03e0b3] {
  width: 638px;
  border-radius: 12px;
  border: 1px dashed var(--color-border-component);
  background: var(--color-other-1)
}

.default .video[data-v-7a03e0b3] {
  width: 638px !important;
  height: 360px !important;
  border-radius: 12px !important
}

.default .history[data-v-7a03e0b3] {
  max-width: 1072px;
  height: 96px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px
}

.default .history .text[data-v-7a03e0b3] {
  flex-shrink: 0;
  color: var(--color-text-1);
  font-size: 14px;
  line-height: 24px;
  white-space: nowrap
}

.default .history .item-wrapper[data-v-7a03e0b3] {
  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-7a03e0b3]::-webkit-scrollbar {
  display: none
}

.default .history .item-wrapper .item[data-v-7a03e0b3] {
  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-7a03e0b3]:hover {
  width: 64px;
  height: 64px;
  transition: all .2s ease-in-out
}

body.mobile .history[data-v-2c1a3928] {
  width: 128px !important;
  font-size: 11px
}

body.mobile .history .task-list[data-v-2c1a3928] {
  padding: 8px
}

body.mobile .history .task-list .works[data-v-2c1a3928] {
  grid-template-columns: repeat(2, 54px) !important
}

body.mobile .history .task-list .works .work[data-v-2c1a3928] {
  width: 54px !important;
  height: 54px !important
}

body.mobile .history .task-list .works .work.active img[data-v-2c1a3928] {
  height: 48px !important
}

body.mobile .history .task-list .works .work img[data-v-2c1a3928] {
  height: 54px !important
}

body.mobile .history .task-list .task-header[data-v-2c1a3928] {
  gap: 4px !important
}

body.mobile .history .task-list .task-header .icon svg[data-v-2c1a3928] {
  width: 16px !important;
  height: 16px !important
}

.disabled[data-v-2c1a3928] {
  pointer-events: none
}

.project-bar[data-v-2c1a3928] {
  position: absolute;
  top: 32px;
  right: 32px;
  z-index: 1;
  display: flex;
  gap: 12px
}

.project-bar .history[data-v-2c1a3928] {
  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-2c1a3928] {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer
}

.project-bar .history .title span[data-v-2c1a3928] {
  color: var(--color-text-1);
  font-size: 12px;
  line-height: 20px
}

.project-bar .history .task-list[data-v-2c1a3928] {
  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-2c1a3928]::-webkit-scrollbar {
  display: none
}

.project-bar .history .task-list .task-header[data-v-2c1a3928] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px
}

.project-bar .history .task-list .task-header .left[data-v-2c1a3928] {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer
}

.project-bar .history .task-list .task-header .left .img-wrapper[data-v-2c1a3928] {
  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-2c1a3928] {
  position: absolute;
  left: 0;
  z-index: 1;
  opacity: .3
}

.project-bar .history .task-list .task-header .left .img-wrapper .outpainting[data-v-2c1a3928] {
  width: 70%;
  height: 70%;
  border-radius: 4px
}

.project-bar .history .task-list .task-header .left .img-wrapper img[data-v-2c1a3928] {
  border-radius: 8px;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.project-bar .history .task-list .task-header .left span[data-v-2c1a3928] {
  color: var(--color-text-1);
  font-size: 12px;
  line-height: 20px
}

.project-bar .history .task-list .task-header .icon[data-v-2c1a3928] {
  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-2c1a3928] {
  display: grid;
  grid-template-columns: repeat(2, 64px);
  gap: 4px;
  margin-bottom: 36px
}

.project-bar .history .task-list .task .works .work[data-v-2c1a3928] {
  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-2c1a3928] {
  height: 64px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center
}

.project-bar .history .task-list .task .works .work .not-success .loading[data-v-2c1a3928] {
  height: 24px
}

.project-bar .history .task-list .task .works .work img[data-v-2c1a3928] {
  display: block;
  border-radius: 8px;
  width: 100%;
  height: 64px;
  object-fit: contain;
  cursor: pointer
}

.project-bar .history .task-list .task .works .active[data-v-2c1a3928] {
  padding: 2px;
  border: 1px solid var(--color-theme-2)
}

.project-bar .history .task-list .task .works .active .not-success[data-v-2c1a3928],
.project-bar .history .task-list .task .works .active img[data-v-2c1a3928] {
  height: 58px
}

.project-bar .history .task-list .task-active[data-v-2c1a3928] {
  border: 1px solid var(--color-theme-2);
  border-radius: 8px
}

.shrink[data-v-2c1a3928] {
  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
}

body.mobile .topbar[data-v-842e51ea] {
  height: fit-content;
  flex-direction: column;
  padding: 0;
  align-items: flex-start;
  position: relative
}

body.mobile .topbar .actions[data-v-842e51ea] {
  width: 100%;
  padding-right: 16px;
  justify-content: flex-end
}

body.mobile .topbar .actions[data-v-842e51ea] .membership-and-property {
  position: absolute;
  top: 16px;
  right: 16px
}

body.mobile .sidebar[data-v-842e51ea] {
  width: fit-content !important;
  height: 48px;
  display: flex;
  gap: 8px;
  top: 16px !important;
  left: 16px !important
}

body.mobile .sidebar .mode[data-v-842e51ea] {
  flex-direction: row !important
}

body.mobile .sidebar .mode .menu-item[data-v-842e51ea] {
  font-size: 11px !important;
  flex-shrink: 0;
  width: 48px;
  padding: 0 !important;
  justify-content: center;
  line-height: 18px !important
}

body.mobile .sidebar .mode .menu-item svg[data-v-842e51ea] {
  flex-shrink: 0;
  width: 16px !important;
  height: 16px !important
}

body.mobile .sidebar .upload[data-v-842e51ea] {
  margin: 0 !important;
  width: 48px;
  height: 100%;
  position: relative;
  padding-bottom: 3px !important
}

body.mobile .sidebar .upload .upload-icon[data-v-842e51ea] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

body.mobile .sidebar .upload .upload-icon .svg-icon[data-v-842e51ea] {
  color: var(--color-text-1) !important
}

body.mobile .sidebar .upload img[data-v-842e51ea] {
  width: 100% !important;
  height: 100% !important
}

body.mobile .project-bar[data-v-842e51ea] {
  top: 21px !important;
  right: 16px !important
}

.page[data-v-842e51ea] {
  height: 100%;
  display: flex;
  flex-direction: column
}

.page .topbar[data-v-842e51ea] {
  flex-shrink: 0;
  padding-right: 32px;
  height: 64px;
  background: var(--color-bg-page);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.page .topbar .title[data-v-842e51ea] {
  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-842e51ea] {
  width: 56px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center
}

.page .topbar .actions[data-v-842e51ea] {
  display: flex;
  align-items: center;
  gap: 12px
}

.page .topbar .actions .scale[data-v-842e51ea] {
  color: var(--color-text-1)
}

.page .topbar .actions .download[data-v-842e51ea] {
  display: flex;
  align-items: center
}

.page .disabled[data-v-842e51ea] {
  color: var(--color-text-3);
  pointer-events: none
}

.page .container[data-v-842e51ea] {
  flex: 1;
  position: relative
}

.page .container .sidebar[data-v-842e51ea] {
  position: absolute;
  z-index: 10;
  left: 32px;
  top: 32px;
  width: 80px
}

.page .container .sidebar .mode[data-v-842e51ea],
.page .container .sidebar .upload[data-v-842e51ea] {
  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-842e51ea] {
  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-842e51ea] {
  background: var(--color-other-2)
}

.page .container .sidebar .upload[data-v-842e51ea] {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 7px
}

.page .container .sidebar .upload .upload-icon[data-v-842e51ea] {
  width: 100%;
  display: flex;
  justify-content: center;
  cursor: pointer
}

.page .container .sidebar .upload img[data-v-842e51ea] {
  border-radius: 8px;
  width: 72px;
  height: 72px;
  object-fit: cover
}

.page .container .project-bar[data-v-842e51ea] {
  z-index: 10
}

.page .container .main-content[data-v-842e51ea] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center
}

.page .container .loading[data-v-842e51ea] {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: var(--color-fill-black-3);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center
}

.page .container .loading .tip[data-v-842e51ea] {
  font-size: 16px;
  color: var(--color-text-1);
  text-align: center;
  white-space: pre-line;
  word-break: break-word
}

.box[data-v-f7c072c5] {
  padding: 16px 16px 0;
  border-radius: 8px;
  background: var(--color-other-6);
  overflow: hidden;
  position: relative
}

.box .inner[data-v-f7c072c5] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 486px;
  padding-bottom: 46px
}

.box[data-v-f7c072c5]:after {
  content: "";
  width: 100%;
  height: 30px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, #14151600 13.33%, #141516)
}

.box .title[data-v-f7c072c5] {
  font-size: 12px;
  line-height: 20px;
  color: var(--color-text-1)
}

.box .title span[data-v-f7c072c5]:nth-child(1) {
  margin-right: 8px
}

.box .content[data-v-f7c072c5] {
  line-height: 24px;
  font-size: 12px;
  color: var(--color-text-2);
  margin-left: 20px
}

body.mobile .header-box[data-v-ac8dce48] {
  height: 64px
}

.header-box[data-v-ac8dce48] {
  height: 100px;
  width: 100%;
  position: fixed;
  top: 0;
  padding: 0 24px;
  justify-content: space-between;
  transition: background-color .3s, backdrop-filter .3s;
  z-index: 100
}

.user-info[data-v-ac8dce48] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-1)
}

.user-info .line[data-v-ac8dce48] {
  width: 152px;
  height: 1px;
  background: var(--color-other-1);
  margin-top: 12px
}

.user-info .quit-btn[data-v-ac8dce48] {
  height: 40px;
  width: 100%;
  cursor: pointer
}

body.mobile .top[data-v-627d82d6] {
  height: 300px
}

body.mobile .content[data-v-627d82d6] {
  width: calc(100% - 24px)
}

body.mobile .content .title[data-v-627d82d6],
body.mobile .content .part1 .title-no-member[data-v-627d82d6] {
  font-size: 18px !important;
  margin-top: 32px
}

body.mobile .content .part1 .code-box[data-v-627d82d6] {
  margin-top: 12px;
  font-size: 16px;
  height: 54px
}

body.mobile .content .part2 .description[data-v-627d82d6] {
  font-size: 12px;
  margin-top: 6px;
  margin-bottom: 24px
}

body.mobile .h5-header-text[data-v-627d82d6] {
  font-size: 12px;
  line-height: 20px;
  color: var(--color-text-1);
  text-align: center
}

body.mobile .h5-header-text .rules[data-v-627d82d6] {
  color: var(--color-text-2);
  justify-content: center;
  margin-top: 10px;
  gap: 3px
}

body.mobile .h5-header-text[data-v-627d82d6] i {
  font-weight: 520;
  line-height: 24px;
  margin: 0 4px;
  color: var(--color-theme-2);
  font-style: normal
}

body.mobile .step-box[data-v-627d82d6] {
  background-color: var(--color-other-1);
  border-radius: 8px;
  padding: 16px;
  position: relative;
  gap: 29px
}

body.mobile .step-box .line[data-v-627d82d6] {
  position: absolute;
  left: 0
}

body.mobile .step-box .line[data-v-627d82d6]:nth-child(1) {
  top: 0
}

body.mobile .step-box .line[data-v-627d82d6]:nth-child(2) {
  bottom: 0
}

body.mobile .step-box .item[data-v-627d82d6] {
  background: none;
  padding: 0
}

body.mobile .step-box .item .arrow[data-v-627d82d6] {
  width: 24px;
  top: 0;
  right: -26px
}

body.mobile .step-box .item .title-h5[data-v-627d82d6] {
  margin-top: 12px;
  text-align: center;
  width: 100%
}

body.mobile .step-box .item img[data-v-627d82d6] {
  margin-top: 12px
}

body.mobile .step-box .item .step[data-v-627d82d6] {
  margin: 0 !important
}

body.mobile .common-question[data-v-627d82d6] {
  padding: 16px
}

body.mobile .invited-list[data-v-627d82d6] {
  overflow: auto
}

body.lang-en .rule-btn[data-v-627d82d6] {
  bottom: 120px !important
}

img[data-v-627d82d6] {
  display: block
}

.top[data-v-627d82d6] {
  position: relative;
  background: #050500;
  width: 100%;
  height: 600px
}

.top img[data-v-627d82d6] {
  width: 100%;
  object-fit: cover;
  height: 100%;
  max-width: 2400px;
  position: absolute;
  left: 50%;
  transform: translate(-50%)
}

.top .rule-btn[data-v-627d82d6] {
  z-index: 2;
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translate(-643px)
}

.content[data-v-627d82d6] {
  width: calc(100% - 440px);
  max-width: 1288px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center
}

.content .part1[data-v-627d82d6],
.content .part2[data-v-627d82d6] {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center
}

.content .title[data-v-627d82d6] {
  margin-top: 80px;
  font-size: 28px;
  font-weight: 600;
  line-height: 32px
}

.content .description[data-v-627d82d6] {
  line-height: 26px;
  margin-top: 12px;
  color: var(--color-text-2);
  font-size: 16px;
  margin-bottom: 40px
}

.content .code-box[data-v-627d82d6] {
  margin-top: 40px;
  margin-bottom: 12px;
  height: 60px;
  width: 350px;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  gap: 28px;
  border-radius: 12px;
  background-color: var(--color-other-1);
  justify-content: space-between;
  position: relative;
  overflow: hidden
}

.content .code-box .expired[data-v-627d82d6] {
  color: var(--color-text-3)
}

.content .code-box .line[data-v-627d82d6] {
  position: absolute;
  left: 0
}

.content .code-box .line[data-v-627d82d6]:nth-child(1) {
  top: 0
}

.content .code-box .line[data-v-627d82d6]:nth-child(2) {
  bottom: 0
}

.content .prompt[data-v-627d82d6] {
  font-size: 12px;
  color: var(--color-text-3);
  line-height: 20px
}

.content .step-box[data-v-627d82d6] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 104px;
  margin-top: 40px;
  width: 100%
}

.content .step-box .item[data-v-627d82d6] {
  border-radius: 12px;
  background-color: var(--color-other-1);
  padding: 16px 20px;
  position: relative;
  overflow: hidden
}

.content .step-box .item .arrow[data-v-627d82d6] {
  width: 54px;
  position: absolute;
  top: calc(50% - 16px);
  right: -80px
}

.content .step-box .item .line[data-v-627d82d6] {
  position: absolute;
  left: 50%;
  transform: translate(-50%)
}

.content .step-box .item .line[data-v-627d82d6]:nth-child(1) {
  top: 0
}

.content .step-box .item .line[data-v-627d82d6]:nth-child(2) {
  bottom: 0
}

.content .step-box .item img[data-v-627d82d6] {
  width: 100%;
  margin-top: 16px;
  border-radius: 6px
}

.content .step-box .item-title[data-v-627d82d6] {
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  color: var(--color-theme-2);
  text-align: center
}

.content .step-box .item-title .step[data-v-627d82d6] {
  font-family: PP Editorial New Ultrabold;
  font-style: italic;
  margin-right: 12px
}

.content .summary-box[data-v-627d82d6] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  width: 100%
}

.content .summary-box .item[data-v-627d82d6] {
  border-radius: 12px;
  background: #ffffff14;
  font-size: 16px;
  line-height: 26px;
  justify-content: center;
  height: 110px;
  position: relative
}

.content .summary-box .item .line[data-v-627d82d6] {
  position: absolute;
  left: 50%;
  transform: translate(-50%)
}

.content .summary-box .item .line[data-v-627d82d6]:nth-child(1) {
  top: 0
}

.content .summary-box .item .line[data-v-627d82d6]:nth-child(2) {
  bottom: 0
}

.content .summary-box .item[data-v-627d82d6] i {
  font-style: normal;
  color: var(--color-theme-2);
  font-size: 24px;
  margin: 0 12px;
  font-family: DingTalk Sans
}

.content .invited-list[data-v-627d82d6] {
  margin-top: 32px;
  margin-bottom: 40px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden
}

.content .invited-list .center[data-v-627d82d6] {
  display: flex;
  height: 52px;
  gap: 14px;
  align-items: center
}

.content .invited-list .center .no-avatar[data-v-627d82d6] {
  width: 54px;
  height: 54px;
  border-radius: 30px;
  overflow: hidden;
  background: var(--color-fill-light)
}

.content .invited-list .center img[data-v-627d82d6] {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 30px;
  overflow: hidden
}

.content .invited-list .center div[data-v-627d82d6] {
  display: flex;
  flex-direction: column
}

.content .invited-list .center div span[data-v-627d82d6]:nth-child(1) {
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text-1)
}

.content .invited-list .center div span[data-v-627d82d6]:nth-child(2) {
  font-size: 12px;
  line-height: 20px;
  color: var(--color-text-3)
}

.content .invited-list .right[data-v-627d82d6] {
  display: flex;
  flex-direction: column;
  align-items: end
}

.content .invited-list .right span[data-v-627d82d6]:nth-child(1) {
  height: 24px;
  font-size: 20px;
  vertical-align: middle;
  color: var(--color-theme-2);
  font-family: DingTalk Sans
}

.content .invited-list .right span:nth-child(1) span[data-v-627d82d6] {
  margin-left: 8px;
  font-size: 12px;
  color: var(--color-text-1);
  line-height: 24px
}

.content .invited-list .right span[data-v-627d82d6]:nth-child(2) {
  font-size: 12px;
  line-height: 20px;
  color: var(--color-text-3)
}

.content .common-question[data-v-627d82d6] {
  margin-top: 32px;
  margin-bottom: 120px;
  background: var(--color-other-1);
  border-radius: 16px;
  padding: 60px 80px;
  display: flex;
  flex-direction: column;
  gap: 40px
}

.content .common-question .item div[data-v-627d82d6] {
  margin-top: 8px;
  font-size: 14px;
  color: var(--color-text-2);
  line-height: 24px
}

.content .common-question .item span[data-v-627d82d6] {
  font-size: 16px;
  font-weight: 600;
  line-height: 26px
}

.content .title-no-member[data-v-627d82d6] {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  display: flex;
  gap: 8px;
  flex-direction: column;
  align-items: center;
  margin-top: 80px
}

.content .title-no-member i[data-v-627d82d6] {
  color: var(--color-theme-2);
  margin: 0 12px;
  font-style: normal;
  cursor: pointer
}

.content .activity-expired-box[data-v-627d82d6] {
  border-radius: 12px;
  background: var(--color-other-1);
  height: 400px;
  gap: 16px;
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text-2);
  width: 100%;
  margin-top: 80px
}

.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-32ca9f6c] {
  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-32ca9f6c] {
  display: flex;
  justify-content: space-between;
  color: var(--color-text-1);
  font-size: 14px
}

.shopping-box .line[data-v-32ca9f6c] {
  height: 1px;
  width: 100%;
  background: var(--color-border-container);
  margin: 12px 0 24px
}

.shopping-box .target[data-v-32ca9f6c] {
  width: 100%;
  height: 72px;
  border-radius: 4px;
  position: relative;
  padding: 12px
}

.shopping-box .target-bg[data-v-32ca9f6c] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0
}

.shopping-box .target span[data-v-32ca9f6c] {
  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-32ca9f6c] b {
  color: var(--color-theme-2);
  font-size: 16px;
  font-weight: 520;
  margin: 0 2px
}

.shopping-box .target .discount[data-v-32ca9f6c] {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 72px;
  height: 72px;
  z-index: 1
}

.shopping-box .total[data-v-32ca9f6c] {
  color: var(--color-text-2);
  font-size: 14px;
  margin-top: 12px
}

.shopping-box .total-top[data-v-32ca9f6c] {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  height: 32px
}

.shopping-box .total-top span[data-v-32ca9f6c] {
  font-size: 18px;
  color: var(--color-text-1)
}

.shopping-box .total-top span span[data-v-32ca9f6c] {
  font-size: 24px;
  font-weight: 520;
  margin-left: 2px
}

.shopping-box .total-bottom[data-v-32ca9f6c] {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px
}

.shopping-box .fold-area[data-v-32ca9f6c] {
  overflow: hidden;
  transition: height .4s ease;
  max-height: calc(100vh - 426px);
  margin-top: 16px
}

.shopping-box .fold-area[data-v-32ca9f6c]::-webkit-scrollbar {
  width: 4px;
  background-color: transparent
}

.shopping-box .fold-area[data-v-32ca9f6c]::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: transparent
}

.shopping-box .fold-area[data-v-32ca9f6c]::-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-32ca9f6c]::-webkit-scrollbar-thumb:hover {
  background-color: #777
}

.shopping-box .fold-area .line[data-v-32ca9f6c] {
  margin: 0 0 16px
}

.shopping-box .fold-area .products[data-v-32ca9f6c] {
  width: 100%;
  display: flex;
  gap: 4px;
  flex-wrap: wrap
}

.shopping-box .fold-area .products .item[data-v-32ca9f6c] {
  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-32ca9f6c] {
  display: flex
}

.shopping-box .fold-area .products .item .delete[data-v-32ca9f6c] {
  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-32ca9f6c] {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px
}

.shopping-box .fold-area .price[data-v-32ca9f6c] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--color-text-2);
  font-size: 14px
}

.shopping-box .fold-area .price span span[data-v-32ca9f6c]:nth-child(2) {
  color: var(--color-text-1)
}

.shopping-box .fold-area .price span[data-v-32ca9f6c] {
  display: flex;
  justify-content: space-between;
  align-items: center
}

body.mobile .benefit-box[data-v-85e81f1a] {
  padding: 32px 24px 24px
}

body.mobile .membership-content[data-v-85e81f1a] {
  justify-content: center
}

body.mobile .membership-content .item[data-v-85e81f1a] {
  height: fit-content;
  flex: auto
}

body.mobile .point-content[data-v-85e81f1a] {
  padding: 12px 8px;
  flex-direction: column;
  align-items: center;
  gap: 12px
}

body.mobile .point-content .item[data-v-85e81f1a] {
  width: 100%
}

body.mobile .gift-card-content[data-v-85e81f1a] {
  padding: 32px 24px;
  gap: 102px
}

body.mobile .gift-card-content .item[data-v-85e81f1a] {
  height: unset
}

body.mobile .gift-card-content .item .img[data-v-85e81f1a] {
  width: 40px;
  height: 40px
}

body.mobile .gift-card-content .item .arrow[data-v-85e81f1a] {
  width: 27px;
  height: 16px;
  right: -86px
}

.benefit-box[data-v-85e81f1a] {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 32px;
  padding-bottom: 32px
}

.benefit-box .membership-img[data-v-85e81f1a] {
  height: 57px;
  display: block
}

.benefit-box .point-img[data-v-85e81f1a] {
  display: block;
  height: 62px
}

.benefit-box .gift-card-img[data-v-85e81f1a] {
  height: 56px;
  display: block
}

.benefit-box .title[data-v-85e81f1a] {
  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-85e81f1a] {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%
}

.benefit-box .membership-content .item[data-v-85e81f1a] {
  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-85e81f1a]:hover {
  border: 1px solid var(--color-border-hover)
}

.benefit-box .membership-content .item video[data-v-85e81f1a] {
  width: 100%;
  height: 142px;
  display: block;
  object-fit: cover
}

.benefit-box .membership-content .item .bottom[data-v-85e81f1a] {
  width: 100%;
  height: 100px;
  background: var(--color-other-1);
  padding: 16px;
  text-align: center
}

.benefit-box .membership-content .item .bottom-title[data-v-85e81f1a] {
  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-85e81f1a] {
  font-weight: 400px;
  font-size: 12px;
  color: var(--color-text-2);
  line-height: 20px
}

.benefit-box .point-content[data-v-85e81f1a] {
  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-85e81f1a] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 160px;
  min-height: 142px
}

.benefit-box .point-content .item__title[data-v-85e81f1a] {
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 2px
}

.benefit-box .point-content .item__description[data-v-85e81f1a] {
  color: var(--color-text-2);
  font-size: 12px;
  line-height: 20px;
  text-align: center
}

.benefit-box .point-content .item img[data-v-85e81f1a] {
  width: 80px;
  height: 80px;
  margin-bottom: 16px
}

.benefit-box .gift-card-content[data-v-85e81f1a] {
  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-85e81f1a] {
  flex: 1;
  height: 164px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative
}

.benefit-box .gift-card-content .item .arrow[data-v-85e81f1a] {
  width: 54px;
  position: absolute;
  top: calc(50% - 16px);
  right: -115px
}

.benefit-box .gift-card-content .item .img[data-v-85e81f1a] {
  width: 80px;
  height: 80px;
  margin-bottom: 16px
}

.benefit-box .gift-card-content .item .title[data-v-85e81f1a] {
  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-85e81f1a] {
  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-992a9a13] {
  height: fit-content
}

body.mobile .content[data-v-992a9a13] {
  grid-template-columns: 1fr
}

.spirit-unit[data-v-992a9a13] {
  margin-bottom: 32px
}

.spirit-unit .prompt[data-v-992a9a13] {
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-2);
  margin-bottom: 32px;
  height: 22px
}

.spirit-unit .prompt a[data-v-992a9a13] {
  color: var(--color-theme-2);
  margin-left: 4px;
  text-decoration: none
}

.spirit-unit .content[data-v-992a9a13] {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px
}

.spirit-unit .content .item[data-v-992a9a13] {
  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-992a9a13] {
  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-992a9a13] {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 140px;
  height: 140px
}

.spirit-unit .content .item .top .title[data-v-992a9a13] {
  height: 32px;
  color: var(--color-text-1);
  display: flex;
  justify-content: space-between
}

.spirit-unit .content .item .top .title .left[data-v-992a9a13] {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 100%
}

.spirit-unit .content .item .top .title .left .point[data-v-992a9a13] {
  font-size: 32px;
  font-weight: 520;
  font-family: MiSans Latin VF;
  line-height: 100%
}

.spirit-unit .content .item .top .title .left .tag[data-v-992a9a13] {
  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-992a9a13] {
  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-992a9a13] {
  font-size: 12px;
  color: var(--color-text-2)
}

.spirit-unit .content .item .top .gift span[data-v-992a9a13] {
  color: var(--color-fill-warning)
}

.spirit-unit .content .item .bottom[data-v-992a9a13] {
  flex: 1;
  overflow: hidden;
  padding: 14px 24px;
  justify-content: space-between
}

.spirit-unit .content .item .bottom .price[data-v-992a9a13] {
  color: var(--color-text-1);
  font-weight: 520
}

.spirit-unit .content .item .bottom .price span[data-v-992a9a13]:first-child {
  font-size: 16px;
  margin-right: 4px
}

.spirit-unit .content .item .bottom .price span[data-v-992a9a13]:nth-child(2) {
  font-size: 24px
}

body.mobile .ad-box .top[data-v-ca44c2b4],
body.mobile .ad-box .bottom[data-v-ca44c2b4] {
  min-width: 900px
}

body.mobile .content[data-v-ca44c2b4] {
  grid-template-columns: 1fr
}

[data-v-ca44c2b4] .el-input-number {
  width: 120px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border-component)
}

[data-v-ca44c2b4] .el-input-number:hover .el-input__wrapper {
  box-shadow: 0 0 0 1px var(--color-text-1) inset !important
}

[data-v-ca44c2b4] .el-input-number .el-input-number__decrease,
[data-v-ca44c2b4] .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-ca44c2b4] .el-input-number .el-input-number__decrease:hover,
[data-v-ca44c2b4] .el-input-number .el-input-number__increase:hover {
  color: var(--color-text-1)
}

[data-v-ca44c2b4] .el-input-number .el-input-number__decrease.is-disabled,
[data-v-ca44c2b4] .el-input-number .el-input-number__increase.is-disabled {
  color: var(--color-text-3)
}

[data-v-ca44c2b4] .el-input-number .el-input-number__decrease {
  left: 0;
  border-right: none
}

[data-v-ca44c2b4] .el-input-number .el-input-number__increase {
  right: 0;
  border-left: none
}

[data-v-ca44c2b4] .el-input-number .el-input__wrapper {
  background-color: transparent;
  border-radius: 8px;
  box-shadow: none !important
}

[data-v-ca44c2b4] .el-input-number .el-input__wrapper .el-input__inner {
  color: var(--color-text-1);
  font-weight: 600
}

[data-v-ca44c2b4] .el-input-number .el-input__wrapper .el-input__inner:focus {
  border: none !important
}

.gift-cards .ad-box[data-v-ca44c2b4] {
  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-ca44c2b4] {
  border-bottom: 1px solid var(--color-other-1);
  height: 34px;
  padding-bottom: 12px;
  margin-bottom: 12px
}

.gift-cards .ad-box .top div[data-v-ca44c2b4]: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-ca44c2b4]: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-ca44c2b4]: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-ca44c2b4]:nth-child(2) {
  height: 22px;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-2)
}

.gift-cards .ad-box .top div[data-v-ca44c2b4]:nth-child(2) b {
  color: var(--color-text-1);
  margin-left: 4px
}

.gift-cards .ad-box .bottom[data-v-ca44c2b4] {
  display: flex;
  gap: 76px
}

.gift-cards .ad-box .bottom .item[data-v-ca44c2b4] {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  position: relative
}

.gift-cards .ad-box .bottom .item .arrow[data-v-ca44c2b4] {
  width: 28px;
  height: 17px;
  position: absolute;
  top: calc(50% - 9px);
  right: -50px
}

.gift-cards .ad-box .bottom .item .right[data-v-ca44c2b4] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 12px
}

.gift-cards .ad-box .bottom .item .right span[data-v-ca44c2b4]:first-child {
  font-weight: 600;
  line-height: 20px
}

.gift-cards .ad-box .bottom .item .right span[data-v-ca44c2b4]:nth-child(2) {
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-2)
}

.gift-cards .ad-box .bottom .item .right span[data-v-ca44c2b4]:nth-child(2) b {
  list-style: none;
  color: var(--color-text-3)
}

.gift-cards .title[data-v-ca44c2b4] {
  width: 100%;
  font-size: 14px;
  height: 24px;
  padding-left: 8px;
  position: relative;
  margin-bottom: 12px
}

.gift-cards .title[data-v-ca44c2b4]: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-ca44c2b4] {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px 16px
}

.gift-cards .content .item[data-v-ca44c2b4] {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--color-border-frame)
}

.gift-cards .content .item .price[data-v-ca44c2b4] {
  font-size: 24px;
  font-weight: 520;
  font-family: MiSans Latin VF;
  color: var(--color-text-1)
}

.gift-cards .content .item .price span[data-v-ca44c2b4] {
  font-size: 16px;
  font-weight: 520;
  margin-right: 4px
}

.gift-cards .content .item .old[data-v-ca44c2b4] {
  vertical-align: middle;
  display: inline-block;
  width: fit-content
}

.gift-cards .content .item .old .v[data-v-ca44c2b4] {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-text-3)
}

.gift-cards .content .item .old .b[data-v-ca44c2b4] {
  width: 100%;
  height: 1px;
  background-color: var(--color-text-3);
  transform: translateY(-12px) rotate(-10deg) translate(2px)
}

.gift-cards .content .item .top[data-v-ca44c2b4] {
  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-ca44c2b4] {
  font-size: 24px;
  font-weight: 520;
  font-family: MiSans Latin VF;
  line-height: 32px
}

.gift-cards .content .item .top .img[data-v-ca44c2b4] {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 160px;
  height: 160px;
  z-index: 1
}

.gift-cards .content .item.member-item .type[data-v-ca44c2b4] {
  font-size: 20px;
  font-weight: 600;
  height: 28px
}

.gift-cards .content .item.member-item .benefits-title[data-v-ca44c2b4] {
  height: 28px;
  font-size: 14px;
  font-weight: 600
}

.gift-cards .content .item.member-item .benefits-title[data-v-ca44c2b4] i {
  font-family: MiSans Latin VF;
  font-style: normal
}

.gift-cards .content .item.member-item .benefits-description[data-v-ca44c2b4] {
  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-ca44c2b4] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  width: 100%
}

.gift-cards .content .item.member-item .member-bottom .bottom-item[data-v-ca44c2b4] {
  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-ca44c2b4] {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.gift-cards .content .item.point-item[data-v-ca44c2b4] {
  height: 228px
}

.gift-cards .content .item.point-item .top[data-v-ca44c2b4] {
  background: var(--color-fill-light);
  position: relative
}

.gift-cards .content .item.point-item .top[data-v-ca44c2b4]: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-ca44c2b4] {
  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-ca44c2b4] {
  z-index: 1
}

.gift-cards .content .item.point-item .description span[data-v-ca44c2b4] {
  display: block;
  line-height: 18px;
  font-size: 12px;
  font-weight: 400
}

.gift-cards .content .item.point-item .description span[data-v-ca44c2b4] 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
}

.invitation-tag[data-v-42e32c8d] {
  height: 22px;
  border-radius: 12px 4px 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  padding: 4px 8px;
  color: var(--color-text-5);
  box-shadow: 0 2px 16px #0000003d
}

.invitation-tag.vip[data-v-42e32c8d] {
  background: var(--color-gradient-standard)
}

.invitation-tag.svip[data-v-42e32c8d] {
  background: var(--color-gradient-pro)
}

.invitation-tag.ssvip[data-v-42e32c8d] {
  background: var(--color-gradient-premier)
}

.count-down[data-v-7a7fb6b5] {
  padding: 0 4px;
  background: #e01e00;
  color: #fff;
  position: absolute;
  height: 26px;
  justify-content: center;
  border-radius: 6px;
  gap: 2px
}

.count-down .n[data-v-7a7fb6b5] {
  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-7a7fb6b5] {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  width: var(--l-width);
  margin-top: -2px
}

.count-down-simple[data-v-7a7fb6b5] {
  height: 100%;
  gap: 2px
}

.count-down-simple.membership-vip-hot[data-v-7a7fb6b5] {
  color: #47240d
}

.count-down-simple.membership-svip-hot[data-v-7a7fb6b5] {
  color: #093247
}

.count-down-simple.membership-ssvip-hot[data-v-7a7fb6b5] {
  color: #1a1d5c
}

.count-down-simple .n[data-v-7a7fb6b5] {
  font-size: 11px;
  font-weight: 600;
  text-align: center
}

.count-down-simple .l[data-v-7a7fb6b5] {
  width: var(--l-width);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  margin-top: -2px
}

.best-offer[data-v-7482e605] {
  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-7482e605] {
  background: linear-gradient(90deg, #e0e9ff, #c3adff)
}

body.mobile .add-btn[data-v-18e2543a] {
  margin-left: 24px
}

body.mobile .box[data-v-18e2543a] {
  width: 100%;
  padding: 0 12px;
  justify-content: flex-start
}

body.mobile .box div[data-v-18e2543a],
body.mobile .box span[data-v-18e2543a],
body.mobile .box div div[data-v-18e2543a],
body.mobile .box div span[data-v-18e2543a],
body.mobile .box span div[data-v-18e2543a],
body.mobile .box span span[data-v-18e2543a] {
  flex-shrink: 0
}

body.lang-en .add-btn svg[data-v-18e2543a] {
  margin-top: 1px
}

.box[data-v-18e2543a] {
  width: 100%;
  border-radius: 4px;
  background: var(--color-other-1);
  height: 40px;
  justify-content: center
}

.box .add-half[data-v-18e2543a] {
  color: var(--color-theme-2);
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  margin-top: -2px
}

.box .add-half span[data-v-18e2543a]:nth-child(1) {
  font-weight: 600
}

.box .add-half span[data-v-18e2543a]:nth-child(2) {
  font-size: 20px;
  font-weight: 520;
  margin-left: 1px
}

.box .add-btn[data-v-18e2543a] {
  color: var(--color-theme-2);
  font-weight: 500;
  margin-left: 48px;
  cursor: pointer
}

.box .has-code[data-v-18e2543a] i {
  font-style: normal;
  color: var(--color-theme-2);
  font-size: 20px;
  font-weight: 520
}

.box .has-code .code[data-v-18e2543a] {
  font-weight: 600;
  margin-right: 8px
}

.prompt[data-v-18e2543a] {
  color: var(--color-text-3);
  margin-top: -24px;
  height: 24px
}

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

body.mobile .membership-plan .top[data-v-bf7942e4] {
  gap: 8px;
  height: 46px;
  overflow-x: scroll
}

body.mobile .membership-plan .top[data-v-bf7942e4]::-webkit-scrollbar {
  display: none
}

body.mobile .membership-plan .top .tab[data-v-bf7942e4] {
  padding: 0 13px;
  flex-shrink: 0
}

body.mobile .membership-plan .top .tab span[data-v-bf7942e4] {
  font-size: 11px
}

body.mobile .membership-plan .top .tab.non-subs[data-v-bf7942e4] {
  width: 150px
}

body.mobile .membership-plan .content[data-v-bf7942e4] {
  flex-wrap: wrap;
  height: fit-content
}

body.mobile .membership-plan .content .membership[data-v-bf7942e4] {
  width: 100%;
  flex: auto
}

body.mobile .membership-plan .content .membership .membership-top[data-v-bf7942e4] {
  border-radius: 13px;
  overflow: hidden
}

body.mobile .membership-plan .content .membership .membership-top .bg[data-v-bf7942e4] {
  border-radius: 17px
}

body.mobile .membership-plan .content .membership .membership-top__vip[data-v-bf7942e4] {
  background: linear-gradient(12deg, #fff1d6 14.38%, #ffe852 80.65%)
}

body.mobile .membership-plan .content .membership .membership-top__svip[data-v-bf7942e4] {
  background: linear-gradient(12deg, #cef5f0 14.38%, #6ddef7 80.65%)
}

body.mobile .membership-plan .content .membership .membership-top__ssvip[data-v-bf7942e4] {
  background: linear-gradient(12deg, #e0eeff 14.38%, #70a9ff 80.65%)
}

body.lang-zh .membership-plan .membership .benefits h4[data-v-bf7942e4] i {
  margin-left: 4px
}

.membership-plan[data-v-bf7942e4] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px
}

.membership-plan.hot .top .tab-active[data-v-bf7942e4] {
  background: linear-gradient(94deg, #83ffbb, #00ff1a, #deff5c)
}

.membership-plan.hot .top .tab-active span[data-v-bf7942e4] {
  color: var(--color-bg-page) !important
}

.membership-plan.hot .top .tab-active[data-v-bf7942e4] svg {
  color: var(--color-bg-page) !important
}

.membership-plan.hot .content .membership[data-v-bf7942e4] {
  background: #e0efff0a;
  border: 1px solid rgba(224, 239, 255, .08)
}

.membership-plan.hot .content .membership-active__ssvip[data-v-bf7942e4] {
  border: 1px solid transparent !important;
  border-radius: 16px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(90deg, #18191a, #18191a), linear-gradient(90deg, #e0e9ff, #c3adff) !important
}

.membership-plan.hot .content .membership-active__ssvip[data-v-bf7942e4]:hover {
  background-image: linear-gradient(90deg, #18191a, #18191a), linear-gradient(90deg, #e0e9ff, #c3adff) !important
}

.membership-plan.hot .content .membership-active__svip[data-v-bf7942e4] {
  border: 1px solid transparent !important;
  border-radius: 16px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(90deg, #18191a, #18191a), linear-gradient(270deg, #6dddf7, #c8f3f0) !important
}

.membership-plan.hot .content .membership-active__svip[data-v-bf7942e4]:hover {
  background-image: linear-gradient(90deg, #18191a, #18191a), linear-gradient(270deg, #6dddf7, #c8f3f0) !important
}

.membership-plan.hot .content .membership-active__vip[data-v-bf7942e4] {
  border: 1px solid transparent !important;
  border-radius: 16px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(90deg, #18191a, #18191a), linear-gradient(270deg, #ffe852, #fff2d6) !important
}

.membership-plan.hot .content .membership-active__vip[data-v-bf7942e4]:hover {
  background-image: linear-gradient(90deg, #18191a, #18191a), linear-gradient(270deg, #ffe852, #fff2d6) !important
}

.membership-plan.hot .content .membership-top[data-v-bf7942e4] {
  position: relative
}

.membership-plan.hot .content .membership-top.hot-vip span[data-v-bf7942e4],
.membership-plan.hot .content .membership-top.hot-vip p[data-v-bf7942e4],
.membership-plan.hot .content .membership-top.hot-vip .old[data-v-bf7942e4] {
  color: #47240d !important;
  -webkit-text-fill-color: rgb(71, 36, 13) !important
}

.membership-plan.hot .content .membership-top.hot-vip .b[data-v-bf7942e4] {
  background-color: #47240d !important
}

.membership-plan.hot .content .membership-top.hot-svip span[data-v-bf7942e4],
.membership-plan.hot .content .membership-top.hot-svip p[data-v-bf7942e4],
.membership-plan.hot .content .membership-top.hot-svip .old[data-v-bf7942e4] {
  color: #093247 !important;
  -webkit-text-fill-color: rgb(9, 50, 71) !important
}

.membership-plan.hot .content .membership-top.hot-svip .b[data-v-bf7942e4] {
  background-color: #093247 !important
}

.membership-plan.hot .content .membership-top.hot-ssvip span[data-v-bf7942e4],
.membership-plan.hot .content .membership-top.hot-ssvip p[data-v-bf7942e4],
.membership-plan.hot .content .membership-top.hot-ssvip .old[data-v-bf7942e4] {
  color: #1a1d5c !important;
  -webkit-text-fill-color: rgb(26, 29, 92) !important
}

.membership-plan.hot .content .membership-top.hot-ssvip .b[data-v-bf7942e4] {
  background-color: #1a1d5c !important
}

.membership-plan.hot .content .membership-top .hot-icon[data-v-bf7942e4] {
  width: calc(100% - 20px);
  height: calc(100% - 10px);
  position: absolute;
  right: 10px;
  top: 10px;
  border-radius: 8px;
  overflow: hidden
}

.membership-plan.hot .content .membership-top .hot-icon-vip[data-v-bf7942e4] {
  background: linear-gradient(11.98deg, #fff1d6 14.38%, #ffe852 80.65%)
}

.membership-plan.hot .content .membership-top .hot-icon-svip[data-v-bf7942e4] {
  background: linear-gradient(11.98deg, #cef5f0 14.38%, #6ddef7 80.65%)
}

.membership-plan.hot .content .membership-top .hot-icon-ssvip[data-v-bf7942e4] {
  background: linear-gradient(11.98deg, #e0eeff 14.38%, #70a9ff 80.65%)
}

.membership-plan.hot .content .membership-top .hot-icon[data-v-bf7942e4] svg {
  width: 140px;
  position: absolute;
  right: 0;
  top: 0
}

.membership-plan.hot .content .membership ol li svg[data-v-bf7942e4] {
  color: var(--color-text-1)
}

.membership-plan.hot .content .membership .discount-tag[data-v-bf7942e4] {
  background: linear-gradient(136deg, #454d52, #1c2229, #1d1e1f 102.34%)
}

.membership-plan.hot .content .membership .discount-tag-vip span[data-v-bf7942e4] {
  background: linear-gradient(106deg, #fff1d6 13.08%, #ffe852 96.98%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 12px !important
}

.membership-plan.hot .content .membership .discount-tag-svip span[data-v-bf7942e4] {
  background: linear-gradient(90deg, #cdf5f0, #6ddef7) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 12px !important
}

.membership-plan.hot .content .membership .discount-tag-ssvip span[data-v-bf7942e4] {
  background: linear-gradient(90deg, #e1eeff, #70a9fe) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 12px !important
}

.membership-plan.hot .hot-bg[data-v-bf7942e4] {
  display: none
}

.membership-plan .top[data-v-bf7942e4] {
  height: 48px;
  border-radius: 24px;
  border: 1px solid var(--color-border-container);
  gap: 16px;
  padding: 6px
}

.membership-plan .top .tab[data-v-bf7942e4] {
  height: 100%;
  border-radius: 40px;
  padding: 0 24px;
  justify-content: space-between;
  cursor: pointer
}

.membership-plan .top .tab span[data-v-bf7942e4] {
  font-size: 14px;
  color: var(--color-text-1) !important;
  font-weight: 400
}

.membership-plan .top .tab-active[data-v-bf7942e4] {
  background: var(--color-other-3)
}

.membership-plan .top .tab-active span[data-v-bf7942e4] {
  font-weight: 600
}

.membership-plan .top .tab.non-subs[data-v-bf7942e4] {
  width: 183px;
  padding-right: 16px
}

.membership-plan .top .tab.non-subs svg[data-v-bf7942e4] {
  vertical-align: middle;
  margin-left: 4px;
  transition: all .4s;
  transform: rotate(180deg)
}

.membership-plan .top .tab.non-subs svg.expanded[data-v-bf7942e4] {
  transform: rotate(0)
}

.membership-plan .content[data-v-bf7942e4] {
  width: 100%;
  display: flex;
  gap: 16px;
  justify-content: center
}

.membership-plan .content .membership[data-v-bf7942e4] {
  flex: 1;
  background: var(--color-bg-primary);
  border-radius: 16px;
  position: relative;
  border: 1px solid transparent
}

.membership-plan .content .membership[data-v-bf7942e4]:hover {
  border: 1px solid var(--color-border-hover);
  background: var(--color-other-2)
}

.membership-plan .content .membership-top[data-v-bf7942e4] {
  padding: 28px 24px 0
}

.membership-plan .content .membership-dialog[data-v-bf7942e4] {
  background: var(--color-fill-light)
}

.membership-plan .content .membership-active__none[data-v-bf7942e4] {
  border: 1px #abbbcc solid !important
}

.membership-plan .content .membership-active__vip[data-v-bf7942e4] {
  border: 1px #ffc670 solid !important
}

.membership-plan .content .membership-active__svip[data-v-bf7942e4] {
  border: 1px #70bcff solid !important
}

.membership-plan .content .membership-active__ssvip[data-v-bf7942e4] {
  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[data-v-bf7942e4]: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-bf7942e4] {
  position: absolute;
  left: -1px;
  width: calc(100% + 2px);
  z-index: 1
}

.membership-plan .content .membership .best-offer-tag[data-v-bf7942e4] {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2
}

.membership-plan .content .membership h3[data-v-bf7942e4] {
  height: 28px;
  z-index: 2;
  position: relative;
  color: var(--color-text-1)
}

.membership-plan .content .membership h3 span[data-v-bf7942e4] {
  vertical-align: middle;
  font-weight: 400;
  line-height: 28px;
  font-size: 18px
}

.membership-plan .content .membership h3 .discount-tag[data-v-bf7942e4] {
  height: 22px;
  padding: 0 6px;
  background: var(--color-other-2);
  border-radius: 4px;
  display: inline-flex;
  margin-left: 4px
}

.membership-plan .content .membership h3 .discount-tag span[data-v-bf7942e4] {
  color: var(--color-text-1);
  font-size: 12px
}

.membership-plan .content .membership h3 .discount-tag[data-v-bf7942e4] i {
  font-size: 14px;
  font-weight: 400;
  margin: 0 2px;
  font-style: normal
}

.membership-plan .content .membership .dollar-price[data-v-bf7942e4] {
  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-bf7942e4] {
  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-bf7942e4] {
  font-size: 18px;
  font-weight: 600;
  margin-right: 4px
}

.membership-plan .content .membership .dollar-price .unit[data-v-bf7942e4] {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-1);
  margin-left: 4px
}

.membership-plan .content .membership .dollar-price .old[data-v-bf7942e4] {
  vertical-align: middle;
  display: inline-block;
  margin-left: 10px;
  color: var(--color-text-3)
}

.membership-plan .content .membership .dollar-price .old .v[data-v-bf7942e4] {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px
}

.membership-plan .content .membership .dollar-price .old .b[data-v-bf7942e4] {
  width: 100%;
  height: 1px;
  background: var(--color-text-3);
  transform: translateY(-12px) rotate(-10deg) translate(2px)
}

.membership-plan .content .membership .discount-description[data-v-bf7942e4] {
  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 .invitation-btn-tag[data-v-bf7942e4] {
  position: absolute;
  right: 0;
  top: -16px
}

.membership-plan .content .membership .buy[data-v-bf7942e4] {
  margin-top: 36px;
  padding-bottom: 24px;
  position: relative;
  z-index: 2
}

.membership-plan .content .membership .buy .rebuy-notice[data-v-bf7942e4] {
  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-bf7942e4] {
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin-left: 4px
}

.membership-plan .content .membership .buy .count-down-item[data-v-bf7942e4] {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translate(-50%);
  height: 20px;
  padding: 0 20px;
  border-radius: 20px 20px 0 0;
  background: #fff6
}

.membership-plan .content .membership .line[data-v-bf7942e4] {
  height: 1px;
  width: calc(100% - 48px);
  margin: auto;
  background: var(--color-border-container)
}

.membership-plan .content .membership .benefits[data-v-bf7942e4] {
  padding: 24px 24px 0;
  color: var(--color-text-1)
}

.membership-plan .content .membership .benefits h4[data-v-bf7942e4] {
  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-bf7942e4] 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-bf7942e4] {
  height: 28px;
  display: flex;
  align-items: end
}

.membership-plan .content .membership .benefits p[data-v-bf7942e4] {
  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-bf7942e4] {
  margin-left: 2px;
  color: var(--color-text-2);
  height: 16px;
  margin-bottom: 3px
}

.membership-plan .content .membership ol[data-v-bf7942e4] {
  margin-top: 24px;
  margin-left: 0;
  text-align: left;
  padding: 0 24px 28px
}

.membership-plan .content .membership ol li[data-v-bf7942e4] {
  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-bf7942e4] {
  color: var(--color-theme-2)
}

[data-v-bf7942e4] .dropdown-item-active {
  color: var(--color-theme-2) !important
}

.renewal-tag[data-v-843be3df] {
  display: inline-flex;
  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-843be3df] {
  margin-left: 4px;
  width: 12px;
  height: 12px;
  vertical-align: top
}

.theme-image[data-v-7218d70b] {
  --theme-color-primary: #72e528;
  --theme-color-hover: #9ffd38
}

.theme-video[data-v-7218d70b] {
  --theme-color-primary: #1be5ec;
  --theme-color-hover: #6bf0dc
}

.clickable a[data-v-7218d70b] {
  color: var(--color-text-1);
  margin-left: 6px;
  margin-right: 6px;
  cursor: pointer;
  transition: color .2s
}

.clickable a[data-v-7218d70b]:hover,
.clickable a.active[data-v-7218d70b] {
  color: var(--color-theme-2)
}

.clickable a[data-v-7218d70b]:active {
  filter: brightness(.9)
}

.clickable a svg[data-v-7218d70b] {
  vertical-align: middle
}

.clickable a span[data-v-7218d70b] {
  vertical-align: middle
}

.clickable a svg+span[data-v-7218d70b] {
  margin-left: 4px
}

@-webkit-keyframes rotation-7218d70b {
  0% {
    -webkit-transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(360deg)
  }
}

@keyframes rotation-7218d70b {
  0% {
    -webkit-transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(360deg)
  }
}

.rotating[data-v-7218d70b] {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  animation: rotation-7218d70b 1s linear infinite;
  -moz-animation: rotation-7218d70b 1s linear infinite;
  -webkit-animation: rotation-7218d70b 1s linear infinite;
  -o-animation: rotation-7218d70b 1s linear infinite
}

.all-center[data-v-7218d70b] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column
}

.vertical-center[data-v-7218d70b] {
  display: flex;
  align-items: center
}

.y-scrollable-without-bar[data-v-7218d70b] {
  overflow-y: auto
}

.y-scrollable-without-bar[data-v-7218d70b]::-webkit-scrollbar {
  display: none
}

.membership-none[data-v-7218d70b] {
  background: var(--color-gradient-basic);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.membership-vip[data-v-7218d70b] {
  background: var(--color-gradient-standard);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.membership-svip[data-v-7218d70b] {
  background: var(--color-gradient-pro);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.membership-ssvip[data-v-7218d70b] {
  background: var(--color-gradient-premier);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.membership-bg-vip[data-v-7218d70b] {
  background: var(--color-gradient-standard-bg)
}

.membership-bg-svip[data-v-7218d70b] {
  background: var(--color-gradient-pro-bg)
}

.membership-bg-ssvip[data-v-7218d70b] {
  background: var(--color-gradient-premier-bg)
}

.membership-bg-point[data-v-7218d70b] {
  background: var(--color-fill-light)
}

.membership-tag-hot-color[data-v-7218d70b],
.membership-box.hot[data-v-7218d70b] .tabs-box .tab.active {
  background: linear-gradient(94deg, #41ffbb, #11ff4c, #e2ff20);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

div.ebank[data-v-7218d70b] {
  z-index: 100000 !important;
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px)
}

div.ebank .ebank-content[data-v-7218d70b] {
  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[data-v-7218d70b] {
  background: transparent;
  color: #fff
}

div.ebank .ebank-content dt[data-v-7218d70b] {
  color: #999bac !important
}

div.ebank .count-down[data-v-7218d70b] {
  border-bottom-color: #3b3c4d
}

div.ebank .ebank-content .qr-box img[data-v-7218d70b] {
  background-color: #fff;
  margin-top: 32px;
  margin-bottom: 32px
}

div.ebank .ebank-content .ebank-pay-info-qr .tips[data-v-7218d70b],
div.ebank .ebank-content .ebank-pay-info-qr .limit-time[data-v-7218d70b] {
  color: #999bac !important
}

.animation-button svg[data-v-7218d70b] {
  animation-name: var(--animation-button-name);
  animation-duration: 0s
}

.animation-button:active svg[data-v-7218d70b] {
  animation: none
}

.animation-button.animation-available svg[data-v-7218d70b] {
  animation-duration: 1s
}

.selecto-selection[data-v-7218d70b] {
  border: 1px solid var(--color-border-focused) !important;
  box-shadow: var(--box-shadow-component) !important;
  background-color: var(--color-other-3) !important
}

.board-bg[data-v-7218d70b] {
  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-new-tag[data-v-7218d70b] {
  border-radius: 4px;
  padding: 0 6px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  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
}

body.mobile .membership-box__top[data-v-7218d70b] {
  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-7218d70b] {
  font-size: 14px !important;
  position: relative;
  width: 100%
}

body.mobile .membership-box__top .user-right[data-v-7218d70b] {
  gap: 0
}

body.mobile .membership-box__top .user[data-v-7218d70b]: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-7218d70b] {
  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-7218d70b] {
  justify-content: space-between
}

body.mobile .membership-box__top .property-item div span[data-v-7218d70b] {
  color: var(--color-text-2);
  display: flex;
  gap: 4px
}

body.mobile .membership-box__top .property-item[data-v-7218d70b]: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-7218d70b]:nth-child(3) svg {
  color: #cad7db
}

body.mobile .membership-box__top .property-item[data-v-7218d70b]:nth-child(1) {
  width: calc(50% - 24px)
}

body.mobile .membership-box__top .property-item:nth-child(1) div span span[data-v-7218d70b] {
  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-7218d70b]: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-7218d70b]:nth-child(2) {
  width: calc(50% - 24px)
}

body.mobile .membership-box__top .property-item[data-v-7218d70b]:nth-child(2):after {
  content: "";
  display: none
}

body.mobile .membership-box__tab[data-v-7218d70b] {
  margin-top: var(--margin-top);
  padding-left: 12px;
  margin-bottom: 16px
}

body.mobile.lang-en .tabs[data-v-7218d70b] {
  gap: 12px
}

.membership-box[data-v-7218d70b] {
  width: 100%;
  height: 100%
}

.membership-box.hot[data-v-7218d70b] .tabs-box .tab.active .tag {
  background: linear-gradient(94deg, #41ffbb1f, #11ff4c1f, #e2ff201f)
}

.membership-box__top[data-v-7218d70b] {
  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-7218d70b] {
  display: flex;
  gap: 16px
}

.membership-box__top .user-right[data-v-7218d70b] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center
}

.membership-box__top .user-right .name[data-v-7218d70b] {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-1)
}

.membership-box__top .user-right .other[data-v-7218d70b] {
  font-size: 14px
}

.membership-box__top .user-right .other span[data-v-7218d70b] {
  color: var(--color-text-2)
}

.membership-box__top .user-right .other a[data-v-7218d70b] {
  color: var(--color-theme-2);
  cursor: pointer
}

.membership-box__top .property[data-v-7218d70b] {
  height: 50px;
  display: flex;
  gap: 64px
}

.membership-box__top .property-item[data-v-7218d70b] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative
}

.membership-box__top .property-item div[data-v-7218d70b]:first-child {
  font-size: 14px;
  gap: 2px;
  cursor: pointer;
  color: var(--color-text-2)
}

.membership-box__top .property-item div[data-v-7218d70b]: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-7218d70b] {
  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-7218d70b] {
  color: var(--color-theme-2);
  font-size: 14px;
  font-weight: 400;
  margin-left: 4px;
  cursor: pointer
}

.membership-box__top .property-item[data-v-7218d70b]: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-7218d70b] {
  height: 32px;
  display: block
}

.membership-box__top .no-login .sub-title[data-v-7218d70b] {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-text-1)
}

.membership-box__tab[data-v-7218d70b] {
  width: 100%;
  margin: 32px 0;
  height: 34px
}

.membership-box__content[data-v-7218d70b] {
  width: 100%
}

body.lang-en .header-text[data-v-801eceb3] {
  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-801eceb3] {
  width: 100%
}

body.mobile .membership-view__content[data-v-801eceb3] {
  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-801eceb3] {
  width: 100%;
  background: none;
  padding: 0 12px
}

.membership-view[data-v-801eceb3] {
  width: calc(100vw - var(--left-navigation-width));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px
}

.membership-view .header-text[data-v-801eceb3] {
  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-801eceb3] {
  border-radius: 24px;
  margin-bottom: 48px;
  width: calc(100% - 128px);
  max-width: 1380px;
  min-width: 1092px
}

.membership-view__content .anniversary-banner[data-v-801eceb3] {
  width: 100%;
  display: block;
  margin-bottom: 32px
}

.membership-view__top[data-v-801eceb3] {
  width: 100%
}

.membership-view .arrow-content[data-v-801eceb3] {
  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-801eceb3] {
  width: 179px;
  height: 56px;
  margin-top: 12px;
  margin-bottom: 4px
}

body.mobile .header[data-v-2384ad3d] {
  overflow-x: scroll
}

body.mobile .header[data-v-2384ad3d] .tab {
  white-space: nowrap
}

body.mobile .header[data-v-2384ad3d]::-webkit-scrollbar {
  display: none
}

.header[data-v-2384ad3d] {
  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-2384ad3d] {
  width: 100%;
  height: 36px
}

.header .operation-query[data-v-2384ad3d] {
  margin-left: 12px;
  flex-shrink: 0;
  width: 240px
}

.header .operation-query[data-v-2384ad3d] svg {
  color: var(--color-text-3)
}

.tabs[data-v-06d11586] {
  padding-bottom: 24px
}

.container[data-v-06d11586] {
  padding: 12px 20px;
  border-radius: 8px;
  max-height: 696px;
  min-height: 500px;
  overflow-y: auto;
  background-color: var(--color-fill-light)
}

.container .empty[data-v-06d11586] {
  margin-top: 192px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.container .empty p[data-v-06d11586] {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-text-2)
}

.container .list-container .follow-item[data-v-06d11586] {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-other-2);
  margin-bottom: 8px
}

.container .list-container .follow-item .avatar[data-v-06d11586] {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  cursor: pointer
}

.container .list-container .follow-item .user-info[data-v-06d11586] {
  flex: 1
}

.container .list-container .follow-item .user-info .user-name[data-v-06d11586] {
  cursor: pointer;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-1)
}

.container .list-container .follow-item .user-info .user-count[data-v-06d11586] {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  font-weight: 400;
  line-height: 22px;
  color: var(--color-text-2)
}

.container .list-container .follow-item .user-info .user-count .count[data-v-06d11586] {
  color: var(--color-text-1)
}

.container .list-container .follow-item .user-info .user-count .split[data-v-06d11586] {
  color: var(--color-border-line)
}

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

.user[data-v-5c9bb907] {
  display: flex;
  margin-bottom: 36px
}

.user .user-desc[data-v-5c9bb907] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-text-1);
  gap: 4px
}

.user .user-desc .name[data-v-5c9bb907] {
  font-size: 18px;
  font-weight: 500;
  line-height: 26px
}

.user .user-desc .motivate[data-v-5c9bb907] {
  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-5c9bb907] {
  color: var(--color-text-1)
}

.user .avatar[data-v-5c9bb907] {
  margin-right: 24px;
  width: 64px;
  height: 64px
}

.title[data-v-5c9bb907] {
  display: flex;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-container);
  margin-bottom: 16px
}

.title h3[data-v-5c9bb907] {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: var(--color-text-1);
  margin-right: 12px
}

.title h4[data-v-5c9bb907] {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--color-text-3)
}

.title .complete[data-v-5c9bb907] {
  background: linear-gradient(89.86deg, #a7ff1a, #82fac2, #47d4ff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.milestone[data-v-5c9bb907] {
  margin-bottom: 48px
}

.milestone .milestone-list[data-v-5c9bb907] {
  display: flex;
  gap: 10px;
  align-items: center
}

.milestone .milestone-list .milestone-item[data-v-5c9bb907] {
  position: relative
}

.milestone .milestone-list .milestone-item .tip[data-v-5c9bb907] {
  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-5c9bb907] {
  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-5c9bb907] {
  width: 14px;
  height: 18px
}

.milestone .milestone-list .milestone-item.processing .tip[data-v-5c9bb907] {
  background-color: var(--color-theme-2);
  color: var(--color-text-5)
}

.milestone .milestone-list .milestone-item.processing .triangle[data-v-5c9bb907] {
  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-5c9bb907] {
  color: var(--color-text-3)
}

.milestone .milestone-list .milestone-item.done .done-icon[data-v-5c9bb907] {
  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-5c9bb907] {
  width: 10px;
  height: 10px;
  color: var(--color-text-2)
}

.milestone .progress-container[data-v-5c9bb907] {
  border-radius: 8px;
  height: 6px;
  background-color: var(--color-border-container);
  margin: 16px 0;
  position: relative
}

.milestone .progress-container .progress[data-v-5c9bb907] {
  position: relative;
  left: 0;
  min-width: 4px;
  background-color: var(--color-theme-2);
  height: 6px;
  border-radius: 8px
}

.milestone .progress-container .end[data-v-5c9bb907] {
  position: relative;
  top: -11px;
  width: 4px;
  height: 16px;
  border-radius: 8px;
  background-color: var(--color-theme-2)
}

.milestone .threshold-list[data-v-5c9bb907] {
  display: flex;
  gap: 10px;
  justify-content: center
}

.milestone .threshold-list span[data-v-5c9bb907] {
  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-5c9bb907] {
  color: var(--color-text-1)
}

.publish .skit-task[data-v-5c9bb907] {
  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-5c9bb907] {
  display: flex;
  align-items: center
}

.publish .skit-task .tip span[data-v-5c9bb907] {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--color-text-1)
}

.publish .skit-task .tip .spirit[data-v-5c9bb907] {
  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-5c9bb907] {
  width: 14px;
  height: 18px
}

.doc[data-v-5c9bb907] {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  color: var(--color-text-2);
  gap: 6px
}

.doc a[data-v-5c9bb907] {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--color-text-2);
  text-decoration: none
}

body.mobile .profile[data-v-52b0a899] {
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px
}

body.mobile .profile .user-info[data-v-52b0a899] {
  gap: 16px;
  min-width: unset;
  align-items: center
}

body.mobile .profile .user-info .avatar[data-v-52b0a899] {
  width: 40px;
  height: 40px
}

body.mobile .profile .user-info .right[data-v-52b0a899] {
  gap: 8px
}

body.mobile .profile .user-social[data-v-52b0a899] {
  gap: 12px;
  flex-wrap: wrap
}

body.mobile .profile .user-social .social-item[data-v-52b0a899] {
  padding: 4px
}

body.mobile .profile .user-social .click-item[data-v-52b0a899]:hover {
  background-color: transparent
}

.sticky-header[data-v-52b0a899] {
  height: 48px;
  background: var(--color-bg-page);
  position: sticky;
  z-index: 2;
  top: 0
}

.profile[data-v-52b0a899] {
  display: flex;
  padding: 32px;
  border-radius: 16px;
  align-items: center;
  justify-content: space-between;
  background: var(--color-bg-primary);
  gap: 48px
}

.profile .user-info[data-v-52b0a899] {
  display: flex;
  gap: 32px;
  min-width: 450px
}

.profile .user-info .avatar[data-v-52b0a899] {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer
}

.profile .user-info .right[data-v-52b0a899] {
  display: flex;
  flex-direction: column
}

.profile .user-info .right .user-name[data-v-52b0a899] {
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-text-1)
}

.profile .user-info .right .introduction[data-v-52b0a899] {
  margin: 2px 0 8px;
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-2)
}

.profile .user-info .right .others[data-v-52b0a899] {
  color: var(--color-text-2);
  display: flex;
  line-height: 22px;
  font-size: 13px;
  font-weight: 400;
  gap: 12px
}

.profile .user-info .right .others .font-theme[data-v-52b0a899] {
  color: var(--color-theme-2)
}

.profile .user-info .right .others .font-light[data-v-52b0a899] {
  color: var(--color-text-1)
}

.profile .user-social[data-v-52b0a899] {
  display: flex;
  gap: 24px;
  flex-shrink: 0;
  align-items: center
}

.profile .user-social .social-item[data-v-52b0a899] {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  gap: 4px
}

.profile .user-social .social-item.click-item[data-v-52b0a899] {
  cursor: pointer;
  border-radius: 8px
}

.profile .user-social .social-item.click-item[data-v-52b0a899]:hover {
  background-color: var(--color-other-1)
}

.profile .user-social .social-item.click-item h4[data-v-52b0a899] {
  gap: 2px
}

.profile .user-social .social-item h4[data-v-52b0a899] {
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-2)
}

.profile .user-social .social-item .font-number[data-v-52b0a899] {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-1)
}

.profile .btn-group[data-v-52b0a899] {
  display: flex;
  gap: 16px;
  flex-shrink: 0
}

.split[data-v-52b0a899] {
  color: var(--color-border-line)
}

.sticky-operation[data-v-52b0a899] {
  position: sticky;
  z-index: 2;
  top: 48px;
  background: var(--color-bg-page)
}

.sticky-operation .tab-container[data-v-52b0a899] {
  margin-top: 32px
}

.sticky-operation .operation-container[data-v-52b0a899] {
  margin-top: 32px;
  padding-bottom: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border-frame)
}

.sticky-operation .operation-container .common-filter[data-v-52b0a899] {
  display: flex;
  color: var(--color-text-1);
  gap: 16px;
  align-items: center
}

body.lang-en .small-text>span>span[data-v-e972c419] {
  font-size: 16px
}

body.lang-en .center div[data-v-e972c419]:nth-child(1) b {
  margin-left: 6px
}

body.lang-en .center div[data-v-e972c419]:nth-child(2) b {
  margin-left: 0
}

body.lang-en .top .title-box>span[data-v-e972c419] {
  letter-spacing: 0px
}

body.lang-en .center-single-success span[data-v-e972c419] {
  font-size: 14px
}

body.lang-en .center-single-success span[data-v-e972c419] b {
  font-size: 15px
}

body.lang-en .center-single-success span[data-v-e972c419] i {
  font-size: 14px
}

.close[data-v-e972c419] {
  position: absolute;
  cursor: pointer;
  top: -34px;
  right: -34px
}

.top[data-v-e972c419] {
  position: relative;
  height: 147px;
  display: flex;
  align-items: center;
  padding-left: 30px;
  border-radius: 16px 16px 0 0;
  overflow: hidden
}

.top .title-box[data-v-e972c419] {
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.top .title-box>span[data-v-e972c419] {
  position: relative;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  width: fit-content
}

.top .title-box>span span[data-v-e972c419] {
  z-index: 2;
  position: relative;
  line-height: 25px
}

.top .title-box>span span[data-v-e972c419] i {
  font-style: normal;
  font-size: 20px;
  vertical-align: middle;
  margin-right: 6px
}

.top .title-box>span .big-font[data-v-e972c419] {
  font-size: 22px;
  line-height: 31px
}

.top .title-box>span svg[data-v-e972c419] {
  position: absolute;
  right: 6px;
  bottom: -6px;
  z-index: 1
}

.top img[data-v-e972c419] {
  width: 390px;
  height: 147px;
  position: absolute;
  top: 0;
  right: 0
}

.center-single[data-v-e972c419] {
  border-radius: 8px;
  background: #00000059;
  height: 165px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px
}

.center-single span[data-v-e972c419] {
  line-height: 24px;
  font-size: 14px
}

.center-single span[data-v-e972c419] i {
  font-style: normal;
  font-size: 16px;
  vertical-align: middle
}

.center-single span[data-v-e972c419] i:nth-child(1) {
  margin-right: 4px
}

.center-single span[data-v-e972c419] i:nth-child(2) {
  margin-left: 4px
}

.center-single span[data-v-e972c419] b {
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-theme-2);
  margin-right: 6px
}

.center-single span[data-v-e972c419] u {
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  background: var(--color-gradient-standard);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 8px
}

.center-single-success span[data-v-e972c419] {
  font-size: 16px
}

.center-single-success span[data-v-e972c419] b {
  font-size: 20px;
  margin-right: 0
}

.center-single-success span[data-v-e972c419]:nth-child(1) {
  margin-left: -8px
}

.center[data-v-e972c419] {
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden
}

.center div[data-v-e972c419] {
  background: #00000059;
  padding: 16px;
  text-align: center
}

.center div[data-v-e972c419]:nth-child(1) b {
  margin-left: 17px
}

.center div[data-v-e972c419]:nth-child(2) b {
  margin-left: -45px
}

.center div[data-v-e972c419] i {
  font-style: normal;
  font-size: 16px;
  vertical-align: middle
}

.center div[data-v-e972c419] i:nth-child(1) {
  margin-right: 4px
}

.center div[data-v-e972c419] b {
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-theme-2);
  margin-right: 6px
}

.notice-box[data-v-2d08a6ee] {
  border-radius: 12px
}

.notice-box .notice-header[data-v-2d08a6ee] {
  height: 120px
}

.notice-box .notice-header .notice-header-image[data-v-2d08a6ee] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left
}

.notice-box .notice-content-box[data-v-2d08a6ee] {
  padding: 24px 16px
}

.notice-box .notice-content-box .notice-title[data-v-2d08a6ee] {
  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-2d08a6ee] :first-child {
  margin-bottom: 8px
}

.notice-box .notice-content-box .notice-content p[data-v-2d08a6ee] {
  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-2d08a6ee]: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-2d08a6ee]:before {
  display: none
}

.notice-box .notice-content-box .notice-motivate-content[data-v-2d08a6ee] {
  display: flex;
  flex-direction: column;
  align-items: center
}

.notice-box .notice-content-box .notice-motivate-content[data-v-2d08a6ee] b {
  color: var(--color-theme-2)
}

.notice-box .notice-content-box .notice-motivate-content .notice-title[data-v-2d08a6ee] {
  margin-bottom: 4px;
  color: var(--color-text-1);
  text-align: center;
  width: 100%
}

.notice-box .notice-content-box .notice-motivate-content .sub-title[data-v-2d08a6ee] {
  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-2d08a6ee] b {
  font-size: 18px
}

.notice-box .notice-content-box .notice-motivate-content h4[data-v-2d08a6ee] {
  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-2d08a6ee] b {
  color: var(--color-text-2)
}

.notice-box .notice-content-box .notice-btn-box[data-v-2d08a6ee] {
  margin-top: 24px;
  display: flex;
  justify-content: end;
  align-items: center
}

.notice-box .notice-content-box .notice-btn-box .notice-view-btn[data-v-2d08a6ee] {
  margin-right: 8px
}

.notice-box .notice-content-box .notice-btn-box .notice-create-btn span[data-v-2d08a6ee] {
  font-weight: 600;
  line-height: 22px
}

.notice-box .notice-content-box .notice-btn-box .notice-create-other-btn[data-v-2d08a6ee] {
  background: var(--color-theme-2)
}

.title[data-v-644966c0] {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  gap: 8px
}

.content[data-v-644966c0] {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px
}

.content .btns[data-v-644966c0] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
  align-items: center
}

.content .btns .btn-icon[data-v-644966c0] {
  margin-right: 10px
}

.content .btns .line[data-v-644966c0] {
  height: 24px;
  width: 100%;
  text-align: center;
  position: relative;
  width: 320px;
  color: var(--color-text-2)
}

.content .btns .line[data-v-644966c0]:after {
  content: "";
  width: 137px;
  height: 1px;
  background: #343638;
  position: absolute;
  top: 12px;
  left: 0
}

.content .btns .line[data-v-644966c0]:before {
  content: "";
  width: 137px;
  height: 1px;
  background: #343638;
  position: absolute;
  top: 12px;
  right: 0
}

.content .prompt[data-v-644966c0] {
  font-size: 12px;
  line-height: 20px;
  color: var(--color-text-2)
}

h1[data-v-6b5a2b39] {
  margin-top: -8px;
  font-size: 22px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: .02em
}

.notice[data-v-6b5a2b39] {
  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-6b5a2b39] {
  margin-top: 24px;
  margin-left: -12px
}

table h4[data-v-6b5a2b39] {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  margin-bottom: 8px
}

table h4 sup[data-v-6b5a2b39] {
  color: red;
  margin-left: 4px;
  vertical-align: middle
}

table h4 span[data-v-6b5a2b39] {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  color: var(--color-text-2)
}

table ol[data-v-6b5a2b39] {
  margin: 8px 0;
  padding: 0;
  list-style: none
}

table ol li[data-v-6b5a2b39] {
  display: inline-block;
  margin-right: 18px;
  line-height: 24px;
  color: var(--color-text-1);
  cursor: pointer
}

table ol li[data-v-6b5a2b39]:hover {
  color: var(--theme-color-primary)
}

table ol li svg[data-v-6b5a2b39] {
  margin-right: 8px;
  vertical-align: middle
}

table ol li span[data-v-6b5a2b39] {
  vertical-align: middle
}

table textarea[data-v-6b5a2b39] {
  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-6b5a2b39]::placeholder {
  color: var(--color-text-3)
}

.btns[data-v-6b5a2b39] {
  margin-top: 24px;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  gap: 12px
}

p.reply-time[data-v-6b5a2b39] {
  margin-top: 8px
}

.dialog-bg .description[data-v-7e62678d] {
  margin-top: -8px;
  color: var(--color-text-2)
}

.dialog-bg .main[data-v-7e62678d] {
  margin-top: 24px;
  display: grid;
  gap: 16px
}

.dialog-bg .main .card[data-v-7e62678d] {
  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-7e62678d]:hover {
  border: 1px solid var(--color-border-hover);
  background-color: var(--color-other-1)
}

.dialog-bg .main .card .content[data-v-7e62678d] {
  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-7e62678d] {
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
  white-space: nowrap
}

.dialog-bg .main .card .content .desc[data-v-7e62678d] {
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text-2)
}

.dialog-bg .main .card .active .title[data-v-7e62678d],
.dialog-bg .main .card .active .desc[data-v-7e62678d] {
  color: var(--color-theme-2)
}

.dialog-bg .main .un-active[data-v-7e62678d] {
  border: 1px solid var(--color-border-container)
}

.dialog-bg .main .active[data-v-7e62678d] {
  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-7e62678d] {
  margin-top: 16px
}

.dialog-bg .footer[data-v-7e62678d] {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.dialog-bg .footer .step[data-v-7e62678d] {
  font-size: 18px;
  line-height: 26px
}

.dialog-bg .footer .total[data-v-7e62678d] {
  color: var(--color-text-2)
}

.dialog-bg .footer .actions[data-v-7e62678d] {
  display: flex;
  gap: 12px
}

.dialog-bg .footer .actions .button[data-v-7e62678d] {
  width: 96px;
  height: 38px
}

body.mobile .right[data-v-1c73471f] {
  width: 100%
}

body.lang-en .member-content[data-v-1c73471f] {
  height: 644px
}

.member-content[data-v-1c73471f] {
  display: flex;
  height: 600px;
  overflow: hidden;
  border-radius: 12px;
  position: relative
}

.member-content img[data-v-1c73471f] {
  width: 224px;
  height: 66px;
  object-fit: contain;
  position: absolute;
  top: 90px;
  left: 46px
}

.member-content .right[data-v-1c73471f] {
  width: calc(100% - 320px);
  height: 100%;
  padding: 24px;
  position: relative;
  display: flex;
  flex-direction: column
}

.member-content .right .close[data-v-1c73471f] {
  position: absolute;
  top: 20px;
  right: 24px;
  cursor: pointer;
  color: var(--color-text-1)
}

.member-content .right .title[data-v-1c73471f] {
  color: var(--color-text-1);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px
}

.member-content .right .subTitle[data-v-1c73471f] {
  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-1c73471f] b {
  color: var(--color-theme-2);
  font-style: normal;
  margin: 0 4px
}

.member-content .right .content[data-v-1c73471f] {
  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-1c73471f] {
  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-1c73471f] {
  color: var(--color-text-1)
}

.member-content .right .content .discount-detail-first .unit[data-v-1c73471f] {
  font-size: 14px;
  font-weight: 520;
  margin: 0 2px 0 8px
}

.member-content .right .content .discount-detail-first .price[data-v-1c73471f] {
  font-size: 24px;
  font-weight: 520;
  margin-right: 4px
}

.member-content .right .content .discount-detail-first .discount-tag[data-v-1c73471f] {
  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-1c73471f] i {
  margin: 0 4px;
  color: var(--color-theme-2)
}

.member-content .right .content .discount-detail-second[data-v-1c73471f] {
  color: var(--color-text-2);
  font-size: 12px;
  line-height: 20px;
  margin-top: 3px
}

.member-content .right .content .discount-detail-second[data-v-1c73471f] b,
.member-content .right .content .discount-detail-second[data-v-1c73471f] i {
  font-style: normal
}

.member-content .right .content .line[data-v-1c73471f] {
  width: 100%;
  height: 1px;
  background: var(--color-border-container);
  margin: 16px 0
}

.member-content .right .content .benefits-points[data-v-1c73471f] {
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text-1)
}

.member-content .right .content .benefits-points[data-v-1c73471f] i {
  font-size: 20px;
  font-weight: 520;
  font-style: normal;
  margin: 0 2px
}

.member-content .right .content .benefits-results[data-v-1c73471f] {
  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-1c73471f] {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.member-content .right .content .benefits-list .item[data-v-1c73471f] {
  gap: 6px;
  color: var(--color-text-3);
  font-size: 12px;
  line-height: 20px
}

.member-content .right .bottom[data-v-1c73471f] {
  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-e3d5fc15] {
  font-size: 22px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: .02em
}

.content[data-v-e3d5fc15] {
  padding: 24px 0
}

.content p[data-v-e3d5fc15] {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-align: center
}

.content p a[data-v-e3d5fc15] {
  color: #82fac2;
  text-decoration: none
}

.experience-package-detail-box[data-v-2310cad8]::-webkit-scrollbar {
  display: none
}

.experience-package-box .experience-package-next-receive[data-v-2310cad8] {
  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-2310cad8] {
  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-2310cad8] {
  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-2310cad8] {
  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-2310cad8] {
  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-2310cad8] {
  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-2310cad8] {
  color: var(--color-text-4)
}

.experience-package-box .experience-package-detail-box .experience-package-detail-item.active .item-des .item-title[data-v-2310cad8] {
  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-2310cad8] {
  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-2310cad8] {
  color: var(--color-theme-2)
}

.experience-package-box .experience-package-detail-box .experience-package-detail-item.active .item-des .item-time[data-v-2310cad8] {
  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-2310cad8] {
  color: var(--color-text-2)
}

body.mobile .header>div[data-v-44bb5d38]:first-child {
  transform: scale(.7)
}

body.mobile .content[data-v-44bb5d38] {
  padding: 12px 16px 16px !important
}

body.mobile .content .batch-header[data-v-44bb5d38] {
  width: 100%
}

body.mobile .content .batch-header img[data-v-44bb5d38] {
  height: 96px !important;
  width: 96px
}

body.mobile .content .batch-header .results[data-v-44bb5d38] {
  width: 100%;
  overflow-x: auto;
  margin-top: 12px;
  justify-content: flex-start
}

body.mobile .content .batch-header .results-item[data-v-44bb5d38] {
  flex-shrink: 0;
  width: 154px;
  height: 96px;
  padding: 12px
}

body.mobile .content .close[data-v-44bb5d38] {
  top: -43px;
  right: -10px;
  width: 32px;
  height: 32px
}

body.mobile .spirit span[data-v-44bb5d38] {
  margin: 10px 4px 0 !important;
  font-size: 20px !important;
  line-height: 26px !important
}

body.mobile .spirit img[data-v-44bb5d38] {
  height: 40px
}

body.mobile .deadline[data-v-44bb5d38] {
  font-size: 14px !important
}

body.mobile .main[data-v-44bb5d38] {
  width: 100% !important;
  padding: 0 !important
}

body.mobile .main .line[data-v-44bb5d38] {
  width: 60px !important
}

body.mobile .main .title[data-v-44bb5d38] {
  font-size: 14px !important
}

body.mobile .main .point-content[data-v-44bb5d38] {
  gap: 8px !important;
  justify-content: space-around !important;
  overflow-x: auto;
  width: 100%
}

body.mobile .main .point-content .item[data-v-44bb5d38] {
  flex-shrink: 0;
  width: 112px !important;
  min-height: 63px !important
}

body.mobile .main .membership-content[data-v-44bb5d38] {
  overflow-x: auto;
  width: 100%
}

body.mobile .main .membership-content .item[data-v-44bb5d38] {
  flex-shrink: 0;
  width: 178px !important;
  flex-shrink: unset !important;
  flex: none !important
}

body.mobile .main .membership-content .item video[data-v-44bb5d38] {
  height: 78px !important
}

body.mobile .main .membership-content .item .bottom[data-v-44bb5d38] {
  padding: 10px !important
}

body.mobile .main .membership-content .item .bottom .title[data-v-44bb5d38] {
  font-size: 12px !important
}

.content[data-v-44bb5d38] {
  padding: 32px;
  gap: 24px;
  display: flex;
  flex-direction: column;
  align-items: center
}

.content .close[data-v-44bb5d38] {
  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-44bb5d38] {
  text-align: center
}

.content .batch-header .title[data-v-44bb5d38] {
  width: 100%;
  display: flex;
  justify-content: center
}

.content .batch-header .title div[data-v-44bb5d38] {
  text-align: center
}

.content .results[data-v-44bb5d38] {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 24px
}

.content .results-item[data-v-44bb5d38] {
  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-44bb5d38] {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 120px;
  width: 120px
}

.content .header[data-v-44bb5d38] {
  width: 100%;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px
}

.content .header div[data-v-44bb5d38]:first-child {
  gap: 8px;
  height: 48px
}

.content .header div:first-child div[data-v-44bb5d38] {
  height: 48px
}

.content .header div:first-child .point[data-v-44bb5d38] {
  font-size: 32px;
  font-weight: 520;
  color: var(--color-text-1);
  line-height: 48px
}

.content .header .deadline[data-v-44bb5d38] {
  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-44bb5d38] {
  color: var(--color-text-1)
}

.content .main[data-v-44bb5d38] {
  gap: 32px;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  width: 100%
}

.content .main .box[data-v-44bb5d38] {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px
}

.content .main .box .fist-title[data-v-44bb5d38] {
  display: flex;
  align-items: center
}

.content .main .box .fist-title .line[data-v-44bb5d38] {
  width: 120px;
  height: 1px
}

.content .main .box .fist-title .line.left[data-v-44bb5d38] {
  background: linear-gradient(89.86deg, #fff0, #fff9)
}

.content .main .box .fist-title .line.right[data-v-44bb5d38] {
  background: linear-gradient(89.86deg, #fff9, #fff0)
}

.content .main .box .fist-title .title[data-v-44bb5d38] {
  color: var(--color-text-1);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  margin: 0 24px
}

.content .main .box .point-content[data-v-44bb5d38] {
  width: 100%;
  display: flex;
  gap: 48px;
  justify-content: space-between
}

.content .main .box .point-content .item[data-v-44bb5d38] {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 126px
}

.content .main .box .point-content .item img[data-v-44bb5d38] {
  width: 64px;
  height: 64px;
  display: block;
  margin-bottom: 16px
}

.content .main .box .point-content .item .title[data-v-44bb5d38] {
  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-44bb5d38] {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-2);
  text-align: center
}

.content .main .box .membership-content[data-v-44bb5d38] {
  display: flex;
  gap: 16px;
  width: 100%;
  justify-content: space-between
}

.content .main .box .membership-content .item[data-v-44bb5d38] {
  flex: 1;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden
}

.content .main .box .membership-content .item video[data-v-44bb5d38] {
  width: 100%;
  height: 134px;
  display: block;
  object-fit: cover
}

.content .main .box .membership-content .item .bottom[data-v-44bb5d38] {
  padding: 16px;
  height: 100px;
  background-color: var(--color-bg-secondary)
}

.content .main .box .membership-content .item .bottom .title[data-v-44bb5d38] {
  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-44bb5d38] {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-2)
}

.content .btns[data-v-44bb5d38] {
  text-align: center
}

body.lang-en .sgp-font[data-v-d207386d] {
  font-family: PP Editorial New Italic
}

body.lang-en.mobile .use .notice[data-v-d207386d] {
  font-size: 9px
}

body.mobile .close[data-v-d207386d] {
  width: 32px;
  height: 32px;
  top: -44px;
  right: -10px
}

body.mobile .gift[data-v-d207386d] {
  height: 200px
}

body.mobile .gift .title[data-v-d207386d] {
  top: 12px;
  font-size: 20px;
  left: 50%;
  transform: translate(-50%)
}

body.mobile .gift .card-text[data-v-d207386d] {
  font-size: 18px;
  bottom: 110px;
  left: 52px
}

body.mobile .gift .operation[data-v-d207386d] {
  bottom: 8px;
  gap: 8px;
  width: calc(100% - 32px);
  justify-content: center;
  left: 16px;
  margin-left: 0
}

body.mobile .gift .operation .copy[data-v-d207386d] {
  overflow: hidden
}

body.mobile .gift .operation .copy .code[data-v-d207386d] {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

body.mobile .gift .operation .generic-button[data-v-d207386d] {
  height: 28px;
  padding: 0 12px
}

body.mobile .gift .operation .generic-button[data-v-d207386d] .inner {
  font-size: 12px !important;
  font-weight: 500 !important
}

body.mobile .gifts .content[data-v-d207386d] {
  max-height: calc(80vh - 300px)
}

body.mobile .use .bg[data-v-d207386d] {
  height: fit-content
}

body.mobile .use .card-name[data-v-d207386d] {
  top: 28px;
  font-size: 20px;
  font-weight: 600
}

body.mobile .use .input-box[data-v-d207386d] {
  top: 90px
}

body.mobile .use .btns[data-v-d207386d] {
  bottom: 14px
}

body.mobile .use .notice[data-v-d207386d] {
  top: 132px
}

.bg img[data-v-d207386d] {
  width: 100%;
  display: block
}

.notice[data-v-d207386d] {
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  color: var(--color-text-1)
}

.notice a[data-v-d207386d] {
  color: var(--color-theme-2);
  text-decoration: none
}

.close[data-v-d207386d] {
  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-d207386d] {
  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-d207386d] {
  width: 100%;
  max-height: calc(100vh - 300px)
}

.gifts .content .item[data-v-d207386d] {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 16px
}

.gifts .content .item-top[data-v-d207386d] {
  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-d207386d] {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80px;
  height: 80px
}

.gifts .content .item-content[data-v-d207386d] {
  padding: 16px;
  background: var(--color-other-1);
  display: flex;
  flex-direction: column;
  gap: 4px
}

.gifts .content .item-content__item[data-v-d207386d] {
  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-d207386d] {
  flex: 1;
  border-bottom: 1px var(--color-border-line) dashed;
  height: 0
}

.gifts .btns[data-v-d207386d] {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 24px
}

.gift[data-v-d207386d] {
  position: relative;
  height: 320px
}

.gift .title[data-v-d207386d] {
  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-d207386d] {
  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-d207386d] {
  position: absolute;
  bottom: 40px;
  width: calc(100% - 84px);
  margin-left: 42px;
  gap: 16px;
  display: flex;
  justify-content: space-between
}

.gift .operation .copy[data-v-d207386d] {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
  border-radius: 24px;
  background: var(--color-bg-dialog);
  border: 1px solid var(--color-border-component)
}

.gift .operation .copy .code[data-v-d207386d] {
  -webkit-user-select: text;
  user-select: text;
  padding-left: 24px;
  color: var(--color-text-1)
}

.use[data-v-d207386d] {
  position: relative
}

.use .bg[data-v-d207386d] {
  height: 320px
}

.use .card-name[data-v-d207386d] {
  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-d207386d] {
  width: 100%;
  padding: 0 56px;
  position: absolute;
  top: 154px
}

.use .notice[data-v-d207386d] {
  height: 24px;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 210px
}

.use .btns[data-v-d207386d] {
  position: absolute;
  bottom: 33px;
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%
}

.use .btns[data-v-d207386d] .generic-button {
  border-radius: 18px
}

.kling-dialog .unsubscribe-reason-container[data-v-813eb15c] {
  cursor: pointer
}

.kling-dialog .unsubscribe-reason-container .unsubscribe-reason-item[data-v-813eb15c] {
  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-813eb15c] {
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text-1)
}

.kling-dialog .unsubscribe-reason-container .unsubscribe-reason-active[data-v-813eb15c],
.kling-dialog .unsubscribe-reason-container .unsubscribe-reason-item[data-v-813eb15c]:hover {
  background-color: var(--color-other-1)
}

.kling-dialog .unsubscribe-reason-container .unsubscribe-reason-item[data-v-813eb15c]:last-child {
  border-bottom: none
}

.kling-dialog .unsubscribe-reason-container .unsubscribe-remarks[data-v-813eb15c] {
  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-813eb15c] {
  flex-shrink: 0;
  margin: 4px 4px 0 0
}

.kling-dialog .unsubscribe-reason-container .unsubscribe-remarks .remarks-content[data-v-813eb15c] {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px
}

.kling-dialog .unsubscribe-reason-container .unsubscribe-btn[data-v-813eb15c] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 24px
}

.kling-dialog .unsubscribe-reason-container .unsubscribe-btn[data-v-813eb15c]>:first-child {
  margin-right: 12px
}

body.lang-en.mobile .content .item[data-v-a095fce5] {
  grid-template-columns: 120px 1fr
}

body.mobile .note[data-v-a095fce5],
body.mobile .tip[data-v-a095fce5] {
  font-size: 12px
}

body.mobile .content .item[data-v-a095fce5] {
  font-size: 12px;
  grid-template-columns: 56px 1fr;
  height: fit-content
}

body.mobile .content .item .radio-group[data-v-a095fce5] {
  gap: 0px
}

.tip[data-v-a095fce5] {
  display: flex;
  gap: 4px;
  font-size: 14px;
  margin-bottom: 24px;
  color: var(--color-text-1)
}

.tip svg[data-v-a095fce5] {
  margin-top: 3px;
  flex-shrink: 0
}

.note[data-v-a095fce5] {
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-text-1);
  margin-bottom: 16px
}

.content[data-v-a095fce5] {
  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-a095fce5] {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  height: 32px
}

.content .item .text[data-v-a095fce5] {
  max-width: 200px
}

.content .item .right[data-v-a095fce5] {
  display: flex;
  align-items: center;
  color: var(--color-text-1)
}

.content .item .right svg[data-v-a095fce5] {
  margin-left: 4px;
  cursor: pointer
}

.content .item.email-item[data-v-a095fce5] {
  grid-template-columns: 152px 1fr
}

.content .radio-group[data-v-a095fce5] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 2px;
  gap: 24px;
  line-height: 24px
}

.content .radio-group .radio-item[data-v-a095fce5] {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--color-text-1)
}

.content .radio-group .radio-item .icon[data-v-a095fce5] {
  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-a095fce5] {
  border: 5px solid var(--color-theme-2);
  background: var(--color-text-1)
}

.btns[data-v-a095fce5] {
  text-align: right;
  margin: 16px 0
}

body.mobile ol[data-v-db3cbece] {
  padding: 4px 8px
}

body.mobile ol .item[data-v-db3cbece],
body.mobile .order-name[data-v-db3cbece],
body.mobile .invoice-status[data-v-db3cbece] {
  font-size: 12px
}

ol[data-v-db3cbece] {
  margin: -12px 0 0;
  list-style: none;
  padding: 0 10px 0 0
}

ol li[data-v-db3cbece] {
  padding: 16px 0;
  border-top: solid 1px var(--color-border-container)
}

ol li[data-v-db3cbece]:first-child {
  border-top: none
}

ol li h4[data-v-db3cbece] {
  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-db3cbece] {
  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-db3cbece] {
  cursor: pointer
}

ol li h4 .fail-tip[data-v-db3cbece] {
  color: var(--color-fill-error)
}

ol li .item[data-v-db3cbece] {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-text-2)
}

ol li .item span[data-v-db3cbece] {
  color: #fff;
  float: right
}

ol li .item span .icon[data-v-db3cbece] {
  color: var(--color-theme-2);
  margin-left: 4px;
  cursor: pointer
}

ol li .order-name[data-v-db3cbece] {
  display: inline-flex;
  align-items: center
}

ol li .membership-point[data-v-db3cbece] {
  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-4b0fd9d6] .tabs-box .tabs.size-small {
  gap: 8px !important
}

body.mobile .subscription[data-v-4b0fd9d6] {
  min-height: 124px !important
}

body.mobile .scrollable[data-v-4b0fd9d6] {
  max-height: 50vh
}

body.mobile .subscription-plans-box[data-v-4b0fd9d6] {
  max-height: 60vh
}

body.mobile .scrollable-box[data-v-4b0fd9d6] {
  padding: 16px 3px 16px 8px
}

body.mobile .subscription h4[data-v-4b0fd9d6] {
  font-size: 12px
}

body.mobile .subscription .cancel-btn[data-v-4b0fd9d6] .generic-button {
  height: 28px !important;
  padding: 0 10px !important
}

body.mobile .subscription .cancel-btn[data-v-4b0fd9d6] .generic-button .inner {
  font-size: 12px !important
}

body.mobile .subscription ol li[data-v-4b0fd9d6] {
  font-size: 12px
}

.section[data-v-4b0fd9d6] {
  margin-top: 24px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-text-1)
}

.section .desc[data-v-4b0fd9d6] {
  font-size: 12px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-text-2)
}

.section .desc a[data-v-4b0fd9d6] {
  text-decoration: underline
}

.subscription[data-v-4b0fd9d6] {
  padding: 16px;
  border-radius: 8px;
  background: var(--color-fill-light)
}

.subscription .cancel-btn[data-v-4b0fd9d6] {
  float: right
}

.subscription h4[data-v-4b0fd9d6] {
  font-size: 16px;
  font-weight: 500;
  line-height: 36px;
  margin: 0
}

.subscription ol[data-v-4b0fd9d6] {
  margin-top: 8px;
  padding: 0;
  list-style: none
}

.subscription ol li[data-v-4b0fd9d6] {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px
}

.subscription ol li label[data-v-4b0fd9d6] {
  color: var(--color-text-2)
}

.subscription ol li div.v[data-v-4b0fd9d6] {
  color: var(--color-text-1);
  float: right
}

.subscription ol li+li[data-v-4b0fd9d6] {
  margin-top: 4px
}

.tabs[data-v-4b0fd9d6] {
  position: relative;
  height: 36px;
  margin-bottom: 24px
}

.membership-none[data-v-4b0fd9d6] {
  width: 100%;
  min-height: 320px;
  margin-top: 24px;
  color: var(--color-text-1);
  gap: 12px
}

.scrollable-box[data-v-4b0fd9d6] {
  overflow-y: hidden;
  padding: 16px 6px 16px 20px;
  background: var(--color-fill-light);
  border-radius: 8px
}

.scrollable-box .scrollable[data-v-4b0fd9d6] {
  max-height: 600px
}

.mb-title[data-v-4b0fd9d6] {
  font-size: 16px;
  font-weight: 500;
  line-height: 26px
}

.mb-desc[data-v-4b0fd9d6] {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-2)
}

.mb-desc i[data-v-4b0fd9d6] {
  font-style: normal
}

.gift-cards-btns[data-v-4b0fd9d6] {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px
}

.select-status-box[data-v-4b0fd9d6] {
  height: 24px;
  margin-bottom: 16px
}

body.mobile .bill[data-v-74aae5c9] {
  height: calc(75vh - 380px)
}

body.mobile .summary[data-v-74aae5c9] {
  padding: 16px;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  border-radius: 8px
}

body.mobile .summary .item[data-v-74aae5c9] {
  flex-shrink: 0
}

body.mobile .summary .item h4[data-v-74aae5c9] {
  font-size: 12px
}

body.mobile .summary .item p[data-v-74aae5c9] {
  font-size: 12px;
  line-height: 12px
}

body.mobile .summary .symbol[data-v-74aae5c9] {
  margin-top: 0
}

body.mobile .bottom-area[data-v-74aae5c9] {
  flex-direction: column;
  gap: 12px;
  margin-top: 12px
}

body.mobile .bottom-area[data-v-74aae5c9] .paybar {
  margin-top: 12px
}

.title[data-v-74aae5c9] {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  gap: 4px
}

.title .icon[data-v-74aae5c9] {
  cursor: pointer
}

.summary[data-v-74aae5c9] {
  background: var(--color-fill-light);
  border-radius: 16px;
  padding: 16px 24px
}

.summary .item[data-v-74aae5c9] {
  display: inline-block
}

.summary .item h4[data-v-74aae5c9] {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-text-2)
}

.summary .item p[data-v-74aae5c9] {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  color: var(--color-text-1);
  margin-left: -2px
}

.summary .symbol[data-v-74aae5c9] {
  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-74aae5c9] {
  margin-top: 24px;
  position: relative;
  margin-bottom: 16px;
  height: 36px
}

.bottom-area[data-v-74aae5c9] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26px
}

.bottom-area p.bill-desc[data-v-74aae5c9] {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-text-2)
}

.bottom-area p.bill-desc svg[data-v-74aae5c9] {
  vertical-align: middle;
  margin-bottom: 2px
}

.bottom-area p.bill-desc a[data-v-74aae5c9] {
  text-decoration: none;
  color: var(--color-theme-2)
}

.bill[data-v-74aae5c9] {
  margin-top: 16px;
  height: calc(75vh - 320px);
  border-radius: 8px;
  overflow-y: scroll;
  background: var(--color-fill-light)
}

.bill[data-v-74aae5c9]::-webkit-scrollbar {
  display: none
}

.bill ol[data-v-74aae5c9] {
  margin: 0;
  padding: 12px 20px;
  list-style: none
}

.bill ol li[data-v-74aae5c9] {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-container)
}

.bill ol li[data-v-74aae5c9]:last-child {
  border-bottom: none
}

.bill ol li i[data-v-74aae5c9] {
  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-74aae5c9] {
  color: var(--color-theme-2)
}

.bill ol li i.negative[data-v-74aae5c9] {
  color: #fb7171
}

.bill ol li h4[data-v-74aae5c9] {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  color: var(--color-text-1);
  margin: 0
}

.bill ol li p[data-v-74aae5c9] {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  color: #999bac
}

.empty[data-v-74aae5c9] {
  height: 100%;
  width: 100%;
  gap: 12px;
  color: var(--color-text-1)
}

h1[data-v-2a2cb08e] {
  font-size: 22px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: .02em
}

.content[data-v-2a2cb08e] {
  margin-top: 24px;
  padding: 24px 0
}

.content p[data-v-2a2cb08e] {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  white-space: pre-wrap
}

.content p a[data-v-2a2cb08e] {
  color: var(--color-theme-2);
  text-decoration: none
}

.content .qrs[data-v-2a2cb08e] {
  width: 100%;
  margin-top: 32px;
  text-align: center
}

.content .qrs .qr[data-v-2a2cb08e] {
  display: inline-block;
  margin-right: 48px;
  margin-bottom: 24px
}

.content .qrs .qr[data-v-2a2cb08e]:last-child {
  margin-right: 0
}

.content .qrs .qr .img[data-v-2a2cb08e] {
  width: 128px;
  height: 128px;
  padding: 4px;
  border-radius: 12px;
  background-color: #fff
}

.content .qrs .qr .img img[data-v-2a2cb08e] {
  width: 100%
}

.content .qrs .qr p[data-v-2a2cb08e] {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: center
}

body.mobile .dialog-membership-box[data-v-78c114fb] {
  margin: 0;
  width: 100%;
  max-height: 80vh
}

body.mobile .dialog-membership-box[data-v-78c114fb] .non-subs {
  width: 147px !important
}

body.mobile .dialog-membership-box[data-v-78c114fb] .tab {
  padding: 0 4px !important
}

body.mobile .dialog-membership-box[data-v-78c114fb] .membership-box {
  max-height: 70vh
}

body.mobile .subtitle[data-v-78c114fb] svg {
  width: 90%
}

.dialog-membership-box[data-v-78c114fb] {
  margin-top: 16px;
  width: 1168px
}

.dialog-membership-box[data-v-78c114fb] .membership-box__top {
  background: var(--color-fill-light)
}

.subtitle[data-v-78c114fb] {
  height: 34px;
  text-align: left;
  margin-top: 8px;
  margin-bottom: 24px
}

.bottom-policy[data-v-78c114fb] {
  margin-top: 16px;
  font-size: 12px;
  width: 100%;
  text-align: center
}

.bottom-policy a[data-v-78c114fb] {
  color: var(--color-theme-2) !important;
  text-decoration: none;
  margin: 0 !important
}

.title[data-v-6abd5411] {
  font-size: 22px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: .02em
}

.note[data-v-6abd5411] {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #c5c7d5
}

.sheet[data-v-6abd5411] {
  width: 100%;
  margin-top: 24px
}

.sheet td[data-v-6abd5411] {
  padding: 8px 0
}

.sheet td sup[data-v-6abd5411] {
  color: red;
  margin-left: 4px;
  vertical-align: middle
}

.btns[data-v-6abd5411] {
  text-align: right;
  margin-top: 24px;
  margin-bottom: 16px
}

h1[data-v-01630f3d] {
  font-size: 22px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: .02em;
  color: #fff;
  margin: -16px 0 24px
}

div.content[data-v-01630f3d] {
  color: var(--color-text-1)
}

div.content .qr-container[data-v-01630f3d] {
  float: left
}

div.content .qr-container .refresh[data-v-01630f3d] {
  width: 120px;
  height: 120px;
  position: absolute;
  z-index: 1
}

div.content .qr-container .qr[data-v-01630f3d] {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden
}

div.content .qr-container .qr img[data-v-01630f3d] {
  width: 100%
}

div.content .qr-container .qr.expired[data-v-01630f3d] {
  opacity: .3
}

div.content .qr-container .notice[data-v-01630f3d] {
  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-01630f3d] {
  padding-left: 136px
}

div.content .details .title[data-v-01630f3d] {
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  letter-spacing: .02em
}

div.content .details .title img[data-v-01630f3d] {
  vertical-align: middle;
  margin-bottom: 4px
}

div.content .details .title span.dollar[data-v-01630f3d] {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  margin-left: 8px;
  margin-right: 4px
}

div.content .details .title span.v[data-v-01630f3d] {
  font-size: 28px;
  font-weight: 520;
  line-height: 36px
}

div.content .details ol[data-v-01630f3d] {
  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-01630f3d] {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: var(--color-text-3)
}

div.content .details p.desc a[data-v-01630f3d] {
  text-decoration: none;
  color: var(--color-theme-2)
}

.content a[data-v-62229832] {
  color: var(--color-theme-2)
}

.content[data-v-67d0b68a] {
  text-align: center
}

.content .title[data-v-67d0b68a] {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px
}

.content .btn[data-v-67d0b68a] {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #999bac
}

body.mobile .title[data-v-a669979f] {
  white-space: pre-line;
  font-size: 16px
}

.dialog-box[data-v-a669979f] {
  padding: 32px;
  color: var(--color-text-1)
}

.dialog-box .header[data-v-a669979f] {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px
}

.dialog-box .header span[data-v-a669979f] {
  font-size: 26px;
  font-weight: 900;
  line-height: 40px
}

.dialog-box .content[data-v-a669979f] {
  max-height: 75vh;
  color: var(--color-text-1);
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%
}

.dialog-box .content .video[data-v-a669979f] {
  flex-shrink: 0
}

.dialog-box .content .text-block[data-v-a669979f] {
  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-a669979f] {
  margin-top: 16px;
  padding-left: 20px
}

.dialog-box .content .text-block ul li[data-v-a669979f] {
  margin-top: 8px;
  margin-bottom: 8px;
  color: var(--color-theme-2)
}

.dialog-box .content .text-block ul li[data-v-a669979f]::marker {
  color: var(--color-theme-2)
}

.dialog-box .btns[data-v-a669979f] {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  gap: 12px;
  justify-content: end;
  margin-top: 16px
}

body.mobile .btns[data-v-a669979f] {
  justify-content: center
}

body.mobile .btns button[data-v-a669979f] {
  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-a6b51610] {
  width: 100%;
  padding: 0 24px
}

body.mobile .right-panel .content[data-v-a6b51610] {
  width: 100%
}

body.mobile .teaser[data-v-a6b51610] {
  display: none
}

.login-container[data-v-a6b51610] {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  background: var(--color-bg-page)
}

.recent-tag[data-v-a6b51610] {
  background: var(--color-text-3);
  border-radius: 4px;
  margin-left: 8px;
  padding: 0 6px;
  line-height: 20px;
  font-size: 12px;
  color: var(--color-text-1)
}

.teaser[data-v-a6b51610] {
  width: 50%;
  height: 100%;
  aspect-ratio: 1;
  position: relative;
  flex-shrink: 0;
  flex-grow: 0
}

.teaser .video[data-v-a6b51610] {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute
}

.right-panel[data-v-a6b51610] {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

.content[data-v-a6b51610] {
  width: 456px;
  height: 520px;
  color: var(--color-text-1);
  font-size: 14px;
  display: flex;
  flex-direction: column
}

.content h1[data-v-a6b51610] {
  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-a6b51610] {
  color: var(--color-theme-2);
  text-decoration: none
}

.sign-in-button[data-v-a6b51610] {
  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-a6b51610] {
  margin-right: 10px
}

.sign-in-button .recent-way[data-v-a6b51610] {
  font-size: 12px;
  color: var(--color-text-3);
  line-height: 18px
}

.separator[data-v-a6b51610] {
  width: 100%;
  height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center
}

.separator .separator-line[data-v-a6b51610] {
  height: 1px;
  background: var(--color-border-container);
  flex-grow: 100;
  flex-shrink: 1
}

.separator .separator-text[data-v-a6b51610] {
  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-a6b51610] {
  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-a6b51610] {
  margin-top: 32px;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%
}

.central[data-v-a6b51610] {
  text-align: center
}

.notice[data-v-a6b51610] {
  color: var(--color-text-1);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  margin-top: 32px
}

.login-container[data-v-f0e387a0] .el-input__suffix {
  height: auto
}

body.mobile .teaser[data-v-f0e387a0] {
  display: none
}

body.mobile .right-panel[data-v-f0e387a0] {
  padding: 0 24px;
  width: 100%
}

body.mobile .content[data-v-f0e387a0] {
  width: 100%
}

body.mobile .content .container .input.scancode span[data-v-f0e387a0] {
  margin-left: calc(100% - 136px)
}

body.mobile .content .desc a[data-v-f0e387a0] {
  margin: 0
}

.custom-padding[data-v-f0e387a0] .el-input__wrapper {
  padding: 1px 4px 1px 11px
}

.login-container[data-v-f0e387a0] {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  background: var(--color-bg-page)
}

.recent-tag[data-v-f0e387a0] {
  background: var(--color-text-3);
  border-radius: 4px;
  margin-left: 8px;
  padding: 0 6px;
  line-height: 20px;
  font-size: 12px;
  color: var(--color-text-1)
}

.teaser[data-v-f0e387a0] {
  width: 50%;
  height: 100%;
  aspect-ratio: 1;
  position: relative;
  flex-shrink: 0;
  flex-grow: 0
}

.teaser .video[data-v-f0e387a0] {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute
}

.right-panel[data-v-f0e387a0] {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

.content[data-v-f0e387a0] {
  width: 456px;
  min-height: 426px;
  color: var(--color-text-1);
  font-size: 14px
}

.content h1[data-v-f0e387a0] {
  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-f0e387a0] {
  margin-top: 4px
}

.content .container[data-v-f0e387a0] {
  margin-top: 38px
}

.content .container .countdown[data-v-f0e387a0] {
  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-f0e387a0] {
  margin-left: 292px;
  width: 80px;
  text-align: center;
  color: #72e52888
}

.content .container .input.scancode span.btn[data-v-f0e387a0] {
  color: #72e528;
  cursor: pointer
}

.content .container .input.scancode span.btn.invalid[data-v-f0e387a0],
.content .container .input.scancode span.btn.invalid[data-v-f0e387a0]:hover {
  color: #727485
}

.content .container .input.scancode span.btn.invalid[data-v-f0e387a0]:active {
  filter: none
}

.content .container .input.scancode span.btn[data-v-f0e387a0]:hover {
  color: #fff
}

.content .container .input.scancode span.btn[data-v-f0e387a0]:active {
  filter: brightness(.9)
}

.content .container .input.scancode input[data-v-f0e387a0] {
  padding: 12px 112px 12px 12px
}

.content .desc[data-v-f0e387a0] {
  margin-top: 24px;
  margin-bottom: 32px
}

.content .desc.notice[data-v-f0e387a0] {
  color: var(--color-text-3)
}

.content .desc a[data-v-f0e387a0] {
  color: var(--color-theme-2)
}

.content .desc b[data-v-f0e387a0] {
  font-weight: 400
}

.content .scancode-container[data-v-f0e387a0] {
  margin-top: 38px
}

.content .scancode-container .demo[data-v-f0e387a0] {
  display: flex;
  flex-direction: row;
  justify-content: center
}

.content .scancode-container .qr[data-v-f0e387a0] {
  line-height: 0;
  background-color: #000;
  border-radius: 4px;
  float: left;
  overflow: hidden
}

.content .scancode-container .qr .wait-confirm[data-v-f0e387a0] {
  position: absolute;
  margin-top: -125px
}

.content .scancode-container .qr .wait-confirm .back[data-v-f0e387a0] {
  position: absolute;
  background: #000c;
  width: 125px;
  height: 125px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px)
}

.content .scancode-container .qr .wait-confirm .fore[data-v-f0e387a0] {
  position: absolute;
  font-size: 12px;
  width: 125px;
  height: 125px;
  text-align: center;
  padding-top: 64px;
  color: #fff
}

.content .scancode-container .desc[data-v-f0e387a0] {
  text-align: center;
  margin-top: 24px;
  margin-bottom: 0
}

.content.select-account[data-v-f0e387a0] {
  color: var(--color-text-1)
}

.content.select-account h2[data-v-f0e387a0] {
  text-align: center;
  font-size: 16px;
  margin-top: 16px
}

.content.select-account p.select-account-notice[data-v-f0e387a0] {
  font-size: 14px;
  line-height: 24px;
  text-align: center
}

.content.select-account .accounts[data-v-f0e387a0] {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px
}

.content.select-account .accounts .account[data-v-f0e387a0] {
  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-f0e387a0] {
  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-f0e387a0]:hover {
  border: 1px solid var(--color-border-hover)
}

.content.select-account .btn[data-v-f0e387a0] {
  margin-top: 30px;
  width: 24em;
  margin-bottom: 24px;
  margin-left: 170px
}

.app-down-container[data-v-6e872189] {
  padding: 0 16px 24px
}

.app-down-container .app-down-title[data-v-6e872189] {
  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-6e872189]:first-child {
  margin-bottom: 0
}

.app-down-container .app-down-subTitle[data-v-6e872189] {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-text-1);
  margin-bottom: 8px
}

.app-down-container .margin-more[data-v-6e872189] {
  margin-bottom: 16px
}

.app-down-container .app-down-mark[data-v-6e872189] {
  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-6e872189] {
  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-6e872189] {
  display: flex;
  flex-direction: column;
  align-items: center
}

.app-down-container .app-down-area .app-down-area-item .app-down-img[data-v-6e872189] {
  width: 128px;
  height: 128px;
  margin-bottom: 12px
}

.app-down-container .app-down-area .app-down-area-item p[data-v-6e872189] {
  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-6e872189] span {
  color: var(--color-theme-2)
}

.app-download-dialog.el-dialog {
  position: relative
}

.content-body h1[data-v-9d0755da] {
  font-size: 22px;
  font-weight: 500;
  line-height: 26px;
  color: var(--color-text-1);
  margin-top: -24px
}

.content-body p.short[data-v-9d0755da] {
  margin-top: 24px;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: var(--color-text-1);
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text
}

.content-body .time[data-v-9d0755da] {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-text-3)
}

.content-body p.long[data-v-9d0755da] {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: var(--color-text-2);
  white-space: pre-wrap;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text
}

.content-body p.long[data-v-9d0755da] a {
  color: var(--color-theme-2)
}

.content-body .btns[data-v-9d0755da] {
  margin-top: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center
}

.content-body img[data-v-9d0755da] {
  object-fit: cover;
  margin-top: 24px;
  border-radius: 12px;
  max-width: 100%
}

.content-body .scrollable[data-v-9d0755da] {
  max-height: 640px;
  overflow-y: auto
}

.content-body .scrollable[data-v-9d0755da]::-webkit-scrollbar {
  width: 4px
}

.content-body .scrollable[data-v-9d0755da]::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: transparent
}

.content-body .scrollable[data-v-9d0755da]::-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-9d0755da]::-webkit-scrollbar-thumb:hover {
  background-color: #777
}

.notification-container[data-v-be090e8e] {
  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-be090e8e] {
  position: absolute;
  right: 24px;
  cursor: pointer
}

.red-dot[data-v-be090e8e] {
  position: absolute;
  top: 6px;
  right: -8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-fill-red)
}

.tabs[data-v-be090e8e] {
  background: var(--color-bg-page);
  position: relative;
  width: fit-content
}

.tabs .tab[data-v-be090e8e] {
  height: 34px
}

.divider-line[data-v-be090e8e] {
  width: 100%;
  border-top: 1px solid var(--color-border-container);
  transform: translateY(-1.5px)
}

.official[data-v-be090e8e],
.interact[data-v-be090e8e] {
  padding-right: 9px;
  overflow-y: auto;
  height: 100%;
  width: 100%
}

.empty[data-v-be090e8e] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center
}

.empty img[data-v-be090e8e] {
  width: 80px;
  height: 80px;
  margin-top: 218px
}

.empty p[data-v-be090e8e] {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  color: var(--color-text-2)
}

ol[data-v-be090e8e] {
  width: 100%;
  list-style: none;
  padding-left: 0;
  margin: 0
}

ol .tooltip[data-v-be090e8e] {
  width: 100%;
  display: flex;
  gap: 12px
}

ol li[data-v-be090e8e] {
  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-be090e8e] {
  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-be090e8e] {
  top: 0
}

ol li .msg[data-v-be090e8e] {
  flex-grow: 1
}

ol li .msg h3[data-v-be090e8e] {
  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-be090e8e] {
  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-be090e8e] {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: var(--color-text-3)
}

ol li .avatar[data-v-be090e8e] {
  width: 40px;
  height: 40px
}

ol li .interact-msg[data-v-be090e8e] {
  width: calc(100% - 52px);
  display: flex;
  gap: 12px
}

ol li .interact-msg .interact-text[data-v-be090e8e] {
  width: calc(100% - 60px)
}

ol li .interact-msg .interact-text .interact-title[data-v-be090e8e] {
  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-be090e8e] {
  color: var(--color-text-1);
  margin-right: 4px
}

ol li .interact-msg .interact-text .msg-type[data-v-be090e8e] {
  color: var(--color-text-3)
}

ol li .interact-msg .interact-text .interact-comment[data-v-be090e8e] {
  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-be090e8e] {
  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-be090e8e] {
  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-be090e8e] {
  color: var(--color-text-3);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px
}

ol li img[data-v-be090e8e] {
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 8px;
  object-fit: cover
}

ol li[data-v-be090e8e]:last-child {
  margin-bottom: 0
}

ol li:last-child .msg[data-v-be090e8e] {
  border: none
}

ol li[data-v-be090e8e]:first-child {
  margin-top: 32px
}

ul[data-v-23afbbb8] {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px
}

ul a[data-v-23afbbb8],
ul div[data-v-23afbbb8] {
  width: 100%;
  text-decoration: none
}

ul a .menu-item[data-v-23afbbb8],
ul div .menu-item[data-v-23afbbb8] {
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 40px;
  display: flex;
  align-items: center;
  line-height: 24px;
  font-size: 14px;
  color: var(--color-text-1);
  white-space: nowrap
}

ul a .menu-item svg[data-v-23afbbb8],
ul div .menu-item svg[data-v-23afbbb8] {
  margin-right: 12px
}

ul a .menu-item .tag[data-v-23afbbb8],
ul div .menu-item .tag[data-v-23afbbb8] {
  margin-left: 4px;
  width: fit-content;
  height: 20px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--color-theme-3);
  display: flex;
  align-items: center;
  font-size: 10px;
  color: var(--color-theme-2)
}

ul a .menu-item[data-v-23afbbb8]:hover,
ul div .menu-item[data-v-23afbbb8]:hover {
  background: var(--color-other-2)
}

ul a .disabled[data-v-23afbbb8],
ul div .disabled[data-v-23afbbb8] {
  pointer-events: none;
  color: var(--color-text-3)
}

ul a .active[data-v-23afbbb8],
ul div .active[data-v-23afbbb8] {
  font-weight: 500;
  color: var(--color-theme-2);
  background: var(--color-other-2)
}

ul a .title[data-v-23afbbb8],
ul div .title[data-v-23afbbb8] {
  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-a16d5bbe] {
  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 .header-logo[data-v-a16d5bbe] {
  display: flex;
  align-items: center;
  margin-bottom: 24px
}

header .main-logo[data-v-a16d5bbe] {
  margin: 8px
}

header .content[data-v-a16d5bbe] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
  overflow: auto
}

header .content .scroll-area[data-v-a16d5bbe] {
  flex: 1;
  overflow: auto
}

header .content .invitation-box[data-v-a16d5bbe] {
  width: 100%;
  display: flex
}

header .content .invitation-box .entry[data-v-a16d5bbe] {
  background: var(--color-gradient-standard);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

header .content .invitation-box img[data-v-a16d5bbe] {
  width: 18px
}

header .content .invitation-box .tag[data-v-a16d5bbe] {
  height: 20px;
  padding: 3px 6px;
  background: var(--color-theme-3);
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  border-radius: 4px;
  margin-left: 4px;
  color: var(--color-theme-2)
}

header .content .menu-item[data-v-a16d5bbe] {
  margin-bottom: 8px;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 40px;
  display: flex;
  align-items: center;
  line-height: 24px;
  gap: 12px;
  font-size: 14px;
  text-decoration: none;
  color: var(--color-text-1)
}

header .content .menu-item[data-v-a16d5bbe]:hover {
  background: var(--color-other-2)
}

header .content .menu-item .notification[data-v-a16d5bbe] {
  position: relative;
  display: flex
}

header .content .menu-item .notification .red-dot[data-v-a16d5bbe] {
  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-a16d5bbe] {
  padding: 6px 11px;
  gap: 11px
}

header .content .login[data-v-a16d5bbe] {
  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-a16d5bbe] {
  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)
}

header .content .top-up.hot[data-v-a16d5bbe] {
  background: linear-gradient(94deg, #41ffbb1f, #11ff4c1f, #e2ff201f)
}

header .content .top-up.hot span[data-v-a16d5bbe] {
  background: linear-gradient(94deg, #41ffbb, #11ff4c, #e2ff20);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

header .content .top-up .price[data-v-a16d5bbe] {
  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-a16d5bbe] {
  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.hot[data-v-a16d5bbe] {
  border-color: transparent;
  background: linear-gradient(94deg, #41ffbb1f, #11ff4c1f, #e2ff201f)
}

header .content .membership.hot span[data-v-a16d5bbe] {
  background: linear-gradient(94deg, #41ffbb, #11ff4c, #e2ff20);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

header .content .membership.hot .divider[data-v-a16d5bbe] {
  background: #ffffff3d
}

header .content .membership span[data-v-a16d5bbe] {
  line-height: 24px;
  cursor: pointer;
  white-space: nowrap
}

header .content .membership .divider[data-v-a16d5bbe] {
  margin: auto 4px;
  min-width: 1px;
  height: 16px;
  align-self: stretch;
  background: var(--color-other-2)
}

header .content .divider[data-v-a16d5bbe] {
  margin: 8px;
  height: 1px;
  align-self: stretch;
  background: var(--color-other-2)
}

header .content .sidebar-price[data-v-a16d5bbe] {
  cursor: pointer
}

header .content .user[data-v-a16d5bbe] {
  padding: 8px 14px 8px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px
}

header .content .user .user-name[data-v-a16d5bbe] {
  flex: 1;
  color: var(--color-text-1);
  font-size: 14px;
  line-height: 24px
}

header .content .share-links[data-v-a16d5bbe] {
  margin-top: 16px;
  display: flex;
  padding: 0 12px 8px;
  justify-content: space-between
}

header .content .share-links .icon[data-v-a16d5bbe] {
  width: 28px;
  height: 28px;
  border-radius: 28px;
  background: var(--color-other-2);
  color: var(--color-text-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

header .content .links[data-v-a16d5bbe] {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  gap: 16px
}

header .content .links .item[data-v-a16d5bbe] {
  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;
  text-decoration: none
}

header .content .links .item[data-v-a16d5bbe]:hover {
  color: var(--color-text-1)
}

body.mobile .site-switcher[data-v-4ee59612] {
  padding: 0 16px;
  height: 45px;
  top: auto;
  bottom: 70px
}

body.mobile .text-left[data-v-4ee59612] {
  display: block
}

.site-switcher[data-v-4ee59612] {
  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-4ee59612] {
  display: flex;
  align-items: center;
  gap: .375rem;
  color: var(--text-color-1)
}

.site-switcher .main .text[data-v-4ee59612] {
  font-size: 12px
}

.site-switcher .main .text-left[data-v-4ee59612] {
  margin-left: 4px
}

.site-switcher .main .text-right[data-v-4ee59612] {
  margin-left: 4px;
  cursor: pointer;
  color: var(--color-fill-success)
}

.site-switcher .icon[data-v-4ee59612] {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer
}

.mobile-notice[data-v-04fd2bdf] {
  position: fixed;
  width: 100%;
  z-index: 2021;
  padding: 16px 12px;
  background-color: var(--main-background);
  line-height: 0
}

.mobile-notice .blk[data-v-04fd2bdf] {
  display: inline-block;
  vertical-align: middle
}

.mobile-notice .logo[data-v-04fd2bdf] {
  width: 38px;
  height: 38px;
  overflow: hidden;
  background-color: var(--main-background);
  pointer-events: all
}

.mobile-notice .notice[data-v-04fd2bdf] {
  display: inline-block;
  margin-left: 8px;
  background: var(--main-background) !important;
  line-height: 36px;
  font-size: 14px
}

.mobile-notice .button[data-v-04fd2bdf] {
  float: right
}

.success[data-v-c04dbe47] {
  width: 100%
}

.success .video[data-v-c04dbe47] {
  width: 100%;
  height: 120px !important
}

.success .content[data-v-c04dbe47] {
  padding: 24px 0;
  margin-top: -8px
}

.success .content .img[data-v-c04dbe47] {
  width: 90px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden
}

.success .content .text1[data-v-c04dbe47] {
  color: var(--color-text-1);
  margin: 16px 0 6px;
  font-size: 16px;
  font-weight: 600
}

.success .content .text2[data-v-c04dbe47] {
  color: var(--color-text-2)
}

.fail[data-v-c04dbe47] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--color-text-1)
}

main[data-v-95248592] {
  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-95248592] {
  min-width: unset
}

body.mobile main[data-v-95248592]::-webkit-scrollbar {
  display: none
}

body.mobile .customer-service-box[data-v-95248592] {
  width: 100vw
}

.customer-service-box[data-v-95248592] {
  top: 0;
  width: 416px;
  bottom: 0;
  position: fixed;
  right: 0;
  z-index: 999999
}

.customer-service-box iframe[data-v-95248592] {
  border: none;
  height: 100vh
}

.customer-service-box .close[data-v-95248592] {
  position: absolute;
  right: 16px;
  top: 16px
}

.customer-service-box .close svg[data-v-95248592] {
  color: var(--color-text-1);
  cursor: pointer
}

.customer-support[data-v-95248592] {
  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-95248592]:hover {
  transform: scaleX(1.1) scaleY(1.1)
}

:root {
  --color-text: #e0e0e0;
  --top-navigation-height: 64px;
  --left-navigation-width: 232px;
  --left-designer-sidebar-width: 72px;
  --main-background: #0d1116;
  --theme-color-primary: #72e528;
  --theme-color-hover: #9ffd38;
  --color-bg-selection: #557172;
  --color-bg-selection-safari: #82b3b4
}

*,
*: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: var(--color-bg-selection);
  color: #fff
}

*::-moz-selection {
  background: var(--color-bg-selection);
  color: #fff
}

*::-webkit-selection {
  background: var(--color-bg-selection);
  color: #fff
}

@supports (-webkit-appearance: none) and (background: -webkit-named-image(i)) {
  *::selection {
    background: var(--color-bg-selection-safari) !important
  }
}

*: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/fonts/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/fonts/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/fonts/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/fonts/PPEditorialNew-UltraboldItalic-BYM9vjzi.otf)
}

@font-face {
  font-family: DingTalk Sans;
  src: url(https://p1-kling.klingai.com/kcdn/cdn-kcdn112452/kling-web-aio-prod_aio/assets/fonts/DingTalk-Sans-CT5a5scH.ttf)
}

.kling-slider.el-slider .el-slider__runway {
  height: 32px;
  background: var(--color-fill-light);
  border-radius: 0
}

.kling-slider.el-slider .el-slider__runway .el-slider__bar {
  background: var(--color-other-2);
  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: 4px;
  border-radius: 2px
}

.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
}

.kling-slider-large.el-slider .el-slider__runway {
  height: 56px;
  background: var(--color-fill-light);
  border-radius: 4px
}

.kling-slider-large.el-slider .el-slider__runway .el-slider__bar {
  background: var(--color-other-4);
  height: 100%;
  border-radius: 4px
}

.kling-slider-large.el-slider .el-slider__runway .el-slider__button-wrapper {
  top: 0;
  height: 56px;
  width: 56px
}

.kling-slider-large.el-slider .el-slider__runway .el-slider__button-wrapper .el-slider__button {
  background: var(--color-text-1);
  border: none;
  height: 56px;
  width: 4px;
  border-radius: 2px
}

.kling-slider-large.el-slider .el-slider__runway .el-slider__button-wrapper .el-slider__button.hover {
  transform: scale(1)
}

:root {
  --color-theme-1: #fff;
  --color-theme-2: #74ff52ff;
  --color-theme-3: #74ff521f;
  --color-theme-hover: #9fff75ff;
  --color-text-1: #f9fbfcff;
  --color-text-2: #b0b4b8ff;
  --color-text-3: #5e6266ff;
  --color-text-4: #484d52ff;
  --color-text-5: #000000ff;
  --color-font-1: #fafffe;
  --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-fill-green: #00b831;
  --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-other-9: #ffffff7a;
  --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-theme-hover: #46b842ff;
  --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-fill-green: #00b831;
  --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-8: #ffffffd1;
  --color-other-9: #ffffff7a;
  --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 .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)
}

.kling-dialog-invitation.el-dialog {
  border: 1px solid var(--color-other-1);
  padding: 0
}

.kling-dialog-invitation.el-dialog .el-dialog__header {
  display: none
}

.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
}

.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
}

.effect-dialog-failed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--color-text-3);
  font-size: 12px
}

.effect-dialog-loading {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: var(--color-fill-black-3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-1)
}

.effect-dialog-double-content .double-uploader {
  border-radius: 8px;
  padding: 3px;
  border: 1px solid var(--color-border-container);
  display: flex;
  align-items: center;
  gap: 16px
}

.effect-dialog-double-content .double-uploader .double-uploader-item {
  width: 100%;
  border-radius: 4px;
  background: var(--color-fill-light);
  overflow: hidden
}

.effect-dialog-double-content .double-uploader .double-uploader-item .double-uploader-label {
  color: var(--color-text-1);
  font-size: 14px;
  line-height: 32px;
  text-align: center;
  background: var(--color-other-1)
}

.effect-dialog-double-content .double-generate-area {
  margin-top: 32px
}

.effect-dialog-double-content .double-generate-area .double-generate-title {
  color: var(--color-text-1);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600
}

.effect-dialog-double-content .double-generate-area .double-generate-mode {
  margin: 12px 0;
  display: flex;
  gap: 8px
}

.effect-dialog-double-content .double-generate-area .double-generate-result {
  height: 333px;
  background: var(--color-bg-primary);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 20px;
  color: var(--color-text-3)
}

.effect-dialog-content {
  height: 694px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: var(--color-fill-black-3);
  position: relative
}

.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)
}

.effect-dialog-content .action .action-item {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer
}

.effect-dialog-content img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.effect-dialog-footer {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end
}

body.mobile .kling-dialog.el-dialog {
  padding: 16px;
  width: calc(100vw - 32px)
}

body.mobile .kling-dialog.kling-fullscreen-dialog.el-dialog {
  padding: 0;
  width: 100vw
}

.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;
  color: var(--color-text-1) !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
}

.button-pay-popover-title {
  font-size: 14px;
  color: var(--color-text-1);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px
}

.button-pay-popover-desc {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-1)
}

.button-pay-popover-footer {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px
}

.effect-cancel-popover-title {
  font-size: 14px;
  color: var(--color-text-1);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px
}

.effect-cancel-popover-desc {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-1)
}

.effect-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: var(--color-text-1);
  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-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)
}

.membership-tag-hot-color {
  background: linear-gradient(94deg, #41ffbb, #11ff4c, #e2ff20);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

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-new-tag {
  border-radius: 4px;
  padding: 0 6px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  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
}

.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
}

.kling-input-number {
  width: 120px;
  height: 32px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border-component)
}

.kling-input-number:hover .el-input__wrapper {
  box-shadow: 0 0 0 1px var(--color-text-1) inset !important
}

.kling-input-number .el-input-number__decrease,
.kling-input-number .el-input-number__increase {
  background: transparent;
  top: 0;
  color: var(--color-text-1);
  font-weight: 600;
  bottom: 0;
  width: 32px
}

.kling-input-number .el-input-number__decrease:hover,
.kling-input-number .el-input-number__increase:hover {
  color: var(--color-text-1)
}

.kling-input-number .el-input-number__decrease.is-disabled,
.kling-input-number .el-input-number__increase.is-disabled {
  color: var(--color-text-3)
}

.kling-input-number .el-input-number__decrease {
  left: 0;
  border-right: none
}

.kling-input-number .el-input-number__increase {
  right: 0;
  border-left: none
}

.kling-input-number .el-input__wrapper {
  background-color: transparent;
  border-radius: 8px;
  box-shadow: none !important;
  padding: 0 32px
}

.kling-input-number .el-input__wrapper .el-input__inner {
  color: var(--color-text-1);
  font-weight: 600
}

.kling-input-number .el-input__wrapper .el-input__inner:focus {
  border: none !important
}

.kling-input-number .el-input__wrapper .el-input__suffix {
  color: var(--color-text-1);
  font-weight: 600
}

.kling-input-number .el-input__wrapper .el-input__suffix span {
  margin-left: 0
}

.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-fill-green);
  --el-switch-off-color: var(--color-border-hover)
}

.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-1)
}

.kling-switch.el-switch.is-checked .el-switch__core .el-switch__action {
  left: calc(100% - 16px);
  background-color: var(--color-theme-2)
}

.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)
}

.kling-table-invitation {
  background: transparent
}

.kling-table-invitation.el-table {
  min-width: 500px;
  background: transparent
}

.kling-table-invitation.el-table .el-table__inner-wrapper:before {
  display: none
}

.kling-table-invitation.el-table tr {
  background-color: transparent
}

.kling-table-invitation.el-table .header-row {
  background: #ffffff14;
  border-bottom: none !important;
  height: 76px
}

.kling-table-invitation.el-table .header-row .cell {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: var(--color-text-2)
}

.kling-table-invitation.el-table .header-row:nth-child(1) .cell {
  text-align: center;
  margin-left: 10px
}

.kling-table-invitation.el-table .header-row:nth-child(2) .cell {
  padding-left: 10px
}

.kling-table-invitation.el-table .header-row:nth-child(3) .cell {
  text-align: right;
  padding-right: 0;
  margin-right: 80px
}

.kling-table-invitation.el-table .el-table__header {
  background: transparent
}

.kling-table-invitation.el-table .el-table__row {
  background: #ffffff0f;
  height: 76px
}

.kling-table-invitation.el-table .el-table__row .el-table__cell {
  background-color: transparent !important;
  border-bottom: none
}

.kling-table-invitation.el-table .el-table__row .el-table__cell:nth-child(1) {
  text-align: center;
  margin-left: 10px;
  font-size: 16px;
  color: var(--color-text-1);
  line-height: 26px
}

.kling-table-invitation.el-table .el-table__row .el-table__cell:nth-child(2) {
  padding-left: 10px
}

.kling-table-invitation.el-table .el-table__row .el-table__cell:nth-child(2) .cell {
  padding: 0
}

.kling-table-invitation.el-table .el-table__row .el-table__cell:nth-child(3) .cell {
  text-align: right;
  margin-right: 80px;
  padding: 0
}

.kling-table-invitation.el-table .el-table__row--striped {
  background: #ffffff14 !important
}

.kling-table-invitation.el-table .el-table__row--striped .el-table__cell {
  background-color: transparent !important;
  border-bottom: none
}

#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")
}