/*!********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************/

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  /* overflow: hidden;  */
  overflow-y: auto;
  overflow-x: hidden;
}
#app {
  width: 100vw;
  height: 100vh;
  /* overflow: hidden; */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
}
.base-layout::-webkit-scrollbar {
  width: 8px;
}
.base-layout::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
}
.base-layout::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}
.base-layout::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

/* 删除确认弹窗样式 */
.el-message-box.delete-dialog.el-message-box--center {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.el-message-box.delete-dialog.el-message-box--center .el-message-box__header {
  padding: 24px 32px !important;
  text-align: center !important;
  margin-right: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.el-message-box.delete-dialog.el-message-box--center .el-message-box__title {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 500 !important;
}
.el-message-box.delete-dialog.el-message-box--center .el-message-box__content {
  padding: 40px 32px !important;
  text-align: center !important;
  color: #fff !important;
  font-size: 16px !important;
}
.el-message-box.delete-dialog.el-message-box--center .el-message-box__btns {
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
  padding: 0 32px 32px !important;
}
.el-message-box.delete-dialog.el-message-box--center .el-message-box__btns .el-button {
  min-width: 120px !important;
  height: 40px !important;
  font-size: 15px !important;
  border-radius: 8px !important;
}
.el-message-box.delete-dialog.el-message-box--center .el-message-box__btns .el-button--default {
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.8) !important;
}
.el-message-box.delete-dialog.el-message-box--center .el-message-box__btns .el-button--default:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}
.el-message-box.delete-dialog.el-message-box--center .el-message-box__btns .el-button--primary {
  background: #4F46E5 !important;
  border: none !important;
}
.el-message-box.delete-dialog.el-message-box--center .el-message-box__btns .el-button--primary:hover {
  background: #4338CA !important;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/TaskListBar.vue?vue&type=style&index=0&id=06296160&scoped=true&lang=css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

/* 外层容器 */
.task-list-wrapper[data-v-06296160] {
  position: relative;
  display: inline-block;
}

/* 触发器样式 */
.task-trigger[data-v-06296160] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
  color: #fff;
  font-size: 14px;
}
.task-trigger[data-v-06296160]:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: #6366f1;
}
.task-trigger .el-icon[data-v-06296160] {
  font-size: 16px;
}
.task-badge[data-v-06296160] {
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  background: #6366f1;
  color: #fff;
  border-radius: 10px;
  margin-left: 8px;
}

/* 下拉框样式（保持 TaskList 的原有宽度） */
.task-dropdown[data-v-06296160] {
  position: absolute;
  top: 100%;
  right: 0;
  width: 420px;
  margin-top: 10px;
  background: #1d1d2d;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.task-dropdown-content[data-v-06296160] {
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.task-dropdown-content h3[data-v-06296160] {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 8px;
}
.task-content[data-v-06296160] {
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  text-align: center;
  padding: 0;
  min-height: 120px;
  max-height: 300px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.task-list[data-v-06296160] {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 300px;
  padding-right: 8px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}
.task-list[data-v-06296160]::-webkit-scrollbar {
  width: 6px;
}
.task-list[data-v-06296160]::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}
.task-list[data-v-06296160]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
.task-list[data-v-06296160]::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
.task-list[data-v-06296160]::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, 0.4);
}
.task-item[data-v-06296160] {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: all 0.2s ease;
  cursor: pointer;
}
.task-item[data-v-06296160]:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.task-item[data-v-06296160]:active {
  transform: translateY(0);
}
.task-item.active[data-v-06296160] {
  background: rgba(79, 70, 229, 0.1);
  border-color: rgba(79, 70, 229, 0.3);
}
.task-header[data-v-06296160] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.task-header .el-icon[data-v-06296160] {
  font-size: 15px;
  color: #60a5fa;
}
.task-id[data-v-06296160] {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-family: 'Roboto Mono', monospace;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.loading-spinner[data-v-06296160] {
  margin-left: auto;
}
.loading-spinner .el-icon[data-v-06296160] {
  font-size: 14px;
  color: #60a5fa;
  animation: rotate-06296160 1s linear infinite;
}
.task-times[data-v-06296160] {
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.time-item[data-v-06296160] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.time-label[data-v-06296160] {
  color: rgba(255, 255, 255, 0.45);
  min-width: 65px;
}
.time-value[data-v-06296160] {
  color: rgba(255, 255, 255, 0.75);
}
.empty-tasks[data-v-06296160] {
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  padding: 40px 0;
  font-size: 14px;
}
.preview-btn[data-v-06296160] {
  margin-top: 16px;
  background: #3b82f6;
  border: none;
  color: #fff;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  width: 100%;
  height: 44px;
  transition: all 0.2s ease;
  font-weight: 500;
}
.preview-btn[data-v-06296160]:hover {
  background: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}
.preview-btn[data-v-06296160]:active {
  transform: translateY(0);
}
.loading-wrapper[data-v-06296160] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 120px;
}
.loading-spinner-circle[data-v-06296160] {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(99, 102, 241, 0.1);
  border-top: 3px solid #6366f1;
  border-radius: 50%;
  animation: spin-06296160 1s linear infinite;
  margin-bottom: 12px;
}
.loading-text[data-v-06296160] {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

/* 动画效果 */
.fade-slide-enter-active[data-v-06296160],
.fade-slide-leave-active[data-v-06296160] {
  transition: all 0.3s ease;
}
.fade-slide-enter-from[data-v-06296160] {
  opacity: 0;
  transform: translateY(-10px);
}
.fade-slide-leave-to[data-v-06296160] {
  opacity: 0;
  transform: translateY(-10px);
}
@keyframes rotate-06296160 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes spin-06296160 {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/CustomPagination.vue?vue&type=style&index=0&id=2d24e09b&scoped=true&lang=css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.pagination-container[data-v-2d24e09b] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Arial, sans-serif;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.page-btn[data-v-2d24e09b] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}
.page-btn[data-v-2d24e09b]:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.page-btn.active[data-v-2d24e09b] {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
  font-weight: bold;
}
.page-btn[data-v-2d24e09b]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: transparent;
}
.page-numbers[data-v-2d24e09b] {
  display: flex;
  gap: 8px;
}
.ellipsis[data-v-2d24e09b] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  color: rgba(255, 255, 255, 0.3);
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/create/components/DigitalHuman/components/AudioDialog.vue?vue&type=style&index=0&id=d46505a2&scoped=true&lang=css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

/* 遮罩层 */
.modal-overlay[data-v-d46505a2] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 弹窗主体 - 暗黑风格 */
.modal-content[data-v-d46505a2] {
  background-color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 800px;
  max-width: 95%;
  height: 650px; /* 稍微加高以容纳分页 */
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* 头部 */
.modal-header[data-v-d46505a2] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.modal-title[data-v-d46505a2] {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
.close-btn[data-v-d46505a2] {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-btn[data-v-d46505a2]:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* 内容区域 */
.modal-body[data-v-d46505a2] {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* 列表样式 */
.material-list[data-v-d46505a2] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.material-item[data-v-d46505a2] {
  position: relative;
  display: flex;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.material-item[data-v-d46505a2]:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}
.material-item.active[data-v-d46505a2] {
  background: rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
}

/* 音频预览部分 */
.audio-thumbnail[data-v-d46505a2] {
  display: flex;
  align-items: center;
  margin-right: 20px;
  gap: 12px;
}
.icon-wrapper[data-v-d46505a2] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 8px;
  color: #6366f1;
  font-size: 20px;
}
.preview-player[data-v-d46505a2] {
  height: 32px;
  width: 240px;
  filter: invert(1) hue-rotate(180deg); /* 适配暗黑模式 */
  border-radius: 16px;
}

/* 信息文字 */
.material-info[data-v-d46505a2] {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.material-name[data-v-d46505a2] {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.material-desc[data-v-d46505a2] {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* 选中标记 */
.selected-indicator[data-v-d46505a2] {
  position: absolute;
  top: 16px;
  right: 16px;
  color: #6366f1;
  font-size: 20px;
}

/* 空状态和加载状态 */
.state-container[data-v-d46505a2] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: rgba(255, 255, 255, 0.4);
}
.loading-spinner[data-v-d46505a2] {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin-d46505a2 1s linear infinite;
  margin-bottom: 16px;
}
@keyframes spin-d46505a2 {
to { transform: rotate(360deg);
}
}
.empty-icon[data-v-d46505a2] {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}
.state-text[data-v-d46505a2] {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}
.state-subtext[data-v-d46505a2] {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

/* 分页组件容器 */
.pagination-wrapper[data-v-d46505a2] {
  display: flex;
  justify-content: flex-end; /* 靠右 */
  align-items: center;
  padding: 16px 0 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 16px;
  flex-shrink: 0;
}

/* 覆盖分页组件样式以适配暗黑弹窗 */
.pagination-wrapper[data-v-d46505a2] .page-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}
.pagination-wrapper[data-v-d46505a2] .page-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.pagination-wrapper[data-v-d46505a2] .page-btn.active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}
.pagination-wrapper[data-v-d46505a2] .page-btn:disabled {
  background: transparent;
  opacity: 0.3;
}
.pagination-wrapper[data-v-d46505a2] .ellipsis {
  color: rgba(255, 255, 255, 0.3);
}

/* 底部 Footer */
.modal-footer[data-v-d46505a2] {
  padding: 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background-color: #1a1a1a;
  border-radius: 0 0 12px 12px;
  flex-shrink: 0;
}
.btn[data-v-d46505a2] {
  padding: 8px 24px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  outline: none;
}
.cancel-btn[data-v-d46505a2] {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
.cancel-btn[data-v-d46505a2]:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.confirm-btn[data-v-d46505a2] {
  background: #6366f1;
  color: white;
}
.confirm-btn[data-v-d46505a2]:hover {
  background: #4f46e5;
}

/* 滚动条美化 */
.modal-body[data-v-d46505a2]::-webkit-scrollbar {
  width: 6px;
}
.modal-body[data-v-d46505a2]::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}
.modal-body[data-v-d46505a2]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}
.modal-body[data-v-d46505a2]::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/create/components/DigitalHuman/components/HistoryUploadDialog.vue?vue&type=style&index=0&id=d523e564&scoped=true&lang=css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

/* 遮罩层 */
.modal-overlay[data-v-d523e564] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 弹窗主体 */
.modal-content[data-v-d523e564] {
  background-color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 800px;
  max-width: 95%;
  height: 650px; /* 稍微加高以容纳分页 */
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* 头部 */
.modal-header[data-v-d523e564] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.modal-title[data-v-d523e564] {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
.close-btn[data-v-d523e564] {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.close-btn[data-v-d523e564]:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* 内容区域 */
.modal-body[data-v-d523e564] {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.material-list[data-v-d523e564] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

/* 列表项 */
.material-item[data-v-d523e564] {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.material-item[data-v-d523e564]:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}
.material-item.active[data-v-d523e564] {
  background: rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
}

/* 缩略图区域通用样式 */
.thumbnail[data-v-d523e564] {
  margin-right: 16px;
  display: flex;
  align-items: center;
}

/* 音频样式 */
.audio-thumbnail[data-v-d523e564] {
  gap: 12px;
}
.icon-wrapper[data-v-d523e564] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 8px;
  color: #6366f1;
  font-size: 20px;
}
.history-audio-player[data-v-d523e564] {
  height: 32px;
  width: 200px;
  filter: invert(1) hue-rotate(180deg);
  border-radius: 16px;
}

/* 视频样式 */
.video-thumbnail[data-v-d523e564] {
  width: 120px;
  height: 68px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
}
.placeholder-box[data-v-d523e564] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.video-preview-player[data-v-d523e564] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.no-video-icon[data-v-d523e564] {
  color: rgba(255, 255, 255, 0.3);
  font-size: 32px;
}

/* 信息文字 */
.material-info[data-v-d523e564] {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.material-name[data-v-d523e564] {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.material-desc[data-v-d523e564] {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* 选中标记 */
.selected-indicator[data-v-d523e564] {
  margin-left: 12px;
  color: #6366f1;
  display: flex;
  align-items: center;
  font-size: 20px;
}

/* 空状态和加载状态 */
.state-container[data-v-d523e564] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: rgba(255, 255, 255, 0.4);
}
.loading-spinner[data-v-d523e564] {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin-d523e564 1s linear infinite;
  margin-bottom: 16px;
}
@keyframes spin-d523e564 {
to { transform: rotate(360deg);
}
}
.empty-icon[data-v-d523e564] {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}
.state-text[data-v-d523e564] {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}
.state-subtext[data-v-d523e564] {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

/* 分页组件容器 */
.pagination-wrapper[data-v-d523e564] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 0 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 16px;
  flex-shrink: 0;
}

/* 覆盖分页组件样式以适配暗黑弹窗 */
.pagination-wrapper[data-v-d523e564] .page-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}
.pagination-wrapper[data-v-d523e564] .page-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.pagination-wrapper[data-v-d523e564] .page-btn.active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}
.pagination-wrapper[data-v-d523e564] .page-btn:disabled {
  background: transparent;
  opacity: 0.3;
}
.pagination-wrapper[data-v-d523e564] .ellipsis {
  color: rgba(255, 255, 255, 0.3);
}

/* 底部 Footer */
.modal-footer[data-v-d523e564] {
  padding: 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background-color: #1a1a1a;
  border-radius: 0 0 12px 12px;
  flex-shrink: 0;
}
.btn[data-v-d523e564] {
  padding: 8px 24px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  outline: none;
}
.cancel-btn[data-v-d523e564] {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
.cancel-btn[data-v-d523e564]:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.confirm-btn[data-v-d523e564] {
  background: #6366f1;
  color: white;
}
.confirm-btn[data-v-d523e564]:hover {
  background: #4f46e5;
}

/* 滚动条 */
.modal-body[data-v-d523e564]::-webkit-scrollbar {
  width: 6px;
}
.modal-body[data-v-d523e564]::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}
.modal-body[data-v-d523e564]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}
.modal-body[data-v-d523e564]::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/create/components/DigitalHuman/components/ConfirmDialog.vue?vue&type=style&index=0&id=0ab7d959&scoped=true&lang=css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

/* 遮罩层 */
.modal-overlay[data-v-0ab7d959] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 弹窗主体 */
.modal-content[data-v-0ab7d959] {
  background-color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  width: 400px; /* 保持原宽度 */
  max-width: 90%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: modalFadeIn-0ab7d959 0.3s ease-out;
}
@keyframes modalFadeIn-0ab7d959 {
from { opacity: 0; transform: translateY(-20px);
}
to { opacity: 1; transform: translateY(0);
}
}

/* 头部 */
.modal-header[data-v-0ab7d959] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-title[data-v-0ab7d959] {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
.close-btn[data-v-0ab7d959] {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-btn[data-v-0ab7d959]:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* 内容区域 */
.modal-body[data-v-0ab7d959] {
  padding: 24px 20px;
}
.confirm-content[data-v-0ab7d959] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 图标圆圈 */
.confirm-icon-wrapper[data-v-0ab7d959] {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.1); /* 紫色背景淡化 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.main-icon[data-v-0ab7d959] {
  font-size: 32px;
  color: #6366f1;
}
.confirm-text[data-v-0ab7d959] {
  width: 100%;
}
.title[data-v-0ab7d959] {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 16px;
  text-align: center;
}

/* 要求列表 */
.requirements-list[data-v-0ab7d959] {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.requirement-item[data-v-0ab7d959] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  line-height: 1.4;
}
.check-icon[data-v-0ab7d959] {
  color: #10b981; /* 绿色对勾 */
  font-size: 16px;
  margin-top: 1px;
  flex-shrink: 0;
}

/* 社区规则链接 */
.community-rule[data-v-0ab7d959] {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  margin-bottom: 12px;
}
.rule-link[data-v-0ab7d959] {
  color: #6366f1;
  cursor: pointer;
  margin-left: 4px;
  transition: -webkit-text-decoration 0.2s;
  transition: text-decoration 0.2s;
  transition: text-decoration 0.2s, -webkit-text-decoration 0.2s;
}
.rule-link[data-v-0ab7d959]:hover {
  text-decoration: underline;
  color: #818cf8;
}

/* 底部提示 */
.confirm-tip[data-v-0ab7d959] {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
}

/* 底部按钮 */
.modal-footer[data-v-0ab7d959] {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background-color: #1a1a1a;
  border-radius: 0 0 12px 12px;
}
.btn[data-v-0ab7d959] {
  padding: 8px 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  outline: none;
  min-width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn[data-v-0ab7d959]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.cancel-btn[data-v-0ab7d959] {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
.cancel-btn[data-v-0ab7d959]:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.confirm-btn[data-v-0ab7d959] {
  background: #6366f1;
  color: white;
}
.confirm-btn[data-v-0ab7d959]:hover:not(:disabled) {
  background: #4f46e5;
}

/* Loading 动画 */
.spinner[data-v-0ab7d959] {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: button-spin-0ab7d959 1s linear infinite;
}
@keyframes button-spin-0ab7d959 {
to { transform: rotate(360deg);
}
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/create/components/DigitalHuman/DigitalHuman.vue?vue&type=style&index=0&id=25226e9f&scoped=true&lang=css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.digital-human[data-v-25226e9f] {
  min-height: 100vh;
  background: #1a1a1a;
  color: #fff;
  display: flex;
  flex-direction: column;
}
.header[data-v-25226e9f] {
  height: 60px;
  background: #242424;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.left-section[data-v-25226e9f] {
  display: flex;
  align-items: center;
  gap: 20px;
}
.right-section[data-v-25226e9f] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.back-button[data-v-25226e9f] {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #fff;
  gap: 8px;
}
.back-button[data-v-25226e9f]:hover {
  opacity: 0.8;
}
.el-icon[data-v-25226e9f] {
  font-size: 18px;
  margin-right: 2px;
  color: #fff;
}
.content[data-v-25226e9f] {
  flex: 1;
  display: flex;
  gap: 20px;
  padding: 20px;
  height: calc(100vh - 60px);
}
.video-preview[data-v-25226e9f] {
  flex: 2.5;
  background: #242424;
  border-radius: 8px;
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.preview-container[data-v-25226e9f] {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.preview-video[data-v-25226e9f] {
  flex: 1;
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 16/9;
  background: #000;
  max-height: 480px;
  -o-object-fit: contain;
     object-fit: contain;
}
.preview-info[data-v-25226e9f] {
  padding: 16px;
  background: #1a1a1a;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.preview-header[data-v-25226e9f] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.preview-title[data-v-25226e9f] {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 8px;
}
.preview-status[data-v-25226e9f] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.preview-placeholder[data-v-25226e9f] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.5);
}
.placeholder-icon[data-v-25226e9f] {
  font-size: 48px;
  color: rgba(255, 255, 255, 0.2);
}
.placeholder-text[data-v-25226e9f] {
  font-size: 14px;
}
.generating-state[data-v-25226e9f] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.9);
}
.generating-animation[data-v-25226e9f] {
  margin-bottom: 8px;
}
.rotating[data-v-25226e9f] {
  font-size: 48px;
  color: #6366f1;
  animation: rotate-25226e9f 2s linear infinite;
}
.generating-text[data-v-25226e9f] {
  font-size: 18px;
  font-weight: 500;
}
.generating-tip[data-v-25226e9f] {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}
@keyframes rotate-25226e9f {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
.control-panel[data-v-25226e9f] {
  flex: 1;
  background: #242424;
  border-radius: 8px;
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
}
.action-btn[data-v-25226e9f] {
  min-width: 88px;
  /* 添加最小宽度确保按钮大小一致 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: all 0.3s ease;
}
.action-btn[data-v-25226e9f]:hover {
  background: #242424;
  border-color: rgba(255, 255, 255, 0.2);
}
.action-btn .el-icon[data-v-25226e9f] {
  font-size: 14px;
}
.upload-hidden[data-v-25226e9f] {
  display: block;
  width: 100%;
}
.upload-hidden[data-v-25226e9f] .el-upload {
  display: block;
  width: 100%;
}
.upload-hidden[data-v-25226e9f] .el-upload-dragger {
  width: 100%;
  height: 100%;
}
.section-header[data-v-25226e9f] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-title[data-v-25226e9f] {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.submit-section[data-v-25226e9f] {
  margin-top: auto;
}
.submit-section .cost-tip[data-v-25226e9f] {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin-bottom: 12px;
}
.submit-btn[data-v-25226e9f] {
  width: 100%;
  height: 48px;
  background: linear-gradient(45deg, #4F46E5, #7C3AED);
  border: none;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.submit-btn[data-v-25226e9f]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
  background: linear-gradient(45deg, #4338CA, #6D28D9);
}
.submit-btn[data-v-25226e9f]:active {
  transform: translateY(1px);
}
.submit-btn .el-icon[data-v-25226e9f] {
  font-size: 18px;
  margin-right: 8px;
}
.disclaimer-text[data-v-25226e9f] {
  margin-top: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 1.5;
}
.upload-section[data-v-25226e9f] {
  display: flex;
  gap: 8px;
}
.preview-container[data-v-25226e9f] {
  width: 100%;
}
.video-info[data-v-25226e9f] {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.video-name[data-v-25226e9f] {
  font-size: 14px;
  color: #fff;
}
.remove-btn {
&[data-v-25226e9f] {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 4px;
  color: #fff;
  }
&[data-v-25226e9f]:hover {
    background: rgba(0, 0, 0, 0.7);
}
}
.empty-state {
&[data-v-25226e9f] {
  height: 80px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1a1a1a;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  }
&[data-v-25226e9f]:hover {
    background: #242424;
    border-color: rgba(255, 255, 255, 0.3);
}
.empty-icon[data-v-25226e9f] {
    color: rgba(255, 255, 255, 0.5) !important;
}
.empty-text[data-v-25226e9f] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}
}
.placeholder-icon[data-v-25226e9f] {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.5);
}
.icon[data-v-25226e9f] {
  color: #ffd700;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
}
.upload-tip[data-v-25226e9f] {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}
.project-title[data-v-25226e9f] {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.project-title h2[data-v-25226e9f] {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}
.audio-section[data-v-25226e9f] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.audio-preview-box {
&[data-v-25226e9f] {
  position: relative;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  padding: 6px 12px;
  height: 60px;
  }
.preview-container[data-v-25226e9f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
}
.audio-info[data-v-25226e9f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
}
.audio-name[data-v-25226e9f] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}
.audio-player {
&[data-v-25226e9f] {
    width: 100%;
    height: 28px;
    border-radius: 4px;
    background: transparent;
    }
&[data-v-25226e9f]::-webkit-media-controls-enclosure {
      background: transparent;
      border-radius: 0;
}
&[data-v-25226e9f]::-webkit-media-controls-panel {
      background: transparent;
      padding: 0;
      height: 32px;
      display: flex;
      align-items: center;
}
&[data-v-25226e9f]::-webkit-media-controls-timeline {
      height: 2px;
      padding: 0;
      margin: 0 8px;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.1);
}
&[data-v-25226e9f]::-webkit-media-controls-timeline-container {
      height: 2px;
      padding: 0;
      margin: 0;
      background: rgba(255, 255, 255, 0.1);
}
&[data-v-25226e9f]::-webkit-media-controls-current-time-display,
    &[data-v-25226e9f]::-webkit-media-controls-time-remaining-display {
      color: rgba(255, 255, 255, 0.65);
      font-size: 12px;
      font-family: system-ui;
}
&[data-v-25226e9f]::-webkit-media-controls-play-button {
      filter: invert(1);
      opacity: 0.85;
      margin-right: 4px;
}
&[data-v-25226e9f]::-webkit-media-controls-progress-bar {
      background: rgba(255, 255, 255, 0.1);
}
&[data-v-25226e9f]::-webkit-media-controls-seek-back-button,
    &[data-v-25226e9f]::-webkit-media-controls-seek-forward-button,
    &[data-v-25226e9f]::-webkit-media-controls-fullscreen-button,
    &[data-v-25226e9f]::-webkit-media-controls-rewind-button,
    &[data-v-25226e9f]::-webkit-media-controls-return-to-realtime-button,
    &[data-v-25226e9f]::-webkit-media-controls-toggle-closed-captions-button {
      display: none;
}
&[data-v-25226e9f]::-webkit-media-controls-volume-slider {
      display: none;
}
&[data-v-25226e9f]::-webkit-media-controls-volume-control-container,
    &[data-v-25226e9f]::-webkit-media-controls-volume-control {
      display: none;
}
&[data-v-25226e9f]::-webkit-media-controls-overlay-play-button {
      display: none;
}
}
.remove-btn {
&[data-v-25226e9f] {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.45);
    transition: all 0.2s ease;
    }
&[data-v-25226e9f]:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.1);
}
.el-icon[data-v-25226e9f] {
      font-size: 14px;
}
}
}
.video-section[data-v-25226e9f] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.video-preview-box {
&[data-v-25226e9f] {
  position: relative;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  padding: 16px;
  margin-bottom: 16px;
  }
.preview-container[data-v-25226e9f] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.video-icon[data-v-25226e9f] {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.5);
}
.video-info[data-v-25226e9f] {
    flex: 1;
}
.video-name[data-v-25226e9f] {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}
.remove-btn {
&[data-v-25226e9f] {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 4px;
    color: #fff;
    }
&[data-v-25226e9f]:hover {
      background: rgba(0, 0, 0, 0.7);
}
}
}
.video-section {
.empty-state[data-v-25226e9f] {
    height: 280px;
}
}
.download-btn[data-v-25226e9f] {
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.download-btn[data-v-25226e9f]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}
.download-btn[data-v-25226e9f]:active {
  transform: translateY(1px);
}
.download-btn .el-icon[data-v-25226e9f] {
  font-size: 16px;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/create/components/ImageToVideo/ImageToVideo.vue?vue&type=style&index=0&id=3296b49f&scoped=true&lang=css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

/* 所有原有的样式均无改动 */
.image-to-video-page[data-v-3296b49f] {
  height: 100vh;
  width: 100vw;
  background: #1a1a1a;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.header[data-v-3296b49f] {
  height: 60px;
  background: #242424;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.left-section[data-v-3296b49f],
.right-section[data-v-3296b49f] {
  display: flex;
  align-items: center;
  gap: 20px;
}
.back-button[data-v-3296b49f] {
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #fff;
  gap: 8px;
}
.project-title h2[data-v-3296b49f] {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}
.play-btn[data-v-3296b49f] {
  background: linear-gradient(45deg, #4f46e5, #7c3aed);
  border: none;
  color: #fff;
  height: 36px;
}
.play-btn .el-icon[data-v-3296b49f] {
  color: #fff;
  font-size: 18px;
}
.btn-content[data-v-3296b49f] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-text[data-v-3296b49f] {
  font-weight: 500;
}
.content-layout[data-v-3296b49f] {
  flex: 1;
  height: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}
.content-layout[data-v-3296b49f]::-webkit-scrollbar {
  width: 6px;
}
.content-layout[data-v-3296b49f]::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}
.content-layout[data-v-3296b49f]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}
.content-layout[data-v-3296b49f]::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}
.video-preview-wrapper[data-v-3296b49f] {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #242424;
  border-radius: 8px;
  overflow: hidden;
  padding: 20px;
  flex: 1;
  min-height: 450px;
  flex-shrink: 0;
}
.video-preview[data-v-3296b49f] {
  width: 100%;
  height: 100%;
  background: #242424;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.preview-container[data-v-3296b49f] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.preview-video[data-v-3296b49f] {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  background: #000;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.preview-info[data-v-3296b49f] {
  padding: 16px 8px 0;
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.preview-header[data-v-3296b49f] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.preview-title[data-v-3296b49f] {
  font-size: 16px;
  font-weight: 500;
}
.preview-actions[data-v-3296b49f] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.download-btn[data-v-3296b49f] {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  flex-shrink: 0;
}
.full-screen-state[data-v-3296b49f] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.generating-state[data-v-3296b49f],
.preview-placeholder[data-v-3296b49f] {
  gap: 16px;
  color: rgba(255, 255, 255, 0.5);
}
.placeholder-icon[data-v-3296b49f],
.generating-animation .el-icon[data-v-3296b49f] {
  font-size: 48px;
  color: rgba(255, 255, 255, 0.2);
}
.generating-animation .el-icon.rotating[data-v-3296b49f] {
  color: #6366f1;
  animation: rotate-3296b49f 2s linear infinite;
}
@keyframes rotate-3296b49f {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
.placeholder-text[data-v-3296b49f],
.generating-tip[data-v-3296b49f] {
  font-size: 14px;
}
.generating-text[data-v-3296b49f] {
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.controls-wrapper[data-v-3296b49f] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  min-height: 380px;
  flex-shrink: 0;
}
.control-panel[data-v-3296b49f] {
  background: #242424;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
}
.section-header[data-v-3296b49f] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-title[data-v-3296b49f] {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.upload-tip[data-v-3296b49f] {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: -12px;
}
.prompt-panel .prompt-section[data-v-3296b49f] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.prompt-panel .el-textarea[data-v-3296b49f] {
  flex: 1;
}
[data-v-3296b49f] .prompt-panel .el-textarea__inner {
  height: 100% !important;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
  color: #fff;
  font-size: 14px;
}
[data-v-3296b49f] .el-textarea .el-input__count {
    background: none;
}
.image-panel .image-section[data-v-3296b49f] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.frame-images-container[data-v-3296b49f] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.frame-upload-item[data-v-3296b49f] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.frame-label[data-v-3296b49f] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}
.image-thumbnail[data-v-3296b49f] {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.thumbnail-img[data-v-3296b49f] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.remove-btn[data-v-3296b49f] {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.6) !important;
  border: none !important;
}
.remove-btn .el-icon[data-v-3296b49f] {
  color: #fff;
}
.image-uploader .empty-state[data-v-3296b49f] {
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1a1a1a;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.image-uploader .empty-state[data-v-3296b49f]:hover {
  background: #2a2a2a;
  border-color: #4f46e5;
}
.empty-icon[data-v-3296b49f] {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.5) !important;
}
.empty-text[data-v-3296b49f] {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}
.submit-section[data-v-3296b49f] {
  margin-top: auto;
}
.cost-tip[data-v-3296b49f] {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin-bottom: 12px;
}
.submit-btn[data-v-3296b49f] {
  width: 100%;
  height: 48px;
  background: linear-gradient(45deg, #4f46e5, #7c3aed);
  border: none;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
}
.submit-tc[data-v-3296b49f] {
  background: linear-gradient(45deg, #4f46e5, #7c3aed);
  border: none;
}
.disclaimer-text[data-v-3296b49f] {
  margin-top: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}
[data-v-3296b49f] .confirm-dialog {
  background: #1a1a1a !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.confirm-content[data-v-3296b49f] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0 12px;
}
.confirm-icon[data-v-3296b49f] {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.confirm-icon .el-icon[data-v-3296b49f] {
  font-size: 32px;
  color: #4f46e5;
}
.confirm-text .title[data-v-3296b49f] {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
}
.requirements-list[data-v-3296b49f] {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  padding: 16px;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.requirement-item[data-v-3296b49f] {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}
.requirement-item .el-icon[data-v-3296b49f] {
  color: #10b981;
  font-size: 16px;
}
.community-rule[data-v-3296b49f] {
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0 0 12px;
}
.rule-link[data-v-3296b49f] {
  color: #4f46e5;
  cursor: pointer;
  margin-left: 4px;
}
.confirm-tip[data-v-3296b49f] {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  margin: 0 0 12px;
}
[data-v-3296b49f] .confirm-dialog .el-dialog__footer {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
[data-v-3296b49f] .confirm-dialog .el-button--primary {
  background: #4f46e5;
}



/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/player/AudioPlayer.vue?vue&type=style&index=0&id=0411e999&scoped=true&lang=css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.audio-preview[data-v-0411e999] {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
}
.audio-info[data-v-0411e999] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.file-info[data-v-0411e999] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.audio-icon[data-v-0411e999] {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
}
.audio-details[data-v-0411e999] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.audio-name[data-v-0411e999] {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
.audio-meta[data-v-0411e999] {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}
.audio-actions[data-v-0411e999] {
  display: flex;
  gap: 8px;
}
.action-btn[data-v-0411e999] {
  padding: 8px;
  height: auto;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
}

/* 删除按钮样式注释 */
/* 
.delete-btn:hover {
  color: #f56c6c;
  background: rgba(245, 108, 108, 0.1);
} 
*/
.download-btn[data-v-0411e999]:hover {
  color: #409eff;
  background: rgba(64, 158, 255, 0.1);
}
.audio-player[data-v-0411e999] {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #242424;
  border-radius: 8px;
  padding: 8px 12px;
}
.play-icon[data-v-0411e999] {
  font-size: 20px;
  color: #4f46e5;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 6px;
  border-radius: 50%;
}
.play-icon[data-v-0411e999]:hover {
  background: rgba(79, 70, 229, 0.1);
}
.progress-bar[data-v-0411e999] {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.progress[data-v-0411e999] {
  height: 100%;
  background: #4f46e5;
  border-radius: 2px;
  transition: width 0.1s linear;
}
.time[data-v-0411e999] {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  min-width: 45px;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/create/components/ImageToVideo_voice/ImageToVideo_voice.vue?vue&type=style&index=0&id=6d139e3f&scoped=true&lang=css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

/* --- 全局容器布局 --- */
.image-to-video-voice-page[data-v-6d139e3f] {
  height: 100vh;
  width: 100vw;
  background: #1a1a1a;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 禁止最外层滚动 */
}

/* --- 顶部导航栏 --- */
.header[data-v-6d139e3f] {
  height: 60px;
  background: #242424;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0; /* 防止头部被压缩 */
  z-index: 10;
}
.left-section[data-v-6d139e3f],
.right-section[data-v-6d139e3f] {
  display: flex;
  align-items: center;
  gap: 20px;
}
.back-button[data-v-6d139e3f] {
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #fff;
  gap: 8px;
  transition: opacity 0.2s;
}
.back-button[data-v-6d139e3f]:hover {
  opacity: 0.8;
}
.project-title h2[data-v-6d139e3f] {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}
.play-btn[data-v-6d139e3f] {
  background: linear-gradient(45deg, #4f46e5, #7c3aed);
  border: none;
  color: #fff;
  height: 36px;
}
.btn-content[data-v-6d139e3f] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-text[data-v-6d139e3f] {
  font-weight: 500;
}

/* --- 主要内容滚动区域 --- */
.content-layout[data-v-6d139e3f] {
  flex: 1;
  height: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  
  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}

/* 滚动条样式 (Chrome/Safari/Webkit) */
.content-layout[data-v-6d139e3f]::-webkit-scrollbar {
  width: 6px;
}
.content-layout[data-v-6d139e3f]::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}
.content-layout[data-v-6d139e3f]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}
.content-layout[data-v-6d139e3f]::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* --- 上方视频预览区域 --- */
.video-preview-wrapper[data-v-6d139e3f] {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #242424;
  border-radius: 8px;
  overflow: hidden;
  padding: 20px;

  /* 核心布局属性 */
  flex: 1;           /* 空间足够时自动拉伸 */
  min-height: 450px; /* 空间不足时保持最小高度，触发滚动 */
  flex-shrink: 0;    /* 禁止被 flex 容器压缩 */
}
.video-preview[data-v-6d139e3f] {
  width: 100%;
  height: 100%;
  background: #242424;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.preview-container[data-v-6d139e3f] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.preview-video[data-v-6d139e3f] {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  background: #000;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.preview-info[data-v-6d139e3f] {
  /* width: 100%; */
  padding: 16px 8px 0;
  margin-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.preview-header[data-v-6d139e3f] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.preview-title[data-v-6d139e3f] {
  font-size: 16px;
  font-weight: 500;
}
.download-btn[data-v-6d139e3f] {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border: none;
}

/* --- 状态展示 (Loading/Empty) --- */
.full-screen-state[data-v-6d139e3f] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px; /* 保证内部元素不重叠 */
}
.generating-state[data-v-6d139e3f],
.preview-placeholder[data-v-6d139e3f] {
  gap: 16px;
  color: rgba(255, 255, 255, 0.5);
}
.placeholder-icon[data-v-6d139e3f],
.generating-animation .el-icon[data-v-6d139e3f] {
  font-size: 48px;
  color: rgba(255, 255, 255, 0.2);
}
.generating-animation .el-icon.rotating[data-v-6d139e3f] {
  color: #6366f1;
  animation: rotate-6d139e3f 2s linear infinite;
}
@keyframes rotate-6d139e3f {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}
.placeholder-text[data-v-6d139e3f],
.generating-tip[data-v-6d139e3f] {
  font-size: 14px;
}
.generating-text[data-v-6d139e3f] {
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

/* --- 下方控制面板区域 --- */
.controls-wrapper[data-v-6d139e3f] {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 左右两栏 */
  gap: 20px;
  /* 移除固定 height，改用 min-height */
  min-height: 380px; 
  flex-shrink: 0; /* 禁止被压缩，确保内容完整显示 */
}
.control-panel[data-v-6d139e3f] {
  background: #242424;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
}

/* 面板标题栏 */
.section-header[data-v-6d139e3f] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.section-title[data-v-6d139e3f] {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.upload-tip[data-v-6d139e3f] {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

/* --- 上传组件样式 --- */
.uploads-row[data-v-6d139e3f] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.image-section[data-v-6d139e3f],
.audio-section[data-v-6d139e3f] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.image-thumbnail[data-v-6d139e3f] {
  width: 120px;
  height: 120px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #000;
}
.thumbnail-img[data-v-6d139e3f] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.remove-btn[data-v-6d139e3f] {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.6) !important;
  border: none !important;
  color: #fff !important;
}
.image-uploader[data-v-6d139e3f] .el-upload,
.audio-uploader[data-v-6d139e3f] .el-upload {
  width: 100%;
}
.image-uploader .empty-state[data-v-6d139e3f],
.audio-uploader .empty-state[data-v-6d139e3f] {
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1a1a1a;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.image-uploader .empty-state[data-v-6d139e3f]:hover,
.audio-uploader .empty-state[data-v-6d139e3f]:hover {
  background: #2a2a2a;
  border-color: #4f46e5;
}
.empty-icon[data-v-6d139e3f] {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.5);
}
.empty-text[data-v-6d139e3f] {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

/* 音频信息条 */
.audio-preview-card[data-v-6d139e3f] {
  background: #1a1a1a;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px;
  position: relative;
}
.audio-preview-card[data-v-6d139e3f] .audio-preview {
  background: transparent;
  border: none;
  padding: 0;
}
.audio-preview-card[data-v-6d139e3f] .audio-player {
  background: #151515;
}
.remove-btn-small[data-v-6d139e3f] {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.1) !important;
  border: none !important;
  width: 28px;
  height: 28px;
}

/* --- 提示词输入框 --- */
.prompt-section[data-v-6d139e3f] {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.prompt-section[data-v-6d139e3f] .el-textarea,
.prompt-section[data-v-6d139e3f] .el-textarea__inner {
  flex: 1;
  height: 100% !important;
  min-height: 200px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
}
.prompt-section[data-v-6d139e3f] .el-textarea__inner:focus {
  border-color: #4f46e5;
}
.prompt-section[data-v-6d139e3f] .el-textarea .el-input__count {
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
}

/* --- 参数行 --- */
.params-row[data-v-6d139e3f] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.param-section[data-v-6d139e3f] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 单选框样式覆盖 */
[data-v-6d139e3f] .param-radio-group .el-radio {
  color: rgba(255, 255, 255, 0.9);
  margin-right: 16px;
}
[data-v-6d139e3f] .param-radio-group .el-radio__input.is-checked .el-radio__inner {
  background-color: #4f46e5;
  border-color: #4f46e5;
}
[data-v-6d139e3f] .param-radio-group .el-radio__input.is-checked + .el-radio__label {
  color: #4f46e5;
}

/* --- 提交按钮 --- */
.submit-section[data-v-6d139e3f] {
  margin-top: auto;
  padding-top: 20px;
}
.submit-btn[data-v-6d139e3f] {
  width: 100%;
  height: 48px;
  background: linear-gradient(45deg, #4f46e5, #7c3aed);
  border: none;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  letter-spacing: 1px;
}
.submit-btn[data-v-6d139e3f]:hover {
  opacity: 0.9;
}

/* --- 弹窗样式 --- */
[data-v-6d139e3f] .confirm-dialog {
  background: #1a1a1a !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.confirm-content[data-v-6d139e3f] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0 12px;
}
.confirm-icon[data-v-6d139e3f] {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-icon .el-icon[data-v-6d139e3f] {
  font-size: 32px;
  color: #4f46e5;
}
.confirm-text .title[data-v-6d139e3f] {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
}
.requirements-list[data-v-6d139e3f] {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.requirement-item[data-v-6d139e3f] {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}
.requirement-item .el-icon[data-v-6d139e3f] {
  color: #10b981;
  font-size: 16px;
}
.community-rule[data-v-6d139e3f] {
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 12px;
  width: 100%;
}
.rule-link[data-v-6d139e3f] {
  color: #4f46e5;
  cursor: pointer;
  margin-left: 4px;
  text-decoration: underline;
}
.confirm-tip[data-v-6d139e3f] {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin-bottom: 4px;
}
[data-v-6d139e3f] .confirm-dialog .el-dialog__footer {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
[data-v-6d139e3f] .confirm-dialog .el-button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}
[data-v-6d139e3f] .confirm-dialog .el-button--primary {
  background: #4f46e5;
  border: none;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/create/components/Img2Img/Img2Img.vue?vue&type=style&index=0&id=017f4d69&scoped=true&lang=css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.img2img-page[data-v-017f4d69] {
  height: 100vh;
  width: 100vw;
  background: #1a1a1a;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.header[data-v-017f4d69] {
  height: 60px;
  background: #242424;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.left-section[data-v-017f4d69],
.right-section[data-v-017f4d69] {
  display: flex;
  align-items: center;
  gap: 20px;
}
.back-button[data-v-017f4d69] {
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #fff;
  gap: 8px;
}
.project-title h2[data-v-017f4d69] {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}
.play-btn[data-v-017f4d69] {
  background: linear-gradient(45deg, #4f46e5, #7c3aed);
  border: none;
  color: #fff;
  height: 36px;
}
.play-btn .el-icon[data-v-017f4d69] {
  color: #fff;
  font-size: 18px;
}
.btn-content[data-v-017f4d69] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-text[data-v-017f4d69] {
  font-weight: 500;
}
.content-layout[data-v-017f4d69] {
  flex: 1;
  height: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
}
.content-layout[data-v-017f4d69]::-webkit-scrollbar {
  width: 6px;
}
.content-layout[data-v-017f4d69]::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}
.content-layout[data-v-017f4d69]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}
.content-layout[data-v-017f4d69]::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}
.images-preview-wrapper[data-v-017f4d69] {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #242424;
  border-radius: 8px;
  overflow: hidden;
  padding: 20px;
  flex: 1;
  min-height: 450px;
  flex-shrink: 0;
}
.images-preview[data-v-017f4d69] {
  width: 100%;
  height: 100%;
  background: #242424;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.preview-container[data-v-017f4d69] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.images-grid[data-v-017f4d69] {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
  overflow-y: auto;
  align-content: start;
  justify-items: center;
}
.image-item[data-v-017f4d69] {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  aspect-ratio: 1;
  max-width: 100%;
  max-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-image[data-v-017f4d69] {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 500px;
  -o-object-fit: contain;
     object-fit: contain;
  background: #000;
  display: block;
  margin: 0 auto;
}
.image-overlay[data-v-017f4d69] {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.image-item:hover .image-overlay[data-v-017f4d69] {
  opacity: 1;
}
.download-btn-small[data-v-017f4d69] {
  background: rgba(79, 70, 229, 0.9);
  border: none;
}
.preview-info[data-v-017f4d69] {
  padding: 16px;
  background: #1a1a1a;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.preview-header[data-v-017f4d69] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.preview-title[data-v-017f4d69] {
  font-size: 16px;
  font-weight: 500;
  flex-shrink: 0;
}
.download-all-btn[data-v-017f4d69] {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  flex-shrink: 0;
}
.full-screen-state[data-v-017f4d69] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.generating-state[data-v-017f4d69],
.preview-placeholder[data-v-017f4d69] {
  gap: 16px;
  color: rgba(255, 255, 255, 0.5);
}
.placeholder-icon[data-v-017f4d69],
.generating-animation .el-icon[data-v-017f4d69] {
  font-size: 48px;
  color: rgba(255, 255, 255, 0.2);
}
.generating-animation .el-icon.rotating[data-v-017f4d69] {
  color: #6366f1;
  animation: rotate-017f4d69 2s linear infinite;
}
@keyframes rotate-017f4d69 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
.placeholder-text[data-v-017f4d69],
.generating-tip[data-v-017f4d69] {
  font-size: 14px;
}
.generating-text[data-v-017f4d69] {
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}
.controls-wrapper[data-v-017f4d69] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  min-height: 380px;
  flex-shrink: 0;
}
.control-panel[data-v-017f4d69] {
  background: #242424;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
}
.section-header[data-v-017f4d69] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-title[data-v-017f4d69] {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.upload-tip[data-v-017f4d69] {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: -12px;
}
.prompt-panel .prompt-section[data-v-017f4d69] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.prompt-panel .el-textarea[data-v-017f4d69] {
  flex: 1;
}
[data-v-017f4d69] .prompt-panel .el-textarea__inner {
  height: 100% !important;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
  color: #fff;
  font-size: 14px;
}
[data-v-017f4d69] .el-textarea .el-input__count {
  background: none;
}
.image-panel .image-section[data-v-017f4d69] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.images-container[data-v-017f4d69] {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.image-thumbnail[data-v-017f4d69] {
  width: 120px;
  height: 120px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.thumbnail-img[data-v-017f4d69] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.remove-btn[data-v-017f4d69] {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.6) !important;
  border: none !important;
}
.remove-btn .el-icon[data-v-017f4d69] {
  color: #fff;
}
.image-uploader .empty-state[data-v-017f4d69] {
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1a1a1a;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.image-uploader .empty-state[data-v-017f4d69]:hover {
  background: #2a2a2a;
  border-color: #4f46e5;
}
.empty-icon[data-v-017f4d69] {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.5) !important;
}
.empty-text[data-v-017f4d69] {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}
.submit-section[data-v-017f4d69] {
  margin-top: auto;
}
.submit-btn[data-v-017f4d69] {
  width: 100%;
  height: 48px;
  background: linear-gradient(45deg, #4f46e5, #7c3aed);
  border: none;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
}
.submit-tc[data-v-017f4d69] {
  background: linear-gradient(45deg, #4f46e5, #7c3aed);
  border: none;
}
[data-v-017f4d69] .confirm-dialog {
  background: #1a1a1a !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.confirm-content[data-v-017f4d69] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0 12px;
}
.confirm-icon[data-v-017f4d69] {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.confirm-icon .el-icon[data-v-017f4d69] {
  font-size: 32px;
  color: #4f46e5;
}
.confirm-text .title[data-v-017f4d69] {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
}
.requirements-list[data-v-017f4d69] {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  padding: 16px;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.requirement-item[data-v-017f4d69] {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}
.requirement-item .el-icon[data-v-017f4d69] {
  color: #10b981;
  font-size: 16px;
}
.community-rule[data-v-017f4d69] {
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0 0 12px;
}
.rule-link[data-v-017f4d69] {
  color: #4f46e5;
  cursor: pointer;
  margin-left: 4px;
}
.confirm-tip[data-v-017f4d69] {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  margin: 0 0 12px;
}
[data-v-017f4d69] .confirm-dialog .el-dialog__footer {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
[data-v-017f4d69] .confirm-dialog .el-button--primary {
  background: #4f46e5;
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/create/components/FaceSwap/FaceSwap.vue?vue&type=style&index=0&id=19607c02&scoped=true&lang=css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.face-swap[data-v-19607c02] {
  min-height: 100vh;
  background: #1a1a1a;
  color: #fff;
  display: flex;
  flex-direction: column;
}
.header[data-v-19607c02] {
  height: 60px;
  background: #242424;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.left-section[data-v-19607c02] {
  display: flex;
  align-items: center;
  gap: 20px;
}
.right-section[data-v-19607c02] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.back-button[data-v-19607c02] {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #fff;
  gap: 8px;
}
.back-button[data-v-19607c02]:hover {
  opacity: 0.8;
}
.icon[data-v-19607c02] {
  color: #ffd700;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
}
.play-btn[data-v-19607c02] {
  background: linear-gradient(45deg, #4F46E5, #7C3AED);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(79, 70, 229, 0.3);
}
.play-btn[data-v-19607c02]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
  background: linear-gradient(45deg, #4338CA, #6D28D9);
}
.btn-content[data-v-19607c02] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.play-btn .el-icon[data-v-19607c02] {
  font-size: 18px;
  margin-right: 2px;
  color: #fff;
}
.btn-text[data-v-19607c02] {
  font-size: 14px;
  font-weight: 500;
}
.content[data-v-19607c02] {
  flex: 1;
  display: flex;
  gap: 20px;
  padding: 20px;
  height: calc(100vh - 60px);
}
.control-panel[data-v-19607c02] {
  flex: 1;
  background: #242424;
  border-radius: 8px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
}
.section-header[data-v-19607c02] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-title[data-v-19607c02] {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.upload-section[data-v-19607c02] {
  display: flex;
  gap: 8px;
}
.action-btn[data-v-19607c02] {
  min-width: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: all 0.3s ease;
}
.action-btn[data-v-19607c02]:hover {
  background: #242424;
  border-color: rgba(255, 255, 255, 0.2);
}
.action-btn .el-icon[data-v-19607c02] {
  font-size: 14px;
}
.upload-hidden[data-v-19607c02] {
  display: block;
  width: 100%;
}
.upload-hidden[data-v-19607c02] .el-upload {
  display: block;
  width: 100%;
}
.upload-tip[data-v-19607c02] {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}
.image-section[data-v-19607c02], .video-section[data-v-19607c02] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.image-preview-box[data-v-19607c02], .video-preview-box[data-v-19607c02] {
  position: relative;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
}
.image-preview-box[data-v-19607c02] {
  padding: 16px;
}
.video-preview-box[data-v-19607c02] {
  padding: 16px;
}
.preview-container[data-v-19607c02] {
  width: 100%;
}
.preview-image[data-v-19607c02] {
  width: 100%;
  max-height: 200px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
}
.preview-video[data-v-19607c02] {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 4px;
}
.image-info[data-v-19607c02], .video-info[data-v-19607c02] {
  padding: 12px 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.image-name[data-v-19607c02], .video-name[data-v-19607c02] {
  font-size: 14px;
  color: #fff;
}
.remove-btn[data-v-19607c02] {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 4px;
  color: #fff;
}
.remove-btn[data-v-19607c02]:hover {
  background: rgba(0, 0, 0, 0.7);
}
.empty-state[data-v-19607c02] {
  height: 120px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1a1a1a;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.empty-state[data-v-19607c02]:hover {
  background: #242424;
  border-color: rgba(255, 255, 255, 0.3);
}
.empty-icon[data-v-19607c02] {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 32px;
}
.empty-text[data-v-19607c02] {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}
.submit-section[data-v-19607c02] {
  margin-top: auto;
}
.submit-section .cost-tip[data-v-19607c02] {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin-bottom: 12px;
}
.submit-btn[data-v-19607c02] {
  width: 100%;
  height: 48px;
  background: linear-gradient(45deg, #4F46E5, #7C3AED);
  border: none;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.submit-btn[data-v-19607c02]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
  background: linear-gradient(45deg, #4338CA, #6D28D9);
}
.submit-btn .el-icon[data-v-19607c02] {
  font-size: 18px;
  margin-right: 8px;
}
.disclaimer-text[data-v-19607c02] {
  margin-top: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 1.5;
}
.video-preview[data-v-19607c02] {
  flex: 2.5;
  background: #242424;
  border-radius: 8px;
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.preview-container[data-v-19607c02] {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.preview-video[data-v-19607c02] {
  flex: 1;
  width: 100%;
  border-radius: 8px;
  background: #000;
  max-height: 480px;
  -o-object-fit: contain;
     object-fit: contain;
}
.preview-info[data-v-19607c02] {
  padding: 16px;
  background: #1a1a1a;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.preview-header[data-v-19607c02] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.preview-title[data-v-19607c02] {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 8px;
}
.preview-status[data-v-19607c02] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.preview-placeholder[data-v-19607c02] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.5);
}
.placeholder-icon[data-v-19607c02] {
  font-size: 48px;
  color: rgba(255, 255, 255, 0.2);
}
.placeholder-text[data-v-19607c02] {
  font-size: 14px;
}
.generating-state[data-v-19607c02] {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.9);
}
.generating-animation[data-v-19607c02] {
  margin-bottom: 8px;
}
.rotating[data-v-19607c02] {
  font-size: 48px;
  color: #6366f1;
  animation: rotate-19607c02 2s linear infinite;
}
.generating-text[data-v-19607c02] {
  font-size: 18px;
  font-weight: 500;
}
.generating-tip[data-v-19607c02] {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}
@keyframes rotate-19607c02 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
.download-btn[data-v-19607c02] {
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.download-btn[data-v-19607c02]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}
.download-btn .el-icon[data-v-19607c02] {
  font-size: 16px;
}
.project-title[data-v-19607c02] {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.project-title[data-v-19607c02]:hover {
  background: rgba(255, 255, 255, 0.1);
}
.project-title h2[data-v-19607c02] {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}
.project-title-edit[data-v-19607c02] {
  width: 300px;
}
.project-title-edit[data-v-19607c02] .el-input__wrapper {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
.project-title-edit[data-v-19607c02] .el-input__inner {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  height: 40px;
}
.project-title-edit[data-v-19607c02] .el-input__wrapper.is-focus {
  box-shadow: none;
  border-color: #4F46E5;
}

/* 确认弹窗样式 */
[data-v-19607c02] .confirm-dialog {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px !important;
.el-dialog__header {
& {
    padding: 20px;
    margin-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
.el-dialog__title {
      color: #fff;
      font-size: 18px;
      font-weight: 500;
}
}
.el-dialog__body {
    padding: 30px 20px;
    background: #1a1a1a;
}
}
.confirm-content[data-v-19607c02] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0 12px;
}
.confirm-icon {
&[data-v-19607c02] {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  }
.el-icon[data-v-19607c02] {
    font-size: 32px;
    color: #4F46E5;
}
}
.confirm-text {
&[data-v-19607c02] {
  width: 100%;
  }
.title[data-v-19607c02] {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
    text-align: center;
}
}
.requirements-list[data-v-19607c02] {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  padding: 16px;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.requirement-item {
&[data-v-19607c02] {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.5;
  }
.el-icon[data-v-19607c02] {
    color: #10B981;
    font-size: 16px;
    flex-shrink: 0;
}
}
.community-rule[data-v-19607c02] {
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0 0 12px;
}
.rule-link[data-v-19607c02] {
  color: #4f46e5;
  cursor: pointer;
  margin-left: 4px;
}
.confirm-tip[data-v-19607c02] {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}
[data-v-19607c02] .confirm-dialog .dialog-footer {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
.el-button {
& {
    min-width: 100px;
    height: 36px;
    font-size: 14px;
    border-radius: 8px;
    }
&.el-button--default {
& {
      background: rgba(255, 255, 255, 0.1);
      border: none;
      color: rgba(255, 255, 255, 0.8);
      }
&:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
}
}
&.el-button--primary {
& {
      background: #4F46E5;
      border: none;
      }
&:hover {
        background: #4338CA;
}
}
}
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!../../../node_modules/.pnpm/less-loader@12.2.0_less@4.2.2_webpack@5.98.0/node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/Feedback.vue?vue&type=style&index=0&id=7e1a7d96&lang=less&scoped=true ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.feedback-wrapper[data-v-7e1a7d96] {
  position: relative;
}
.feedback-wrapper[data-v-7e1a7d96]::after {
  content: '意见反馈';
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.feedback-wrapper[data-v-7e1a7d96]:hover::after {
  opacity: 1;
}
.feedback-button[data-v-7e1a7d96] {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 1000;
}
.feedback-button .feedback-trigger[data-v-7e1a7d96] {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #4c7cea;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.feedback-button .feedback-trigger .feedback-icon[data-v-7e1a7d96] {
  color: #fff;
  font-size: 24px;
}
.feedback-button .feedback-trigger[data-v-7e1a7d96]:hover {
  background-color: #3a6ad8;
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.feedback-content[data-v-7e1a7d96] {
  max-height: 80vh;
  position: relative;
  overflow-y: auto;
}
.feedback-content header[data-v-7e1a7d96] {
  display: flex;
  justify-content: space-between;
  margin: 0 10px;
}
.feedback-content section[data-v-7e1a7d96] .el-textarea__inner {
  resize: none;
}
.feedback-content section[data-v-7e1a7d96] .el-upload--picture-card {
  height: 80px !important;
  width: 80px !important;
}
.feedback-content section[data-v-7e1a7d96] .el-upload--picture-card .upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.feedback-content section[data-v-7e1a7d96] .el-upload--picture-card .upload-content .upload-icon {
  font-size: 20px;
  color: #8c939d;
  margin-bottom: 4px;
}
.feedback-content section[data-v-7e1a7d96] .el-upload--picture-card .upload-content .upload-text {
  font-size: 12px;
  color: #8c939d;
}
.feedback-content section[data-v-7e1a7d96] .el-upload-list--picture-card {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  height: 80px;
  overflow: hidden;
}
.feedback-content section[data-v-7e1a7d96] .el-upload-list--picture-card .el-upload-list__item {
  height: 80px !important;
  width: 80px !important;
  margin: 0 !important;
}
.feedback-content section .card-list[data-v-7e1a7d96] {
  display: flex;
  gap: 20px;
}
.feedback-content section .card-list .card-item[data-v-7e1a7d96] {
  padding: 0 20px;
  border-radius: 5px;
  background-color: #f2f3f5;
  border: 1px solid #dfdfdf;
  cursor: pointer;
  width: 100%;
  height: 35px;
  line-height: 35px;
  font-size: 12px;
}
.feedback-content section .card-list .card-item.active[data-v-7e1a7d96] {
  color: #fff;
  background-color: #4c7cee;
}
[data-v-7e1a7d96] .el-upload-list--picture-card .el-upload-list__item-actions span + span {
  margin-left: 0.6rem !important;
}
[data-v-7e1a7d96] .el-upload.el-upload--picture-card,[data-v-7e1a7d96] li.el-upload-list__item {
  width: 70px !important;
  height: 70px !important;
}
.preview-image[data-v-7e1a7d96] {
  display: flex;
  justify-content: center;
  align-items: center;
}
.preview-image img[data-v-7e1a7d96] {
  max-width: 100%;
  max-height: 60vh;
  -o-object-fit: contain;
     object-fit: contain;
}
.btn-row[data-v-7e1a7d96] {
  margin: 16px 8px 0;
  text-align: end;
}
.upload-content[data-v-7e1a7d96] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.upload-content.upload-disabled[data-v-7e1a7d96] {
  cursor: not-allowed;
  opacity: 0.6;
}
.upload-content.upload-disabled .upload-icon[data-v-7e1a7d96] {
  color: #999;
}
.upload-content.upload-disabled .upload-text[data-v-7e1a7d96] {
  color: #999;
  font-size: 12px;
}
.upload-content .upload-icon[data-v-7e1a7d96] {
  font-size: 20px;
  color: #8c939d;
  margin-bottom: 4px;
}
.upload-content .upload-text[data-v-7e1a7d96] {
  font-size: 12px;
  color: #8c939d;
}
[data-v-7e1a7d96] .el-upload--picture-card.is-disabled {
  cursor: not-allowed;
  border-color: #dcdfe6;
}
[data-v-7e1a7d96] .el-upload--picture-card.is-disabled:hover {
  border-color: #dcdfe6;
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/player/CompactAudioPlayer.vue?vue&type=style&index=0&id=814dcf3c&scoped=true&lang=css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.compact-audio-player[data-v-814dcf3c] {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
}
.compact-audio-player.disabled[data-v-814dcf3c] {
  opacity: 0.5;
  pointer-events: none;
}
.play-button[data-v-814dcf3c] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}
.play-button[data-v-814dcf3c]:hover {
  background: rgba(255, 255, 255, 0.15);
}
.play-button[data-v-814dcf3c]:disabled {
  cursor: not-allowed;
}
.loading-spinner[data-v-814dcf3c] {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin-814dcf3c 0.8s linear infinite;
}
.info-section[data-v-814dcf3c] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.time-text[data-v-814dcf3c] {
  color: rgba(255, 255, 255, 0.7);
}
.progress-bar[data-v-814dcf3c] {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.progress-bar.seekable[data-v-814dcf3c] {
  cursor: pointer;
}
.progress[data-v-814dcf3c] {
  height: 100%;
  background: #4f46e5;
  transition: width 0.1s linear;
}
@keyframes spin-814dcf3c {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/create/components/TextToVideo/components/MyVoiceClone.vue?vue&type=style&index=0&id=7808a184&scoped=true&lang=css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.material-list[data-v-7808a184] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  min-height: 200px;
}

/* 自定义滚动条样式 */
.material-list[data-v-7808a184]::-webkit-scrollbar {
  width: 6px;
}
.material-list[data-v-7808a184]::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}
.material-list[data-v-7808a184]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}
.material-list[data-v-7808a184]::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
.material-item[data-v-7808a184] {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.material-item[data-v-7808a184]:hover {
  background: #242424;
  border-color: rgba(255, 255, 255, 0.2);
}
.material-item.active[data-v-7808a184] {
  background: #242424;
  border-color: #4f46e5;
}
.voice-avatar[data-v-7808a184] {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.material-info[data-v-7808a184] {
  flex: 1;
  min-width: 0;
}
.material-name[data-v-7808a184] {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.material-desc[data-v-7808a184] {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin-bottom: 8px;
}
.play-controls[data-v-7808a184] {
  margin-top: 8px;
}
.audio-player-wrapper[data-v-7808a184] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.progress-bar-container[data-v-7808a184] {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
}
.progress-bar[data-v-7808a184] {
  height: 100%;
  background: #4f46e5;
  transition: width 0.1s linear;
}
.player-controls[data-v-7808a184] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.time-display[data-v-7808a184] {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-family: monospace;
}
.selected-indicator[data-v-7808a184] {
  position: absolute;
  right: 16px;
  top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4f46e5;
  font-size: 20px;
}
.loading-spinner[data-v-7808a184] {
  width: 16px;
  height: 16px;
  border: 2px solid #4f46e5;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin-7808a184 1s linear infinite;
}
@keyframes spin-7808a184 {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}

/* 空状态和加载状态 */
.state-container[data-v-7808a184] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: rgba(255, 255, 255, 0.4);
}
.loading-spinner[data-v-7808a184] {
  width: 30px;
  height: 30px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin-7808a184 1s linear infinite;
  margin-bottom: 16px;
}
.empty-icon[data-v-7808a184] {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}
.state-text[data-v-7808a184] {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}
.state-subtext[data-v-7808a184] {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

/* 分页组件容器 */
.pagination-wrapper[data-v-7808a184] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 0 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 16px;
  flex-shrink: 0;
}

/* 覆盖分页组件样式以适配暗黑弹窗 */
.pagination-wrapper[data-v-7808a184] .page-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}
.pagination-wrapper[data-v-7808a184] .page-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.pagination-wrapper[data-v-7808a184] .page-btn.active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}
.pagination-wrapper[data-v-7808a184] .page-btn:disabled {
  background: transparent;
  opacity: 0.3;
}
.pagination-wrapper[data-v-7808a184] .ellipsis {
  color: rgba(255, 255, 255, 0.3);
}
.dialog-footer[data-v-7808a184] {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* 覆盖 Element Plus 组件样式 */
[data-v-7808a184] .el-dialog {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-v-7808a184] .el-dialog__header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 20px 16px;
}
[data-v-7808a184] .el-dialog__title {
  color: #fff;
}
[data-v-7808a184] .el-dialog__body {
  background: transparent;
  padding: 20px;
}
[data-v-7808a184] .el-dialog__headerbtn {
  color: rgba(255, 255, 255, 0.6);
}
[data-v-7808a184] .el-dialog__headerbtn:hover {
  color: #fff;
}
[data-v-7808a184] .el-button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
[data-v-7808a184] .el-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
[data-v-7808a184] .el-button--primary {
  background: #6366f1;
  border: none;
  color: #fff;
}
[data-v-7808a184] .el-button--primary:hover {
  background: #4f46e5;
}
[data-v-7808a184] .el-button.is-circle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
[data-v-7808a184] .el-button.is-circle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/create/components/TextToVideo/AudioSynthesisDialog.vue?vue&type=style&index=0&id=59dafbbc&scoped=true&lang=css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.dialog-content[data-v-59dafbbc] {
  padding: 0;
}
.control-panel[data-v-59dafbbc] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}
.panel-row[data-v-59dafbbc] {
  display: flex;
  gap: 24px;
  min-height: 140px;
}
.script-input[data-v-59dafbbc] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  background: #242424;
  border-radius: 12px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.script-header[data-v-59dafbbc] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.input-label[data-v-59dafbbc] {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.script-actions[data-v-59dafbbc] {
  display: flex;
  gap: 8px;
}
.action-btn[data-v-59dafbbc] {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: all 0.3s ease;
}
.action-btn[data-v-59dafbbc]:hover {
  background: #242424;
  border-color: rgba(255, 255, 255, 0.2);
}
.word-count[data-v-59dafbbc] {
  text-align: right;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}
.voice-selection[data-v-59dafbbc] {
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 400px;
  background: #242424;
  border-radius: 12px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  height: 450px;
  overflow: hidden;
  position: relative;
}
.section-header[data-v-59dafbbc] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-bottom: 16px;
}
.section-title[data-v-59dafbbc] {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.voice-preview-box[data-v-59dafbbc] {
  position: relative;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  padding: 12px;
}
.preview-container[data-v-59dafbbc] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.voice-info[data-v-59dafbbc] {
  flex: 1;
  min-width: 0;
}
.voice-name[data-v-59dafbbc] {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.voice-desc[data-v-59dafbbc] {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remove-btn[data-v-59dafbbc] {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 4px;
  color: #fff;
}
.remove-btn[data-v-59dafbbc]:hover {
  background: rgba(0, 0, 0, 0.7);
}
.voice-params[data-v-59dafbbc] {
  margin-top: 12px;
  padding: 16px;
  background: #1a1a1a;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.param-item[data-v-59dafbbc] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.param-item[data-v-59dafbbc]:last-child {
  margin-bottom: 0;
}
.param-label[data-v-59dafbbc] {
  width: 40px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 500;
}
.param-value[data-v-59dafbbc] {
  min-width: 40px;
  text-align: right;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 500;
}
.voice-options[data-v-59dafbbc] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 8px;
  max-height: 300px;
  overflow-y: auto;
}

/* 自定义滚动条样式 */
.voice-options[data-v-59dafbbc]::-webkit-scrollbar {
  width: 6px;
}
.voice-options[data-v-59dafbbc]::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}
.voice-options[data-v-59dafbbc]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}
.voice-options[data-v-59dafbbc]::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
.voice-option[data-v-59dafbbc] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.voice-option[data-v-59dafbbc]:hover {
  background: #242424;
  border-color: rgba(255, 255, 255, 0.2);
}
.voice-option.active[data-v-59dafbbc] {
  background: #242424;
  border-color: #4f46e5;
}
.voice-avatar[data-v-59dafbbc] {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.voice-library-select[data-v-59dafbbc] {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: #1a1a1a;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.voice-library-select[data-v-59dafbbc]:hover {
  background: #242424;
  border-color: #4f46e5;
}
.library-icon[data-v-59dafbbc],
.select-text[data-v-59dafbbc] {
  color: rgba(255, 255, 255, 0.5);
}
.voice-library-select:hover .library-icon[data-v-59dafbbc],
.voice-library-select:hover .select-text[data-v-59dafbbc] {
  color: #4f46e5;
}
.submit-section[data-v-59dafbbc] {
  margin-top: auto;
}
.generated-audio[data-v-59dafbbc] {
  margin-bottom: 20px;
}
.audio-preview[data-v-59dafbbc] {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
}
.audio-info[data-v-59dafbbc] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.file-info[data-v-59dafbbc] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.audio-icon[data-v-59dafbbc] {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
}
.audio-details[data-v-59dafbbc] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.audio-name[data-v-59dafbbc] {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
.audio-meta[data-v-59dafbbc] {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}
.audio-actions[data-v-59dafbbc] {
  display: flex;
  gap: 8px;
}
.download-btn[data-v-59dafbbc] {
  padding: 8px;
  height: auto;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
}
.download-btn[data-v-59dafbbc]:hover {
  color: #409eff;
  background: rgba(64, 158, 255, 0.1);
}
.audio-player[data-v-59dafbbc] {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #242424;
  border-radius: 8px;
  padding: 8px 12px;
}
.play-icon[data-v-59dafbbc] {
  font-size: 20px;
  color: #4f46e5;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 6px;
  border-radius: 50%;
}
.play-icon[data-v-59dafbbc]:hover {
  background: rgba(79, 70, 229, 0.1);
}
.progress-bar[data-v-59dafbbc] {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.progress[data-v-59dafbbc] {
  height: 100%;
  background: #4f46e5;
  border-radius: 2px;
}
.time[data-v-59dafbbc] {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  min-width: 45px;
}
.button-group[data-v-59dafbbc] {
  display: flex;
  gap: 16px;
}
.submit-btn[data-v-59dafbbc] {
  width: 100%;
  height: 42px;
  background: linear-gradient(45deg, #4f46e5, #7c3aed);
  border: none;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.submit-btn[data-v-59dafbbc]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
  background: linear-gradient(45deg, #4338ca, #6d28d9);
}
.submit-btn[data-v-59dafbbc]:active {
  transform: translateY(1px);
}
.disclaimer-text[data-v-59dafbbc] {
  margin-top: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 1.5;
}


/* 覆盖 Element Plus 组件的白色背景 */
[data-v-59dafbbc] .el-dialog {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-v-59dafbbc] .el-dialog__header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 20px 16px;
}
[data-v-59dafbbc] .el-dialog__title {
  color: #fff;
}
[data-v-59dafbbc] .el-dialog__body {
  background: transparent;
  padding: 0;
}
[data-v-59dafbbc] .el-dialog__headerbtn {
  color: rgba(255, 255, 255, 0.6);
}
[data-v-59dafbbc] .el-dialog__headerbtn:hover {
  color: #fff;
}
[data-v-59dafbbc] .el-dialog__close {
  color: rgba(255, 255, 255, 0.6);
}
[data-v-59dafbbc] .el-dialog__close:hover {
  color: #fff;
}

/* el-input textarea 样式 */
[data-v-59dafbbc] .el-textarea__inner {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  box-shadow: none;
}
[data-v-59dafbbc] .el-textarea__inner:focus {
  border-color: #4f46e5 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 0 0 1px #4f46e5 !important;
}
[data-v-59dafbbc] .el-textarea__inner::-moz-placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}
[data-v-59dafbbc] .el-textarea__inner::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* el-input 通用样式 */
[data-v-59dafbbc] .el-input__inner {
  background: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  color: #fff !important;
}
[data-v-59dafbbc] .el-input__inner:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
}
[data-v-59dafbbc] .el-input__inner:focus {
  border-color: #4f46e5 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 0 0 1px #4f46e5 !important;
}
[data-v-59dafbbc] .el-input__inner::-moz-placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}
[data-v-59dafbbc] .el-input__inner::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}
[data-v-59dafbbc] .el-input__wrapper {
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
}
[data-v-59dafbbc] .el-input__wrapper:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
}
[data-v-59dafbbc] .el-input.is-focus .el-input__wrapper {
  box-shadow: 0 0 0 1px #4f46e5 inset !important;
}

/* el-select 样式 */
[data-v-59dafbbc] .el-select {
  width: 100%;
}
[data-v-59dafbbc] .el-select .el-input__inner {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}
[data-v-59dafbbc] .el-select .el-input__inner:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
}
[data-v-59dafbbc] .el-select .el-input__inner:focus {
  border-color: #4f46e5 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 0 0 1px #4f46e5 !important;
}
[data-v-59dafbbc] .el-select .el-input__wrapper {
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
}
[data-v-59dafbbc] .el-select .el-input__wrapper:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
}
[data-v-59dafbbc] .el-select.is-focus .el-input__wrapper {
  box-shadow: 0 0 0 1px #4f46e5 inset !important;
}
[data-v-59dafbbc] .el-select .el-input__suffix {
  color: rgba(255, 255, 255, 0.6);
}

/* el-select dropdown 样式 */
[data-v-59dafbbc] .el-select-dropdown {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-v-59dafbbc] .el-select-dropdown__item {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
}
[data-v-59dafbbc] .el-select-dropdown__item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
[data-v-59dafbbc] .el-select-dropdown__item.selected {
  background: rgba(79, 70, 229, 0.2);
  color: #4f46e5;
}

/* el-slider 样式 */
[data-v-59dafbbc] .el-slider {
  flex: 1;
}
[data-v-59dafbbc] .el-slider__runway {
  background: rgba(255, 255, 255, 0.1);
}
[data-v-59dafbbc] .el-slider__bar {
  background: #4f46e5;
}
[data-v-59dafbbc] .el-slider__button {
  background: #4f46e5;
  border: 2px solid #4f46e5;
}
[data-v-59dafbbc] .el-slider__button:hover {
  background: #4338ca;
  border-color: #4338ca;
}

/* el-button 样式覆盖 */
[data-v-59dafbbc] .el-button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
[data-v-59dafbbc] .el-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
[data-v-59dafbbc] .el-button--primary {
  background: linear-gradient(45deg, #4f46e5, #7c3aed);
  border: none;
  color: #fff;
}
[data-v-59dafbbc] .el-button--primary:hover {
  background: linear-gradient(45deg, #4338ca, #6d28d9);
}
[data-v-59dafbbc] .el-button.is-circle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
[data-v-59dafbbc] .el-button.is-circle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* el-upload 样式 */
[data-v-59dafbbc] .el-upload {
  display: inline-block;
}
[data-v-59dafbbc] .el-upload-list {
  display: none;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/create/components/VoiceClone/VoiceCloneDialog.vue?vue&type=style&index=0&id=ad3678f2&scoped=true&lang=css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.dialog-content[data-v-ad3678f2] {
  padding: 0;
}
.control-panel[data-v-ad3678f2] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}
.panel-row[data-v-ad3678f2] {
  display: flex;
  gap: 24px;
  min-height: 140px;
}
.script-input[data-v-ad3678f2] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  background: #242424;
  border-radius: 12px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.script-header[data-v-ad3678f2] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.input-label[data-v-ad3678f2] {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.script-actions[data-v-ad3678f2] {
  display: flex;
  gap: 8px;
}
.action-btn[data-v-ad3678f2] {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: all 0.3s ease;
}
.action-btn[data-v-ad3678f2]:hover {
  background: #242424;
  border-color: rgba(255, 255, 255, 0.2);
}
.upload-placeholder[data-v-ad3678f2] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-area[data-v-ad3678f2] {
  width: 100%;
}
.upload-content[data-v-ad3678f2] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px;
}
.upload-icon[data-v-ad3678f2] {
  font-size: 48px;
  color: rgba(255, 255, 255, 0.3);
}
.upload-text[data-v-ad3678f2] {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}
.upload-text span[data-v-ad3678f2] {
  display: block;
  font-size: 16px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.8);
}
.upload-text p[data-v-ad3678f2] {
  margin: 4px 0;
  font-size: 14px;
}
.voice-selection[data-v-ad3678f2] {
  width: 400px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 400px;
  background: #242424;
  border-radius: 12px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  height: 450px;
  overflow: hidden;
  position: relative;
}
.section-header[data-v-ad3678f2] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-bottom: 16px;
}
.section-title[data-v-ad3678f2] {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.audio-name-input[data-v-ad3678f2] {
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 16px;
  background: #242424;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.audio-name-input .section-title[data-v-ad3678f2] {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 12px;
}
.tips-section[data-v-ad3678f2] {
  margin-top: 20px;
  padding: 0 20px;
  border-radius: 8px;
}
.tips-row[data-v-ad3678f2] {
  display: flex;
  justify-content: center;
  gap: 80px;
  padding: 12px 0;
  border: none;
}
.tips-row[data-v-ad3678f2]:last-child {
  border-bottom: none;
}
.tip-item[data-v-ad3678f2] {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  min-width: 100px;
}
.tip-icon[data-v-ad3678f2] {
  font-size: 16px;
}
.tip-icon.success[data-v-ad3678f2] {
  color: #67C23A;
}
.tip-icon.error[data-v-ad3678f2] {
  color: #F56C6C;
}
.submit-section[data-v-ad3678f2] {
  margin-top: auto;
}
.button-group[data-v-ad3678f2] {
  display: flex;
  gap: 16px;
}
.submit-btn[data-v-ad3678f2] {
  width: 100%;
  height: 42px;
  background: linear-gradient(45deg, #4f46e5, #7c3aed);
  border: none;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.submit-btn[data-v-ad3678f2]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
  background: linear-gradient(45deg, #4338ca, #6d28d9);
}
.submit-btn[data-v-ad3678f2]:active {
  transform: translateY(1px);
}
.disclaimer-text[data-v-ad3678f2] {
  margin-top: 12px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 1.5;
}
[data-v-ad3678f2] .el-upload-dragger {
  background-color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-v-ad3678f2] .el-dialog__title {
  color: #fff;
}
[data-v-ad3678f2] .el-dialog {
  background: #1a1a1a;
}
[data-v-ad3678f2] .el-input__wrapper {
  background-color: #1a1a1a;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
[data-v-ad3678f2] .el-input__count {
  background-color: #242424;
  border: none;
}
[data-v-ad3678f2] .el-input .el-input__count .el-input__count-inner {
  background-color: #242424;
  border: none;
}
[data-v-ad3678f2] .el-input__inner {
  color: rgba(255, 255, 255, 0.8);
}
[data-v-ad3678f2] .el-input__prefix {
  color: rgba(255, 255, 255, 0.5);
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/create/index.vue?vue&type=style&index=0&id=c92d10ce&scoped=true&lang=css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************/

/* ================= 全局容器与滚动条 ================= */
.create-home[data-v-c92d10ce] {
  height: 100%;
  box-sizing: border-box;
  padding: 40px;
  overflow-y: auto;
}

/* 滚动条样式 */
.create-home[data-v-c92d10ce]::-webkit-scrollbar {
  width: 6px;
}
.create-home[data-v-c92d10ce]::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}
.create-home[data-v-c92d10ce]::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}
.create-home[data-v-c92d10ce]::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
.main-container[data-v-c92d10ce] {
  /* max-width: 1200px; */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* ================= 标题样式 ================= */
.section-title[data-v-c92d10ce] {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title .el-icon[data-v-c92d10ce] {
  font-size: 22px;
  color: #4f46e5; /* 标题图标主题色 */
}

/* ================= 卡片布局系统 ================= */
.cards-row[data-v-c92d10ce] {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 快速创作区域：三列 */
  gap: 24px;
}
.tools-row[data-v-c92d10ce] {
  grid-template-columns: repeat(4, 1fr); /* 创意工具区域：四列 */
}

/* ================= 卡片核心样式 ================= */
.card-item[data-v-c92d10ce] {
  position: relative;
  /* 背景与玻璃拟态 */
  background: rgba(30, 30, 35, 0.4); 
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  
  /* 边框与圆角 */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  
  padding: 30px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  
  /* 关键设置：隐藏溢出的背景图，并建立层叠上下文 */
  overflow: hidden;
  z-index: 1;
}

/* Hover 整体交互 */
.card-item[data-v-c92d10ce]:hover {
  transform: translateY(-5px);
  border-color: rgba(79, 70, 229, 0.5); /* 悬停时边框变紫 */
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

/* ================= SVG 背景图样式 (新增) ================= */
.card-bg-img[data-v-c92d10ce] {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  /* 确保图片覆盖整个卡片，视情况也可以用 contain */
  -o-object-fit: cover;
     object-fit: cover; 
  /* 初始透明度较低，作为纹理存在 */
  opacity: 0.3;
  transition: all 0.5s ease;
  /* 放在最底层 */
  z-index: 0;
  /* 关键：防止图片遮挡鼠标点击事件 */
  pointer-events: none;
}

/* Hover 时背景图动效 */
.card-item:hover .card-bg-img[data-v-c92d10ce] {
  transform: scale(1.1); /* 放大一点 */
  opacity: 0.75; /* 变亮一点 */
  filter: brightness(1.3);
}

/* ================= 卡片内容样式 ================= */
/* 确保所有内容都在背景图之上 (z-index > 0) */
.card-icon-bg[data-v-c92d10ce],
.card-content[data-v-c92d10ce],
.card-arrow[data-v-c92d10ce] {
  position: relative;
  z-index: 2;
}

/* 图标容器 */
.card-icon-bg[data-v-c92d10ce] {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  transition: transform 0.3s ease;
}
.card-item:hover .card-icon-bg[data-v-c92d10ce] {
  transform: scale(1.1);
}

/* 文本内容 */
.card-content h3[data-v-c92d10ce] {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px 0;
}
.card-content p[data-v-c92d10ce] {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* 右下角箭头 */
.card-arrow[data-v-c92d10ce] {
  position: absolute;
  top: 20px;
  right: 20px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 20px;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}
.card-item:hover .card-arrow[data-v-c92d10ce] {
  opacity: 1;
  transform: translateX(0);
}

/* ================= 图标颜色主题 ================= */
.card-icon-bg.purple[data-v-c92d10ce] {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
}
.card-icon-bg.blue[data-v-c92d10ce] {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}
.card-icon-bg.cyan[data-v-c92d10ce] {
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
}
.card-icon-bg.orange[data-v-c92d10ce] {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
}
.card-icon-bg.green[data-v-c92d10ce] {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}
.card-icon-bg.pink[data-v-c92d10ce] {
  background: rgba(236, 72, 153, 0.15);
  color: #f472b6;
}

/* ================= 响应式适配 ================= */
@media (max-width: 768px) {
.cards-row[data-v-c92d10ce],
  .tools-row[data-v-c92d10ce] {
    grid-template-columns: 1fr; /* 小屏幕下单列显示 */
}
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/dashboard/Projects.vue?vue&type=style&index=0&id=7777facf&scoped=true&lang=css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.projects-container[data-v-7777facf] {
  height: 100%;
  color: #fff;
}
.project-main[data-v-7777facf] {
  overflow-y: auto; 
  height: 80%;
  position: relative;
  box-sizing: border-box;
}
.main-tabs[data-v-7777facf] {
  display: flex;
  gap: 32px;
  margin-bottom: 10px;
}
.sub-tabs[data-v-7777facf] {
  display: flex;
  gap: 32px;
  margin-bottom: 10px;
}
.tab-link[data-v-7777facf] {
  padding: 12px 0;
  cursor: pointer;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}
.tab-link[data-v-7777facf]:hover {
  color: rgba(255, 255, 255, 0.9);
}
.tab-link.router-link-active[data-v-7777facf] {
  color: #fff;
  font-weight: 500;
}
.tab-link.router-link-active[data-v-7777facf]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #6366f1;
  animation: scaleIn-7777facf 0.3s ease;
}
@keyframes scaleIn-7777facf {
from { transform: scaleX(0);
}
to { transform: scaleX(1);
}
}