@charset "UTF-8";@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');/* color palette from <https://github.com/vuejs/theme> */
:root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: #f8f8f8;
  --vt-c-white-mute: #f2f2f2;

  --vt-c-black: #181818;
  --vt-c-black-soft: #222222;
  --vt-c-black-mute: #282828;

  --vt-c-indigo: #2c3e50;

  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

  --vt-c-text-light-1: var(--vt-c-indigo);
  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
  --vt-c-text-dark-1: var(--vt-c-white);
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
/* semantic color variables for this project */
:root {
  --color-background: var(--vt-c-white);
  --color-background-soft: var(--vt-c-white-soft);
  --color-background-mute: var(--vt-c-white-mute);

  --color-border: var(--vt-c-divider-light-2);
  --color-border-hover: var(--vt-c-divider-light-1);

  --color-heading: var(--vt-c-text-light-1);
  --color-text: var(--vt-c-text-light-1);

  --section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--vt-c-black);
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);

    --color-border: var(--vt-c-divider-dark-2);
    --color-border-hover: var(--vt-c-divider-dark-1);

    --color-heading: var(--vt-c-text-dark-1);
    --color-text: var(--vt-c-text-dark-2);
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
  /*margin: 0;*/
  /* font-weight: normal; */
}
body {
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background);
  transition:
    color 0.5s,
    background-color 0.5s;
  line-height: 1.6;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* .el-popper {
  max-width: 400px !important;
} */
#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  /* font-weight: normal; */
}
.padinLeft{
  padding-left: 52px;
}
.padinright{
  padding-right: 24px;
}
.articelMsg img {
  max-width: 100% !important;
  max-height: 200% !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}
.articelMsg video {
  max-width: 100% !important;
  max-height: 200% !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}
.video-player-container{
  width: unset!important;
}
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}
a,
.green {
  text-decoration: none;
  color: #00BBFF;
  transition: 0.4s;
  padding: 3px;
}
/*@media (hover: hover) {*/
/*  a:hover {*/
/*    background-color:#00BBFF;*/
/*  }*/
/*}*/
@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }

  #app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
  }
}
.tooletipBox{
  color: #d9d9d9;
}
.tooletipBox img{
  max-width: 100%!important;
}

.mochiani-icon[data-v-71507613] {
  font-family: 'AmsIcon';
}

.msicon[data-v-ab569e60] {
  color: #00FFCC;
  text-align: center;
  animation: myAnimation-ab569e60 1s infinite;
}
@keyframes myAnimation-ab569e60 {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
.custom-button[data-v-ab569e60] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7.5px 55.5px;
  border: none;
  border-radius: 51px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease, background 0.3s ease; /* 添加 transition */
}
.custom-button[data-v-ab569e60]:hover{
  transform: scale(1.02);
}
.btn-con[data-v-ab569e60] {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  border-radius: 51px;
  padding: 1px;
  /*background: linear-gradient(160deg, rgba(251, 251, 251, 0.4) 0%, rgba(48, 49, 54, 1) 35%, rgba(48, 49, 54, 1) 65%, rgba(251, 251, 251, 0.4) 100%);*/
}
.custom-button.small[data-v-ab569e60] {
  padding: 9.5px 19px;
  font-size: 14px;
}
.custom-button.flattened[data-v-ab569e60] {
  padding: 4px 19px;
  font-size: 14px;
}
.custom-button.hint[data-v-ab569e60] {
  padding: 7.5px 43px;
  font-size: 14px;
  border-radius: 51px;
}
.custom-button.height[data-v-ab569e60] {
  padding: 17.5px 43px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 51px;
}
.custom-button.task[data-v-ab569e60] {
  padding: 12.5px 70px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 51px;
}
.custom-button.code[data-v-ab569e60]{
  color: #1E2025;
  font-weight: bold;
}
.custom-button.mini[data-v-ab569e60] {
  padding: 5px 8px;
  font-size: 14px
}
.custom-button.leftmini[data-v-ab569e60] {
  padding: 9.5px 8px;
  font-size: 14px
}
.custom-button.AIdevise[data-v-ab569e60] {
  padding: 12.5px 43px;
  font-size: 14px;
  border-radius: 51px;
}
.custom-button.big[data-v-ab569e60] {
  padding: 12.5px 143px;
  font-size: 14px;
  border-radius: 51px;
}
@media (max-width: 1868px) {
.custom-button.big[data-v-ab569e60] {
    padding: 12.5px 103px;
    font-size: 14px;
    border-radius: 51px;
}
}
@media (max-width: 1468px) {
.custom-button.big[data-v-ab569e60] {
    padding: 12.5px 73px;
    font-size: 14px;
    border-radius: 51px;
}
}
.custom-button.long[data-v-ab569e60] {
  padding: 7.5px 98px;
  font-size: 14px;
  border-radius: 51px;
}
.custom-button.cold[data-v-ab569e60] {
  padding: 7.5px 34px;
  font-size: 14px;
  border-radius: 51px;
}
.custom-button.default[data-v-ab569e60] {
  -o-border-image: linear-gradient(160deg, rgba(251, 251, 251, 0.4) 1%, rgba(251, 251, 251, 0) 35%, rgba(251, 251, 251, 0) 65%, rgba(251, 251, 251, 0.4) 100%) 1;
     border-image: linear-gradient(160deg, rgba(251, 251, 251, 0.4) 1%, rgba(251, 251, 251, 0) 35%, rgba(251, 251, 251, 0) 65%, rgba(251, 251, 251, 0.4) 100%) 1;
  background: rgb(48, 49, 54);
  color: #fff;
  box-sizing: border-box;
  outline: 1px solid rgba(255, 255, 255, 0.2);

  box-shadow: inset 0px -4px 8px 0px rgba(255, 255, 255, 0.05);
}
.custom-button.default[data-v-ab569e60]:not(:disabled):not(.loading):hover {
  background:
      linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%),
      rgb(48, 49, 54);
  color: #fff;
}
.custom-button.default[data-v-ab569e60]:not(:disabled):not(.loading):active {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.2) 7%, rgba(255, 255, 255, 0.04) 100%);
  color: #fff;
}
.custom-button.primary[data-v-ab569e60] {
  border: 1px solid rgba(255, 255, 255, 0);
  background: linear-gradient(106deg, #CBFFF8 6%, #21FFF3 36%, #FFF600 98%);
  color: #000;
  border: 1px solid;
  font-weight: 500;
}

/* 悬停效果：:not(:disabled) 确保在禁用状态下不触发 */
.custom-button.primary[data-v-ab569e60]:not(:disabled):not(.loading):hover {
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), linear-gradient(106deg, #CBFFF8 6%, #21FFF3 36%, #FFF600 98%);
}

/* 点击效果：:active 伪类 */
.custom-button.primary[data-v-ab569e60]:not(:disabled):not(.loading):active {
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(106deg, #CBFFF8 6%, #21FFF3 36%, #FFF600 98%);
}

/* === END: 修改和新增的部分 === */
.custom-button.danger[data-v-ab569e60] {
  background: rgb(75, 26, 49);
  opacity: 20;
  color: #ff005e;
  font-weight: 500;
}
.custom-button.dangercheng[data-v-ab569e60] {
  background: #ff005e;
  opacity: 20;
  color: #fbfbfb;
  font-weight: 500;
}
.custom-button.but[data-v-ab569e60] {
  background: #00FFCC;
  color: #000;
  border: 1px solid;
  font-weight: 500;
}
.custom-button.put[data-v-ab569e60] {
  font-weight: bold;
  background: #fff;
  color: #000;
  padding: 13.5px 29px;
  border: 1px solid;
}
.custom-button.warning[data-v-ab569e60] {
  background-color: #ffc107;
  color: #333;
}
.custom-button.disabled[data-v-ab569e60] {
  opacity: 0.6;
  cursor: not-allowed;
}
.custom-button.loading[data-v-ab569e60] {
  cursor: wait;
}
.loading-spinner[data-v-ab569e60] {
  width: 12px;
  height: 12px;
  border: 2px solid #000000;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin-ab569e60 1s linear infinite;
  margin-right: 8px;
}
@keyframes spin-ab569e60 {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
.icon[data-v-ab569e60] {
  margin-right: 8px;
}

.pwa-install-banner[data-v-a8d7d2a3] {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #1E2025;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 2000;
  padding: 12px 24px;
  box-sizing: border-box;
}
.banner-content[data-v-a8d7d2a3] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.message[data-v-a8d7d2a3] {
  font-size: 14px;
  color: #FBFBFB;
}
.actions[data-v-a8d7d2a3] {
  display: flex;
  align-items: center;
  gap: 20px;
}
.buttons[data-v-a8d7d2a3] {
  display: flex;
  gap: 10px;
}

/* 针对小屏幕的媒体查询 */
@media (max-width: 600px) {
.banner-content[data-v-a8d7d2a3] {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.actions[data-v-a8d7d2a3] {
    width: 100%;
    justify-content: space-between;
}
}

input[type=checkbox][data-v-b451a45f]{
       width: 16px;
       height: 16px;
       background-color: #fbfbfb20;
       border: 1px solid #f8f8f8;
       border-radius: 50%;
       color:#ffffff00;
       text-align: center;
       line-height: 15px;
       -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
       outline: none;
}
input[type="checkbox"][data-v-b451a45f]:hover {
       border: 1px solid #fbfbfb;
}
input[type=checkbox][data-v-b451a45f]:checked {
       color: #000;
       background-color: #fbfbfb;
       border: 1px solid #838383;
}
input[type=checkbox][data-v-b451a45f]:after {
       content: "\2713";
}


.box[data-v-9e445cbb]{
  /* MODIFICATION 1: 让内容区高度充满整个容器 */
  height: 100%;
  /* MODIFICATION 2: 确保内边距(padding)不会导致内容溢出容器 */
  box-sizing: border-box;

  z-index: 10; /* 确保内容在光效上层 */
  width: 100%;
  padding: 32px 40px; /* 调整了内边距以匹配截图效果 */
  position: relative; /* 确保z-index生效 */

  /* MODIFICATION 3: 移除不必要的居中样式 */
  /* left: 50%; */
  /* transform: translateX(-50%); */
}
.container[data-v-9e445cbb]{
  background: rgb(30,32,37);
  border-radius: 24px;
  overflow: hidden;
  /* MODIFICATION 4: 为绝对定位的子元素(light)提供定位上下文 */
  position: relative;
}
.containerNoRadius[data-v-9e445cbb]{
  background: rgb(30,32,37);
  overflow: hidden;
  position: relative; /* 同样需要定位上下文 */
}
.containerNoRadius .light[data-v-9e445cbb]{
  z-index: 1;
  position:absolute;
  width:60%;
  height:30%;
  max-height:30%;
  max-width:60%;
  top:0;
  left:50%;
}
.light[data-v-9e445cbb]{
  z-index: 1;
  position:absolute;
  width:60%;
  height:30%;
  max-height:476px;
  max-width:60%;
  top:0;
  left:40%;
  /* 添加这个可以防止光效图片被意外选中或拖动 */
  pointer-events: none;
}

select[data-v-5da144c8]{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: center;
    border-left: 0;
    border-bottom: 0;
    border-top: 0;
    border-right: 2px solid #fff;
    color: #fff;
    font-size: 16px;
    font-family: 'AlibabaPuHuiTi-3-55-Regular',sans-serif;
    width: 30%;
    background-color: #f8f8f800;
}
select[data-v-5da144c8]:after {
    border-left: 0;
    border-bottom: 0;
    border-top: 0;
    border-right: 1px solid #f8f8f8;
    content: "\25BC";
    position: absolute;
    color: #fff;
    top: 12px;
    right: 10px;
}

/* 美化选项内容 */
option[data-v-5da144c8] {
    padding: 5px;
    background-color: #f8f8f820;
    color: #333;
}
.phone-input[data-v-5da144c8] {
    background-color: #f8f8f820;
    border: 1px solid #ffffff00;
    border-radius: 51px;
    height: 48px;
    display: flex;
    align-items: center;
}
.phone-input[data-v-5da144c8]:focus-within {
  outline: 1px solid #f8f8f8; /* 设置白边 */
  outline-offset: 1px; /* 可选：设置白边与容器的间距 */
}
.area-code[data-v-5da144c8] {
    border-left: 0;
    border-bottom: 0;
    border-top: 0;
    border-right: 1px solid #f8f8f8;
}
.phone-number[data-v-5da144c8] {
    margin-left: 5px;
    padding: 5px;
    border: 0;
    background-color: #33333300;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'AlibabaPuHuiTi-3-55-Regular',sans-serif;
    color: #fff;
    flex-grow: 1;
}
.phone-number[data-v-5da144c8]:after{
    border: 0;
}
[data-v-5da144c8]:focus-visible {
  outline: none;
}
  
.msicon[data-v-5bba082a]{
    width: 24px;
    height: 24px;
    text-align: center;
    animation: myAnimation-5bba082a 2s infinite;
}
@keyframes myAnimation-5bba082a {
0% {  transform: rotate(0deg);
}
100% { transform: rotate(360deg);
}
}
.class-input[data-v-5bba082a] {
    background-color: #f8f8f820;
    border: 1px solid #ffffff00;
    border-radius: 51px;
    display: inline-flex;
    align-items: center;
}
.class-input[data-v-5bba082a]:focus{
    background-color: #f8f8f820;
    outline: 1px solid #fff;
}
.area-code[data-v-5bba082a] {
    border-left: 0;
    border-bottom: 0;
    border-top: 0;
    border-right: 1px solid #f8f8f8;
}
.indexValue[data-v-5bba082a] {
    margin-left:10px;
    border: 0;
    padding:5px;
    background-color: #33333300;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'AlibabaPuHuiTi-3-55-Regular',sans-serif;
    color: #fff;
    flex-grow: 0.8;
}
.class-input[data-v-5bba082a]:focus-within {
  outline: 1px solid #f8f8f8; /* 设置白边 */
  outline-offset: 1px; /* 可选：设置白边与容器的间距 */
}
[data-v-5bba082a]:focus-visible {
  outline: none;
}
  
[data-v-4ca33632]::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.msicon[data-v-4ca33632] {

  color: black;
  text-align: center;
  animation: myAnimation-4ca33632 2s infinite;
}
.modleTextMSG[data-v-4ca33632]{
  font-size: 14px;
  font-weight: 900;
  background: linear-gradient(98deg, #CBFFF8 6%, #21FFF3 36%, #FFF600 98%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
@keyframes myAnimation-4ca33632 {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
a[data-v-4ca33632] {
  cursor: pointer;
  color: #FBFBFB;
}
.bagvideo[data-v-4ca33632]{
  -o-object-fit: cover;
     object-fit: cover;
  position: fixed;
  top: 0;
  left:0;
  z-index: 100;
  width: calc( 100% - 618px );
  height: 100%;
}
.msIndex[data-v-4ca33632] {
  margin-top: 24px;
  width: 400px;
}
.mstitle[data-v-4ca33632]{
  width: 600px;
  height: 600px;
  position: absolute;
  left: 48.2%;
  top: 15%;
  transform: translateX(-110%);
  z-index: 500;
  animation: show-4ca33632 1s linear;
}
@keyframes show-4ca33632 {
0% {
    opacity: 0;
}
100% {
   opacity: 1;
}
}
.container[data-v-4ca33632] {
  top: 0;
  position: absolute;
  left:calc( 100% - 718px );
  z-index: 1000;
}
.section-header[data-v-4ca33632] {
    display: flex;
    align-items: center;
}
.gooduserlist[data-v-4ca33632]{
  z-index: 500;
  width: 100%;
  overflow: hidden;
  height: 190px;
  position: absolute;
  top: 70%;
  left: 0;
}
.yhxy[data-v-4ca33632]{
  background:linear-gradient(135deg, #CBFFF8 6%, #21FFF3 37%, #FFF600 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.yszc[data-v-4ca33632]{
  background:  linear-gradient(135deg, #CBFFF8 6%, #21FFF3 37%, #FFF600 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.loginMS[data-v-4ca33632]{
  width: 434px;
  height: 219px;
  position: absolute;
  top: 20%;
  left: 20%;
}
.molde_con[data-v-4ca33632]{
width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 86px;
}
.molde_con .modle_box[data-v-4ca33632]{
  color: #000000!important;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  line-height: 40px;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 86px;
  cursor: pointer;
}
.containerRight[data-v-4ca33632] {

  width: 100%;
  height: 100%;
}
.containerRight > img[data-v-4ca33632] {
  width: 210px;
  height: 60px;
}
.containerRight > .boxRight[data-v-4ca33632] {
  position: absolute;
  width:320px;
  top: 20vh;
  left: 50%;
  transform: translateX(-50%);
  min-height: 700px;
  height: 80vh;
}
.containerRight > .boxRight > .indexBox[data-v-4ca33632] {
  margin-top: 55px;
  width: 100%;
  height: 30%;
}
.containerRight > .boxRight > span[data-v-4ca33632] {
  font-size: 28px;
  font-weight: 900;
  color: #FBFBFB;
}
.section-header[data-v-4ca33632] {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  animation: scroll-enter-4ca33632 15s linear forwards,scroll-loop-4ca33632 120s linear infinite 15s;
}
@keyframes scroll-loop-4ca33632 {
from {
    transform: translateX(0);
}
to {
    /* 移动一半的宽度以实现无缝循环 */
    transform: translateX(-580%);
}
}
@keyframes scroll-enter-4ca33632 {
from {
    /* 从屏幕右侧（或更远）开始 */
    transform: translateX(70%);
}
to {
    /* 动画结束时停在起始位置 */
    transform: translateX(0);
}
}
.goodUser[data-v-4ca33632] {
  background: rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.1);
  min-width: 282px;
  height: 189px;
  width: 282px;
  border-radius: 20px;
  margin-right: 37px;
  display: inline-flex;
  padding: 10px;
  color: white;
}
.QRcodeBox[data-v-4ca33632]{
  margin-top: 43px;
  color: #000000!important;
  position: relative;
  width: 100%;
  height: 320px;
  background-color: #FFFFFF;
  border-radius: 10px;
}
.user-avatar[data-v-4ca33632] {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}
.user-info[data-v-4ca33632] {
  display: flex;
  flex-direction: column;
  max-width: 200px;
}
.user-name[data-v-4ca33632] {
  font-weight: bold;
  margin-bottom: 5px;
}
.user-content[data-v-4ca33632] {
  font-size: 12px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
@keyframes scroll-4ca33632 {
from {
    transform: translateX(0);
}
to {
    transform: translateX(-50%);
}
}
.containerLeft[data-v-4ca33632] {
  width: 50%;
  height: 100%;

  display: inline-block;
}
.containerLeft > video[data-v-4ca33632] {
  width: 456px;
  height: 552px;
}
.checkBox[data-v-4ca33632] {
  scrollbar-width: none; /* Firefox */
  margin-top: 11px;
}
.codeBox[data-v-4ca33632]{
}
.topMSG[data-v-4ca33632]{
  font-size: 28px;
  font-weight: 900;
  line-height: 36px;
  letter-spacing: 0px;
  width: 100%;
  text-align: center;
  margin-bottom: 39px;
  background: linear-gradient(98deg, #CBFFF8 6%, #21FFF3 36%, #FFF600 98%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.modle_text[data-v-4ca33632]{
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
  z-index: -1;
  color: rgba(251, 251, 251, 0.5);
}
@media (min-resolution: 1.25dppx) {
.containerRight > .boxRight[data-v-4ca33632] {
    position: absolute;
    width:320px;
    top: 13vh;
    left: 50%;
    transform: translateX(-50%);
    min-height: 700px;
    height: 40vh;
}
.molde_con .modle_box[data-v-4ca33632]{
    width: 40px;
    height: 40px;
    border-radius: 10px;
    line-height: 40px;
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 26px;

    cursor: pointer;
}
.topMSG[data-v-4ca33632]{
    font-weight: 900;
    line-height: 36px;
    margin-bottom: 19px;
}
.containerRight > .boxRight > .indexBox[data-v-4ca33632] {
    margin-top: 25px;
}
.QRcodeBox[data-v-4ca33632]{
    margin-top: 25px;
}
.modle_text[data-v-4ca33632]{
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 9vh;
    color: rgba(251, 251, 251, 0.5);
}
.molde_con[data-v-4ca33632]{
   margin-top: 40px;
}
}


/* Base styles */

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}

/* Color variables */

:root {
    --color-bg-primary: #0D0E12;
    --color-bg-secondary: #1E2025;
    --color-bg-card: #191A1E;
    --color-text-primary: #FBFBFB;
    --color-text-secondary: rgba(251, 251, 251, 0.6);
    --color-text-tertiary: rgba(251, 251, 251, 0.4);
    --color-accent: #00FFCC;
    --color-accent-blue: #00BBFF;
    --color-error: #FF005E;
    --color-border: rgba(251, 251, 251, 0.1);
    --color-border-light: rgba(251, 251, 251, 0.05);
}

/* Layout utilities */

.app-container {
    min-height: 100vh;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.content-wrapper {
    width: 100%;
    max-width: 42rem;
    text-align: center;
}

/* Typography */

.main-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: linear-gradient(to right, var(--color-accent), var(--color-accent-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (min-width: 768px) {
    .main-title {
        font-size: 1.5rem;
    }
}

.subtitle {
    margin-top: 0.5rem;
    font-size: 12px;
    color: var(--color-text-secondary);
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .subtitle {
        font-size: 0.875rem;
    }
}

/* Button styles */

.btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    overflow: hidden;
    font-weight: 500;
    color: var(--color-accent);
    transition: all 0.3s ease-out;
    border: 2px solid var(--color-accent);
    border-radius: 9999px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    background: transparent;
    cursor: pointer;
}

.btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-gradient-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, transparent, transparent, rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease-out;
}

.btn-primary:hover .btn-gradient-overlay {
    background: linear-gradient(to bottom right, rgba(0, 255, 204, 0.2), transparent, transparent);
}

.btn-arrow-icon {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 2.5rem;
    height: 2.5rem;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.btn-primary:hover .btn-arrow-icon {
    transform: translateX(0);
}

.btn-text {
    position: relative;
}

.btn-text-sm {
    font-size: 14px;
    font-weight: 700;
}

/* Keyboard shortcuts */

.keyboard-hint {
    margin-top: 1rem;
    font-size: 10px;
    color: var(--color-text-tertiary);
}

.kbd {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1f2937;
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
}

/* Result display */

.result-card {
    margin-top: 3rem;
    padding: 1.5rem;
    background-color: rgba(30, 32, 37, 0.8);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    width: 100%;
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
    animation: result-in 0.5s ease-out forwards;
}

.result-label {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.result-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-accent);
    margin-top: 0.25rem;
}

/* Modal styles */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(13, 14, 18, 0.8);
    backdrop-filter: blur(4px);
}

.modal-container {
    background-color: var(--color-bg-secondary);
    width: 100%;
    max-width: 100vh;
    min-width: 800px;
    max-height: 80vh;
    min-height: 300px;
    margin: 0.5rem;
    border-radius: 16px;
    border: 1px solid var(--color-border);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    animation: fade-in 0.3s
    ease-out forwards;
    overflow: hidden;
}

@media (min-width: 768px) {
    .modal-container {
        margin: 1rem;
        border-radius: 24px;
    }
}

.modal-header {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

@media (min-width: 768px) {
    .modal-header {
        padding: 0.75rem 1.5rem;
    }
}

.btn-header {
    padding: 0.5rem 3rem 0.5rem 1.5rem;
    flex-shrink: 0;
    min-width: 120px;
}

@media (max-width: 767px) {
    .btn-header {
        padding: 0.4rem 2.5rem 0.4rem 1.2rem;
        min-width: 100px;
    }
    .btn-header .btn-text {
        font-size: 12px;
    }
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.modal-description {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 0.125rem;
}

.modal-content {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    overflow-y: auto;
    flex: 1;
}

/*@media (min-width: 768px) {*/

/*    .modal-content {*/

/*        padding: 1.5rem;*/

/*        gap: 1.5rem;*/

/*        grid-template-columns: repeat(2, minmax(0, 1fr));*/

/*    }*/

/*}*/

/*@media (min-width: 1024px) {*/

/*    .modal-content {*/

/*        grid-template-columns: repeat(3, minmax(0, 1fr));*/

/*    }*/

/*}*/

/* Card styles */

.purpose-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-align: left;
    background-color: var(--color-bg-card);
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    outline: none;
}

.purpose-card:focus {
    outline: none;
}

.purpose-card-locked {
    cursor: not-allowed;
    filter: grayscale(100%);
}

.purpose-card-unlocked {
    cursor: pointer;
}

.purpose-card-unlocked:hover,
.purpose-card-unlocked:focus {
    border-color: rgba(0, 255, 204, 0.6);
    transform: scale(1.02);
}

.purpose-card-selected {
    border-color: var(--color-accent);
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
}

.card-image-container {
    width: 100%;
    height: 12rem;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
    border-radius: 8px 8px 0 0;
}

.card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.3s ease, opacity 0.5s ease;
}

.card-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.3s ease, opacity 0.5s ease;
    opacity: 0;
}

.card-video.video-visible {
    opacity: 1;
}

.card-image.image-hidden {
    opacity: 0;
}

.purpose-card:hover .card-image,
.purpose-card:hover .card-video {
    transform: scale(1.1);
}

.card-body {
    padding: 0.5rem 0.75rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.15rem;
}

.card-icon {
    width: 0.875rem;
    height: 0.875rem;
    margin-right: 0.4rem;
    color: rgba(251, 251, 251, 0.8);
}

.card-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.2;
}

.card-description {
    font-size: 10px;
    color: var(--color-text-secondary);
    flex-grow: 1;
    line-height: 1.3;
}

.card-lock-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lock-icon {
    width: 2.5rem;
    height: 2.5rem;
    color: rgba(255, 255, 255, 0.5);
}

.card-check-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--color-accent);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-bg-secondary);
}

.check-icon {
    width: 1rem;
    height: 1rem;
}

.card-shimmer {
    pointer-events: none;
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    transition: transform 0.7s ease-in-out;
    background: linear-gradient(100deg, rgba(251, 251, 251, 0) 20%, rgba(251, 251, 251, 0.1) 50%, rgba(251, 251, 251, 0) 80%);
}

.purpose-card:hover .card-shimmer {
    transform: translateX(100%);
}

/* Toast styles */

.toast-container {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    padding: 0.75rem 1.5rem;
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 12px;
    border-radius: 16px;
    border: 1px solid var(--color-error);
    box-shadow: 0 10px 15px -3px rgba(255, 0, 94, 0.2);
    animation: toast-in-out 3s ease-in-out forwards;
}

/* Animations */

@keyframes result-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes toast-in-out {
    0% {
        transform: translate(-50%, 100px);
        opacity: 0;
    }
    15% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
    85% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, 100px);
        opacity: 0;
    }
}

/* SVG icon sizing */

.icon-sm {
    width: 1.25rem;
    height: 1.25rem;
}

.icon-md {
    width: 1.5rem;
    height: 1.5rem;
}

/* 样式部分无需修改，保持原样 */
.file-selector-dialog .el-dialog__body {
  padding: 10px 20px;
}
.file-selector-dialog .header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  height: 24px;
}
.file-selector-dialog .back-button {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #00BBFF;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
}
.file-selector-dialog .back-button:hover {
  opacity: 0.8;
}
.file-selector-dialog .back-button.disabled {
  color: #a8abb2;
  cursor: not-allowed;
}
.file-selector-dialog .back-button.disabled:hover {
  opacity: 1;
}
.file-selector-dialog .breadcrumb {
  flex-grow: 1;
  min-width: 0;
  margin-left: 20px;
}
.file-selector-dialog .breadcrumb .breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #909399;
  white-space: nowrap;
}
.file-selector-dialog .breadcrumb .breadcrumb-link {
  cursor: pointer;
}
.file-selector-dialog .breadcrumb .breadcrumb-link:hover {
  color: #00BBFF;
}
.file-selector-dialog .breadcrumb .el-icon {
  color: #c0c4cc;
}
.file-selector-dialog .file-list-container {
  height: 300px;
  border-radius: var(--el-border-radius-base);
}
.file-selector-dialog .file-list-container .loading-state, .file-selector-dialog .file-list-container .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--el-text-color-placeholder);
  gap: 8px;
}
.file-selector-dialog .file-list-container .file-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  border-radius: 10px;
  margin: 4px;
  transition: background-color 0.2s;
}
.file-selector-dialog .file-list-container .file-item.selected {
  background: linear-gradient(90deg, rgba(0, 255, 241, 0.1) 0%, rgba(0, 255, 241, 0) 100%);
  color: #fff;
}
.file-selector-dialog .file-list-container .file-item.selected .file-name {
  color: #fff;
}
.file-selector-dialog .file-list-container .file-item .file-name {
  margin-left: 12px;
  white-space: nowrap;
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
}
.file-selector-dialog .dialog-footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.mo-img[data-v-ba0d7acf]{
  height: 400px;
  position: relative;
}
.mo-img img[data-v-ba0d7acf]{
  position: fixed;
  bottom: 60px;
}
.mile-move-cole[data-v-ba0d7acf]{
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  min-width: 500px;
  height: 100vh;
  z-index: 9000;
}
.move-cole-btn[data-v-ba0d7acf]{
  text-align: center;
  position: relative;
  left: 50%;
  transform: translateX(-55%);
}
.move-cole-box[data-v-ba0d7acf]{
  text-align: center;
  background: linear-gradient(84deg, #CBFFF8 6%, #21FFF3 36%, #FFF600 98%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 40px;
  font-weight: 1000;
}

.no[data-v-94bacc37]{
  color: #ffffff80;
  border-radius: 63px;
}
.nav-item[data-v-94bacc37]{
  position: relative;
  width: 220px;
  line-height: 40px;
  height: 40px;
  margin-left: 2px;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  border-radius: 63px;
  outline: 2px solid rgba(255, 255, 255, 0);
  display: flex;
}
.nav-item.no[data-v-94bacc37]::before {
  content: '';
  position: absolute;
  /* 让伪元素完全覆盖父元素 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* 继承父元素的圆角 */
  border-radius: 63px;

  /* 默认是完全透明的 */
  background: transparent;
  transition: background 0.3s ease; /* 添加一个平滑过渡效果 */

  /* 确保它在最底层 */
  z-index: -1;
}
.nav-item.no[data-v-94bacc37]:hover::before {
  /* 在 hover 时，只改变伪元素的背景 */
  background: linear-gradient(90deg, rgba(0, 255, 241, 0.1) 0%, rgba(0, 255, 241, 0) 90%);
}
.no > .textcontainer[data-v-94bacc37]{
  padding-left: 2px;
  color: #f8f8f880 !important;
  -webkit-background-clip: text;
          background-clip: text;
  font-size: 16px;
  display: inline-block;
}
.no > .textcontainer[data-v-94bacc37] :hover{
  background-color: #cbfff800;
}
.no .icon[data-v-94bacc37]{
  padding-left: 12px;
  display: inline-block;
  background: #FbFbFb80;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.yes[data-v-94bacc37]{

  background: linear-gradient(90deg, rgba(0, 255, 241, 0.1) 0%, rgba(0, 255, 241, 0) 100%) !important;
  outline-color: #00FFF120;
}
.yes > .textcontainer[data-v-94bacc37]{
  padding-left: 2px;
  background: linear-gradient(124deg, #FFFFFF 10%, #21FFF3 37%, #83FFA4 61%, #FFFB85 79%, #FFFAE9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: 16px;
}
.yes > .icon[data-v-94bacc37]{
  padding-left: 12px;
  display: inline-block;
  background: linear-gradient(124deg, #FFFFFF 10%, #21FFF3 37%, #83FFA4 61%, #FFFB85 79%, #FFFAE9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.icon[data-v-94bacc37] {
}

.container[data-v-b6fbb27e]{
    width: 358px;
    height: 86px;
    line-height: 86px;
    cursor: pointer;
    margin: 10px;
    border-radius: 10px;
}
.wai[data-v-b6fbb27e] :hover{
    background: rgba(251, 251, 251, 0.1);
}
.AF[data-v-b6fbb27e]{
    background: rgba(251, 251, 251, 0.1);
}
.bg[data-v-b6fbb27e]{
    border-radius: 4px;
    position: relative;
    left: 6px;
    overflow: hidden;

    top: 6px;
    display: inline-block;
    width: 50px;
    height: 70px;
}
.type[data-v-b6fbb27e]{
   display: inline-block;
}
span[data-v-b6fbb27e]:hover{
    background: #dddddd00;
}

.projectImg[data-v-c80b675c]{
    text-align: center;
    max-height: 120px;
  overflow: hidden;
}
.projectImg > .ImgInProject[data-v-c80b675c]{
  background-color: #c0c4cc;
  border-radius: 24px;
}
.stylelist[data-v-c80b675c]{
  width: 100%;

  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.stylelist[data-v-c80b675c] ::-webkit-scrollbar {
  display: none;
  width: 0;
}
.stylelist_item[data-v-c80b675c]{
  display: inline-block;
  margin-right: 3px;
}
.stylelist_img[data-v-c80b675c]{
  -o-object-fit: cover;
     object-fit: cover;
  width: 107px;
  height: 81px;

  overflow: hidden;
  border-radius: 10px;}
.stylelist_item[data-v-c80b675c]:hover{
  cursor: pointer;
}
.stylelist_text[data-v-c80b675c]{
  text-align: center;
  font-size: 12px;
  color: #FBFBFB;
}
.itemT[data-v-c80b675c]{
  border: 2px solid #00FFCC;
  border-radius: 13px;
}
.itemF[data-v-c80b675c]{
  border: 2px solid #c0c4cc00;
  border-radius: 10px;
}
 
.msgBoxCurtain[data-v-59e0680b]{
position: fixed;
left: 0;
top: 0;
backdrop-filter: blur(20px);
background-color: rgba(0,0,0,0.8); 
width: 100vw;
height: 100vh;
z-index: 12000;
}
.msgboxFoot[data-v-59e0680b]{
  position: absolute;
  top: 64%;
  width: 100%;
  text-align: center;
}
.msgCon[data-v-59e0680b]{
    width: 388px;
    height: 191px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    left: 50%;
    background: #1E2025;
    border-radius: 24px;
    border: 1px solid rgba(251, 251, 251, 0.1);
}
.info[data-v-59e0680b]{
}
.danger[data-v-59e0680b]{
}
.msgCon>.title[data-v-59e0680b]{
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  color: #fbfbfb;
  padding-top: 14px;
}
.title > .msgBoxClose[data-v-59e0680b]{
  position: absolute;
  cursor: pointer;
  top: 10px;
  left: 90%;
}
.msgBoxmsg[data-v-59e0680b]{
  width: 95%;
   margin-left: 2.5%;

   overflow: hidden; /* 隐藏超出容器的内容 */
   white-space: nowrap; /* 防止文本换行 */
   text-overflow: ellipsis; /* 设置溢出内容显示为省略号 */
  text-align: center;
  height: 60px;
  margin-top: 12px;
  line-height: 60px;
  color: #fbfbfb;
  font-size: 12px;
}

.overloay[data-v-83732e9a]{
    pointer-events: auto;
    background-color: rgba(0,0,0,0.8);
    bottom: 0;
    height: 100vh;
    width:100vw;
    left: 0;
    overflow: auto;
  backdrop-filter:blur(20px) ;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2000;
}
.overloay > .container[data-v-83732e9a]{
    pointer-events: auto;
    width: 428px;
    height: 344px;
    z-index: 20000;
    background-color: #1E2025;
    position:fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    border-radius: 24px;
}
.overloay > .container > .topIMG[data-v-83732e9a]{
    background: url('/assets/7f4fe4f9ef97d2e608f5c2d71a28604@2x (1)-10e2e75a.webp');
    width:100%;
    height:200px;
    background-size: cover;
}
.overloay > .container >.boom[data-v-83732e9a]{
    width:100%;
    height:144px;
    text-align:center;
}
.vipDayDONo[data-v-83732e9a]{
  font-size: 12px;
  margin-left: 1%;
  color: #FFFFFF;
}
.tableInHistory[data-v-83732e9a]{
  height: 440px;
  background-color: rgb(25,26,30);
  border-radius: 12px;
  width: 840px;
  padding: 10px;
  margin-top: 12px;
}
.vipDayDO[data-v-83732e9a]{
  font-size: 12px;
  margin-left: 1%;background: linear-gradient(125deg, #CBFFF8 6%, #21FFF3 37%, #FFF600 99%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;
}

.loadingBox[data-v-a6cb428f]{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.438);
      z-index: 10000;
}
.loadIMG[data-v-a6cb428f] {
      transform: scaleX(-1); /* 镜像反转 */
      width: 220px;
      height: 200px;
      position: absolute;
      left: 50%;
      top: 40%;
      transform: translate(-50%, -50%) scaleX(-1); /* 注意合并 transform */
}
.loadingText[data-v-a6cb428f]{
      color: #fbfbfb;
      position: absolute;
      left: 50%;
      top: 55%;
      font-size: 20px;
      transform: translate(-50%,-50%);
}
    
/*
  MODIFICATION:
  - This new class controls the main component layout using Flexbox.
*/
.left-navbar-container[data-v-834522a8] {
  font-family: albbcun;
  position: absolute;
  left: 0;
  top: 0;
  width: 250px;
  height: 100%;
  min-height: 300px;
  background-size: cover;

  /* Flexbox Layout */
  display: flex;
  flex-direction: column;

  /* Padding and box-sizing to contain children */
  padding: 20px 0 20px 24px;
  box-sizing: border-box;
}
.listToPrimry[data-v-834522a8]{
  width: 100%;height: 580px;background-color: #1E2025;overflow-y: scroll;overflow-x: hidden;
}
.listToPrimry[data-v-834522a8]::-webkit-scrollbar {
  display: none;
}

/*
  MODIFICATION:
  - This is now the scrollable area that fills the available space.
*/
.topContainer[data-v-834522a8]{
  flex: 1; /* Allow this container to grow and shrink */
  min-height: 0; /* Important for flex children to scroll correctly */
  overflow-y: auto; /* Enable vertical scrolling when content overflows */
  overflow-x: hidden;
  width: 100%;
  margin-top: 20px; /* Space between logo and nav list */
}

/* Hide scrollbar for a cleaner look */
.topContainer[data-v-834522a8]::-webkit-scrollbar {
  display: none;
}
.bottomContainer[data-v-834522a8]{
  flex-shrink: 0;
  padding-top: 16px;
  width: auto;
}
.leftNavbar[data-v-834522a8]{
  float: left;
  width: 300px;
  overflow: hidden;
  height: 100%;
  min-height: 200px;
  /* background-image: url(../../assets/image/Greenlight.webp);
  background-size: cover; */
}
.myoverlay[data-v-834522a8]{

  width: 100%;
  height: 100%;
  position: fixed;
  backdrop-filter: blur(5px);
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.096);
  z-index: 10;
  animation: overlayAnimation-834522a8 0.5s;
  animation-iteration-count:1;
}
@keyframes overlayAnimation-834522a8 {
0% {
    backdrop-filter: blur(0px);
}
100% {
    backdrop-filter: blur(5px);
}
}

/* 整体容器样式 */
.inventory-container[data-v-142387fb] {
  width: 200px; /* 您可以根据需要调整宽度 */
  background-color: #2c2c2c00; /* 深色背景 */
  border-radius: 16px;
}

/* 标题样式 */
.title[data-v-142387fb] {
  color: #e0e0e0;
  text-align: center;
  margin: 0;
  padding-bottom: 15px;
  font-size: 18px;
  font-weight: bold;
  position: relative;
}

/* 标题下划线 */
.title[data-v-142387fb]::after {
  content: '';
  display: block;
  width: 30px;
  height: 3px;
  background-color: #e0e0e0;
  border-radius: 2px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* 核心布局：道具网格容器 */
.items-grid[data-v-142387fb] {
  margin-top: 5px;
  display: grid;
  margin-bottom: 7px;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* 单个卡片样式 */
.item-card[data-v-142387fb] {
  background-color: #fbfbfb20;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  cursor: pointer;
  /* 保持卡片为正方形 */
  aspect-ratio: 1 / 1;
  transition: all 0.2s ease-in-out;
}

/* 鼠标悬浮时给一点反馈 */
.item-card:not(.is-empty):hover .item-image[data-v-142387fb] {
  transform: scale(1.05);
}
.item-card:not(.is-empty):hover .text[data-v-142387fb]{
  display: none;
}
.item-card:not(.is-empty):hover .use[data-v-142387fb]{
  display:  block;
}
/* 空卡片样式 */
.item-card.is-empty[data-v-142387fb] {
  background-color: #fbfbfb20; /* 比有内容的卡片更暗一些 */
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
}

/* 道具图片样式 */
.item-image[data-v-142387fb] {
  width: 60%;
  height: 60%;
}

/* 道具标签/名称样式 */
.item-label[data-v-142387fb] {
  color: #dcdcdc;
  font-size: 12px;
  width: 60px;
  margin: 5px 0 0 0;
  text-align: center;
  white-space: nowrap; /* 防止文字换行 */
}
.text[data-v-142387fb]{
  display: block;
}
.use[data-v-142387fb]{
  display: none;
  color: #00BBFF;
}

.msAnnouncement[data-v-d9d40f90] {
  height: 32px;
  border-radius: 41px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  position: relative;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%);
  padding-left: 40px;
}
.notice-icon[data-v-d9d40f90] {
  background-color: rgb(21, 24, 30);
  position: absolute;
  left: 0;
  z-index: 1;
  padding: 0 12px;
  height: 100%;
  display: flex;
  align-items: center;
}
.notice-container[data-v-d9d40f90] {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 32px;
}
.notice-track[data-v-d9d40f90] {
  /* transition 由 JS 动态控制 */
}
.notice__item[data-v-d9d40f90] {
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  cursor: pointer;
  font-size: 12px;
  color: #00FFCC;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.notice__item[data-v-d9d40f90]:hover {
  text-decoration-color: rgba(0, 255, 204, 0.8);
}
.announcementBox[data-v-d9d40f90] {
  width: 100%;
  border-radius: 14px;

  padding: 16px;
  line-height: 32px;
  font-size: 16px;
  background-color: #00000020;
  height: 436px;
  overflow-y: auto;
  white-space: normal;
  word-wrap: break-word;
}
@media (max-width: 1800px) {
.msAnnouncement[data-v-d9d40f90] {
    width: 30% !important;
}
}
@media (min-width: 1801px) {
.msAnnouncement[data-v-d9d40f90] {
    width: 55% !important;
}
}

[data-v-f743fc49]::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.new[data-v-f743fc49]{
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #FF005E;
        float: right;
        margin-right: 10px;
}
.fqlrequestforTitleBox[data-v-f743fc49]{
      width: 100%;

      min-height: 350px;
      max-height: 550px;
      overflow-y: auto;
      text-align: center;
}
.fqlrequestforTitleList[data-v-f743fc49]{
      width: 100%;
      border-radius: 14px;
      color: #fbfbfb;
      text-align: left;
      padding-left: 16px;
      max-height: 520px;
      padding-top: 12px;
      background-color: #00000020;
      min-height: 330px;
}
.msg_Notifications[data-v-f743fc49]{
        width: 340px;
        height: 38px;
        cursor: pointer;
        margin: 12px;
}
.msg_Announcement[data-v-f743fc49]{
        width: 340px;
        height: 38px;
        cursor: pointer;
        overflow: hidden;
        margin: 12px 0px 27px 12px;
}
.faqBox[data-v-f743fc49]{
      width: 100%;
      font-size: 16px;
      margin-top: 20px;
      text-align: left;
}
.container[data-v-f743fc49]{
    display: inline-flex;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    line-height: 32px;
      box-shadow: inset 0px -4px 8px 0px rgba(255, 255, 255, 0.05);
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    box-sizing: border-box;

    /* Gradient/Stroke/White-20 */
    border: 1px solid #FbFbFb20;
}
.container> .box[data-v-f743fc49]{
        position: relative; 
        left:50%;
        transform:translateX(-50%)
}
.container> .box > .newMsg[data-v-f743fc49]{
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background:#FF005E;
        position: relative;
        top:5px;
        left:6px;
}
.container > .box > img[data-v-f743fc49] {
        width: 12px;
        height: 14px;
      position: absolute;
      left: 50%;
      top:50%;
      transform: translate(-50%,-50%);
}
.shode[data-v-f743fc49]{
    pointer-events: none;
    position: absolute;
    left: 0;
    top:47%;
    display: block;
    z-index: 100;
    width: 388px;
    height: 110px;
    background: linear-gradient(360deg, #1E2025 0%, rgba(11, 15, 19, 0) 101%);
}

.box[data-v-528fce18]{
        z-index: 10;
        width: 100%;
        padding: 10px;
        height: 100%;
        left: 50%;
        position: relative;
        top: -30%;
        transform: translateX(-50%);
}
.container[data-v-528fce18]{   
        background: rgb(30,32,37);
        border-radius: 40px;
        overflow: hidden;
}
.containerNoRadius[data-v-528fce18]{   
        background: rgb(30,32,37);
        overflow: hidden;
}
.containerNoRadius .light[data-v-528fce18]{
        z-index: 1;
       position:relative;
       width:60%;
       height:30%;
       max-height:30%;
       max-width:60%;
       top:0;
       left:50%;
}
.light[data-v-528fce18]{
        z-index: 1;
       position:absolute;
       width:60%;
       height:30%;
       max-height:30%;
       max-width:60%;
       top:0;
       left:40%;
}

.msPointsContainer[data-v-3e97d787]{
        cursor: pointer;
        width: 100px;
        height: 40px;
        border-radius: 63px;
        line-height:40px;
        color:#fff;
        display: inline-flex;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) -3%, rgba(255, 255, 255, 0.01) 100%);
        /* border: 1px solid; */
        -o-border-image: linear-gradient(112deg, rgba(251, 251, 251, 0.2) -1%, rgba(251, 251, 251, 0) 34%, rgba(251, 251, 251, 0) 64%, rgba(251, 251, 251, 0.2) 100%) 1;
           border-image: linear-gradient(112deg, rgba(251, 251, 251, 0.2) -1%, rgba(251, 251, 251, 0) 34%, rgba(251, 251, 251, 0) 64%, rgba(251, 251, 251, 0.2) 100%) 1;
        box-shadow: inset 0px -4px 8px 0px rgba(255, 255, 255, 0.05);
}
.msPointsContainer > .box[data-v-3e97d787]{
        position: relative;
        left: 40%;
        top: 50%;
        transform: translate(-50%,-35%);
}
.msPointsContainer > .box > img[data-v-3e97d787]{
        width: 28px;
        height: 28px;
        display: inline-flex;
}
.msPointsContainer > .box > span[data-v-3e97d787]{
        float: right;
        width: 28px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        display: inline-flex;
}

.buttombox[data-v-069a4418]{
  position: relative;left: 50%;transform: translate(-50%,0);padding: 1px;width: 146px;border-radius: 64px;background: linear-gradient(105deg, #FBFBFB 1%, rgba(251, 251, 251, 0) 35%, rgba(251, 251, 251, 0) 65%, #FBFBFB 100%);
}
.weixin[data-v-069a4418]{
  cursor: pointer;
  width: 144px;
  height: 40px;
  color: #FFFFFF;
  line-height: 40px;
  border-radius: 63px;
  background: linear-gradient(106deg, #02D668 6%, #06BF5E 98%);
  text-align: center;
}
.zhifubao[data-v-069a4418]{
  cursor: pointer;
  width: 144px;
  height: 40px;
  color: #FFFFFF;
  line-height: 40px;
  border-radius: 63px;
  background:#1574F7;
  text-align: center;
}
.paymentMethoCloes[data-v-069a4418]{
  position: absolute;
  right: 5%;
  top: 5%;
  cursor: pointer;
}
.bottom_Com[data-v-069a4418]{
  margin-top: 80px;
  width: 100%;
  height: 100%;
}
.paymentMethotitle[data-v-069a4418]{
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  left:50%;
  top: 5%;
  transform: translate(-50%,0);
  color: #fff;
}
.paymentMethod[data-v-069a4418]{
  left: 0;
  top: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 2000;
}
.paymentMethodCon[data-v-069a4418]{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 267px;
  height: 226px;
  background: #1E2025;
  border-radius: 24px;
  border: 1px solid rgba(251, 251, 251, 0.1);
}
button[data-v-069a4418] {
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
  font-style: ;
  font-variant-ligatures: ;
  font-variant-caps: ;
  font-variant-numeric: ;
  font-variant-east-asian: ;
  font-variant-alternates: ;
  font-variant-position: ;
  font-variant-emoji: ;
  font-weight: ;
  font-stretch: ;
  font-size: ;
  font-family: ;
  font-optical-sizing: ;
  font-size-adjust: ;
  font-kerning: ;
  font-feature-settings: ;
  font-variation-settings: ;
  text-rendering: auto;
  color: buttontext;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: center;
  cursor: default;
  box-sizing: border-box;
  background-color: rgba(0, 187, 255, 0);
  margin: 0em;
  padding-block: 1px;
  padding-inline: 6px;
  border-width: 0px;
  border-style: outset;
  border-color: buttonborder;
  -o-border-image: initial;
     border-image: initial;
}
.payChipsBox{
    width: 100%;
    height: 330px;
    text-align: center;

}
.topContainer{
    width: 100%;
    height: 56px;
}
.payChipsBox > .payChipsList{
    width: 100%;
    text-align: left;
    padding: 10px;
    border-radius: 14px;
    background-color: #00000020;
    height: 192px;
}
.listVal{
    float: left;
}
 .QRcodeText{
    width: 123px;
    font-size: 16px;
    border-radius: 16px;
    color: #fbfbfb;
    position: absolute;
    right: 10px;
    top:235px;
    }
.label{
    width: 69px;
    display: inline-block;
    margin-right: 10px;
}
.QRcode{
    width: 123px;height: 123px;border-radius: 16px;background-color: #fbfbfb11;float: right;margin-top: 13px;margin-right: 15px;
}
.QRcodeRe{
    cursor: pointer;
    width: 123px;
    margin-right: 15px;
    height: 123px;
    border-radius: 16px;
    position: absolute;
    right: 26px;
    margin-top: 13px;
    text-align: center;
    line-height: 123px;
    font-size: 20px;
    background: rgba(40, 40, 40, 0.70);
}
.fontsta{
    max-width: 300px !important;
    white-space: normal !important;
    word-break: break-word;
    word-wrap: break-word;
}
li[data-v-14431298] {
  list-style-type: none;
  color: #FBFBFB;
  padding: 5px;
}
ul[data-v-14431298]{padding-left: 10px;list-style: none;}
.rightsBox>.leftBox[data-v-14431298]{
  float: left;
  width: 60%;
  height: 100%;
  padding: 10px;
}
.rightsBox>.rightBox[data-v-14431298]{
  float: right;
  width: 40%;
  line-height: 80px;
  color: #FBFBFB;
  height: 100%;
  padding: 10px;
}
.buBox[data-v-14431298]{
  position: relative;
  top: 29px;
  height: 80px;
  width: 100%;
}
.rightsBox[data-v-14431298]{
  width: 95%;
  height: 167px;
  /*overflow-y: scroll;*/
  border-radius: 16px;
  color: #FFFFFF;
  padding: 5px 0 10px 30px;
  background: rgba(251, 251, 251, 0.05);
  position: relative;
  top: 10px;
  left: 50%;
  transform: translateX(-51%);
}
.msg[data-v-14431298]{
  text-align: center;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 60%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.msg>.msgTit[data-v-14431298]{
  font-size: 20px;
  color: #fbfbfb;
  font-weight: 500;
}
.msg>.msgInfo[data-v-14431298]{
  font-size: 10px;
  color: #FBFBFB;
  opacity: 0.6;
}
.msg >.msgOld[data-v-14431298]{
  font-size: 12px;
  color: #FBFBFB;
  opacity: 0.4;
  text-decoration: line-through;
}
.rechargeBoxc>.msg>.msgma[data-v-14431298]{
  font-size: 12px;
  font-weight: 500;
  background: linear-gradient(106deg, #CBFFF8 6%, #21FFF3 36%, #FFF600 98%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.rechargeBox>.msg>.msgma[data-v-14431298]{
  font-size: 12px;
  font-weight: 500;
  color: #FBFBFB;
}
.reBoxstylePlus[data-v-14431298]{
  background: linear-gradient(106deg, #CBFFF8 6%, #21FFF3 36%, #FFF600 98%);
  width: 48px;
  border-radius: 10px 0 16px 0;
  float: left;
  font-weight: bold;
  font-size: 12px;
  height: 24px;
  position: relative;
  left: 0;
  top: 0;
  color: black;
  text-align: center;
  line-height: 24px;
}
.rechargeBoxc > .reBoxstyle[data-v-14431298]{
  background: #00FFCC;
  width: 48px;
  border-radius: 10px 0 16px 0;
  float: left;
  font-weight: bold;
  font-size: 12px;
  height: 24px;
  position: relative;
  left: 0;
  top: 0;
  color: black;
  text-align: center;
  line-height: 24px;
}
.rechargeBox > .reBoxstyle[data-v-14431298]{
  pointer-events: none;
  overflow: hidden;
  width: 48px;
  border-radius: 10px 0 16px 0;
  float: left;
  font-weight: bold;
  font-size: 12px;
  height: 24px;
  position: relative;
  left: 0;
  z-index: 10;
  top: 0;
  color: rgb(255, 255, 255);
  text-align: center;
  line-height: 24px;
}
.rechargeBox[data-v-14431298]{
  width: 148px;
  height: 148px;
  margin-right: 10px;
  position: relative;
  background: rgba(0, 0, 0, 0.2);
  display: inline-block;
  cursor: pointer;
  border: 1px solid rgba(251, 251, 251, 0.2);
  border-radius: 16px;
}
.rechargeBoxc[data-v-14431298]{
  width: 148px;
  height: 148px;
  margin-right: 10px;
  position: relative;
  background: rgba(0, 255, 255, 0.1);
  box-sizing: border-box;
  display: inline-block;
  overflow: hidden;
  border: 2px solid #00FFCC;
  border-radius: 16px;
}
.rechargeList-vip[data-v-14431298] {
  padding: 5px;
  width: 100%;
  height: 160px;
  text-align: center;
}
.rechargeList-madou[data-v-14431298]{
  padding: 5px;
  width: 100%;
  height: 160px;
  text-align: center;
}
.colse[data-v-14431298]{
  float: right;
  cursor: pointer;
  padding-right: 24px;
}
.olay[data-v-14431298]{
  width: 100vw;
  height: 100vh;
  min-width: 900px;
  min-height: 600px;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  backdrop-filter: blur(20px);
  z-index: 1900;
}
.mscon[data-v-14431298]{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.topOptions[data-v-14431298]{
  width: 380px;
  display: inline-block;
  padding-left: 14px;
}
.options[data-v-14431298]{
  cursor: pointer;
  display: inline-block;
  font-size: 20px;
  color: #fbfbfb;
  opacity: 0.4;
  padding: 10px 20px 10px 20px;
}
.options[data-v-14431298]:hover{
  opacity: 0.8;
}
.optionsc[data-v-14431298]{
  cursor: pointer;
  display: inline-block;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  color: #fbfbfb;
  background: linear-gradient(111deg, #CBFFF8 6%, #21FFF3 36%, #FFF600 98%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


.ai-config-container[data-v-1ffc66a2] {
  width: 100%;
  max-width: 900px;
  margin: 20px auto;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
  color: #606266;
}
.header-row[data-v-1ffc66a2], .data-row[data-v-1ffc66a2] {
  display: flex;
  align-items: center;
}
.data-row[data-v-1ffc66a2]:last-child {
  border-bottom: none;
}
.data-cell[data-v-1ffc66a2] {
  flex: 1;
  padding: 12px 15px;
  display: flex;
  align-items: center;
}
.ai-selection-name[data-v-1ffc66a2] {
  min-width: 80px;
  flex: 0.8;
  position: relative;
}
/* 单选框和开关的flex稍大一些，因为包含了文字 */
.ai-selection-name .el-radio[data-v-1ffc66a2], .ai-selection-name .el-switch[data-v-1ffc66a2] {
  flex-shrink: 0;
}
.data-cell .el-input[data-v-1ffc66a2],
.data-cell .el-select[data-v-1ffc66a2] {
  width: 100%;
}
.footer-actions[data-v-1ffc66a2] {
  padding: 15px;
  text-align: center;
}
.empty-data[data-v-1ffc66a2] {
  justify-content: center;
  padding: 20px;
  color: #909399;
}
.ai-url[data-v-1ffc66a2]{
  line-height: 56px;
  flex: 0.4;
  text-decoration: none;
  text-align: center;
  color: #409EFF;
}
.ai-url[data-v-1ffc66a2]:hover {
  text-decoration: underline;
}

.image-cropper-container[data-v-e5e480b7] {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cropper-wrapper[data-v-e5e480b7] {
  flex-grow: 1;
  overflow: hidden;
  position: relative;
  background: #222; /* 深色背景，方便看清裁剪框 */
}
.cropper-component[data-v-e5e480b7] {
  width: 100%;
  height: 100%;
}
.placeholder[data-v-e5e480b7] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #888;
}
.actions[data-v-e5e480b7] {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 20px;
}
.btn[data-v-e5e480b7] {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f0f0f0;
  cursor: pointer;
}
.btn-primary[data-v-e5e480b7] {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

.giftCodeBox{ /*礼品吗盒子*/
    width: 100%;
    height: 200px;
}
.profilePictureBox{/*个人信息盒子*/
    width: 100%;
    height: 260px;
    text-align: center;
}
.profilePictureBox > .headImg{/*头像盒子*/
    /*background-color: #00000020;*/
    width: 340px;
    height: 122px;
    border-radius: 14px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.privacyBox{
    width: 100%;
    height: 300px;
    text-align: center;

}
.privacyBox > .privacyList{
    width: 100%;
    border-radius: 14px;
    background-color: #00000020;
    height: 242px;
}
.requestforTitleBox{/*头衔申请盒子*/
    width: 100%;
    height: 500px;
    text-align: center;
    overflow-y: scroll;
}
.requestforTitleBox::-webkit-scrollbar {
    display: none;
}
.requestforTitleBox > .requestforTitleList{
    width: 100%;
    border-radius: 14px;
    text-align: left;
    padding-left: 16px;
    padding-top: 12px;
    background-color: #00000020;
    height: 436px;
}
.el-select--large .el-select__wrapper {
    font-size: 14px;
    gap: 6px;
    line-height: 24px;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 64px;
}
.el-select--small .el-select__wrapper {
    font-size: 14px;
    gap: 6px;
    line-height: 24px;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 64px;
}
.el-select__wrapper {
    background-color: #fbfbfb00;
    color: #fbfbfb;
}
.FaqCon[data-v-f401f81b] {
  width: 100%;
  border-radius: 14px;
  height: 600px;
  background: #00000020;
  padding: 20px;
  overflow-y: auto;
  margin: 0 auto;
  font-family: sans-serif;
}
.msFaqItem[data-v-f401f81b] {
  border-radius: 10px;
  margin-bottom: 5px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.msFaqItemTitle[data-v-f401f81b] {
  color: #FFFFFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 12px 16px;
  font-weight: bold;
  position: relative;

  background: rgba(255, 255, 255, 0.05);
  transition: background 0.3s;
}
.msFaqItemTitle[data-v-f401f81b]:hover {
  background: rgba(255, 255, 255, 0.15);
}
.msFaqItemTitle .arrow[data-v-f401f81b] {
  display: inline-block;
  margin-left: 10px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.msFaqItem.open .msFaqItemTitle .arrow[data-v-f401f81b] {
  transform: rotate(-135deg);
}
.msFaqItemContent[data-v-f401f81b] {
  background: rgba(255, 255, 255, 0.05);
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;

  transition: max-height 0.3s ease, padding 0.3s ease;
}
.msFaqItem.open .msFaqItemContent[data-v-f401f81b] {
  max-height: 500px; /* 根据内容调整最大高度 */
  padding: 12px 16px;
}

.overlay[data-v-a0d2cf89]{
  position: fixed;
  z-index:501 !important;
  top: 0;
  left :280px;
  cursor: pointer;

  opacity: 1;

  height: 100vh ;

  transform: translate3d(0,0,0);
  will-change: transform;
  /* background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)),url('../../assets/image/menBan.webp') center/cover no-repeat; */
  /* backdrop-filter: blur(20px); */
}
@keyframes overlayAnimation-a0d2cf89 {
0% {
    backdrop-filter: blur(0px);
}
100% {
    backdrop-filter: blur(5px);
}
}
.tableInHistory[data-v-a0d2cf89]{
  height: 440px;
  background-color: rgb(25,26,30);
  border-radius: 12px;
  width: 734px;
  padding: 10px;
  margin-top: 12px;
}
[data-v-a0d2cf89]::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.mydialog[data-v-a0d2cf89]{
  background: #1E2025 !important;
  position: absolute;
  right: 1%;
  top: 65px;
  width: 22.5%;
  min-width: 360px;
  border-radius: 16px;
  padding-bottom: 5px;
  z-index:2000;
  /* animation: mydialogAnimation 1s;
  animation-iteration-count:1; */
}
@media screen and (max-width: 1800px) {
.mydialog[data-v-a0d2cf89]{
    right: 2%;
}
}
@media screen and (max-width: 1500px) {
.mydialog[data-v-a0d2cf89]{
    right: 2%;
}
}
/* @keyframes mydialogAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
} */
.profilePictureBoxS[data-v-a0d2cf89]{
  height: 120px;
}
.do_money[data-v-a0d2cf89]{
  margin-left: 10px;
}
.userInfocon[data-v-a0d2cf89]{
  width: 70%;
  margin-left: 40px;
  color: #d4d4d4;
}
.mydialog > .options[data-v-a0d2cf89]{
  width: 72px;
  height: 72px;
  padding-top: 14px;
  display: inline-block;
  margin: 8px;
  text-align: center;
  cursor: pointer;
}
.vipDayDO[data-v-a0d2cf89]{
  font-size: 12px;
  margin-left: 1%;background: linear-gradient(125deg, #CBFFF8 6%, #21FFF3 37%, #FFF600 99%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;
}
.mydialog > .options[data-v-a0d2cf89]:hover{
  background: rgba(251, 251, 251, 0.1);
  border-radius: 12px;
}
.mydialog > .options > .title[data-v-a0d2cf89]{
  color: #fbfbfb;
  font-size: 12px;
  font-weight: 500;
}
.headcontainer[data-v-a0d2cf89]{
  cursor: pointer;
  margin-top: 22px;

  display: inline-flex;

  box-sizing: border-box;
  /* Gradient/Brand-1 */
  /* 样式描述：一级填充 */
  border-radius: 63px;
  box-shadow: inset 0px -4px 8px 0px rgba(255, 255, 255, 0.05);
}
.headmsg[data-v-a0d2cf89]{
  position: relative;
  left: 4px;
  top: 4px;
  width: 32px;
  display: inline-block;
  height: 32px;
  opacity: 1;
}
.headmsg > img[data-v-a0d2cf89]{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.bodyCon[data-v-a0d2cf89]{
  width: 100%;
  height:90px;
  line-height: 30px;
  position: relative;
  padding: 10px;

  margin-bottom: 10px;
}
.userInfo[data-v-a0d2cf89]{
  display: inline-block;
  width: calc( 100% - 32px ) ;
  height: 100%;
}
.userName[data-v-a0d2cf89]{
  position: relative;
  left: 15px;
  top: 3px;
  width: 97px;

  font-size: 0.8rem;
  font-weight: 600;
  line-height: 20px;
  display: flex;
  align-items: center;
  letter-spacing: 0em;
}
.HorizontalAlignment[data-v-a0d2cf89]{
  display: flex;
  align-items: center;
}
.vip-info[data-v-a0d2cf89]{
  display: block;
  width: 97px;
  height: 20px;
}
.vip[data-v-a0d2cf89]{
  position: relative;
  left: 15px;
  top: -10px;
  width: 21px;
  height: 8px;
}
.vipDay[data-v-a0d2cf89]{
  position: relative;
  left: 23px;
  top: -10px;
  font-size: 10px;
  font-weight: 600;
  background: linear-gradient(106deg, #CBFFF8 5%, #21FFF3 36%, #FFF600 98%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.NOvipDay[data-v-a0d2cf89]{
  position: relative;
  left: 17px;
  top: -10px;
  font-size: 10px;
  font-weight: 600;
  color: #fbfbfbc2;
}
.headImg[data-v-a0d2cf89]{
  text-align: center;
  position: relative;
}
.headImg > .userImg[data-v-a0d2cf89]{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}




.paymentInformation[data-v-0baeb7b3]{
  width:100%;padding-bottom: 10px;padding-right:10px;padding-left:10px;padding-top:5px;background: #00000020;text-align: center;
}
.paymentInformations[data-v-0baeb7b3]{
  width:100%;padding-bottom: 10px;padding-right:10px;padding-left:10px;padding-top:5px;text-align: left;color: #FbFbFb;
}
.paymentInformations .msgbox[data-v-0baeb7b3]{
  display: flex;
  -o-object-fit: cover;
     object-fit: cover;
}
.paymentInformations .msgbox .title[data-v-0baeb7b3]{
  width: 100px;
}
.selTit[data-v-0baeb7b3]{
  padding: 10px;
  color: #FBFBFB;
}
.tableInHistoryw[data-v-0baeb7b3]{
  height: 440px;
  background-color: rgb(25,26,30);
  border-radius: 12px;
  width: 640px;
  padding: 10px;
  margin-top: 12px;
}
.tableInHistory[data-v-0baeb7b3]{
  height: 440px;
  background-color: rgb(25,26,30);
  border-radius: 12px;
  width: 834px;
  padding: 10px;
  margin-top: 12px;
}
.tips[data-v-0baeb7b3]{
  width: 100%;
  text-align: center;
  color: #00FFCC;
  margin-top: 16px;
  font-size: 14px;
}
.itemButton[data-v-0baeb7b3]{
  width: 170px;
  border-radius: 12px;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  cursor: pointer;
  /* margin-left: 5px;
  padding-left: 19px;
  padding-top: 11px;
  padding-bottom: 11px; */
}
.itemButton[data-v-0baeb7b3]:hover{
  background: rgba(251, 251, 251, 0.05);
}
.itemButton span[data-v-0baeb7b3]{
  font-size: 16.5px;
  margin-left:11px ;
  color: #FBFBFB;
  font-weight: 500;
}
.topNavbar[data-v-0baeb7b3]{
  z-index: 1010;
  width: 100%;
padding-top: 20px;
  padding-left: 52px;
  min-width: 900px;
  padding-right: 24px;
}
/* MODIFIED: Changed to Grid Layout */
.topNavbar > .rightBox[data-v-0baeb7b3]{
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
  align-items: center;
  float: right;
  height: 100%;
}
.topNavbar > .rightBox > .item[data-v-0baeb7b3]{
}
.eicker[data-v-0baeb7b3]{
  background-color: #00BBFF;
}
.goldadd[data-v-0baeb7b3]{
  background: linear-gradient(106deg, #CBFFF8 4%, #21FFF3 36%, #FFF600 98%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.goldrome[data-v-0baeb7b3]{
  color: #CF4040;
}
/* MODIFIED: Removed positioning hacks handled by Grid parent */
.cardban[data-v-0baeb7b3]{
  position: relative;
  /* top: 7px; -- Removed, handled by grid alignment */
  /* margin-right: 10px; -- Removed, handled by grid gap */
  display: inline-flex;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  line-height: 32px;
  box-shadow: inset 0px -4px 8px 0px rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
  box-sizing: border-box;
  text-align: center;
  /* Gradient/Stroke/White-20 */
  border: 1px solid #FbFbFb20;
}
.fqlrequestforTitleBox[data-v-0baeb7b3]{
  width: 100%;

  min-height: 350px;
  max-height: 550px;
  overflow-y: auto;
  text-align: center;
}
.separator[data-v-0baeb7b3] {
  margin-top: 2%;
  width: 1px;
  height: 80%; /* Make it slightly shorter than the container height */
  background-color: #555555;
}

/* Styling for the user avatar component wrapper */
.user-avatar[data-v-0baeb7b3] {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden; /* Ensures the inner image is clipped to a circle */
}
.fqlrequestforTitleList[data-v-0baeb7b3]{
  width: 100%;
  border-radius: 14px;
  color: #fbfbfb;
  text-align: left;
  padding-left: 16px;
  max-height: 520px;
  padding-top: 12px;
  background-color: #00000020;
  min-height: 330px;
}
.userInfoAndHead[data-v-0baeb7b3]{
  height: 32px;
  padding: 0 8px 0 12px;
  gap: 10px;
  position: relative;
  line-height: 32px;
  display: inline-flex;
  overflow: hidden;
  border-radius: 36px;

  border: #fbfbfb20 solid 1px;
}
.currency-item[data-v-0baeb7b3] {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* Space between the icon and the number */
  cursor: pointer; /* Keeps the clickable cursor */
}

/* Style for the currency text (the numbers) */
.currency-text[data-v-0baeb7b3] {
  color: #FBFBFB;
  font-size: 14px;
  font-weight: 500;
  line-height: 1; /* Ensures text doesn't add extra height */
}
.imgBase[data-v-0baeb7b3] {
  /* --- 你已有的样式 --- */
  background: rgba(255, 255, 255, 0.02);
  padding: 10px 15px;
  cursor: pointer;
  margin-left: 16px;
  height: 32px;
  font-size: 14px;
  border-radius: 63px;
  box-shadow: inset 0px -3px 8px 0px rgba(255, 255, 255, 0.05);
  display: inline-flex;             /* 1. 启用 Flexbox 布局 */
  align-items: center;       /* 2. 让所有子元素垂直居中 (关键!) */
  justify-content: center;   /* 3. 让所有子元素水平居中 */
  gap: 4px;                  /* 4. (可选) 在图标和文字之间增加一点间距 */
  border: 1px solid #fbfbfb20;
  color: #fbfbfb; /* 举个例子，给文字一个颜色 */
}
.icon-lingdian[data-v-0baeb7b3]{
  display: inline-flex;background: linear-gradient(135deg, #FFFDE1 -1%, #FFEA00 27%, #B1FFD5 75%, #FFF9BC 101%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;z-index: 1;
}
.mado[data-v-0baeb7b3]{
  display: inline-flex;background: linear-gradient(141deg, #FFFFFF 3%, #21FFF3 35%, #83FFA4 63%, #FFFB85 84%, #FFFAE9 108%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;z-index: 1;
}
.lingdian[data-v-0baeb7b3]{
  width: 30px;
  display: inline-block;padding-left: 12px;background: linear-gradient(135deg, #FFFDE1 -1%, #FFEA00 27%, #B1FFD5 75%, #FFF9BC 101%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;z-index: 1;
}

.projectImg[data-v-88df0773]{
  line-height: 100px;
  color: #FBFBFB;
  width: 100px;
  border: 2px dashed #fbfbfb50;
  border-radius: 16px;
  height: 100px;
  position: relative;
  margin-bottom: 30px;
  margin-top: 10px;
  text-align: center;
  background: rgb(41,43,48);
}
.loadImg[data-v-88df0773]{
  margin-left: 14px;
  overflow: hidden;
  line-height: 100px;
  color: #FBFBFB;
  width: 100px;
  border-radius: 16px;
  height: 100px;
  position: relative;
  margin-bottom: 30px;
  margin-top: 10px;
  background: rgb(41,43,48);
}
.HorizontalAlignment[data-v-88df0773]{
  display: flex;
  align-items: center;
}
.deleteFile[data-v-88df0773]{
  cursor: pointer;

  position: absolute;
  z-index: 3000;
  width: 24.96px;
  text-align: center;
  line-height: 24px;
  height: 24px;
  border-radius: 0px 16px 0px 16px;
  background: #FF005E;
  left:calc( 100% - 24.96px );
}

.container[data-v-2b632b71]{
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(25, 26, 30, 0.2) 0%, rgba(110, 114, 132, 0.2) 99%);
    box-sizing: border-box;
    border: 1px solid rgba(251, 251, 251, 0.1);
}
.containerLeft[data-v-2b632b71]{
 float:left;
 width:70%;
 color:#fbfbfb;
 padding:10px 10px 0 20px;
}
.containerLeftG[data-v-2b632b71]{
  float:left;
  width:calc(100% - 10px);
  color:#fbfbfb;
  padding:10px 10px 0 20px;
}
.containerRight[data-v-2b632b71]{
padding-left:15px;
margin-top:2%;
height:70%;
border-left: 1px solid #fbfbfb10;
float:right;
width:30%;
}

/* 使用 CSS 变量定义颜色，方便将来修改 */
[data-v-599da145]:root {
  --bg-color:#1E2025;
  --text-color: #cccccc;
  --text-color-hover: rgb(0, 187, 255);
  --hover-bg-color: #3e3e40;
  --border-color: #3c3c3c;
  --shortcut-bg-color: #3c3c40;
  --shortcut-border-color: #555555;
}
.context-cascader[data-v-599da145] {
  background-color:#1E2025;
  z-index: 10000;
  display: flex;
  overflow: hidden;
  border-radius: 8px; /* 圆角改小一点更精致 */
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* 添加阴影增加层次感 */
  width: -moz-fit-content;
  width: fit-content;
  font-family: 'Helvetica Neue', 'Arial', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  color: var(--text-color);
}

/* 展开方向 */
.direction-left[data-v-599da145] {
  flex-direction: row-reverse;
}
.direction-right[data-v-599da145] {
  flex-direction: row;
}
.cascader-column[data-v-599da145] {
  text-align: center;
  width: 170px; /* 稍微加宽以容纳快捷键 */
  max-height: 25vh;
  overflow-y: auto;
  padding: 9px 9px; /* 上下留出一点空间 */
}

/* 列之间的分隔线 */
.cascader-column + .cascader-column[data-v-599da145] {
  border-left: 1px solid var(--border-color);
}
.cascader-column ul[data-v-599da145] {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 菜单项 */
.cascader-column li[data-v-599da145] {
  position: relative;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  text-overflow:ellipsis;

  font-size: 12px;
  margin: 0 7px; /* 左右留边距 */
  border-radius: 10px; /* 内部项也加小圆角 */
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

/* 激活和悬停状态 */
.cascader-column li[data-v-599da145]:not(.cascader-divider):not(.disabled):hover,
.cascader-column li.active[data-v-599da145] {

  background-color: #fbfbfb20;
  color: rgb(0, 187, 255);
}
.item-name[data-v-599da145] {
  margin-right: 24px; /* 为快捷键和箭头留出空间 */
  margin-left: 24px;
}

/* 快捷键样式 */
.shortcut-keys[data-v-599da145] {
  display: flex;
  gap: 4px;
  color: var(--text-color);
}
.shortcut-keys kbd[data-v-599da145] {
  font-family: inherit;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 16px;
  background-color: var(--shortcut-bg-color);
  border: 1px solid var(--shortcut-border-color);
}

/* 子菜单箭头 */
.submenu-arrow[data-v-599da145] {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}
.direction-left .submenu-arrow[data-v-599da145] {
  right: auto;
  left: 10px;
}

/* 分隔线样式 */
.cascader-divider[data-v-599da145] {
  height: 1px;
  background-color: var(--border-color);
  margin: 6px 12px;
  padding: 0;
  cursor: default;
}
.save-button-left[data-v-599da145]{
  position: absolute;
  top:2px;
  right: 2px;
}
.save-button-right[data-v-599da145]{
  position: absolute;
  top:2px;
  left: 2px;
}
/* 禁用项样式 */
.cascader-column li.disabled[data-v-599da145] {
  color: #666;
  cursor: not-allowed;
}

/*
 * =======================================================
 * 新增和修改的样式
 * =======================================================
*/
.layout-containerIOS[data-v-051739fd]{
  height: calc(100vh - 65px); /* 占满整个视口高度 */
  width: 100vw; /* 占满整个视口宽度 */
  display: grid;

  /* 定义网格的列：第一列250px（侧边栏），第二列自动填充剩余空间 */
  grid-template-columns: 250px 1fr;

  /* 定义网格的行：第一行80px（顶部栏），第二行自动填充剩余空间 */
  grid-template-rows: 65px 1fr;

  /* 定义网格区域的名称，方便我们将组件放入 */
  grid-template-areas:
    "sidebar header"
    "sidebar content";
  overflow: hidden; /* 防止整个页面滚动 */
  position: relative; /* 为背景图的绝对定位提供参考 */
}
.layout-container[data-v-051739fd] {
  height: 100vh; /* 占满整个视口高度 */
  width: 100vw; /* 占满整个视口宽度 */
  display: grid;

  /* 定义网格的列：第一列250px（侧边栏），第二列自动填充剩余空间 */
  grid-template-columns: 250px 1fr;

  /* 定义网格的行：第一行80px（顶部栏），第二行自动填充剩余空间 */
  grid-template-rows: 65px 1fr;

  /* 定义网格区域的名称，方便我们将组件放入 */
  grid-template-areas:
    "sidebar header"
    "sidebar content";
  overflow: hidden; /* 防止整个页面滚动 */
  position: relative; /* 为背景图的绝对定位提供参考 */
}
/* 3. 定义网格布局容器 */


/* 背景图样式 */
.layout-background[data-v-051739fd] {
  position: absolute;
  top: 0;
  left: 0;
width: 560px;
  height: 900px;
}

/* 4. 将组件分配到指定的网格区域 */
.layout-sidebar[data-v-051739fd] {
  grid-area: sidebar;
  /* 左侧边栏的背景色和样式应该由 msLeftNavbar 组件内部定义 */
}
.layout-header[data-v-051739fd] {
  grid-area: header;
  /* 顶部导航的背景色和样式应该由 msTopNavbar 组件内部定义 */
}
.layout-content[data-v-051739fd] {
  grid-area: content;
}

/*
 * 5. 修改 .main 的样式
 * 这是最关键的改动！
*/
.main[data-v-051739fd] {
  /* 移除旧的绝对定位样式 */
  /* transform: translateZ(0);  */
  /* will-change: transform; */
  /* width: calc( 100% - 250px ); */
  /* height: calc( 100% - 80px ); */
  /* position: absolute; */
  /* left: 250px; */
  /* top: 80px; */

  /* 新增的样式 */
  overflow-y: hidden; /* 核心：只让主内容区域垂直滚动 */
  overflow-x: hidden; /* 防止水平滚动 */
  height: calc( 100% - 24px ); /* 高度自动充满其网格单元 */
  width: 100%; /* 宽度自动充满其网格单元 */
  z-index: 1; /* 确保内容在背景图之上 */

  box-sizing: border-box; /* 让 padding 不会撑大元素 */
}


/*
 * =======================================================
 * 您原有的其他样式保持不变
 * =======================================================
*/
.sharecon[data-v-051739fd]{
  width: 100%;
}
.sharecon .sharecon-button[data-v-051739fd]{
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
.sharecon .sharecon-msgcon[data-v-051739fd]{
  position:relative ;
  width: 100%;
  display: flex;
  margin: 10px;
}
.sharecon_userIMG[data-v-051739fd]{
  width: 30%;
  color: #FbFbFb;
  font-size: 12px;
  text-align: center;
}
.sharecon-msg[data-v-051739fd]{
  font-size: 12px;
  line-height: 34px;
  position: absolute;
  left: 30%;
  top: -20px;
}
.kf-container[data-v-051739fd] {
  position: fixed;
  right: 0;
  top: 85%;
  z-index: 500;
  transition: transform 0.3s ease-in-out;
  display: flex;
  align-items: center;
}
.kf-container.collapsed[data-v-051739fd] {
  transform: translateX(calc(100% - 15px));
}
.kf[data-v-051739fd] {
  background: url(/assets/kF-a9af86f4.webp);
  width: 83px;
  height: 83px;
  background-size: cover;
  cursor: pointer;
  flex-shrink: 0;
}
.triangle[data-v-051739fd] {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 15px solid #666;
  margin-left: 5px;
  cursor: pointer;
}
.kf-container:not(.collapsed) .triangle[data-v-051739fd] {
  display: none;
}


.no[data-v-45c15f58]{
  color: #ffffff80;
  border-radius: 63px;
}
.nav-item[data-v-45c15f58]{
  position: relative;
  width: 220px;
  line-height: 40px;
  height: 40px;
  margin-left: 2px;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  border-radius: 63px;
  outline: 2px solid rgba(255, 255, 255, 0);
  display: flex;
}
.nav-item.no[data-v-45c15f58]::before {
  content: '';
  position: absolute;
  /* 让伪元素完全覆盖父元素 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* 继承父元素的圆角 */
  border-radius: 63px;

  /* 默认是完全透明的 */
  background: transparent;
  transition: background 0.3s ease; /* 添加一个平滑过渡效果 */

  /* 确保它在最底层 */
  z-index: -1;
}
.nav-item.no[data-v-45c15f58]:hover::before {
  /* 在 hover 时，只改变伪元素的背景 */
  background: linear-gradient(90deg, rgba(0, 255, 241, 0.1) 0%, rgba(0, 255, 241, 0) 90%);
}
.no > .textcontainer[data-v-45c15f58]{
  padding-left: 2px;
  color: #f8f8f880 !important;
  -webkit-background-clip: text;
          background-clip: text;
  font-size: 16px;
  display: inline-block;
}
.no > .textcontainer[data-v-45c15f58] :hover{
  background-color: #cbfff800;
}
.no .icon[data-v-45c15f58]{
  padding-left: 12px;
  display: inline-block;
  background: #FbFbFb80;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.yes[data-v-45c15f58]{

  background: linear-gradient(90deg, rgba(0, 255, 241, 0.1) 0%, rgba(0, 255, 241, 0) 100%) !important;
  outline-color: #00FFF120;
}
.yes > .textcontainer[data-v-45c15f58]{
  padding-left: 2px;
  background: linear-gradient(124deg, #FFFFFF 10%, #21FFF3 37%, #83FFA4 61%, #FFFB85 79%, #FFFAE9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-size: 16px;
}
.yes > .icon[data-v-45c15f58]{
  padding-left: 12px;
  display: inline-block;
  background: linear-gradient(124deg, #FFFFFF 10%, #21FFF3 37%, #83FFA4 61%, #FFFB85 79%, #FFFAE9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.icon[data-v-45c15f58] {
}

.container[data-v-296bbdac]{
    width: 358px;
    height: 64px;
    line-height: 64px;
    cursor: pointer;
    margin: 10px;
    border-radius: 16px;
}
.wai[data-v-296bbdac] :hover{
    background: rgba(251, 251, 251, 0.1);
}
.AF[data-v-296bbdac]{
    background: rgba(251, 251, 251, 0.1);
}
.bg[data-v-296bbdac]{
    border-radius: 8px;
    position: relative;
    left: 6px;
    overflow: hidden;
    top: 6px;
    display: inline-block;
    width: 48px;
    height: 48px;
}
.type[data-v-296bbdac]{
   display: inline-block;
}
span[data-v-296bbdac]:hover{
    background: #dddddd00;
}

.listToPrimry[data-v-08db2671]{
    width: 100%;height: 580px;background-color: #1E2025;overflow-y: scroll;overflow-x: hidden;
}
.listToPrimry[data-v-08db2671]::-webkit-scrollbar {
  display: none;
}
.topContainer[data-v-08db2671]{
    height: 70%;
    overflow: hidden;
    min-width: 20px;
    width: 100%;
    margin-top: 5px;
}
.bottomContainer[data-v-08db2671]{
  z-index: 1000;
  width: 300px;
  position: absolute;
  left: 20px;
  bottom: 20px;
}
dialog
.leftNavbar[data-v-08db2671]{
    float: left;
    width: 300px;
    overflow: hidden;
    height: 100%;
    min-height: 200px;
    /* background-image: url(../../assets/image/Greenlight.webp);
    background-size: cover; */
}
.myoverlay[data-v-08db2671]{
  width: 100%;
  height: 100%;
  position: fixed;
  backdrop-filter: blur(5px);
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.096);
  z-index: 10;
  animation: overlayAnimation-08db2671 0.5s;
  animation-iteration-count:1;
}
@keyframes overlayAnimation-08db2671 {
0% {
        backdrop-filter: blur(0px);
}
100% {
        backdrop-filter: blur(5px);
}
}

/*
 * =======================================================
 * 新增和修改的样式
 * =======================================================
*/

/* 3. 定义网格布局容器 */
.layout-container[data-v-dac293ff] {
  height: 100vh; /* 占满整个视口高度 */
  width: 100vw; /* 占满整个视口宽度 */
  display: grid;

  /* 定义网格的列：第一列250px（侧边栏），第二列自动填充剩余空间 */
  grid-template-columns: 250px 1fr;

  /* 定义网格的行：第一行80px（顶部栏），第二行自动填充剩余空间 */
  grid-template-rows: 65px 1fr;

  /* 定义网格区域的名称，方便我们将组件放入 */
  grid-template-areas:
    "sidebar header"
    "sidebar content";
  overflow: hidden; /* 防止整个页面滚动 */
  position: relative; /* 为背景图的绝对定位提供参考 */
}

/* 背景图样式 */
.layout-background[data-v-dac293ff] {
  position: absolute;
  top: 0;
  left: 0;
  width: 560px;
  height: 900px;
}

/* 4. 将组件分配到指定的网格区域 */
.layout-sidebar[data-v-dac293ff] {
  grid-area: sidebar;
  /* 左侧边栏的背景色和样式应该由 msLeftNavbar 组件内部定义 */
}
.layout-header[data-v-dac293ff] {
  grid-area: header;
  /* 顶部导航的背景色和样式应该由 msTopNavbar 组件内部定义 */
}
.layout-content[data-v-dac293ff] {
  grid-area: content;
}

/*
 * 5. 修改 .main 的样式
 * 这是最关键的改动！
*/
.main[data-v-dac293ff] {
  /* 移除旧的绝对定位样式 */
  /* transform: translateZ(0);  */
  /* will-change: transform; */
  /* width: calc( 100% - 250px ); */
  /* height: calc( 100% - 80px ); */
  /* position: absolute; */
  /* left: 250px; */
  /* top: 80px; */

  /* 新增的样式 */
  overflow-y: hidden; /* 核心：只让主内容区域垂直滚动 */
  overflow-x: hidden; /* 防止水平滚动 */
  height: 100%; /* 高度自动充满其网格单元 */
  width: 100%; /* 宽度自动充满其网格单元 */
  z-index: 1; /* 确保内容在背景图之上 */

  box-sizing: border-box; /* 让 padding 不会撑大元素 */
}


/*
 * =======================================================
 * 您原有的其他样式保持不变
 * =======================================================
*/
.sharecon[data-v-dac293ff]{
  width: 100%;
}
.sharecon .sharecon-button[data-v-dac293ff]{
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
.sharecon .sharecon-msgcon[data-v-dac293ff]{
  position:relative ;
  width: 100%;
  display: flex;
  margin: 10px;
}
.sharecon_userIMG[data-v-dac293ff]{
  width: 30%;
  color: #FbFbFb;
  font-size: 12px;
  text-align: center;
}
.sharecon-msg[data-v-dac293ff]{
  font-size: 12px;
  line-height: 34px;
  position: absolute;
  left: 30%;
  top: -20px;
}
.kf-container[data-v-dac293ff] {
  position: fixed;
  right: 0;
  top: 85%;
  z-index: 500;
  transition: transform 0.3s ease-in-out;
  display: flex;
  align-items: center;
}
.kf-container.collapsed[data-v-dac293ff] {
  transform: translateX(calc(100% - 15px));
}
.kf[data-v-dac293ff] {
  background: url(../assets/image/kF.webp);
  width: 83px;
  height: 83px;
  background-size: cover;
  cursor: pointer;
  flex-shrink: 0;
}
.triangle[data-v-dac293ff] {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 15px solid #666;
  margin-left: 5px;
  cursor: pointer;
}
.kf-container:not(.collapsed) .triangle[data-v-dac293ff] {
  display: none;
}


.notice-headImg[data-v-75879c86]{
  margin-top: 10px;
  display: flex;
}
.notice-title[data-v-75879c86]{
  font-size: 14px;
  color: #FFFFFF;
  font-weight: bold;
}
.noticeUser[data-v-75879c86]{
  position:relative ;
  width: 100%;
}
.task-demand[data-v-75879c86]{
  color:  #FFFFFF ;
  margin-top: 10px;
}
.domlo[data-v-75879c86]{
  cursor: pointer;
  color: #00FFCC !important;
}
.domlo[data-v-75879c86]:hover{
  color: #00FFCC60 !important;
}
.task-demand .infoMsg[data-v-75879c86]{
  padding: 10px;
  color: #FFFFFF;
  background-color: #FBFBFB10;
  border-radius: 6px;
  margin-top: 10px;
  width: 100%;
  height: 280px;
  overflow-y: auto;
  font-size: 12px;
}
.info .annex[data-v-75879c86]{
  margin-top: 10px;
  color: #FFFFFF;
  position: relative;
}
.info .infoBOX[data-v-75879c86]{
  width: 100%;
  position: relative;
}
.infoCon[data-v-75879c86]{
  width: 100%;
  height: 524px;
  display: flex;
}
.infoCon .info[data-v-75879c86]{
  padding: 10px 20px;
  flex: 3;
  height: 100%;
}
.taskMSG[data-v-75879c86]{
  position: absolute;
  right: 0;
  display: inline-block;
  color: #FFFFFF;
}
.requestforTitleBox > .requestforTitleList[data-v-75879c86]{
  width: 100%;
  border-radius: 14px;
  text-align: left;
  padding-left: 16px;
  padding-top: 12px;
  background-color: #00000020;
  height: 436px;
}
.requestforTitleBox[data-v-75879c86]{
  width: 100%;
  height: 500px;
  text-align: center;
  overflow-y: scroll;
}
.lineColor[data-v-75879c86]{
  background: linear-gradient(107deg, #CBFFF8 8%, #21FFF3 36%, #FFF600 98%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.infoCon .notice[data-v-75879c86]{
  flex: 1.5;
  height: 100%;
  padding: 10px 20px;
}
.taskTitle[data-v-75879c86]{
  display: inline-block;
  width: 120px;
  font-weight: bold;
  color: #FBFBFB;
}
.clmsg[data-v-75879c86]{
  display: inline-block;
}

.top-image-container[data-v-32f6106c] {
  min-width: 960px;
  margin: 0 auto;
  height: 100%;
  justify-content: center; /* 水平居中图片 */
  align-items: center; /* 垂直居中图片 */
  overflow: hidden;
  border-radius: 12px;
}
@media (max-width: 768px) {
.top-image-container[data-v-32f6106c] {
    min-height: 78px;
}
}
.top-img[data-v-32f6106c] {
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  min-width: 960px;
  left: 50%;
  min-height: 90px;
  transform: translateX(-50%);
  display: block;
}
@media (max-width: 1270px) {
.top-img[data-v-32f6106c] {
    min-width: 960px;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
}
}

.Passi_table_con[data-v-3b4d9f41]{
  width: 100%;
  height: 100%;
  min-width: 1000px;
}
.Passi_table_top[data-v-3b4d9f41]{
  position: relative;
  width: 100%;
  display: flex;
}
.textmsf[data-v-3b4d9f41] {
  padding: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;  /* 修正拼写错误 */
  display: -webkit-box;
  max-height: 72px;
  left: 50%;
  -webkit-box-orient: vertical;
  position: absolute;
  bottom: 55%;
  transform: translate(-50%,50%);
  color: #fbfbfb;
  font-size: 14px;
  width: calc(100% - 50px);
  word-break: break-word;
  white-space: normal;
}
.listConditionF[data-v-3b4d9f41]{
  /* MODIFICATION: margin-right is no longer needed, gap on parent will handle it */
  /* margin-right: 20px; */
  color: #FBFBFB60;
  cursor: pointer;
}
.listConditionF[data-v-3b4d9f41]:hover{
  color: #FFFFFF;
}
.my-table-row-height[data-v-3b4d9f41] {
  --vxe-ui-table-row-height-default: 80px;
  --vxe-ui-table-row-height-medium: 60px;
  --vxe-ui-table-row-height-small: 40px;
  --vxe-ui-table-row-height-mini: 20px;
}
.my-table-row-height[data-v-3b4d9f41] .vxe-header--row th .vxe-cell {
  height: 54px !important; /* 关键：覆盖内联样式 */
}
.listConditionT[data-v-3b4d9f41] {
  /* MODIFICATION: margin-right is no longer needed, gap on parent will handle it */
  /* margin-right: 20px; */
  color: #00FFCC;
  cursor: pointer;
}
.listConditionT[data-v-3b4d9f41]:hover{
  color: #00FFCC60;
}
.fileselect[data-v-3b4d9f41]{
  width: 308px;
  height: 40px;
  /* MODIFICATION: Removed float and margin which caused the issue */
  /* float: right; */
  /* margin-right: 3%; */
}
.rigbox[data-v-3b4d9f41]{
  flex: 1;
  height: 40px;
  line-height: 40px;
  display: flex;
  /* MODIFICATION: Removed text-align, as justify-content is the correct property */
  /* text-align: right; */

  /* MODIFICATION START: Using Flexbox properties for alignment and spacing */
  justify-content: flex-end; /* Push all items to the end (right) */
  align-items: center;       /* Vertically center all items */
  gap: 24px;                 /* Create a 24px gap between each item (replaces margins) */
  /* MODIFICATION END */
}
.taskType[data-v-3b4d9f41]{
  flex: 1;
}
.taskType_Box_T[data-v-3b4d9f41]{
  width: 88px;
  height: 32px;
  border-radius: 16px;
  border: 1px solid #FBFBFB;
  line-height: 32px;

  text-align: center;
  display: inline-block;
}
.taskType_Box_F[data-v-3b4d9f41]{
  width: 88px;
  height: 32px;
  cursor: pointer;
  border-radius: 16px;
  line-height: 32px;
  text-align: center;
  display: inline-block;
}
.taskType_Box_F[data-v-3b4d9f41]:hover{
  border: 1px solid #FBFBFB;
  opacity: 0.5;
}
.Passi_table_top .title[data-v-3b4d9f41] {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  margin-left: 10px;
  color: #FBFBFB;
  margin-top: 7px;
}
.Passi_table[data-v-3b4d9f41]{
  width: 100%;
  height: calc(100% - 60px);
  min-width: 900px;
  min-height: 300px;
  border-radius: 16px;
  background:#FBFBFB05;
  overflow: hidden;
  margin-top: 20px;
}
.container[data-v-3b4d9f41] {
  width: 100%;
  min-width: 900px;
  height: 100%;
  min-height: 200px;
  overflow: hidden;
  padding: 10px 24px 24px 56px;
  scrollbar-width: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #FBFBFB;
}
@media (max-width: 768px) {
.top-image-container[data-v-3b4d9f41] {
    max-height: 150px;
}
}
@media (max-width: 480px) {
}

.msArticleBox[data-v-16c27885]{
  height: 34px;
  line-height: 34px;
  width: 100%;
  text-align: center;
  position: relative;
}

.hms[data-v-d6d9e76d]{
  display: inline-flex;
  position: relative;
  border-radius: 16px;
  min-width: 100px;
  min-height: 100px;

  background: rgba(255, 255, 255, 0.05);
}
.hms > .text[data-v-d6d9e76d]{
  min-width: 100px;
  min-height: 20px;
  position: absolute;
  top: 70%;
  width: 100%;
  height: 25%;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
  color: rgba(251, 251, 251, 0.6);
  font-size: 0.7rem;
  padding: 5px;
  word-break: break-all;
    word-wrap: break-word;
    white-space: normal;
  overflow: hidden;
}
.container[data-v-d6d9e76d]{
      width: 100%;
      height: 70%;
      position:relative;
      cursor: pointer;
}
.containermg[data-v-d6d9e76d]{
      overflow: hidden;
      width: 100%;
      border-radius: 16px 16px 0 0;
      height: 100% ;
}
.container > .titleBox[data-v-d6d9e76d]{
        width: 100%;
        z-index: 1000;
        height: calc(40% + 1px) ;
      font-size:0.8rem;
        line-height: 56px;
        overflow: hidden;
       padding-left: 10px;
        position: absolute;
        background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
        color: #fbfbfb;
        left: 0;
        top:60%;
}
 

.msg>.msgInfo[data-v-d3e86ab3]{
  width: 95%;
  margin-left: 2.5%;
  height: 34px;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(251, 251, 251, 0.05);
  margin-top: 5px;
  line-height: 34px;
  font-size: 0.7rem;
}
.msgFont[data-v-d3e86ab3]{
  white-space:nowrap;overflow: hidden;
  background: linear-gradient(105deg, #CBFFF8 5%, #21FFF3 36%, #FFF600 98%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}
.container[data-v-d3e86ab3]{
        width: 25vw;
        height: 9.5vw;
        min-height: 90px;
        background: linear-gradient(0deg, #cbfff81c 5%, #21FFF3 36%, #FFF600 98%);
        padding: 1px;
        position:relative;

        cursor: pointer;
        border-radius: 18px;
}
.container > .top[data-v-d3e86ab3]{
      font-size: 0.7rem;
        line-height:34px;
        width:100%;
        background: #00000062;
        text-align:center;
        height: 22%;
        overflow: hidden;
        border-radius: 18px 18px 0px 0px;
}
.container > .msg[data-v-d3e86ab3]{
        background: rgb(25,26,30);
        height: 78%;
       overflow: hidden;
        width:100%;
        border-radius:0px 0px 18px 18px ;
}
.container > .titleBox[data-v-d3e86ab3]{
        width: 100%;
        min-width: 301px;
        border-radius: 16px;
        z-index: 1000;
        height: 40%;
        line-height: 56px;
        text-align: center;
        position: absolute;
        background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
        color: #fbfbfb;
        left: 0;
        top:60%;
}

.custom-table{
    /* background: rgba(0, 0, 0, 0.2) !important; */
    color: #f8f8f8;
    border: 0;
}
th.el-table__cell.is-leaf{
  text-align: center;
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #1E2025;
}
.custom-table .el-table--border .el-table__inner-wrapper:after, .el-table--border:after, .el-table--border:before, .el-table__inner-wrapper:before {
    background-color: var(--el-table-border-color);
    opacity: 0;
  }
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border-top: rgb(25,26,30) solid 4px;
    border-bottom: rgb(25,26,30) solid 4px;
    height: 48px !important;
}
/* tbody tr :first-child{
  border-radius: 20px 0px 0px 20px;
 
} */
/* tbody tr :last-child{
    border-radius: 0px 20px 20px 0px;
} */
.custom-table .el-table__body td.el-table__cell:first-child{
    border-radius: 20px 0px 0px 20px;
    overflow: hidden;
   
  }
  .custom-table .el-table__body td.el-table__cell:last-child{
    border-radius:0px 20px  20px 0px;
    overflow: hidden;
   
  }
  .custom-table .el-table__body td.el-table__cell {
    background: rgba(20,21,24);
    overflow: hidden;
}

/* .el-table .cell{
    height: 48px;

} */

 .el-table {
    --el-table-border-color: var(--el-border-color-lighter);
    --el-table-border: 0px solid var(--el-table-border-color); /**这里改成0了 */
    --el-table-text-color: #f8f8f8; /**文字颜色 */
    --el-table-header-text-color: rgba(135, 198, 235, 0); /**表头文字颜色 */
    --el-table-row-hover-bg-color: rgba(251, 251, 251, 0.1); /**行悬浮颜色 */
    --el-table-current-row-bg-color: #f8f8f800; /**当前行颜色 */
    --el-table-header-bg-color: rgba(255, 0, 0, 0); /**表头背景颜色, 透明度为0 */
    --el-table-fixed-box-shadow: var(--el-box-shadow-light);
    --el-table-bg-color: rgba(76, 112, 153, 0); /**表格背景颜色, 透明度为0 */
    --el-table-tr-bg-color: rgba(255, 0, 0, 0); /**表格行的背景颜色, 透明度为0 */;
    --el-table-expanded-cell-bg-color: var(--el-fill-color-blank);
    --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0);
    --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0);
    --el-table-index: var(--el-index-normal);
    background-color: rgba(255, 0, 0, 0); /**表格的背景颜色, 透明度为0 */;
    box-sizing: border-box;
    font-size: 14px;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .headcell{
    text-align:center;
    font-size: 12px;
    background: rgba(25,26,30) !important;
    color: #f8f8f8;
    border: none !important;
  }
  .rowstyle{
    border-radius: 62px;
                height: 48px;
                padding: 10px;
                border-collapse: separate;
                font-size : 14px;
                background: rgba(25,26,30) !important;
  }

.hms[data-v-9b1e7d14]{
  display: inline-flex;
  position: relative;
  border-radius: 16px;
  min-height: 180px;
  max-height: 200px;
  min-width: 322px;

  background: rgba(255, 255, 255, 0.05);
}
.hms > .text[data-v-9b1e7d14]{
  min-width: 100px;
  min-height: 20px;
  position: absolute;
  top: 70%;
  width: 100%;
  height: 25%;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
  color: rgba(251, 251, 251, 0.6);
  font-size: 0.7rem;
  padding: 5px;
  word-break: break-all;
    word-wrap: break-word;
    white-space: normal;
  overflow: hidden;
}
.container[data-v-9b1e7d14]{
      width: 100%;
      height: 100%;
      cursor: pointer;
}
.containermg[data-v-9b1e7d14]{

      overflow: hidden;
      width: 100%;
      border-radius: 16px;
      height: 100% ;
}
.container > .titleBox[data-v-9b1e7d14]{
        width: 100%;
        z-index: 1000;
      text-overflow:ellipsis;
        height: calc(40% + 1px) ;
      font-size:14px;
        line-height: 106px;
        overflow: hidden;
      text-align: center;
       padding-left: 10px;
        position: absolute;
      border-radius:  0px 0px 16px 16px;
      background: linear-gradient(0deg,  rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
        color: #fbfbfb;
        left: 0;
        top:60%;
}
/*@media (max-width: 1570px) {
  .container > .titleBox{
    font-size: 10px;
  }
}
@media (max-width: 1370px) {
  .container > .titleBox{
    font-size: 10px;
    line-height: 66px;
  }
}
@media (max-width: 1070px) {
  .container > .titleBox{
    font-size: 10px;
    line-height: 46px;
  }
}*/

.project-card[data-v-a9bcf24e] {
  display: flex;
  align-items: center;
  gap: 16px; /* 图片和信息之间的间距 */
  width: 430px;
  height: 130px;
  padding: 12px;
  background-color: #262a2e; /* 根据图片调整的深灰色背景 */
  border-radius: 12px; /* 更圆润的边角 */
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.project-card[data-v-a9bcf24e]:hover {
  background-color: #3a3f44;
}
.image-container[data-v-a9bcf24e] {
  flex-shrink: 0; /* 防止图片被压缩 */
}
.project-image[data-v-a9bcf24e] {
  width: 76px;
  height: 100px;
  border-radius: 8px; /* 图片的圆角 */
  -o-object-fit: cover;
     object-fit: cover; /* 保证图片不变形 */
  display: block;
}
.info-container[data-v-a9bcf24e] {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 让顶部信息和底部时间戳分开 */
  height: 100%;
  color: #f0f0f0;
}
.info-top[data-v-a9bcf24e],
.info-bottom[data-v-a9bcf24e] {
  display: flex;
  flex-direction: column;
}
.title[data-v-a9bcf24e] {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tags[data-v-a9bcf24e] {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  gap: 8px; /* 标签之间的间距 */
  margin-bottom: 6px;
}
.tag[data-v-a9bcf24e] {
  display: inline-block;
  padding: 3px 8px;
  font-size: 12px;
  background-color: #3e444a;
  border-radius: 4px;
}
.works-count[data-v-a9bcf24e],
.timestamp[data-v-a9bcf24e] {
  font-size: 12px;
  color: #8e959b; /* 较浅的灰色，用于次要信息 */
  margin: 0;
  line-height: 1.4;
}
.info-bottom[data-v-a9bcf24e] {
  gap: 2px; /* 时间戳之间的微小间距 */
}
.lineBox[data-v-a9bcf24e]{
  display: flex;
  gap: 8px;
}

[data-v-e4b4c248] .project-header-cell {
  text-align: left !important;
}
[data-v-e4b4c248] .project-header-cell .vxe-cell {
  padding-left: 20px !important;
}
[data-v-e4b4c248] .project-header-cell .vxe-cell .vxe-cell--wrapper {
  padding-left: 10px !important;
}
.container[data-v-e4b4c248] {
  width:  100%;
  /* Set height relative to viewport, minus header. */
  height: calc(100vh - 65px);
  /* Fallback minimum height for short viewports. */
  /* CRITICAL: This ensures the layout doesn't shrink below 960px. */
  min-width: 960px;
  min-height: 500px;
  padding: 17px 24px 20px 52px;
  /* Allow vertical scrolling for the whole page if content overflows. */
  overflow-y: auto;
  /* The browser will add a horizontal scrollbar automatically if the viewport is narrower than min-width. */
  overflow-x: hidden;
  scrollbar-width: none;
  box-sizing: border-box;

  /* Flexbox layout to distribute vertical space. */
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #FBFBFB;
}

/* New class to replace inline style on the top image container for consistency. */
.top-image-wrapper[data-v-e4b4c248] {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}
.top-img[data-v-e4b4c248] {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.content-row[data-v-e4b4c248] {
  display: flex;
  flex-wrap: wrap;
  white-space: nowrap;
  gap: 20px;
  /* Standardized width */
  width: 100%;
}
.article-list-box[data-v-e4b4c248] {
  flex: 2;
  min-width: 300px;
  display: flex;
  flex-direction: column;
}
.thank-box[data-v-e4b4c248] {
  margin-left: 20px;
  position: relative;
  top: 2px;
  flex: 0 0 auto;
  min-width: 150px;
  display: flex;
  flex-direction: column;
}
[data-v-e4b4c248]::-webkit-scrollbar {
  display: none;
}
.section-header[data-v-e4b4c248] {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.title-bar[data-v-e4b4c248] {
  width: 0px;
  height: 22px;
  background: #FFFFFF;
  border-radius: 0 3px 3px 0;
}
.title[data-v-e4b4c248] {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: #FBFBFB;
}
.move-article[data-v-e4b4c248] {
  cursor: pointer;
  margin-left: auto;
  color: #FBFBFB;
  display: flex;
  align-items: center;
  gap: 4px;
}
.article-list[data-v-e4b4c248] {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  scrollbar-width: none;
  min-height: 100px;
}
.article-list[data-v-e4b4c248]::-webkit-scrollbar {
  display: none;
}
.article-list ul[data-v-e4b4c248] {
  display: flex;
  padding: 0;
  margin: 0;
  height: 100%;
  list-style: none;
}
.article-list li[data-v-e4b4c248] {
  flex: 0 0 auto;
}
.thank-content[data-v-e4b4c248] {
  flex: 1;
}
.table-container[data-v-e4b4c248] {
  width: 100%;
  /* CRITICAL: flex: 1 makes this container take all available vertical space. */
  flex: 1;
  /* CRITICAL: Modern flexbox fix. Allows the container to shrink properly. Replaces height:2px hack. */
  min-height: 0;
  min-width: 960px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.table-wrapper[data-v-e4b4c248] {
  overflow: hidden;
  height: 100% ;
  /* Standardized width */
  width: 100%;
  background-color: rgb(25, 26, 30);
  border-radius: 12px;
  padding: 5px;
}
.itemButton[data-v-e4b4c248] {
  width: 170px;
  border-radius: 12px;
  height: 40px;
  color: #FBFBFB;
  line-height: 40px;
  padding-left: 15px;
  cursor: pointer;
}
.itemButton span[data-v-e4b4c248] {
  margin-left: 5px;
}
.table-in-history[data-v-e4b4c248] {
  width: 100%;
  height: 430px;
}

/* This media query is fine as 1233px is > 960px */

/* Removed conflicting styles from media query for screens smaller than 960px */

/* Card style for vxe-table */
.card-style-table[data-v-e4b4c248] {
  background-color: transparent !important;
}
.card-style-table[data-v-e4b4c248] .vxe-body--row {
  border: none !important;
}
.card-style-table[data-v-e4b4c248] .vxe-body--column .vxe-cell {
  background-color: rgb(20, 21, 24);
  padding: 10px !important;
  transition: background-color 0.2s ease;
}
.card-style-table[data-v-e4b4c248] .vxe-body--column {
  background-image: none !important;
  background-color: transparent !important;
}
.card-style-table[data-v-e4b4c248] .vxe-body--row .vxe-body--column:first-child .vxe-cell {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.card-style-table[data-v-e4b4c248] .vxe-body--row .vxe-body--column:last-child .vxe-cell {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.card-style-table[data-v-e4b4c248] .vxe-body--row.row--hover .vxe-body--column .vxe-cell {
  background-color: #FBFBFB10 !important;
}
.card-style-table[data-v-e4b4c248] .vxe-table--border-line {
  border: none !important;
}
.card-style-table[data-v-e4b4c248] .vxe-header--row {
  background-color: rgb(25, 26, 30) !important;
  color: #fbfbfb !important;
}

/* General Scrollbar Styles */
[data-v-e4b4c248]::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
[data-v-e4b4c248]::-webkit-scrollbar-track {
  background: #f1f1f100;
  border-radius: 4px;
}
[data-v-e4b4c248]::-webkit-scrollbar-thumb {
  background: #88888820;
  border-radius: 4px;
}
[data-v-e4b4c248]::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* --- 遮罩层基础样式 --- */
.loading-overlay[data-v-38e85528] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 15, 20, 0.85); /* 深色半透明背景 */
  backdrop-filter: blur(8px); /* 毛玻璃效果，提升质感 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  color: #e0e6f0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* --- 内容容器 --- */
.loading-content[data-v-38e85528] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

/* --- 科技感动画 Spinner --- */
.tech-spinner[data-v-38e85528] {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
}
.spinner-ring[data-v-38e85528] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid transparent;
  animation: rotate-38e85528 2s linear infinite;
}
.ring-1[data-v-38e85528] {
  border-top-color: #CBFFF8; /* 青色辉光 */
  box-shadow: 0 0 10px #CBFFF8, inset 0 0 10px #CBFFF8;
  animation-duration: 1.5s;
}
.ring-2[data-v-38e85528] {
  border-right-color: #21FFF3; /* 绿色辉光 */
  box-shadow: 0 0 15px #21FFF3, inset 0 0 15px #21FFF3;
  animation-duration: 2s;
  animation-direction: reverse; /* 反向旋转，增加层次感 */
}
.ring-3[data-v-38e85528] {
  border-bottom-color: #FFF600; /* 紫色辉光 */
  box-shadow: 0 0 20px #FFF600, inset 0 0 20px #FFF600;
  animation-duration: 2.5s;
  transform: scale(0.8);
}
@keyframes rotate-38e85528 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}

/* --- 进度条 --- */
.progress-container[data-v-38e85528] {
  width: 300px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.progress-bar[data-v-38e85528] {
  flex-grow: 1;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.progress-bar-inner[data-v-38e85528] {
  height: 100%;
  background: linear-gradient(90deg, #00f2ff, #7dff00); /* 从青色到绿色的渐变 */
  border-radius: 5px;
  transition: width 0.3s ease-out;
  box-shadow: 0 0 8px #7dff00;
}
.progress-text[data-v-38e85528] {
  font-size: 16px;
  font-weight: bold;
  min-width: 50px;
}

/* --- 提示文本 --- */
.status-message[data-v-38e85528] {
  font-size: 18px;
  margin: 0;
  font-weight: 500;
  color: #fff;
}
.hint-text[data-v-38e85528] {
  font-size: 14px;
  color: #a0a8b4; /* 稍暗的颜色 */
  margin: 0;
  max-width: 300px;
}
/*---- 终止按钮------*/
.delappend-button[data-v-38e85528] {
  margin-top: 20px;
  padding: 10px 25px;
  border: 1px solid #FF005E;
  background-color: rgba(138, 2, 52, 0.38);
  color: #FF005E;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.delappend-button[data-v-38e85528]:hover {
  background-color: rgba(138, 2, 52, 0.38);
  box-shadow: 0 0 15px #5c0024;
  transform: translateY(-2px);
}
/* --- 追加按钮 --- */
.append-button[data-v-38e85528] {
  margin-top: 20px;
  padding: 10px 25px;
  border: 1px solid #00f2ff;
  background-color: rgba(0, 242, 255, 0.1);
  color: #00f2ff;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.append-button[data-v-38e85528]:hover {
  background-color: rgba(0, 242, 255, 0.2);
  box-shadow: 0 0 15px rgba(0, 242, 255, 0.5);
  transform: translateY(-2px);
}

/* --- Vue 过渡效果 --- */
.fade-enter-active[data-v-38e85528],
.fade-leave-active[data-v-38e85528] {
  transition: opacity 0.5s ease;
}
.fade-enter-from[data-v-38e85528],
.fade-leave-to[data-v-38e85528] {
  opacity: 0;
}

.modelBox[data-v-f0c68351]{
  width: 120px;
  height: 120px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: inline-block;
  margin-left: 10px;
}
.msgmodle[data-v-f0c68351]{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fbfbfb;
  height: 30px;
  background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
  text-align: center;
  line-height: 30px;
}
.modelCon[data-v-f0c68351]{
  float: right;
  margin-top: 20px;
}
.cavansButton[data-v-f0c68351]{
  margin-left:16px;
}
.context-menu-popover .menu-item[data-v-f0c68351] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}
.context-menu-popover .menu-item[data-v-f0c68351]:hover {
  background-color: #f5f7fa;
}
.context-menu-popover .menu-item span[data-v-f0c68351] {
  margin-right: 16px;
}
.close-btn[data-v-f0c68351] {
  margin-top: 8px;
  border-top: 1px solid #eee;
  justify-content: center !important;
  color: #606266;
}

.status-panel[data-v-3631bb17] {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  max-width: 500px;
}
.error-message[data-v-3631bb17] {
  color: red;
  font-weight: bold;
}
.ifr[data-v-3631bb17] {
  border: 0;
  box-shadow: none!important;
}

.itemButton[data-v-fcb61bec]{
    width: 100%;
    border-radius: 12px;
    height: 40px;
  font-size: 12px;
    line-height: 40px;
    padding-left: 10px;
    cursor: pointer;
  margin-left: -5px;
    /* margin-left: 5px;
    padding-left: 19px;
    padding-top: 11px;
    padding-bottom: 11px; */
}
.itemButton[data-v-fcb61bec]:hover{
    background: rgba(251, 251, 251, 0.05);
}
.itemButton span[data-v-fcb61bec]{
    font-size: 16.5px;
    margin-left:11px ;
    color: #FBFBFB;
    font-weight: 500;
}
.tableInHistory[data-v-fcb61bec]{
    height: 440px;
    background-color: rgb(25,26,30);
    border-radius: 12px;
    width: 452px;
    padding: 10px;
    margin-top: 12px;
}
.download-container[data-v-fcb61bec] {
  position: relative;
  /* 确保 itemButton 的样式不会干扰内部布局 */
  display: flex;
  align-items: center;
}

/* 格式选择面板的样式 */
.format-panel[data-v-fcb61bec] {
  position: absolute; /* 相对于 .download-container 定位 */
  left: 115%; /* 定位在父容器的右侧 */
  top: -10px; /* 稍微向上偏移一点，让视觉效果更好 */
  background-color: #1e2025; /* 面板背景色，根据你的UI调整 */
  border: 1px solid #444;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 10; /* 确保它在其他元素之上 */
  padding: 5px;
  white-space: nowrap; /* 防止选项换行 */
}

/* 当鼠标悬停在 .download-container 上时，显示 .format-panel */
.download-container:hover .format-panel[data-v-fcb61bec] {
  display: block;
}

/* 每个格式选项的样式 */
.format-item[data-v-fcb61bec] {
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  color: #fbfbfb; /* 文字颜色 */
  transition: background-color 0.2s;
}

/* 格式选项的悬停效果 */
.format-item[data-v-fcb61bec]:hover {
  background-color: #00FFCC; /* 悬停背景色，根据你的UI调整 */
  color: #fff;
}


.tableInHistory[data-v-3f01751e]{
    height: 306px;
    background-color: rgb(25,26,30);
    border-radius: 12px;
    width: 352px;
    text-align: center;
    padding-top: 40px;
    margin-top: 12px;
}

/* Scoped CSS is the Vue equivalent for component-specific styles */
.slider-thumb[data-v-740a7fb5]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #CBFFF8;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #1E2025;
  margin-top: -6px;
}
.slider-thumb[data-v-740a7fb5]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #CBFFF8;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #1E2025;
}

.slider-thumb-progress[data-v-7661b7ea]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #CBFFF8;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #1E2025;
  margin-top: -6px;
}
.slider-thumb-progress[data-v-7661b7ea]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #CBFFF8;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #1E2025;
}
.barbox[data-v-7661b7ea]{
  background-color: #1E2025;
}
:root {
    --un-rotate: 0;
    --un-scale-x: 1;
    --un-scale-y: 1;
    --un-translate-x: 0;
    --un-translate-y: 0;
    --un-ring-offset-shadow: 0 0 rgb(0 0 0 / 0);
    --un-ring-shadow: 0 0 rgb(0 0 0 / 0);
    --un-shadow: 0 0 rgb(0 0 0 / 0);
    --un-shadow-inset: ;
}


/* --- Keyframes for Animations --- */
@keyframes pulse-slider-thumb {
    50% { opacity: .5; }
}


/* --- Slider Component Scoped Styles --- */
.slider-thumb-progress::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    border-radius: 9999px;
    /* 关键修改：使用 CSS 变量来创建动态渐变背景 */
    background: linear-gradient(to right,
    #00FFCC 0%,
    #00BBFF var(--progress-percentage, 0%),
    #374151 var(--progress-percentage, 0%),
    #374151 100%
    );
}

/* 2. 为 Webkit 浏览器定义手柄样式 */
.slider-thumb-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #CBFFF8;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #1E2025;
    margin-top: -4px; /* 使用 -4px 似乎更居中一些 */
}

/* 3. 为 Firefox 浏览器提供兼容性样式 */
.slider-thumb-progress::-moz-range-track {
    width: 100%;
    height: 8px;
    cursor: pointer;
    background: #374151; /* Firefox 的渐变需要额外处理，这里先保证基础样式 */
    border-radius: 9999px;
}

.slider-thumb-progress::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #CBFFF8;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #1E2025;
}

/* Firefox 的进度条颜色需要用 ::-moz-range-progress 伪元素 */
.slider-thumb-progress::-moz-range-progress {
    background: linear-gradient(to right, #00FFCC, #00BBFF);
    height: 8px;
    border-radius: 9999px;
}

/* --- Utility Classes --- */
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.inset-0 { inset: 0; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.top-4 { top: 1rem; }
.right-4 { right: 1rem; }
.z-30 { z-index: 30; }
.z-50 { z-index: 50; }
.m-0 { margin: 0; }
.flex { display: flex; }
.h-full { height: 100%; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-40 { width: 10rem; }
.w-52 { width: 13rem; }
.w-full { width: 100%; }
.flex-col { flex-direction: column; }
.transform { transform: translate(var(--un-translate-x)) translateY(var(--un-translate-y)) rotate(var(--un-rotate)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)); }
.cursor-default { cursor: default; }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.space-x-2 > :not([hidden]) ~ :not([hidden]) { margin-left: calc(0.5rem * calc(1 - var(--un-space-x-reverse))); margin-right: calc(0.5rem * var(--un-space-x-reverse)); }
.space-x-3 > :not([hidden]) ~ :not([hidden]) { margin-left: calc(0.75rem * calc(1 - var(--un-space-x-reverse))); margin-right: calc(0.75rem * var(--un-space-x-reverse)); }
.space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: calc(1rem * calc(1 - var(--un-space-x-reverse))); margin-right: calc(1rem * var(--un-space-x-reverse)); }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: calc(0.5rem * calc(1 - var(--un-space-y-reverse))); margin-bottom: calc(0.5rem * var(--un-space-y-reverse)); }
.overflow-hidden { overflow: hidden; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: 0.5rem; }
.border { border-width: 1px; }
.border-r { border-right-width: 1px; }
.border-white { border-color: rgb(255 255 255); }
.border-white\/10 { border-color: rgb(255 255 255 / 0.1); }
.bg-\[\#0D0E12\] { background-color: #0D0E12; }
.bg-\[\#191A1E\] { background-color: #191A1E; }
.bg-\[\#1E2025\] { background-color: #1E2025; }
.bg-\[\#1E2025\]\/80 { background-color: rgb(30 32 37 / 0.8); }
.bg-\[\#00FFCC\] { background-color: #00FFCC; }
.bg-black\/70 { background-color: rgb(0 0 0 / 0.7); }
.bg-white\/20 { background-color: rgb(255 255 255 / 0.2); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--un-gradient-stops)); }
.from-\[\#CBFFF8\] { --un-gradient-from: #CBFFF8; --un-gradient-stops: var(--un-gradient-from), var(--un-gradient-to, rgb(203 255 248 / 0)); }
.via-\[\#21FFF3\] { --un-gradient-to: rgb(33 255 243 / 0); --un-gradient-stops: var(--un-gradient-from), #21FFF3, var(--un-gradient-to); }
.to-\[\#FFF600\] { --un-gradient-to: #FFF600; }
.object-contain { -o-object-fit: contain; object-fit: contain; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.pr-4 { padding-right: 1rem; }
.sm\:p-8 { padding: 2rem; }
.md\:p-12 { padding: 3rem; }
.md\:w-64 { width: 16rem; }
.text-center { text-align: center; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-\[\#0D0E12\] { color: #0D0E12; }
.text-gray-300 { color: rgb(209 213 219); }
.text-gray-400 { color: rgb(156 163 175); }
.text-gray-600 { color: rgb(75 85 99); }
.text-white { color: rgb(255 255 255); }
.shadow-2xl { --un-shadow: var(--un-shadow-inset) 0 25px 50px -12px var(--un-shadow-color, rgb(0 0 0 / 0.25)); box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow); }
.shadow-lg { --un-shadow: var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / .1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / .1)); box-shadow: var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow); }
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.duration-200 { transition-duration: 0.2s; }
.appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.pointer-events-none { pointer-events: none; }
.hover\:bg-\[\#2a2d33\]:hover { background-color: #2a2d33; }
.hover\:bg-\[\#FF005E\]:hover { background-color: #FF005E; }
.hover\:text-white:hover { color: rgb(255 255 255); }
.hover\:text-\[\#00FFCC\]:hover { color: #00FFCC; }
.hover\:opacity-90:hover { opacity: 0.9; }
.min-w-\[40px\] { min-width: 40px; }
.bg-gray-700 { background-color: rgb(55 65 81); }

/* Custom class for the slider track to show progress */
.slider-thumb-progress {
    background: linear-gradient(to right, #00FFCC 0%, #00BBFF 50%, #374151 50%, #374151 100%); /* Example percentage */
}
/* 主容器样式，模仿图片中的暗色背景和内边距 */
.erase-options-container[data-v-8ed67884] {
  background-color: #2c2f33; /* 暗灰色背景 */
  padding: 20px;
  border-radius: 8px;
  color: #e0e0e0; /* 浅色文字 */
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
  'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  width: 100%; /* 根据图片估算一个宽度 */
}

/* 每一行选项的通用样式 */
.option-row[data-v-8ed67884] {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.option-row[data-v-8ed67884]:last-child {
  margin-bottom: 0;
}

/* 标签文字样式 */
.label[data-v-8ed67884] {
  font-size: 16px;
  margin-right: 16px;
  min-width: 70px; /* 让标签对齐 */
  text-align: left;
}

/* 开关旁边的提示文字 */
.hint[data-v-8ed67884] {
  font-size: 14px;
  color: #8e9297;
  margin-left: 12px;
}

/* Element Plus Radio 样式覆盖 */
[data-v-8ed67884] .el-radio__label {
  color: #e0e0e0;
}
[data-v-8ed67884] .el-radio__inner {
  background-color: transparent;
  border: 1px solid #8e9297;
}

/* 手动选择下的操作区域 */
.manual-actions[data-v-8ed67884] {
  gap: 20px; /* 两个按钮之间的间距 */
}

/* 自定义的操作按钮盒子 */
.action-box[data-v-8ed67884] {
  width: 100px;
  height: 100px;
  border: 2px dashed #757575;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  color: #b0b0b0;
}
.action-box[data-v-8ed67884]:hover {
  border-color: #ffffff;
  color: #ffffff;
}

/* "重新设置" 按钮内的预览样式 */
.reset-preview[data-v-8ed67884] {
  width: 80px;
  height: 80px;
  background-color: #000;
  border-radius: 6px;

  display: flex;
  justify-content: center;
  align-items: center;
}
.reset-line[data-v-8ed67884] {
  width: 70%;
  height: 5px;
  background-color: #fff;
}

/* 弹窗整体样式 */
.translation-creator-dialog[data-v-1fcca51e] {
  border-radius: 12px;
  overflow: hidden; /* Ensure rounded corners for internal elements */
  background-color: #242424; /* Dark background */
  color: #e0e0e0; /* Light text for dark background */
}

/* 覆盖 Element Plus 弹窗头部样式 */
.translation-creator-dialog .el-dialog__header[data-v-1fcca51e] {
  background-color: #242424;
  border-bottom: 1px solid #333;
  padding: 20px 24px 10px;
}
.translation-creator-dialog .el-dialog__title[data-v-1fcca51e] {
  color: #e0e0e0;
  font-size: 18px;
  font-weight: bold;
}

/* 覆盖 Element Plus 弹窗内容样式 */
.translation-creator-dialog .el-dialog__body[data-v-1fcca51e] {
  padding: 20px 24px;
  background-color: #242424;
}

/* 覆盖 Element Plus 表单项标签颜色 */
.translation-creator-dialog .el-form-item__label[data-v-1fcca51e] {
  color: #b0b0b0; /* Slightly lighter than main text for labels */
}

/* 覆盖 Element Plus 输入框/选择器背景和文字颜色 */
.translation-creator-dialog[data-v-1fcca51e] .el-input__wrapper,
.translation-creator-dialog[data-v-1fcca51e] .el-textarea__inner,
.translation-creator-dialog[data-v-1fcca51e] .el-select__wrapper {
  background-color: #3a3a3a !important;
  box-shadow: none !important;
  border: 1px solid #555 !important;
}
.translation-creator-dialog[data-v-1fcca51e] .el-input__inner::-moz-placeholder, .translation-creator-dialog[data-v-1fcca51e] .el-textarea__inner::-moz-placeholder {
  color: #a0a0a0 !important;
}
.translation-creator-dialog[data-v-1fcca51e] .el-input__inner,
.translation-creator-dialog[data-v-1fcca51e] .el-textarea__inner,
.translation-creator-dialog[data-v-1fcca51e] .el-input__inner::placeholder,
.translation-creator-dialog[data-v-1fcca51e] .el-textarea__inner::placeholder,
.translation-creator-dialog[data-v-1fcca51e] .el-select__placeholder {
  color: #a0a0a0 !important;
}
.translation-creator-dialog[data-v-1fcca51e] .el-input__inner,
.translation-creator-dialog[data-v-1fcca51e] .el-textarea__inner {
  color: #e0e0e0 !important;
}

/* 移除文字下拉框宽度调整，以适应表单项 */
.translation-creator-dialog .el-select[data-v-1fcca51e] {
  width: 100%;
}

/* 视频来源单选框样式 */
.video-source-item .el-radio-group[data-v-1fcca51e] {
  display: flex;
  gap: 20px;
}
.video-source-item[data-v-1fcca51e] .el-radio__label {
  color: #e0e0e0;
}

/* 上传区域样式 */
.local-video-upload-area[data-v-1fcca51e] {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align upload box to left */
  width: 100%;
}
.video-uploader[data-v-1fcca51e] .el-upload-dragger {
  background-color: #3a3a3a;
  border: 1px dashed #555;
  border-radius: 8px;
  padding: 20px;
  width: 120px; /* Adjust width as needed */
  height: 120px; /* Adjust height as needed */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.3s;
}
.video-uploader[data-v-1fcca51e] .el-upload-dragger:hover {
  border-color: #00FFCC;
}
.video-uploader[data-v-1fcca51e] .el-icon--upload {
  color: #a0a0a0;
  font-size: 32px;
  line-height: 1;
}
.video-uploader[data-v-1fcca51e] .el-upload__text {
  color: #a0a0a0;
  font-size: 14px;
  margin-top: 8px;
}
.video-uploader[data-v-1fcca51e] .el-upload-list {
  width: 100%;
  margin-top: 10px;
  display: none;
  background-color: #3a3a3a; /* Match input background */
  border-radius: 4px;
  padding: 5px 10px;
}
.video-uploader[data-v-1fcca51e] .el-upload-list__item {
  color: #e0e0e0;
  background-color: #3a3a3a;
}
.video-uploader[data-v-1fcca51e] .el-upload-list__item-name {
  color: #e0e0e0;
}
.video-uploader[data-v-1fcca51e] .el-upload-list__item .el-icon--close {
  color: #b0b0b0; /* Close icon color */
}
.upload-tip[data-v-1fcca51e] {
  color: #888;
  font-size: 12px;
  margin-top: 10px;
}

/* 弹窗底部按钮样式 */
.dialog-footer[data-v-1fcca51e] {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.translation-creator-dialog .el-dialog__footer[data-v-1fcca51e] {
  background-color: #242424;
  border-top: 1px solid #333;
  padding: 15px 24px 20px;
}

/* 自定义渐变按钮样式 */
.gradient-button[data-v-1fcca51e] {
  background-image: linear-gradient(to right, #6EE7B7, #3B82F6);
  border: none;
  color: white;
  font-weight: bold;
  transition: opacity 0.3s ease;
}
.gradient-button[data-v-1fcca51e]:hover {
  opacity: 0.9;
  color: white !important; /* Ensure text color remains white on hover */
  background-image: linear-gradient(to right, #6EE7B7, #3B82F6); /* Preserve gradient on hover */
}
.deleteFile[data-v-1fcca51e]{
  cursor: pointer;

  position: absolute;
  z-index: 3000;
  width: 24.96px;
  text-align: center;
  line-height: 24px;
  height: 24px;
  border-radius: 0px 16px 0px 16px;
  background: #FF005E;
  left:calc( 100% - 24.96px );
}

/* 样式保持不变 */
.task-batch-manager[data-v-6226e812] {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 360px; /* Fixed width */
  max-height: 500px; /* Max height for scrollable content */
  background-color: #242424; /* Dark background */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  color: #e0e0e0;
  z-index: 100000; /* Ensure it's above other content */
  overflow: hidden; /* For smooth expand/collapse */
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease-in-out;
}
.header[data-v-6226e812] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #2c2c2c;
  border-bottom: 1px solid #333;
  cursor: pointer;
  font-weight: bold;
}
.header .left[data-v-6226e812] {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}
.header .remaining-count[data-v-6226e812] {
  font-size: 14px;
  color: #a0a0a0;
  background-color: #3a3a3a;
  padding: 2px 8px;
  border-radius: 4px;
}
.header .right[data-v-6226e812] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.expand-icon[data-v-6226e812], .close-icon[data-v-6226e812] {
  color: #a0a0a0;
  cursor: pointer;
  transition: color 0.3s;
}
.expand-icon[data-v-6226e812]:hover, .close-icon[data-v-6226e812]:hover {
  color: #fff;
}
.content[data-v-6226e812] {
  flex-grow: 1;
  overflow: hidden; /* Ensures scrollbar inside task-list, not content */
  padding-bottom: 10px; /* Padding for the bottom of the list */
}
.overall-progress-bar[data-v-6226e812] {
  padding: 10px 16px 5px;
}

/* Override Element Plus progress bar color */
[data-v-6226e812] .el-progress-bar__outer {
  background-color: #4a4a4a !important;
}
[data-v-6226e812] .el-progress-bar__inner {
  background-image: linear-gradient(to right, #6EE7B7, #3B82F6) !important;
}
.task-list[data-v-6226e812] {
  max-height: 380px; /* Adjust based on overall panel height and header/footer */
  overflow-y: auto;
  padding: 0 16px;
  padding-right: 8px; /* For scrollbar space */
}
.task-list[data-v-6226e812]::-webkit-scrollbar {
  width: 6px;
}
.task-list[data-v-6226e812]::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 3px;
}
.task-list[data-v-6226e812]::-webkit-scrollbar-track {
  background-color: #3a3a3a;
}
.task-item[data-v-6226e812] {
  background-color: #333;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
.task-item[data-v-6226e812]:last-child {
  margin-bottom: 0;
}
.task-info[data-v-6226e812] {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.task-name[data-v-6226e812] {
  font-weight: bold;
  color: #f0f0f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%; /* Adjust width */
}
.task-time[data-v-6226e812] {
  color: #a0a0a0;
  font-size: 12px;
}
.task-status-row[data-v-6226e812] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.progress-wrapper[data-v-6226e812] {
  flex-grow: 1;
}
.progress-message[data-v-6226e812] {
  max-width: 248px;
  font-size: 12px;
  color: #a0a0a0;
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Override Element Plus progress bar color for individual items */
.task-item[data-v-6226e812] .el-progress-bar__outer {
  background-color: #4a4a4a !important;
}
.task-item[data-v-6226e812] .el-progress-bar__inner {
  background-image: linear-gradient(to right, #3b82f6, #6EE7B7) !important; /* Blue to green gradient for active */
}
.task-item[data-v-6226e812] .el-progress__text {
  color: #f0f0f0 !important;
  font-size: 12px !important;
  margin-left: 8px;
}
.status[data-v-6226e812] {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
}
.status.creating[data-v-6226e812] {
  /* Use progress bar for creating status */
}
.status.waiting[data-v-6226e812] {
  background-color: #f59e0b; /* Yellow/Orange */
  color: white;
}
.status.failed[data-v-6226e812] {
  background-color: #ef4444; /* Red */
  color: white;
}
.status.success[data-v-6226e812] {
  background-color: #22c55e; /* Green */
  color: white;
}
.status.cancelled[data-v-6226e812] {
  background-color: #6b7280; /* Gray */
  color: white;
}
.task-actions[data-v-6226e812] {
  display: flex;
  gap: 5px;
  justify-content: flex-end; /* Align buttons to the right */
  font-size: 12px;
  white-space: nowrap; /* Prevent buttons from wrapping */
}
.task-actions .el-button[data-v-6226e812] {
  padding: 5px 10px;
  height: auto;
  color: #888;
  font-size: 12px;
}
.task-actions .el-button[data-v-6226e812]:hover {
  color: #00FFCC; /* Highlight color */
  background-color: transparent;
}
.task-actions .el-button.remove-btn[data-v-6226e812]:hover {
  color: #ef4444; /* Red for remove */
}
.task-actions .el-button span[data-v-6226e812] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.no-tasks-placeholder[data-v-6226e812] {
  text-align: center;
  color: #a0a0a0;
  padding: 20px;
  font-size: 14px;
}
.task-error-message[data-v-6226e812] {
  color: #ef4444;
  font-size: 12px;
  margin-top: 5px;
  word-break: break-all;
  background-color: #4a2b2b;
  padding: 5px;
  border-radius: 4px;
}

/* Transition for expand/collapse */
.expand-enter-active[data-v-6226e812], .expand-leave-active[data-v-6226e812] {
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}
.expand-enter-from[data-v-6226e812], .expand-leave-to[data-v-6226e812] {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  transform: translateY(-10px);
}
.expand-enter-to[data-v-6226e812], .expand-leave-from[data-v-6226e812] {
  max-height: 400px; /* A value larger than actual content height for smooth transition */
  opacity: 1;
  transform: translateY(0);
}

/* Ensure icons from Element Plus are properly styled */
[data-v-6226e812] .el-button .el-icon {
  vertical-align: middle;
}
/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #0D0E12;
    color: white;
    overflow-x: hidden;
}

/* Color Variables */
:root {
    --color-base-1: #1E2025;
    --color-base-2: #191A1E;
    --color-base-3: #0D0E12;
    --color-brand-cyan: #00FFCC;
    --color-brand-blue: #00BBFF;
    --color-accent-yellow: #FFEA00;
    --color-accent-pink: #FF005E;
}

/* Animations */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 5px var(--color-brand-cyan), 0 0 10px var(--color-brand-cyan), 0 0 15px var(--color-brand-blue);
    }
    50% {
        box-shadow: 0 0 10px var(--color-brand-cyan), 0 0 20px var(--color-brand-blue), 0 0 30px var(--color-brand-blue);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes breathingGlow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(0, 255, 204, 0.5), 0 0 12px rgba(0, 187, 255, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 16px rgba(0, 255, 204, 0.8), 0 0 24px rgba(0, 187, 255, 0.8);
        transform: scale(1.05);
    }
}

/* Utility Classes */
.app-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    background-color: var(--color-base-3);
    color: white;
    font-family: 'Roboto', sans-serif;
    overflow: hidden;
}

.upload-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.title-text {
    font-size: 3rem;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    background: linear-gradient(106deg, #CBFFF8 6%, #21FFF3 36%, #FFF600 98%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (min-width: 768px) {
    .title-text {
        font-size: 3.75rem;
    }
}

.subtitle-text {
    color: #9CA3AF;
}

.upload-button-wrapper {
    position: relative;
    cursor: pointer;
}

.upload-button-glow {
    position: absolute;
    inset: -0.125rem;
    background: linear-gradient(106deg, #CBFFF8 6%, #21FFF3 36%, #FFF600 98%);
    border-radius: 0.5rem;
    filter: blur(4px);
    opacity: 0.75;
    transition: opacity 1s;
    animation: pulseGlow 3s ease-in-out infinite;
}

.upload-button-wrapper:hover .upload-button-glow {
    opacity: 1;
    transition-duration: 0.2s;
}

.upload-button-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background-color: var(--color-base-2);
    border-radius: 0.5rem;
}

.upload-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-brand-cyan);
}

.upload-text {
    color: #F3F4F6;
    font-weight: 600;
}

.hidden-input {
    display: none;
}

/* Audio Player Styles */
.player-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 42rem;
    padding: 1rem;
    /*background-color: rgba(25, 26, 30, 0.5);*/
    backdrop-filter: blur(24px);
    border-radius: 1rem;
    /*box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);*/
    /*border: 1px solid rgba(255, 255, 255, 0.1);*/
    animation: fadeIn 0.3s ease-out forwards;
}

@media (min-width: 640px) {
    .player-container {
        padding: 1.5rem;
    }
}

.close-button {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    color: #9CA3AF;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 10;
}

.close-button:hover {
    color: white;
}

.close-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.player-info {
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
}

.file-name {
    font-size: 1.125rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.time-display {
    font-size: 0.875rem;
    color: #9CA3AF;
}

.visualizer-container {
    position: relative;
    width: 100%;
    height: 10rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .visualizer-container {
        height: 16rem;
    }
}

.visualizer-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.controls-container {
    width: 100%;
}

.progress-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1rem;
}

.progress-bar-wrapper {
    position: relative;
    flex: 1;
    height: 0.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    cursor: pointer;
}

.duration-display {
    font-size: 0.875rem;
    color: #9CA3AF;
    white-space: nowrap;
    min-width: 3rem;
}

.progress-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(106deg, #CBFFF8 6%, #21FFF3 36%, #FFF600 98%);
    border-radius: 9999px;
}

.progress-bar-thumb {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    background-color: white;
    border-radius: 9999px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease-in-out;
}

.progress-bar-wrapper:hover .progress-bar-thumb {
    transform: translateY(-50%) scale(1.1);
}

.button-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.volume-control {
    position: relative;
    display: flex;
    align-items: center;
}

.volume-button {
    color: #D1D5DB;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}

.volume-button:hover {
    color: white;
}

.volume-icon {
    width: 1.75rem;
    height: 1.75rem;
}

.volume-slider-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background-color: var(--color-base-1);
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.3s ease-out forwards;
}

.volume-slider {
    width: 0.5rem;
    height: 6rem;
    background-color: #4B5563;
    border-radius: 0.5rem;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    cursor: pointer;
    writing-mode: bt-lr;
    -webkit-appearance: slider-vertical;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    width: 1rem;
    height: 1rem;
    background-color: var(--color-brand-cyan);
    border-radius: 9999px;
}

.volume-slider::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background-color: var(--color-brand-cyan);
    border-radius: 9999px;
    border: none;
}

.center-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.loop-button {
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
    color: #9CA3AF;
}

.loop-button:hover {
    color: white;
}

.loop-button.active {
    color: var(--color-brand-cyan);
}

.loop-icon {
    width: 1.75rem;
    height: 1.75rem;
}

.play-pause-button2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background: linear-gradient(106deg, #CBFFF8 6%, #21FFF3 36%, #FFF600 98%);
    color: var(--color-base-3);
    border: none;
    border-radius: 9999px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.15s ease-in-out;
    animation: breathingGlow 4s ease-in-out infinite;
}

.play-pause-button:hover {
    transform: scale(1.05);
}

.play-pause-button:active {
    transform: scale(0.95);
}

.play-icon,
.pause-icon {
    width: 2rem;
    height: 2rem;
}

.play-icon {
    margin-left: 0.125rem;
}

.spacer {
    width: 1.75rem;
    height: 1.75rem;
}

/* 弹窗样式 */
.file-selector-dialog[data-v-0a09165e] {
  background-color: #1a1a1e;
  border-radius: 20px;
}

/* 自定义头部 */
.dialog-header[data-v-0a09165e] {
  text-align: left;
  padding: 0 10px;
}
.breadcrumb-nav[data-v-0a09165e] {
  margin-top: 16px;
  color: #c7c7c7;
  font-size: 14px;
  padding-left: 10px; /* 增加一些左边距 */
}
.breadcrumb-item[data-v-0a09165e] {
  cursor: pointer;
  transition: color 0.2s;
}
.breadcrumb-item[data-v-0a09165e]:hover {
  color: #ffffff;
}
.breadcrumb-separator[data-v-0a09165e] {
  margin: 0 8px;
  color: #888;
}

/* 文件列表容器 */
.file-list-container[data-v-0a09165e] {
  height: 60vh; /* 固定高度，使其可以滚动 */
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; /* 让元素从顶部开始排列 */
  gap: 5px; /* 元素之间的间距 */
}

/* 滚动条样式 (可选) */
.file-list-container[data-v-0a09165e]::-webkit-scrollbar {
  width: 6px;
}
.file-list-container[data-v-0a09165e]::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 3px;
}
.file-list-container[data-v-0a09165e]::-webkit-scrollbar-track {
  background: #2a2a2e;
}

/* 单个文件项 */
.file-item[data-v-0a09165e] {
  width: 105px;
  height: 105px;
  box-sizing: border-box;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: #fbfbfb;
  text-align: center;
}
.file-item[data-v-0a09165e]:hover {
  background-color: rgba(251, 251, 251, 0.1);
}
.file-thumbnail[data-v-0a09165e] {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.file-thumbnail img[data-v-0a09165e] {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
}
.file-thumbnail .folder-icon[data-v-0a09165e] {
  width: 70px; /* 文件夹图标可以大一些 */
  height: 70px;
  -o-object-fit: contain;
     object-fit: contain; /* 确保文件夹图标完整显示 */
  border-radius: 0; /* 文件夹图标通常没有圆角 */
}
.file-name[data-v-0a09165e] {
  width: 100%;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 加载指示器 */
.loading-indicator[data-v-0a09165e] {
  width: 100%;
  text-align: center;
  color: #888;
  padding: 20px 0;
  font-size: 14px;
}

/* Element Plus 样式覆盖 */
[data-v-0a09165e] .el-dialog__header {
  padding-bottom: 10px; /* 为面包屑留出空间 */
  margin-right: 0;
}
[data-v-0a09165e] .el-dialog__body {
  padding: 0;
}
[data-v-0a09165e] .el-tabs__nav-wrap::after {
  display: none; /* 移除Tabs下方的默认边框 */
}
[data-v-0a09165e] .el-tabs__item {
  color: #a0a0a0;
}
[data-v-0a09165e] .el-tabs__item.is-active {
  color: #ffffff;
}
[data-v-0a09165e] .el-tabs__active-bar {
  background-color: #ffffff;
}

/* 样式完全复用您第一个组件的，只需修改一下主容器类名 */
.video-mask-editor-container[data-v-e50b7bcd] {

  border-radius: 8px;
  color: #e0e0e0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
  'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  width: 100%;
}
.option-row[data-v-e50b7bcd] {
  //display: flex;
  align-items: center;
}
.label[data-v-e50b7bcd] {
  font-size: 16px;
  margin-right: 16px;
  min-width: 70px;
  text-align: left;
}
.manual-actions[data-v-e50b7bcd] {
  gap: 20px;
}
.action-box[data-v-e50b7bcd] {
  width: 100px;
  height: 100px;
  border: 2px dashed #757575;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center;
  padding: 8px; /* 内部留白 */
  box-sizing: border-box; /* 让 padding 不影响总宽高 */
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  color: #b0b0b0;
  overflow: hidden; /* 防止图片溢出 */
}
.action-box[data-v-e50b7bcd]:hover {
  border-color: #ffffff;
  color: #ffffff;
}
.reset-preview[data-v-e50b7bcd] {
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
}
.preview-loading[data-v-e50b7bcd] {
  color: #8e9297;
}

/* 复制您提供的所有CSS样式到这里 */
/* ... (所有样式代码) ... */
[data-v-29f07c18]:root {
  --base-1: #1E2025;
  --base-2: #191A1E;
  --base-3: #0D0E12;
  --brand-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), linear-gradient(106deg, #CBFFF8 6%, #21FFF3 36%, #FFF600 98%);
  --brand-primary: #00FFCC;
  --brand-secondary: #00BBFF;
  --accent-yellow: #FFEA00;
  --accent-red: #FF005E;
  --text-xs: 10px;
  --text-sm: 12px;
  --text-md: 14px;
  --text-lg: 16px;
  --border-radius: 8px;
  --transition: all 0.3s ease;
}

/* 弹窗样式 */
.modal-overlay[data-v-29f07c18] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn-29f07c18 0.3s ease;
}
.modal-content[data-v-29f07c18] {
  border-radius:19px;
  padding: 20px;
  max-width: 90vw;
  max-height: 90vh;
  background: #1e2025;
  width: 100%;
  max-width: 800px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideIn-29f07c18 0.3s ease;
}
.close-modal-btn[data-v-29f07c18] {
  position: absolute;
  top: 5px;
  right: 5px;
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
  background-color: rgba(255, 255, 255, 0.3);
}
.close-modal-btn[data-v-29f07c18]:hover {
  background-color: #FF005E;
}

/* 视频容器 */
.video-container[data-v-29f07c18] {
  position: relative;
  width: 100%;
  background-color: var(--base-3);
  border-radius: var(--border-radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
#preview-video[data-v-29f07c18] {
  width: 100%;
  border-radius:19px;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  background-color: #000;
}

/* 加载指示器 */
.loading-indicator[data-v-29f07c18] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.loading-spinner[data-v-29f07c18] {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid var(--brand-primary);
  border-radius: 50%;
  animation: spin-29f07c18 1s linear infinite;
}
.loading-text[data-v-29f07c18] {
  color: var(--brand-primary);
  font-size: var(--text-md);
}

/* 时间显示 */
.time-display-container[data-v-29f07c18] {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
  font-size: var(--text-sm);
  color: #999;
}
.time-display[data-v-29f07c18] {
  font-family: 'Courier New', monospace;
}

/* 进度条样式 */
.progress-container[data-v-29f07c18] {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: #000;
  border-radius: 2px;
  margin: 15px 0;
  cursor: pointer;
}
.progress-bar[data-v-29f07c18] {
  position: absolute;
  height: 100%;
  background-color: #00FFCCFF;
  border-radius: 2px;
  /* transition: width 0.1s linear; */ /* 注释掉以获得更流畅的拖动体验 */
}
.selected-range[data-v-29f07c18] {
  position: absolute;
  height: 100%;
  background-color: rgba(0, 255, 204, 0.2);
  border-radius: 2px;
}
.range-handle[data-v-29f07c18] {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #00FFCCFF;
  border: 2px solid var(--base-2);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
  box-shadow: 0 0 0 1px rgba(0, 255, 204, 0.5);
  transition: all 0.2s ease;
  z-index: 5;
}
.range-handle[data-v-29f07c18]:hover {
  transform: translateY(-50%) scale(1.2);
  box-shadow: 0 0 0 2px rgba(0, 255, 204, 0.8);
}
.range-handle[data-v-29f07c18]:active {
  transform: translateY(-50%) scale(1.3);
  box-shadow: 0 0 0 3px rgba(0, 255, 204, 0.8);
}

/* 控制按钮 */
.controls-container[data-v-29f07c18] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.playback-controls[data-v-29f07c18] {
  display: flex;
  gap: 10px;
}
.control-btn[data-v-29f07c18] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.control-btn[data-v-29f07c18]:hover {
  background-color: #00FFCCFF;
  transform: scale(1.05);
}
.confirm-btn[data-v-29f07c18] {
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  background-color: #00FFCCFF;
  color: #000;
  font-size: var(--text-md);
  font-weight: bold;
  cursor: pointer;
  transition: var(--transition);
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.confirm-btn[data-v-29f07c18]:hover {
  background-color: #FFEA00FF;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 234, 0, 0.3);
}


/* 动画 */
@keyframes fadeIn-29f07c18 {
from { opacity: 0;
}
to { opacity: 1;
}
}
@keyframes slideIn-29f07c18 {
from { transform: translateY(-20px); opacity: 0;
}
to { transform: translateY(0); opacity: 1;
}
}
@keyframes spin-29f07c18 {
0% { transform: rotate(0deg);
}
100% { transform: rotate(360deg);
}
}

/* 响应式调整 */
@media (max-width: 768px) {
.modal-content[data-v-29f07c18] {
    padding: 15px;
    max-height: 80vh;
}
.video-container[data-v-29f07c18] {
    aspect-ratio: 16 / 9;
}
.controls-container[data-v-29f07c18] {
    flex-direction: column;
    gap: 15px;
}
.playback-controls[data-v-29f07c18] {
    width: 100%;
    justify-content: center;
}
.confirm-btn[data-v-29f07c18] {
    width: 100%;
}
}

.audio-item[data-v-6b265a62] {
  display: flex;
  align-items: center;
  padding: 2px 6px;
  background-color: #2d3035; /* 深灰色背景 */
  border-radius: 12px;
  width: 280px; /* 根据您的布局调整宽度 */
  font-family: sans-serif;
  color: #e0e0e0; /* 亮灰色文字 */
  gap: 16px; /* 元素间距 */
}
.icon-container[data-v-6b265a62] {
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #393c41;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.icon-container[data-v-6b265a62]:hover {
  background-color: #4a4d52;
}
.info-container[data-v-6b265a62] {
  flex-grow: 1; /* 占据剩余空间 */
  display: flex;
  flex-direction: column;
  gap: 4px; /* 内部文字间距 */
}
.name[data-v-6b265a62] {
  font-size: 12px;
  width: 70px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.tags[data-v-6b265a62] {
  display: inline-block;
  font-size: 12px;
  margin-right: 4px;
  color: #a0a0a0;
  border: 1px solid #555;
  border-radius: 12px;
  padding: 2px 8px;
  align-self: flex-start; /* 使其宽度自适应内容 */
}
.duration[data-v-6b265a62] {
  font-size: 12px;
  color: #888;
}

/* --- 自定义复选框样式 --- */
.checkbox-wrapper[data-v-6b265a62] {
  position: relative;
  cursor: pointer;
  width: 24px;
  height: 24px;
}

/* 隐藏原始的 checkbox */
.checkbox-wrapper input[data-v-6b265a62] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* 创建自定义的 checkbox 外观 */
.custom-checkbox[data-v-6b265a62] {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: #4a4d52;
  border: 1px solid #666;
  border-radius: 50%; /* 圆形 */
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkbox-wrapper:hover .custom-checkbox[data-v-6b265a62] {
  border-color: #888;
}

/* 勾选后的样式 */
.checkbox-wrapper input:checked ~ .custom-checkbox[data-v-6b265a62] {
  background-image: linear-gradient(45deg, #10B981, #A7F3D0); /* 渐变背景 */
  border: none;
}

/* 默认隐藏对勾 */
.checkmark[data-v-6b265a62] {
  display: none;
}

/* 勾选后显示对勾 */
.checkbox-wrapper input:checked ~ .custom-checkbox .checkmark[data-v-6b265a62] {
  display: block;
}

/* ✨ 将所有变量定义在组件根元素上 ✨ */
.modal-overlay[data-v-2733883a] {
  /* 背景色 */
  --base-1: #1E2025;
  --base-2: #191A1E;

  /* 品牌色 */
  --brand-cyan: #00FFCC;
  --brand-blue: #00BBFF;

  /* 装饰色 */
  --deco-pink: #FF005E;

  /* 字号 */
  --font-size-sm: 10px;
  --font-size-md: 12px;
  --font-size-lg: 14px;
  --font-size-xl: 16px;

  /* --- 以下是组件原有样式 --- */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.modal-content333[data-v-2733883a] {
  width: 420px;
  max-height: 80vh;
  background-color: var(--base-1);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.modal-title[data-v-2733883a] {
  font-size: var(--font-size-xl);
  margin: 0 0 20px 0;
  color: #fff;
}
.style-grid[data-v-2733883a] {
  flex-grow: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 12px;
  padding: 4px;
}

/* Custom scrollbar */
.style-grid[data-v-2733883a]::-webkit-scrollbar { width: 6px;
}
.style-grid[data-v-2733883a]::-webkit-scrollbar-track { background: var(--base-2); border-radius: 3px;
}
.style-grid[data-v-2733883a]::-webkit-scrollbar-thumb { background: #4a4d55; border-radius: 3px;
}
.style-item-wrapper[data-v-2733883a] {
  aspect-ratio: 1 / 1;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  padding: 2px;
  background-color: var(--base-2);
}
.style-item-wrapper[data-v-2733883a]:hover { border-color: #555;
}
.style-item-wrapper.selected[data-v-2733883a] { border-color: var(--brand-cyan);
}
.style-item-wrapper.disabled[data-v-2733883a] { cursor: not-allowed; opacity: 0.6;
}
.style-item[data-v-2733883a] {
  width: 100%;
  position: relative;
  height: 100%;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: var(--base-2);
}
.style-item img[data-v-2733883a] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.style-name-fallback[data-v-2733883a] { font-size: var(--font-size-lg); color: #999;
}
.loading-item[data-v-2733883a] { flex-direction: column; gap: 8px; color: #888;
}
.loading-text[data-v-2733883a] { font-size: var(--font-size-sm);
}
.modal-actions[data-v-2733883a] {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.btn[data-v-2733883a] {
  padding: 8px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-md);
  transition: background-color 0.2s;
}
.custom-checkbox-container[data-v-2733883a] {
  /* 继承你原来的定位 */
  position: absolute;
  top: 0px; /* 稍微调整一下，避免贴边 */
  right: 0px;

  /* 设置尺寸，方便点击 */
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* 隐藏原始的 checkbox */
.hidden-checkbox[data-v-2733883a] {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 2; /* 确保它在最上层，能接收到点击事件 */
}

/* “伪 checkbox” 的基础样式 (未选中时) */
.custom-checkbox[data-v-2733883a] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* 半透明黑色背景 */
  border: 1px solid #757575; /* 灰色边框 */
  border-radius: 4px; /* 轻微的圆角 */
  transition: all 0.2s ease; /* 添加过渡动画 */
  z-index: 1;
}

/* 使用 ::after 伪元素来创建“勾” */
.custom-checkbox[data-v-2733883a]::after {
  content: '';
  position: absolute;
  /* 将“勾”定位在框内中间偏左的位置 */
  left: 6px;
  top: 2px;

  /* 用边框画一个“勾” */
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;

  /* 旋转45度，变成“勾”的形状 */
  transform: rotate(45deg);

  /* 默认隐藏“勾” */
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* --- ✨ 最关键的一步 ✨ --- */
/* 当隐藏的 checkbox 被选中时，改变我们伪 checkbox 的样式 */
.hidden-checkbox:checked + .custom-checkbox[data-v-2733883a] {
  background-color: #00FFCC; /* 选中的背景色，例如蓝色 */
  border-color: #00FFCC; /* 选中的边框色 */
}

/* 当隐藏的 checkbox 被选中时，显示“勾” */
.hidden-checkbox:checked + .custom-checkbox[data-v-2733883a]::after {
  opacity: 1;
}

/* 添加一个鼠标悬停效果 */
.custom-checkbox-container:hover .custom-checkbox[data-v-2733883a] {
  border-color: #00FFCC20;
}
.btn-secondary[data-v-2733883a] { background-color: #3a3d45; color: #fff;
}
.btn-secondary[data-v-2733883a]:hover { background-color: #4a4d55;
}
.btn-primary[data-v-2733883a] { background: var(--brand-blue); color: #111; font-weight: bold;
}
.btn-primary[data-v-2733883a]:hover { opacity: 0.9;
}

/* 您的所有样式都保持不变 */
.file-selector-dialog[data-v-7c1eb7ec] {
  background-color: #1a1a1e;
  border-radius: 20px;
}
.dialog-header[data-v-7c1eb7ec] {
  text-align: left;
  padding: 0 10px;
}
.breadcrumb-nav[data-v-7c1eb7ec] {
  margin-top: 16px;
  color: #c7c7c7;
  font-size: 14px;
  padding-left: 10px;
}
.breadcrumb-item[data-v-7c1eb7ec] {
  cursor: pointer;
  transition: color 0.2s;
}
.breadcrumb-item[data-v-7c1eb7ec]:hover {
  color: #ffffff;
}
.breadcrumb-separator[data-v-7c1eb7ec] {
  margin: 0 8px;
  color: #888;
}
.file-list-container[data-v-7c1eb7ec] {
  position: relative;
  height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 5px;
  padding: 10px;
}
.file-list-container[data-v-7c1eb7ec]::-webkit-scrollbar { width: 6px;
}
.file-list-container[data-v-7c1eb7ec]::-webkit-scrollbar-thumb { background: #444; border-radius: 3px;
}
.file-list-container[data-v-7c1eb7ec]::-webkit-scrollbar-track { background: #2a2a2e;
}
.file-item[data-v-7c1eb7ec] {
  position: relative !important;
  width: 105px;
  height: 105px;
  box-sizing: border-box;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: #fbfbfb;
  text-align: center;
  border: 2px solid transparent;
}

/* 新增：用于提供禁用视觉反馈的 class */
.file-item.item-disabled[data-v-7c1eb7ec] {
  cursor: not-allowed;
  opacity: 0.5; /* 简单的禁用效果 */
}
.file-item[data-v-7c1eb7ec]:hover {
  background-color: rgba(251, 251, 251, 0.1);
}
.file-item.selected[data-v-7c1eb7ec] {
  border-color: #00FFCC;
  background-color: rgba(64, 158, 255, 0.1);
}
.item-checkbox[data-v-7c1eb7ec] {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 10;
  width: 24px;
  height: 24px;
}
[data-v-7c1eb7ec] .item-checkbox .el-checkbox__inner {
  background-color: rgba(0, 0, 0, 0.3);
  border-color: #888;
}
[data-v-7c1eb7ec] .item-checkbox .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #409EFF;
  border-color: #409EFF;
}
.file-thumbnail[data-v-7c1eb7ec] {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.file-thumbnail img[data-v-7c1eb7ec] {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
}
.file-thumbnail .folder-icon[data-v-7c1eb7ec] {
  width: 70px;
  height: 70px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 0;
}
.file-name[data-v-7c1eb7ec] {
  width: 100%;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}
.loading-indicator[data-v-7c1eb7ec] {
  width: 100%;
  text-align: center;
  color: #888;
  padding: 20px 0;
  font-size: 14px;
}
.dialog-footer-center[data-v-7c1eb7ec] {
  text-align: center;
  padding: 10px 0;
}
.confirm-button[data-v-7c1eb7ec] {
  background-color: #c42b2b;
  border-color: #c42b2b;
  color: white;
  min-width: 200px;
}
.confirm-button[data-v-7c1eb7ec]:hover {
  background-color: #d84e4e;
  border-color: #d84e4e;
}
[data-v-7c1eb7ec] .el-dialog__header {
  padding-bottom: 10px;
  margin-right: 0;
  border-bottom: 1px solid #333;
}
[data-v-7c1eb7ec] .el-dialog__body {
  padding: 0;
}
[data-v-7c1eb7ec] .el-dialog__footer {
  padding-top: 10px;
  border-top: 1px solid #333;
}
.hovered-item[data-v-7c1eb7ec]{
  position: absolute;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  height: 100%;
  top: 0;
  left: 0;
}
[data-v-7c1eb7ec] .el-tabs__nav-wrap::after { display: none;
}
[data-v-7c1eb7ec] .el-tabs__item { color: #a0a0a0;
}
[data-v-7c1eb7ec] .el-tabs__item.is-active { color: #ffffff;
}
[data-v-7c1eb7ec] .el-tabs__active-bar { background-color: #ffffff;
}

/* 原有样式保持不变 */
.audio-item[data-v-4c08ef07] { display: flex; align-items: center; padding: 2px 6px; background-color: #2d3035; border-radius: 12px; width: 280px; font-family: sans-serif; color: #e0e0e0; gap: 16px;
}
.icon-container[data-v-4c08ef07] { display: flex; align-items: center; justify-content: center; background-color: #393c41; border-radius: 10px; cursor: pointer; transition: background-color 0.2s ease;
}
.icon-container[data-v-4c08ef07]:hover { background-color: #4a4d52;
}
.info-container[data-v-4c08ef07] { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; overflow: hidden;
} /* 添加 overflow: hidden */
.name[data-v-4c08ef07] { font-size: 12px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500;
}
.duration[data-v-4c08ef07] { font-size: 12px; color: #888;
}
.checkbox-wrapper[data-v-4c08ef07] { position: relative; cursor: pointer; width: 24px; height: 24px; flex-shrink: 0;
}
.checkbox-wrapper input[data-v-4c08ef07] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;
}
.custom-checkbox[data-v-4c08ef07] { position: absolute; top: 0; left: 0; height: 24px; width: 24px; background-color: #4a4d52; border: 1px solid #666; border-radius: 50%; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center;
}
.checkbox-wrapper:hover .custom-checkbox[data-v-4c08ef07] { border-color: #888;
}
.checkbox-wrapper input:checked ~ .custom-checkbox[data-v-4c08ef07] { background-image: linear-gradient(45deg, #10B981, #A7F3D0); border: none;
}
.checkmark[data-v-4c08ef07] { display: none;
}
.checkbox-wrapper input:checked ~ .custom-checkbox .checkmark[data-v-4c08ef07] { display: block;
}

/* ==================== 新增样式 ==================== */
.tags-container[data-v-4c08ef07] {
  display: flex;
  flex-wrap: nowrap; /* 强制不换行 */
  gap: 4px;
  align-items: center;
}
.custom-tag[data-v-4c08ef07] {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #c0c4cc;
  border-radius: 6px; /* 调整为更圆润的矩形 */
  padding: 0 6px;
  height: 20px;
  line-height: 18px;
}
.tooltip-tags-wrapper[data-v-4c08ef07] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 200px; /* 限制 tooltip 的最大宽度，使其自动换行 */
}
/* ==================== 样式结束 ==================== */

/* 使用 deep 选择器来覆盖 Element Plus 的默认样式 */
.image-selector-dialog .el-dialog {
  background-color: #2c2c2c; /* 深灰色背景 */
  border-radius: 12px;
  box-shadow: none;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.image-selector-dialog .el-dialog .el-dialog__header {
  padding: 20px;
  margin-right: 0;
  border-bottom: 1px solid #444;
  flex-shrink: 0;
}
.image-selector-dialog .el-dialog .el-dialog__header .el-dialog__title {
  color: #e0e0e0; /* 亮灰色标题 */
  font-size: 16px;
  font-weight: bold;
}
.image-selector-dialog .el-dialog .el-dialog__header .el-dialog__headerbtn {
  top: 18px;
  right: 20px;
}
.image-selector-dialog .el-dialog .el-dialog__header .el-dialog__headerbtn .el-dialog__close {
  color: #e0e0e0;
  font-size: 18px;
}
.image-selector-dialog .el-dialog .el-dialog__body {
  padding: 20px;
  padding-bottom: 10px;
  flex-grow: 1;
  overflow: auto;
}
.image-selector-dialog .el-dialog .el-dialog__footer {
  padding: 10px 20px 20px;
  border-top: none;
  flex-shrink: 0;
}
.image-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Responsive columns */
  gap: 15px; /* 间距 */
  max-height: calc(90vh - 180px); /* Adjusted max-height: dialog height - header/footer height */
  overflow-y: auto;
  padding-right: 10px; /* 为滚动条留出空间 */
  /* 自定义滚动条样式 */
}
.image-grid-container::-webkit-scrollbar {
  width: 6px;
}
.image-grid-container::-webkit-scrollbar-track {
  background: #333;
  border-radius: 3px;
}
.image-grid-container::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 3px;
}
.image-grid-container::-webkit-scrollbar-thumb:hover {
  background: #888;
}
@media (max-width: 1200px) {
.image-grid-container {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 4 columns on medium screens */
}
}
@media (max-width: 768px) {
.image-grid-container {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); /* 3 columns on tablets */
}
}
@media (max-width: 480px) {
.image-grid-container {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); /* 2 columns on mobile */
}
}
.image-item {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 保持1:1的宽高比 */
  background-color: #4a4a4a;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
  border: 2px solid transparent;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.image-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
.image-item.selected {
  border-color: #00e0b8; /* 选中时的亮绿色边框 */
  box-shadow: 0 0 10px rgba(0, 224, 184, 0.5);
}
.image-item.disabled {
  cursor: not-allowed;
}
.image-item.disabled .preview-image {
  filter: grayscale(80%);
}
.image-item.disabled {
  opacity: 0.6;
}
.preview-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain; /* 或者 object-fit: cover; 看需求 */
}
.popover-preview-image {
  max-width: 100%;
  height: auto;
  display: block;
}
.selected-overlay {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background-color: rgba(44, 44, 44, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkmark-icon {
  width: 18px;
  height: 18px;
}
.checkmark-icon .checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 3;
  stroke-miterlimit: 10;
  stroke: #00e0b8;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark-icon .checkmark-path {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  stroke-width: 4;
  stroke: #00e0b8;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.3s forwards;
}
@keyframes stroke {
100% {
    stroke-dashoffset: 0;
}
}
.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding-top: 10px;
}
.footer-btn {
  border: none;
  border-radius: 20px;
  padding: 8px 30px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}
.footer-btn.cancel-btn {
  background-color: #4a4a4a;
  color: #e0e0e0;
}
.footer-btn.cancel-btn:hover {
  background-color: #5a5a5a;
}
.footer-btn.confirm-btn {
  background: linear-gradient(90deg, #00e0b8, #a2ffea);
  color: #1a1a1a;
}
.footer-btn.confirm-btn:hover {
  box-shadow: 0 0 15px rgba(0, 224, 184, 0.6);
}
/* 样式部分无需修改，保持原样 */
.product-video-dialog[data-v-9e0a4379] .el-dialog__header {
  border-bottom: 1px solid #333;
}
.product-video-dialog[data-v-9e0a4379] .el-dialog__body {
  padding: 24px 32px;
}
.product-video-dialog[data-v-9e0a4379] .el-form-item__label {
  color: #c0c4cc;
}
.product-video-dialog[data-v-9e0a4379] .el-input__wrapper,
.product-video-dialog[data-v-9e0a4379] .el-select__wrapper {
  background-color: #3a3a3a;
  box-shadow: none;
  border-radius: 6px;
}
.product-video-dialog[data-v-9e0a4379] .el-input__inner,
.product-video-dialog[data-v-9e0a4379] .el-select__placeholder {
  color: #a0a8b4;
}
.product-video-dialog[data-v-9e0a4379] .el-input .el-input__count .el-input__count-inner {
  background-color: #3a3a3a;
}
.product-video-dialog[data-v-9e0a4379] .el-radio__label {
  color: #e0e0e0;
}
.product-video-dialog[data-v-9e0a4379] .el-radio__input.is-checked .el-radio__inner {
  border-color: #00f2ff;
  background: #00f2ff;
}
.product-video-dialog[data-v-9e0a4379] .el-radio__inner:hover {
  border-color: #00f2ff;
}
.upload-area[data-v-9e0a4379] {
  width: 100%;
}
.upload-box[data-v-9e0a4379] {
  width: 80px;
  height: 80px;
  border: 1px dashed #555;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #2c2c2c;
  color: #888;
  transition: all 0.2s;
}
.upload-box[data-v-9e0a4379]:hover {
  border-color: #00f2ff;
  color: #00f2ff;
}
.upload-boxAI[data-v-9e0a4379] {
  width: 80px;
  height: 80px;
  border: 1px dashed #555;
  border-radius: 8px;
  display: flex;
  text-align: center;
  padding: 5px;
  line-height: 15px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #2c2c2c;
  color: #888;
  transition: all 0.2s;
}
.upload-boxAI[data-v-9e0a4379]:hover {
  border-color: #00f2ff;
  color: #00f2ff;
}
.upload-boxpl[data-v-9e0a4379]{
  width: 300px;
  height: 40px;
  font-size: 12px;
  border: 1px dashed #555;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #2c2c2c;
  color: #888;
  transition: all 0.2s;
}
.upload-boxpl[data-v-9e0a4379]:hover{
  border-color: #00f2ff;
  color: #00f2ff;
}
.upload-tip[data-v-9e0a4379] {
  color: #888;
  font-size: 12px;
  margin-left: 4px;
}
.file-preview-box[data-v-9e0a4379] {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #2c2c2c;
}
.file-preview-box.video-preview video[data-v-9e0a4379],
.file-preview-box.image-preview img[data-v-9e0a4379] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.file-preview-box.bgm-preview[data-v-9e0a4379] {
  width: 100%;
  max-width: 300px;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  color: #e0e0e0;
}
.file-preview-box .file-nameMS[data-v-9e0a4379] {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-preview-box .delete-icon[data-v-9e0a4379] {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}
.file-preview-box:hover .delete-icon[data-v-9e0a4379] {
  opacity: 1;
}
.bgm-preview .delete-icon[data-v-9e0a4379] {
  position: static;
  opacity: 1;
  background-color: transparent;
  color: #888;
}
.bgm-preview .delete-icon[data-v-9e0a4379]:hover {
  color: #00f2ff;
}
.dialog-footer[data-v-9e0a4379] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.image-upload-container[data-v-9e0a4379] {
  display: flex;
  /* 这里不再需要 flex-wrap，因为子元素只有 upload 按钮和 draggable 容器 */
  align-items: flex-start; /* 推荐使用 flex-start 对齐 */
  gap: 12px;
  margin-bottom: 4px;
}
.draggable-list[data-v-9e0a4379] {
  /* display: contents; */ /* <--- 移除这一行，这是问题的根源 */
  display: flex;           /* <--- 添加这一行，让 draggable 自身成为 flex 容器 */
  flex-wrap: wrap;         /* <--- 添加这一行，让内部的图片可以换行 */
  gap: 12px;               /* <--- 添加这一行，为图片之间创建间距 */
}
.image-upload-container .sortable-ghost[data-v-9e0a4379] {
  opacity: 0.5;
  background: #444;
  border-radius: 8px;
}
.upload-tip-static[data-v-9e0a4379] {
  color: #888;
  font-size: 12px;
  display: block;
}
.ai-rewrite-dialog[data-v-9e0a4379] .el-dialog__body {
  padding: 20px;
  min-height: 180px; /* 防止内容切换时弹窗高度跳动 */
}

/* AI 输入框样式 */
.aiInput[data-v-9e0a4379] textarea {
  background-color: transparent;
  box-shadow: none;
  border: none;
  color: #e0e0e0;
}

/* 加载状态容器 */
.ai-loading-container[data-v-9e0a4379] {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  color: #c0c4cc;
}

/* 结果展示容器 */
.ai-result-container[data-v-9e0a4379] {
  color: #e0e0e0;
}
.original-title[data-v-9e0a4379] {
  font-weight: bold;
  color: #a0a8b4;
  padding-bottom: 15px;
}
.divider-container[data-v-9e0a4379] {
  position: relative;
  text-align: center;
  margin-bottom: 15px;
}
.divider-text[data-v-9e0a4379] {
  font-size: 12px;
  color: #666;
  background-color: #2b2b2b; /* el-dialog的背景色 */
  padding: 0 10px;
  position: relative;
  z-index: 1;
}
.divider-line[data-v-9e0a4379] {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #444;
  z-index: 0;
}
.ai-generated-text[data-v-9e0a4379] {
  background-color: rgba(251, 251, 251, 0.05);
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  max-height: 200px;
  overflow-y: auto;
  color: #c0c4cc;
}
.action-buttons[data-v-9e0a4379] {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.search-input[data-v-9e0a4379] {
  flex-grow: 1;
  width: 100px;
  background-color: #3a3a3a;
  border: 1px solid #555;
  border-radius: 8px;
  color: #e0e0e0;
  font-size: 14px;
}
.search-input[data-v-9e0a4379]:focus {
  outline: none;
  border-color: #00f2ff;
}
.audio-grid-containerai[data-v-9e0a4379]{
  display: block; /* 改为 block 或其他，不再直接是 flex 容器 */
  overflow-y: auto;
  min-height: 500px;
  max-height: 500px; /* 必须有固定的高度 */
}
.infinite-list[data-v-9e0a4379] {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 保持你的卡片间距 */
  justify-content: flex-start; /* 或者 center, space-around 等 */
}

/* 3. 提示文本的样式 */
.loading-text[data-v-9e0a4379], .no-more-text[data-v-9e0a4379], .no-results[data-v-9e0a4379] {
  width: 100%;
  text-align: center;
  padding: 10px;
  color: #888;
  font-size: 14px;
}
/* 音色列表容器样式 */
.audio-grid-container[data-v-9e0a4379] {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  min-height: 500px; /* 给一个最小高度，防止加载时跳动 */
  max-height: 500px;
  overflow-y: auto;
  align-content: flex-start; /* 让内容从顶部开始排列 */
}

/* 加载和空状态的居中样式 */
.loading-indicator[data-v-9e0a4379],
.no-results[data-v-9e0a4379] {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #888;
  font-size: 14px;
}
.stylelist[data-v-9e0a4379] {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 8px; /* 标签之间的间距 */
}
.selected-timbre-tag[data-v-9e0a4379] {
  position: relative;
  display: inline-flex; /* 让 el-tag 和 icon 在一行 */
  align-items: center;
  padding-right: 4px; /* 为图标留出空间 */
}
.delete-tag-icon[data-v-9e0a4379] {
  position: absolute;
  top: -6px; /* 向上微调，使其在标签右上角 */
  right: -6px; /* 向右微调 */

  background-color: #6c757d; /* 灰色背景 */
  color: white;
  border-radius: 50%;
  padding: 4px;
  cursor: pointer;
  font-size: 15px; /* 图标大小 */
  transition: all 0.2s ease;
  z-index: 1; /* 确保在标签之上 */
}
.delete-tag-icon[data-v-9e0a4379]:hover {
  background-color: #f56c6c; /* 悬停时变红色 */
  transform: scale(1.1); /* 放大效果 */
}
.main-container[data-v-9e0a4379] {
  /* 背景色 */
  --base-1: #1E2025;
  --base-3: #0D0E12;

  /* 品牌色 */
  --brand-blue: #00BBFF;

  /* 装饰色 */
  --deco-pink: #f56c6c;

  /* 字号 */
  --font-size-sm: 10px;
  --font-size-md: 12px;
  --font-size-lg: 14px;

  /* --- 替代 body 的基础样式 --- */
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.section-label[data-v-9e0a4379] {
  display: block;
  margin-bottom: 12px;
  font-size: var(--font-size-lg);
  color: #a0a0a0;
}

/* 红色的星号 */
.section-label[data-v-9e0a4379]::before {
  content: '*';
  color: var(--deco-pink);
  margin-right: 4px;
}
.style-selector-container[data-v-9e0a4379] {
  display: flex;
  width: 87%;
  gap: 5px;
  align-items: center;
}
.selected-styles-list[data-v-9e0a4379] {
  display: contents;
}
.selected-style-tag[data-v-9e0a4379] {
  position: relative;
  display: inline-block;
  align-items: center;
  background-color: var(--base-1);
  overflow: hidden;
 width: 40px;
  height: 40px;
  border-radius: 16px;
  font-size: var(--font-size-md);
  border: 1px solid #333;
  cursor: pointer;
  transition: background-color 0.2s;
}
.selected-style-tag[data-v-9e0a4379]:hover {
  background-color: #2a2c32;
}
.selected-style-tag .delete-icon[data-v-9e0a4379] {
  visibility: hidden;
  opacity: 0;
  display: flex;
  right: 2px;
  top: 2px;
  position: absolute;
  justify-content: center;
  align-items: center;
  width: 15px;
  height: 15px;
  background-color: #555;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}
.selected-style-tag:hover .delete-icon[data-v-9e0a4379] {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
.selected-style-tag .delete-icon[data-v-9e0a4379]:hover {
  background-color: var(--deco-pink);
}
.add-style-button[data-v-9e0a4379] {
  width: 40px;
  height: 40px;
  border: 1px dashed #555; /* 修改：虚线边框 */
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #2c2c2c;
  color: #777;
  transition: all 0.2s;
  flex-shrink: 0; /* 防止按钮被压缩 */
}
.add-style-button[data-v-9e0a4379]:hover {
  border-color: #00BBFF;
  color: #00BBFF;
}
.plus-icon[data-v-9e0a4379] {
  font-size: 14px; /* 修改：减小图标大小 */
}
.add-text[data-v-9e0a4379] {
  font-size: 10px; /* 修改：减小文字大小 */
  margin-top: 2px;
  transform: scale(0.85); /* 再次微调，使其更紧凑 */
}
.selected-styles-list[data-v-9e0a4379] {
  display: flex;
  gap: 12px;
  overflow-x: auto; /* 允许水平滚动 */
  flex-grow: 1; /* 占据剩余空间 */

  /* 隐藏滚动条的核心样式 */
  scrollbar-width: none; /* 适用于 Firefox */
  -ms-overflow-style: none; /* 适用于 IE 和 Edge */
}
.selected-styles-list[data-v-9e0a4379]::-webkit-scrollbar {
  display: none; /* 适用于 Chrome, Safari, 和 Opera */
}
.selected-style-tag[data-v-9e0a4379] {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px; /* 修改：从圆形变回圆角矩形 */
  overflow: hidden;
  border: 1px solid #333;
  cursor: pointer;
  flex-shrink: 0; /* 防止预览图被压缩 */
}
.selected-style-tag .delete-icon[data-v-9e0a4379] {
  visibility: hidden;
  opacity: 0;
  display: flex;
  right: 2px;
  top: 2px;
  position: absolute;
  justify-content: center;
  align-items: center;
  width: 15px;
  height: 15px;
  background-color: #555;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}
.selected-style-tag:hover .delete-icon[data-v-9e0a4379] {
  visibility: visible;
  opacity: 1;
}
.selected-style-tag .delete-icon[data-v-9e0a4379]:hover {
  background-color: #f56c6c;
}
.ingBox[data-v-9e0a4379]{
  display: inline-block;margin-left: 10px;position: relative
}
.ingBox:hover .ingdw[data-v-9e0a4379]{
  display: none;
}
.ingdw[data-v-9e0a4379]{
  position: absolute;right: 10px;
}
.radioclass[data-v-9e0a4379] {
  max-height: 500px;
  max-width: 400px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* 使用 :deep() 来穿透作用域 */
.radioclass[data-v-9e0a4379] img {
  max-width: 100% !important;
  -o-object-fit: cover;
     object-fit: cover;
  /* 为了更好的显示，可以加上下面这句 */
  display: block;
}
.productvideostyle[data-v-9e0a4379]{
  display: flex;
  gap: 5px;
}
.productvidet[data-v-9e0a4379]{
  text-align: center;
  border-radius: 51px;
  color: #FbFbFb;
  text-decoration: underline;
}
.productvideBOX[data-v-9e0a4379]{
  width: 60px;
  margin-bottom: 10px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}
.productvideF[data-v-9e0a4379]{
  text-align: center;

  border-radius: 51px;
  color: #FbFbFb40;
}
.productvideF[data-v-9e0a4379] :hover{
  color: #FbFbFb90;
}

.task-batch-manager[data-v-6a272b25] {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 360px;
  max-height: 500px;
  background-color: #242424;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  color: #e0e0e0;
  z-index: 10000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.header[data-v-6a272b25] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: #2c2c2c;
  border-bottom: 1px solid #333;
  cursor: pointer;
  font-weight: bold;
}
.header .left[data-v-6a272b25] {
  gap: 10px;
  font-size: 16px;
}
.header .remaining-count[data-v-6a272b25] {
  font-size: 14px;
  color: #a0a0a0;
  background-color: #3a3a3a;
  padding: 2px 8px;
  border-radius: 4px;
}
.header .right[data-v-6a272b25], .header .left[data-v-6a272b25] {
  display: flex;
  align-items: center;
}
.header .right[data-v-6a272b25] {
  gap: 10px;
}
.expand-icon[data-v-6a272b25], .close-icon[data-v-6a272b25] {
  color: #a0a0a0;
  cursor: pointer;
  transition: color 0.3s;
}
.expand-icon[data-v-6a272b25]:hover, .close-icon[data-v-6a272b25]:hover {
  color: #fff;
}
.content[data-v-6a272b25] {
  flex-grow: 1;
  overflow: hidden;
  padding-bottom: 10px;
}
.overall-progress-bar[data-v-6a272b25] {
  padding: 10px 16px 5px;
}
[data-v-6a272b25] .el-progress-bar__outer {
  background-color: #4a4a4a !important;
}
[data-v-6a272b25] .el-progress-bar__inner {
  background-image: linear-gradient(to right, #6EE7B7, #3B82F6) !important;
}
.task-list[data-v-6a272b25] {
  max-height: 380px;
  overflow-y: auto;
  padding: 0 16px;
  padding-right: 8px;
}
.task-list[data-v-6a272b25]::-webkit-scrollbar { width: 6px;
}
.task-list[data-v-6a272b25]::-webkit-scrollbar-thumb { background-color: #555; border-radius: 3px;
}
.task-list[data-v-6a272b25]::-webkit-scrollbar-track { background-color: #3a3a3a;
}
.task-item[data-v-6a272b25] {
  background-color: #333;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
.task-item[data-v-6a272b25]:last-child { margin-bottom: 0;
}
.task-info[data-v-6a272b25] {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.task-name[data-v-6a272b25] {
  font-weight: bold;
  color: #f0f0f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.task-time[data-v-6a272b25] { color: #a0a0a0; font-size: 12px;
}
.task-status-row[data-v-6a272b25] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.progress-wrapper[data-v-6a272b25] { flex-grow: 1;
}
.progress-message[data-v-6a272b25] {
  font-size: 12px;
  color: #a0a0a0;
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-item[data-v-6a272b25] .el-progress-bar__inner {
  background-image: linear-gradient(to right, #3b82f6, #6EE7B7) !important;
}
.task-item[data-v-6a272b25] .el-progress__text {
  color: #f0f0f0 !important;
  font-size: 12px !important;
  margin-left: 8px;
}
.status[data-v-6a272b25] {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  color: white;
}
.status.waiting[data-v-6a272b25] { background-color: #f59e0b;
}
.status.failed[data-v-6a272b25] { background-color: #ef4444;
}
.status.success[data-v-6a272b25] { background-color: #22c55e;
}
.status.cancelled[data-v-6a272b25] { background-color: #6b7280;
}
.task-actions[data-v-6a272b25] {
  display: flex;
  gap: 5px;
  font-size: 12px;
  white-space: nowrap;
}
.task-actions .el-button[data-v-6a272b25] {
  padding: 5px 10px;
  height: auto;
  color: #888;
  font-size: 12px;
}
.task-actions .el-button[data-v-6a272b25]:hover {
  color: #00FFCC;
  background-color: transparent;
}
.task-actions .el-button.remove-btn[data-v-6a272b25]:hover { color: #ef4444;
}
.task-actions .el-button span[data-v-6a272b25] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.no-tasks-placeholder[data-v-6a272b25] {
  text-align: center;
  color: #a0a0a0;
  padding: 20px;
  font-size: 14px;
}
.task-error-message[data-v-6a272b25] {
  color: #ef4444;
  font-size: 12px;
  margin-top: 5px;
  word-break: break-all;
  background-color: #4a2b2b;
  padding: 5px;
  border-radius: 4px;
}
.expand-enter-active[data-v-6a272b25], .expand-leave-active[data-v-6a272b25] { transition: all 0.3s ease-in-out;
}
.expand-enter-from[data-v-6a272b25], .expand-leave-to[data-v-6a272b25] { max-height: 0; opacity: 0;
}
.expand-enter-to[data-v-6a272b25], .expand-leave-from[data-v-6a272b25] { max-height: 400px; opacity: 1;
}
[data-v-6a272b25] .el-button .el-icon { vertical-align: middle;
}

.topContainer[data-v-d7cfec75]{
      width: 100%;
      height: auto;
      min-height: 100px;
      min-width: 900px;
      margin-right: 300px;
    padding: 0 10px;
}
.workInfoBox[data-v-d7cfec75]{
    position: relative;
    width: 100vw;
    min-width: 1130px;
}
.tooltip-width[data-v-d7cfec75]{
      max-width: 900px;
}
.workInfoIntroduction[data-v-d7cfec75]{
      font-size: 12px;
      color: #fbfbfb60;
      margin-top: 10px;
}
.flootContainer[data-v-d7cfec75]{
    position: relative;
      padding: 0px 30px 0px 30px;
      width: calc( 100%  - 76px ) ;
      height: calc(100vh - 85px - 120px);
      min-height: 500px;
      margin: 10px;
      overflow: hidden;
      background: rgba(251, 251, 251, 0.05);
      border-radius: 16px;
      opacity: 1;
}
.content-row[data-v-d7cfec75] {
    display: flex;
    flex-wrap: wrap;
    white-space: nowrap;
    gap: 20px;
    /* Standardized width */
    width: 95%;
    margin-bottom: 15px;
    margin-left: 10px;
}
.article-list-box[data-v-d7cfec75] {
    flex: 2;
    min-width: 300px;
    display: flex;
    flex-direction: column;
}
.section-header[data-v-d7cfec75] {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.title-bar[data-v-d7cfec75] {
    width: 0px;
    height: 22px;
    background: #FFFFFF;
    border-radius: 0 3px 3px 0;
}
.title[data-v-d7cfec75] {
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: #FBFBFB;
}
.move-article[data-v-d7cfec75] {
    cursor: pointer;
    margin-left: auto;
    color: #FBFBFB;
    display: flex;
    align-items: center;
    gap: 4px;
}
.article-list-box[data-v-d7cfec75] {
    flex: 2;
    min-width: 300px;
    display: flex;
    flex-direction: column;
}
.article-list[data-v-d7cfec75] {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    scrollbar-width: none;
    min-height: 100px;
}
.article-list[data-v-d7cfec75]::-webkit-scrollbar {
    display: none;
}
.article-list ul[data-v-d7cfec75] {
    display: flex;
    padding: 0;
    margin: 0;
    height: 100%;
    list-style: none;
}
.article-list li[data-v-d7cfec75] {
    flex: 0 0 auto;
}


/* 保持与你原始 CSS 一致，并进行以下调整 */
.aContainer[data-v-fd3376ce] {
  width: 100%;
  height: 98%;
  min-width: 900px;
  min-height: 600px;
  opacity: 1;
  animation: dialog-open-fd3376ce 0.5s cubic-bezier(0.32, 0.14, 0.15, 0.86);
  box-sizing: border-box;

  display: grid;
  grid-template-columns: minmax(0, 2fr) 1fr;
  -moz-column-gap: 40px;
       column-gap: 40px;
  padding: 0 2% 0 3.2%;
}
@keyframes dialog-open-fd3376ce {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
[data-v-fd3376ce]::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.activeItem[data-v-fd3376ce] {
  word-break: break-all;
  word-wrap: break-word;
  white-space: normal;
  width: 97%;
  margin-right: 3%;
  margin-bottom: 14px;
  height: 113px;
  color: #fbfbfb;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid rgba(251, 251, 251, 0.1);
  background: rgba(251, 251, 251, 0.05);
  border-radius: 16px;
  transition: all 0.3s ease; /* 添加过渡效果 */
}
.activeItem[data-v-fd3376ce]:hover {
  background: rgba(251, 251, 251, 0.1); /* 悬停效果 */
}
.AF[data-v-fd3376ce] {
  border: 2px solid rgba(251, 251, 251, 0.8);
  background: rgba(251, 251, 251, 0.1); /* 选中时背景更亮 */
}
/* .activeItem span {
  top: 50%;
  left: 50%;
  display: block;
  width: 70%;
  transform: translate(-50%, -50%);
  position: relative;
} */
.art_shode[data-v-fd3376ce] {
  pointer-events: none;
  position: absolute;
  left: 0;
  bottom: -10px; /* 修改为 bottom: 0，使其固定在底部 */
  display: block;
  z-index: 100;
  width: 100%;
  height: 170px;
  background: linear-gradient(360deg, rgb(12, 16, 22) 0%, rgba(11, 15, 19, 0.7) 70%, rgba(11, 15, 19, 0) 100%);
}
@media (max-height: 900px) {
.art_shode[data-v-fd3376ce] {
    bottom: 60px; /* 修改为 bottom: 0，使其固定在底部 */
}
}
.back[data-v-fd3376ce] {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
  z-index: 10; /* 确保返回按钮在 msContainer 内容之上 */
  color: #fbfbfb; /* 确保图标可见 */
  background-color: rgba(0, 0, 0, 0.2); /* 略微背景 */
  border-radius: 50%;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.back[data-v-fd3376ce]:hover {
  background-color: rgba(0, 0, 0, 0.4);
}
.articelInfo[data-v-fd3376ce] {
  width: 100%;
  height: 100%; /* 调整高度以适应 title-wrapper */
  margin-bottom: 20px;
  position: relative;
  display: flex;
  flex-direction: column; /* 垂直布局标题和内容 */
}

/* 新增标题容器样式 */
.title-wrapper-art[data-v-fd3376ce] {
  width: 100%;
  text-align: center;
  padding: 15px 0; /* 根据需要调整内边距 */
  flex-shrink: 0; /* 防止被挤压 */
  min-height: 50px; /* 最小高度，防止内容过少时太小 */
  box-sizing: border-box; /* 确保padding不增加总尺寸 */
  /* 可以添加背景色和圆角来模拟图片中的效果 */

  border-radius: 8px;
}
.articelInfo .title[data-v-fd3376ce] {
  /* 移除固定字体大小，由 JS 动态控制 */
  /* font-size: 24px; */
  width: 100%;
  /* text-align: center; 已经由 title-wrapper 控制了 */
  padding: 0; /* 移除原来的padding-bottom，由title-wrapper的margin-bottom控制 */
  margin: 0; /* 移除h1默认margin */
  color: #fbfbfb;
  white-space: nowrap; /* 确保文本不换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: clip; /* 不显示省略号 */
  font-weight: bold; /* 加粗 */
  /* flex布局可能会影响 text-align:center，确保它在 title-wrapper 中垂直居中 */
  line-height: 1.2; /* 调整行高 */
  display: inline-block; /* 确保 scrollWidth 和 clientWidth 测量准确 */
}
.articellistInfothis[data-v-fd3376ce] {
  width: 100%;
  height: 830px; /* 如果需要响应式，这里可以调整为 flex-grow: 1 */
  padding-bottom: 20px;
  overflow-y: scroll; /* 允许垂直滚动 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.articelInfo .articelImsg[data-v-fd3376ce] {
  height: 100%; /* 占据剩余空间 */
  width: 100%;
  position: relative;
  padding-bottom: 100px;
  scrollbar-width: none;
  overflow: auto;
  flex-grow: 1; /* 占据剩余空间 */
}
.articelBox[data-v-fd3376ce] {
  position: relative;
  height: calc(100% - 5px);
  /* 宽度由 grid-template-columns 控制 */
}
.articelListBox[data-v-fd3376ce] {
  height: 100%;
  position: relative;
}
.activeItemImg[data-v-fd3376ce] {
  width: 29.77%;
  height: 81.61%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
  margin-right: 10px; /* 图片与文字的间距 */
}
.shode[data-v-fd3376ce] {
  pointer-events: none;
  position: absolute;
  left: 0;
  bottom: 0; /* 修改为 bottom: 0，使其固定在底部 */
  display: block;
  z-index: 100;
  width: 100%;
  height: 270px;
  background: linear-gradient(360deg, rgb(12, 16, 22) 0%, rgba(11, 15, 19, 0) 101%);
}

/* 确保 el-tabs 样式覆盖 */
.Notifications-tabs[data-v-fd3376ce] {
  --el-tabs-header-height: 50px; /* 调整tab header高度 */
}
.Notifications-tabs[data-v-fd3376ce] .el-tabs__header {
  margin-bottom: 20px;
  background-color: transparent; /* 保持透明或你需要的背景色 */
  border-bottom: none; /* 移除底部线条 */
}
.Notifications-tabs[data-v-fd3376ce] .el-tabs__item {
  color: rgba(251, 251, 251, 0.6);
  font-size: 16px;
  padding: 0 0px; /* 调整tab item的padding */
  height: 40px;
  line-height: 40px;
}
.Notifications-tabs[data-v-fd3376ce] .el-tabs__item.is-active {
  color: #fbfbfb; /* 选中时颜色 */
  font-weight: bold;
}
.Notifications-tabs[data-v-fd3376ce] .el-tabs__active-bar {
  background-color: #fbfbfb; /* 选中下划线颜色 */
  height: 3px;
}
.Notifications-tabs[data-v-fd3376ce] .el-tabs__nav-wrap::after {
  background-color: rgba(251, 251, 251, 0.1); /* 底部线条颜色 */
}

/* --- 核心修改：定义新的从下往上滑入的动画 --- */
@keyframes slideUpFadeIn-2c0b9bea {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.fade-slide-enter-active[data-v-2c0b9bea] {
  animation: slideUpFadeIn-2c0b9bea 0.4s ease-out;
}
.fade-slide-leave-active[data-v-2c0b9bea] {
  animation: slideUpFadeIn-2c0b9bea 0.3s ease-in reverse;
}


/* --- 核心修改：容器样式，固定在右下角 --- */
.upload-box[data-v-2c0b9bea] {
  position: fixed;
  /* 定位到右下角，留出 30px 的边距 */
  right: 30px;
  bottom: 0px;
  width: 480px;
  background: #1E2025;
  z-index: 49999;
  border-radius: 16px; /* 调整圆角以匹配整体风格 */
  border: 1px solid rgba(251, 251, 251, 0.1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); /* 添加更柔和的阴影 */
  overflow: hidden; /* 确保子元素不会溢出圆角 */
}
.upload-box.collapsed[data-v-2c0b9bea] {
  height: 65px;
}
.upload-box.expanded[data-v-2c0b9bea] {
  height: 350px; /* 稍微增加高度以提供更多空间 */
  display: flex;
  flex-direction: column;
}

/* --- 标题栏样式 --- */
.box-title[data-v-2c0b9bea] {
  color: #fbfbfb;
  width: 100%;
  height: 60px;
  line-height: 60px;
  font-size: 18px; /* 调整字体大小 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px 0 20px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.collapsed .box-title[data-v-2c0b9bea] {
  padding: 0 15px;
}
.header-icons[data-v-2c0b9bea] {
  display: flex;
  gap: 20px;
  cursor: pointer;
}
[data-v-2c0b9bea] .el-progress-bar__inner {
  background: linear-gradient(90deg, #21FFF3, #9dff00);
}

/* --- 文件列表容器 --- */
.box-content[data-v-2c0b9bea] {
  width: 100%;
  flex-grow: 1; /* 占据剩余空间 */
  overflow-y: auto;
  color: #fbfbfb;
  font-size: 14px;
  padding: 0;
}
.box-content[data-v-2c0b9bea]::-webkit-scrollbar {
  width: 4px;
}
.box-content[data-v-2c0b9bea]::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 2px;
}
.box-content[data-v-2c0b9bea]::-webkit-scrollbar-track {
  background: transparent;
}


/* --- 文件行布局 (与之前相同) --- */
.file-row[data-v-2c0b9bea] {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  gap: 15px;
}
.file-row[data-v-2c0b9bea]:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.file-info[data-v-2c0b9bea] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.file-icon[data-v-2c0b9bea] {
  width: 24px;
  height: auto;
  flex-shrink: 0;
}
.file-name[data-v-2c0b9bea] {
  white-space: nowrap;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
}
.file-size[data-v-2c0b9bea] {
  color: #a0a0a0; /* 调整颜色，使其不那么突出 */
  min-width: 70px;
  text-align: left;
}
.file-status[data-v-2c0b9bea] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  min-width: 120px;
}
.upload-speed[data-v-2c0b9bea] {
  color: #999;
}
.upload-progress[data-v-2c0b9bea] {
  color: #fbfbfb;
  font-weight: 500;
}

/* --- 状态和操作图标 (与之前相同) --- */
.status-icon[data-v-2c0b9bea] {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.status-icon.success[data-v-2c0b9bea] {
  background-color: #21FFF3;
  color: #fff;
}
.status-icon.fail[data-v-2c0b9bea] {
  background-color: #FF005E;
  color: #fff;
}
.action-icon[data-v-2c0b9bea] {
  cursor: pointer;
  color: #fbfbfb;
}
.action-icon[data-v-2c0b9bea]:hover {
  opacity: 0.8;
}

.msgVideo[data-v-8ffa808a] {
  text-align: center;
  width: 978px;
  height: 796px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  border: 1px solid rgba(251, 251, 251, 0.1);
  background: #1E2025;
  border-radius: 24px;
  padding: 20px;
  box-sizing: border-box;
}
.video-container[data-v-8ffa808a] {
  width: 100%;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
video[data-v-8ffa808a] {
  width: 842px;
  height: 470px;
  background: #000;
  border-radius: 8px;
}
.timeline-container[data-v-8ffa808a] {
  position: relative;
background-color: #3d3f42;
  height: 60px;
  width: 850px;
  /* MODIFIED: Allow scrolling for programmatic scroll, hide visual scrollbar */
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}
.timeline-container[data-v-8ffa808a]::-webkit-scrollbar { /* WebKit */
  display: none;
}
canvas[data-v-8ffa808a] {
  display: block;
  /* height: 100%; */ /* 由 canvasHeight 控制，style.height 在 script 中设置 */
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* width and height style set in script to timelineWidth and canvasHeight */
}
.range-selector[data-v-8ffa808a] {
  position: absolute;
  top: 0px;
  height: 5px;
  background: #00FFCC;
  cursor: move;
  border-radius: 4px;
}
.range-handle[data-v-8ffa808a] {
  position: absolute;
  width: 10px;
  height: 100%;
  background: #00c8ff;
  cursor: col-resize;
  border-radius: 4px;
}
.range-handle.start[data-v-8ffa808a] {
  left: -3px;
  padding-left: 5px;
  background: #fbfbfb60;
  height: 100px;
}
.range-handle.end[data-v-8ffa808a] {
  right: -3px;
  padding-right: 5px;
  height: 100px;
  background: #fbfbfb60;
}
.range-bar[data-v-8ffa808a] {
  position: absolute;
  width: 90%;
  height: 100%;
}
.controls[data-v-8ffa808a] {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.zoom-controls[data-v-8ffa808a] {
  display: flex;
  align-items: center;
  gap: 5px;
}
.zoom-controls button[data-v-8ffa808a] {
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoom-controls button[data-v-8ffa808a]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
button[data-v-8ffa808a] {
  padding: 8px 16px;
  background: #00c8ff00;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s;
}
button[data-v-8ffa808a]:hover:not(:disabled) {
  color: #d4d4d4;
}
.time-display[data-v-8ffa808a], .zoom-display[data-v-8ffa808a] {
  font-family: monospace;
  font-size: 14px;
  color: #fbfbfb;
}
.overloan[data-v-8ffa808a] {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.438);
  z-index: 10000;
}
.timeVal[data-v-8ffa808a]{
  color: #fbfbfb;
  font-size: 14px;
  margin-left: 10px;
  margin-right: 10px;
  font-weight: 500;
}

.msgBoxCurtain[data-v-f7d5f9c1] {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.5);
}
.msgboxFoot[data-v-f7d5f9c1] {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}
.msgCon[data-v-f7d5f9c1] {
    width: 388px;
    height: 210px; /* 增加高度以容纳字符计数器 */
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    background: #1E2025;
    border-radius: 24px;
    border: 1px solid rgba(251, 251, 251, 0.1);
}
.info[data-v-f7d5f9c1] {
    /* 可以添加特定样式 */
}
.danger[data-v-f7d5f9c1] {
    /* 可以添加特定样式 */
}
.msgCon > .title[data-v-f7d5f9c1] {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    color: #fbfbfb;
    padding-top: 14px;
    position: relative;
}
.title > .msgBoxClose[data-v-f7d5f9c1] {
    position: absolute;
    cursor: pointer;
    top: 10px;
    right: 20px;
}
.msgBoxContent[data-v-f7d5f9c1] {
    padding: 0 20px;
    margin-top: 10px;
}
.msgBoxmsg[data-v-f7d5f9c1] {
    width: 100%;
    text-align: center;
    height: 20px;
    line-height: 20px;
    color: #fbfbfb;
    font-size: 12px;
    margin-bottom: 10px;
}
.inputContainer[data-v-f7d5f9c1] {
    margin: 10px 0;
    position: relative;
}
.msgInput[data-v-f7d5f9c1] {
    width: 224px;
    height: 32px;
    padding: 10px 15px;
    background: #2A2D34;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid rgba(251, 251, 251, 0.1);
    border-radius: 31px;
    color: #fbfbfb;
    font-size: 14px;
    outline: none;
}
.msgInput[data-v-f7d5f9c1]:focus {
    border-color: #409eff;
}
.inputMeta[data-v-f7d5f9c1] {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}
.errorMessage[data-v-f7d5f9c1] {
    color: #f56c6c;
    font-size: 12px;
    text-align: left;
    padding-left: 5px;
    flex: 1;
}
.charCounter[data-v-f7d5f9c1] {
    color: #909399;
    font-size: 12px;
    position: absolute;
    top: 7px;
    left: 68%;
    text-align: right;
    padding-right: 5px;
}

.tabCon[data-v-e2207e8f]{
    width: 100%;
    height: 426px;
    overflow: hidden;
    margin-top: 15px;
}
.Container[data-v-e2207e8f]{
    width:100%;
    height:598px;
}
.resourceMsg[data-v-e2207e8f]{
}
.fileHead[data-v-e2207e8f]{
    width:42px;
    height:42px;
    border-radius:16px;
}
.HorizontalAlignment[data-v-e2207e8f]{
    position: relative;
    display: flex;
    align-items: center;
}
.filemsg[data-v-e2207e8f]{
    margin-left:14px;
}


[data-v-e88c08a6]::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.zsUpload[data-v-e88c08a6]{
  border-radius: 16px;
  border: 1px dashed rgba(251, 251, 251, 0.4);
  box-sizing: border-box;
  background: rgba(251, 251, 251, 0.05);
  width: 95px;
  height: 95px;
  line-height: 95px;
  text-align: center;
  cursor: pointer;
}
.uploadBox[data-v-e88c08a6]{
  overflow: hidden;
  color: #FBFBFB;
  height: 88px;
  width: 224px;
  border-radius: 16px;
  line-height: 88px;
  text-align: center;
  background: rgba(251, 251, 251, 0.05);
  border: 1px dashed rgba(251, 251, 251, 0.4);
  box-sizing: border-box;
}
.imgflieBOX[data-v-e88c08a6]{
  overflow: scroll;
  color: #FBFBFB;
  height: 88px;
  margin-left: 20px;
  width: 224px;
  border-radius: 16px;
  line-height: 28px;
  text-align: left;
  background: rgba(251, 251, 251, 0.05);
  border: 1px dashed rgba(251, 251, 251, 0.4);
  box-sizing: border-box;
}
.imgflieBOX[data-v-e88c08a6]::-webkit-scrollbar {
  display: none;
}
.loading[data-v-e88c08a6]{
  color: #FBFBFB;
  animation: rotate-e88c08a6 1s linear infinite;
  display: inline-block;
  transform-origin: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-align: center;
}
@keyframes rotate-e88c08a6 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(-360deg);
}
}
.ke[data-v-e88c08a6]{
  margin-top:30px;
  width: 99%;
  height: 70vh;
  background: #0000002a;
  border-radius: 14px;
  overflow: auto;
  scrollbar-width: none;
  padding: 12px;
}
.aListOfTypes[data-v-e88c08a6]{
  width:100%;
  /* overflow-x: scroll; */
  overflow: hidden;
  height:30px;
  position: reactive;
  white-space: nowrap;
}
.listToPrimry[data-v-e88c08a6]::-webkit-scrollbar {
  display: none;
}
.textfontAF[data-v-e88c08a6]{
  font-size:16px;
  color: #FBFBFB;
  padding:8px;
  margin-right: 5px;
  cursor:pointer;
  display: inline-block;
}
.textfont[data-v-e88c08a6]{
  display: inline-block;
  font-size:16px;
  color: #FBFBFB;
  opacity: 0.4;
  margin-right: 5px;
  padding:8px;
  cursor:pointer;
}
.deleteFile[data-v-e88c08a6]{
  cursor: pointer;

  position: absolute;
  z-index: 3000;
  width: 24.96px;
  text-align: center;
  line-height: 24px;
  height: 24px;
  border-radius: 0px 16px 0px 16px;
  background: #FF005E;
  left:calc( 100% - 24.96px );
}
/* .shade{
    pointer-events:none;
    position: absolute;
    left:calc( 100% - 100px );
    top:5%;
    width: 99px;
    height: 30px;
    background: linear-gradient(270deg, #1E2025 0%, rgba(30, 32, 37, 0.527) 90%, rgba(30, 32, 37, 0) 100%);
} */
.HorizontalAlignment[data-v-e88c08a6]{
  display: flex;
  align-items: center;
}
.el-dialog__body img[data-v-e88c08a6] {
  max-width: 100%;
  max-height: 100%;
}

/* 特定的封面图片容器样式 */
.image-cover-wrapper[data-v-e88c08a6] {
  width: 120px;              /* 固定容器宽度 */
  height: 120px;             /* 固定容器高度 */
  border-radius: 16px;       /* 容器的圆角 */
  overflow: hidden;          /* 关键：隐藏超出容器的内容，实现裁剪效果 */
  display: flex;             /* 用于居中 thumbnailBox 内容 */
  justify-content: center;
  align-items: center;
  background-color: #f0f0f000; /* 可选：没有图片时的背景色 */
  border: 1px dashed #fbfbfb50;   /* 可选：没有图片时的虚线边框 */
  box-sizing: border-box;    /* 确保 padding 和 border 不会增加元素总尺寸 */
}

/* 针对 image-cover-wrapper 内部的 img 标签 */
.image-cover-wrapper img[data-v-e88c08a6] {

  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* 确保 thumbnailBox 在没有图片时也能正确显示 */
.image-cover-wrapper .thumbnailBox[data-v-e88c08a6] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  background-color: rgb(37, 38, 41); /* El-Element 默认的空状态背景色 */
  border-radius: 16px; /* 匹配容器的圆角 */
}

.image-waterfall-container[data-v-2f47ebf6] {
  min-height: 230px;
  /* 使用 CSS Columns 实现简单的瀑布流 */
  -moz-column-count: 6;
       column-count: 6; /* 默认4列，可以根据需要调整 */
  -moz-column-gap: 15px;
       column-gap: 15px;
  padding: 15px;
}
.image-item[data-v-2f47ebf6] {
  /* 防止项目在列之间被切割 */
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  margin-bottom: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  background-color: rgb(38,37,41);
}

/* el-image 的样式穿透 */
.image-item .el-image[data-v-2f47ebf6] {
  cursor: pointer;
  transition: transform 0.3s ease;
}
.image-item .el-image[data-v-2f47ebf6]:hover {
  transform: scale(1.03);
}

/* 响应式调整列数 */
@media (max-width: 1200px) {
.image-waterfall-container[data-v-2f47ebf6] {
    -moz-column-count: 3;
         column-count: 3;
}
}
@media (max-width: 992px) {
.image-waterfall-container[data-v-2f47ebf6] {
    -moz-column-count: 2;
         column-count: 2;
}
}
@media (max-width: 600px) {
.image-waterfall-container[data-v-2f47ebf6] {
    -moz-column-count: 1;
         column-count: 1;
}
}

.HorizontalAlignment[data-v-c44d18ef]{
  display: flex;
  align-items: center;
}
.selectStyle[data-v-c44d18ef]{
  position: relative;
  width: 97%;
  color: #FBFBFB;
  height: 48px;
  cursor: pointer;
  line-height: 48px;
  border-radius: 8px;
  background-color: #00000050;
  margin-top: 10px;
  padding-left: 15px;
}
.selectStyle[data-v-c44d18ef]:hover{
  background-color: #ffffff20;
}
.iconStyle[data-v-c44d18ef]{
  margin-right: 20px;
  height: 30px;
  width: 30px;
}
[data-v-c44d18ef]::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

input[data-v-060c3bc9] {
  margin: 1rem 0;
}

.play[data-v-4d181a95]{
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: relative;
  top: -8%;
  animation: myAnimation-4d181a95 3s linear infinite;
}
@keyframes myAnimation-4d181a95 {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
.Noplay[data-v-4d181a95]{
  position: relative;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  top: -8%;
}
/* Main container for the audio player */
.audio-container[data-v-4d181a95] {
  background-color: #fbfbfb20; /* A dark, neutral background */
  border-radius: 16px;
  position: relative;
  width: 100%;
  height: 270px; /* A fixed height for an audio player */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: white;
  font-family: Arial, sans-serif;
}

/* Hide the actual audio element */
audio[data-v-4d181a95] {
  display: none;
}

/* --- Central Play/Pause Buttons --- */
.play-button[data-v-4d181a95] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 2;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}
.play-button[data-v-4d181a95]:hover {
  opacity: 1;
}
.pause-button-overlay[data-v-4d181a95] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 2;
  opacity: 0; /* Hidden by default */
  transition: opacity 0.3s ease;
}
/* Show pause button when hovering the container while playing */
.audio-container:hover .pause-button-overlay[data-v-4d181a95] {
  opacity: 0.9;
}
.pause-button-overlay[data-v-4d181a95]:hover {
  opacity: 1;
}


/* --- Base styles for control bar --- */
.controls-while-paused[data-v-4d181a95],
.controls-while-playing[data-v-4d181a95] {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  padding: 12px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 15px;
  /*transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;*/
}

/* Controls are always visible when paused */
.controls-while-paused[data-v-4d181a95] {
  opacity: 1;
  transform: translateY(0);
}

/* Controls are hidden by default when playing, appear on hover */
.controls-while-playing[data-v-4d181a95] {
  opacity: 0;
  transform: translateY(100%);
}
/*.audio-container:hover .controls-while-playing {
  opacity: 1;
  transform: translateY(0);
}*/

/* Control bar play button */
.play-btn[data-v-4d181a95] {
  background: none;
  border: none;
  color: white;
  font-size: 22px;
  cursor: pointer;
  padding: 0 10px;
  line-height: 1;
}

/* Time display */
.time-display[data-v-4d181a95] {
  font-size: 14px;
  min-width: 90px;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Progress bar container */
.progress-bar-wrapper[data-v-4d181a95] {
  flex-grow: 1;
  padding: 10px 0; /* Larger clickable area */
  cursor: pointer;
}
.progress-bar[data-v-4d181a95] {
  height: 5px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  position: relative;
  width: 100%;
}
.progress[data-v-4d181a95] {
  height: 100%;
  background: #3498db; /* A nice blue */
  border-radius: 3px;
  transition: width 0.1s linear; /* Smooth transition during playback */
}
.thumb[data-v-4d181a95] {
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.thumb[data-v-4d181a95]:active {
  cursor: grabbing;
}

.spine-viewer[data-v-65861c3a] {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-color: #0d0e12;
}
canvas[data-v-65861c3a] {
  width: 100%;
  height: 100%;
  display: block;
}
.animation-selector[data-v-65861c3a] {
  text-align: right;
  color: #FBFBFB;
  border-radius: 5px;
  z-index: 10;
  padding: 20px 0px;
  align-items: center;
}
.animation-selector label[data-v-65861c3a] {
  margin-right: 5px;
  color: #FBFBFB;
}

/* MODIFICATION START: 整体布局重构为 Grid */
.main-layout-container[data-v-924ce1dc] {
  min-height: 600px;
  height: 100%; /* 让容器撑满其父级 */
  display: grid;
  /* 定义布局行: 顶部信息区(auto), 操作区(auto), 面包屑(auto), 主内容区(1fr, 占据所有剩余空间) */
  grid-template-rows: auto auto auto 1fr;
  /* 定义一列布局 */
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden; /* 防止子元素溢出 */
}
/* MODIFICATION END */
.newcompressFiles[data-v-924ce1dc]{
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 52px;
  min-width: 1000px;
}
.indexselectVal[data-v-924ce1dc]{
  display: inline-flex;
  padding: 1px;
  background: linear-gradient(96deg, rgba(251, 251, 251, 0.4) 1%, rgba(251, 251, 251, 0) 35%, rgba(251, 251, 251, 0) 65%, rgba(251, 251, 251, 0.4) 100%);
  border-radius: 63px;
}
.top[data-v-924ce1dc]{
  margin-top: 24px;
  min-width: 1000px;
  width: calc( 100% );
  height: 80px;
}

/* MODIFICATION START: 主内容区样式调整 */
.container[data-v-924ce1dc] {
  position: relative;
  /* 移除固定的 calc 高度，让它由 Grid 的 1fr 决定 */
  /* height: calc( 100vh - 275px); */
  height: 100%;
  min-height: 0; /* 允许子元素正确滚动 */
}
/* MODIFICATION END */
[data-v-924ce1dc]::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.cloud-recycle-bins[data-v-924ce1dc]{
  border: 1px solid rgba(251, 251, 251, 0.1);
  background: linear-gradient(180deg, rgba(25, 26, 30, 0.2) 0%, rgba(110, 114, 132, 0.2) 100%);
  width: 123px;
  cursor: pointer;
  height: 60px;
  margin-left: 20px;
  line-height: 60px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  border-radius: 16px;
  color: #FBFBFB;
}
.file[data-v-924ce1dc]{
  width: 135px;
  height:135px;
  text-align: center;

  color: #fbfbfb;
  position: relative;
  cursor: pointer;
  margin-top: 10px;
  margin-right: 10px;
  padding: 20px;
  display: inline-block;
  border-radius: 16px;
}
.file[data-v-924ce1dc]:hover{
  background-color:rgba(251, 251, 251, 0.1);
}

/* MODIFICATION START: 文件列表容器样式调整 */
.list-container[data-v-924ce1dc] {
  width: 100%;
  min-width: 1000px;
  /* 移除固定的 vh 高度，让它撑满父级 .container */
  /* height: 53.5vh; */
  height: 100%;
  overflow: scroll;
  min-height: 300px; /* 保留最小高度 */
  padding-right: 24px;
  box-sizing: border-box; /* 确保 padding 不会撑大容器 */
}
/* MODIFICATION END */
.item[data-v-924ce1dc] {
  padding: 10px;
  margin-bottom: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  cursor: grab;
}
.title[data-v-924ce1dc] {
  color: #fbfbfb;
  position:relative;
  width: 100%;
  height: 50px;
  min-width: 1000px;
}
.breadcrumbItem[data-v-924ce1dc]{
  color: #fbfbfb;
  display: inline-block;
  margin-left: 16px;
  cursor: pointer;
  max-width: 200px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.breadcrumbItem[data-v-924ce1dc]:hover{
  color: #c7c7c7;
}
.delFIleSELBOX[data-v-924ce1dc]{
  position: absolute;
  z-index: 1000;
  background-color: #646670;
  height: 20px;
  width: 20px;
  cursor: pointer;
  border-radius: 4px;
  left: 75%;
  top: 10%;
}
.delete-zone[data-v-924ce1dc] {
  position: absolute;
  /* MODIFICATION START: 调整定位以适应新布局 */
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 160px); /* 假设左右各有80px的padding */
  /* MODIFICATION END */
  height: 15%;
  min-height: 40px;
  border-radius: 24px;
  opacity: 1;
  border: 2px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fbfbfb;
  background: rgba(251, 251, 251, 0.05);
  transition: all 0.3s ease; /* 添加过渡效果 */
  z-index: 2002;
}

/* 拖拽到删除区域时的样式 */
.delete-zone.drag-over[data-v-924ce1dc] {

  border-color: #FF005E;
  background-color:  rgba(255, 0, 94, 0.1);
  color: #FF005E !important;
}
.video-container[data-v-924ce1dc] {
  position: relative;
  width: 558px;
  display: inline-block;
}
.upload-mask[data-v-924ce1dc] {
  z-index: 10000;
  position: fixed;
  bottom: 0;
  backdrop-filter: blur(2px);
  width: calc(100vw)
}
.upload-core[data-v-924ce1dc] {
  height: 16rem;
  width: 24rem;
}
.drop-area[data-v-924ce1dc] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
[data-v-924ce1dc] .el-upload {
  height: 100% !important;
  width: 100% !important;
}
[data-v-924ce1dc] .el-upload-dragger {
  height: 100%;
  width: 100%;
  border-width: 2px;
  border-style: dashed;
  border-color: rgb(255 255 255 / 0.3);
  background-color: transparent;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
[data-v-924ce1dc] .el-upload-dragger:hover {
  border-color: rgb(255 255 255 / 0.5);
}
.video-container video[data-v-924ce1dc] {
  display: block;
  width: 100%;
  height: auto;
}
.video-container video[data-v-924ce1dc]::-webkit-media-controls-play-button {
  display: none;
}
.filePopoverOde[data-v-924ce1dc]{
  width: 140px ;
  height: 40px;
  cursor: pointer;
  border-radius: 12px;
  text-align: center;
  color: #fbfbfb;
  line-height: 40px;
}
.filePopoverOde[data-v-924ce1dc]:hover{
  background: rgba(251, 251, 251, 0.05);
  border-radius: 12px;
}
.scroller[data-v-924ce1dc] {
  height: 400px;
  width: 100%;
}
[data-v-924ce1dc] .el-upload-list {
  opacity: 0;
  height: 0;

  padding: 0;
  margin: 0;
}
.left-cascader .el-cascader-menu[data-v-924ce1dc] {
  float: right;
}
.left-cascader .el-cascader-menu__wrap[data-v-924ce1dc] {
  right: 100%;
  left: auto;
}
.loadingList[data-v-924ce1dc]{
  position: absolute;
  bottom: 0px;
  z-index: 11111;
  color: #FBFBFB;
  width: 300px;
  left: 50%;
  transform: translate(-50%, 0);
  height: 40px;
  text-align: center;
}
.NoFile[data-v-924ce1dc]{
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-60%, -80%);
}
.select_input[data-v-924ce1dc]{
  flex: 1;
  white-space:nowrap;
  min-width: 636px;
  text-align: right;
  padding-right: 20px;
}
.fileselect[data-v-924ce1dc]{
  width: 308px;height: 34px;margin-left: 10px;
}
@media screen and (max-width: 1600px) {
.fileselect[data-v-924ce1dc]{
    width: 238px;height: 34px; float: right;
}
}
@media screen and (max-width: 1200px) {
.fileselect[data-v-924ce1dc]{
    width: 238px;height: 34px; float: right;
}
}
.fileInfo[data-v-924ce1dc]{
  width: 100%;
  color: #FbFbFb;
}
.fileInfo .file_info_Box[data-v-924ce1dc]{
  display: flex ;
  width: 100%;
  margin-top: 10px;
}
.fileInfo .file_info_Box .file_info_title[data-v-924ce1dc]{
  width: 80px;
}
.fileInfo .file_info_Box .file_info_msg[data-v-924ce1dc]{
  white-space: nowrap;
  text-overflow: ellipsis;
  width: calc(100% - 100px);
  overflow: hidden;
  font-size: 12px;
}
.fileInfo .file_info_Box .file_info_msgD[data-v-924ce1dc]{

  width: calc(100% - 100px);
  overflow: hidden;
  font-size: 12px;
}
.zsUpload[data-v-924ce1dc]{
  border-radius: 16px;
  border: 1px dashed rgba(251, 251, 251, 0.4);
  box-sizing: border-box;
  background: rgba(251, 251, 251, 0.05);
  width: 320px;
  height: 95px;
  position: relative;
  text-align: center;
  cursor: pointer;
}
.separationButton[data-v-924ce1dc]{
  margin-top: 16px;
  width: 100%;
  text-align: center;
}
.separation_text_msg[data-v-924ce1dc]{
  font-size: 12px;
  display: flex;
  width: 100%;
}
.separation_text[data-v-924ce1dc]{
  width: 220px;
  color: #FbFbFb;
}
.separation_num[data-v-924ce1dc]{
  color: #FbFbFb;
  width: 100px;
  text-align: right;
}
.deleteFile[data-v-924ce1dc]{
  cursor: pointer;
  position: absolute;
  z-index: 3000;
  width: 24.96px;
  text-align: center;
  line-height: 24px;
  height: 24px;
  border-radius: 0px 16px 0px 16px;
  top:50%;
  transform: translateY(-50%);
  left:calc( 100% - 36.96px );
}
.resourceSharingCon[data-v-924ce1dc]{
  width: 100%;
  font-size: 12px;
  padding: 0px 20px;
}
.resourceSharingCon .resourceSharingCon_text[data-v-924ce1dc]{
}
.resourceSharingCon .resourceSharingCon_text div[data-v-924ce1dc]{
  width: 100%;
}
.resourceSharingCon_Button[data-v-924ce1dc]{
  width: 100%;
  margin-top: 20px;
  text-align: center;
}
.filetopICON[data-v-924ce1dc]{
  position: absolute;
  z-index: 2000;
}
.filetopICON img[data-v-924ce1dc]{
  margin: 5px;
  width: 20px;
  height: 20px;
}
.separation_msg[data-v-924ce1dc]{
  width: 320px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.spaceSelectionButton[data-v-924ce1dc]{
}
.selected[data-v-924ce1dc]{
  background: linear-gradient(105deg, #CBFFF8 5%, #21FFF3 36%, #FFF600 98%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.selectCon[data-v-924ce1dc]{
  min-width: 140.39px;
  border: 1px solid #FBFBFB30;
  padding: 5px;
  border-radius: 10px;
}
.notSelected[data-v-924ce1dc]{
  cursor: pointer;
  color: #fbfbfb80;
}
.notSelected[data-v-924ce1dc] :hover{
  color: #fbfbfb;
}
.upload-coreA[data-v-924ce1dc]{
  position: absolute;
  width: 100%;
}

.def[data-v-84e3aa05]{
      padding: 1px;
      width: 188px;
      height: 82px;
      border-radius: 16px;
      background: linear-gradient(113deg, rgba(251, 251, 251, 0.2) -1%, rgba(251, 251, 251, 0) 34%, rgba(251, 251, 251, 0) 64%, rgba(251, 251, 251, 0.2) 100%);
}
.def>.Internal-Box[data-v-84e3aa05]{
      background: rgb(25, 26, 30);
      box-sizing: border-box;
      text-align: center;
      cursor: pointer;
        /* Gradient/Stroke/White-20 */
      width: 186px;
      line-height: 80px;
      height: 80px;
      border-radius: 16px;
}
.def>.Internal-Box>.textBox[data-v-84e3aa05]{
      float: right;
      margin-right: 16px;
      color: rgba(251, 251, 251, 0.6);
}
.hov >.Internal-Box[data-v-84e3aa05]{
     
      background: linear-gradient(131deg, rgba(0, 255, 204, 0.3) 0%, rgba(0, 255, 204, 0.1) 63%);
      width: 186px;
      height: 80px;
      border-radius: 16px;
      line-height: 80px;
      color: #fbfbfb;
      text-align: center;
      box-sizing: border-box;
      border: 1px solid #00FFCC;
      box-shadow: inset 0px -4px 8px 0px rgba(0, 255, 204, 0.2);
}
.hov>.Internal-Box>.textBox[data-v-84e3aa05]{
      float: right;
      margin-right: 16px;
      
      background: linear-gradient(125deg, #CBFFF8 4%, #21FFF3 36%, #FFF600 99%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
}

/*
  'scoped' ensures these styles only apply to this component,
  preventing conflicts with global styles.
*/
[data-v-51826ebe]:root {
  /* CSS Variables for easy theme management */
  --bg-color: #121212;
  --card-bg-start: #1e293b;
  --card-bg-end: #0f172a;
  --card-border-color: #334155;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
}
.yes[data-v-51826ebe]{
  background: linear-gradient(180deg, rgba(0, 255, 204, 0) 0%, #00FFCC40 100%);
  box-sizing: border-box;
  color: #FbFbFb;
  border: 1px solid #FFFFFF60;
}
.no[data-v-51826ebe]{
  background: linear-gradient(180deg, rgba(0, 255, 204, 0) 0%, #00FFCC10 100%);

  box-sizing: border-box;
  border: 1px solid #FFFFFF10;
}
.tools-section[data-v-51826ebe] {
  width: 100%;
  padding-left: 52px;
  padding-right: 24px;
  background-color: var(--bg-color);
  box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
}
.section-title[data-v-51826ebe] {
  font-size: 1.5rem;
  font-weight: 600;
  color: #FbFbFb;
  margin-bottom: 1.5rem;
  padding-left: 0.5rem;
}

/* The core of the responsive layout */
.tools-grid[data-v-51826ebe] {
  display: grid;
  /*
   * This is the magic line for responsiveness:
   * 'auto-fit' tells the grid to fit as many columns as possible on one line.
   * 'minmax(320px, 1fr)' defines each column to have a minimum width of 320px,
   * and a maximum of 1fr (it will grow to fill available space).
   * When the container width shrinks, columns that can't fit will automatically wrap to the next line.
  */
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 1.5rem;
}
@media (max-width: 1601px) {
.tools-grid[data-v-51826ebe] {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}
.tool-card[data-v-51826ebe] {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  background: linear-gradient(180deg, rgba(0, 255, 204, 0) 0%, #00FFCC10 100%);

  box-sizing: border-box;
  border: 1px solid #FFFFFF10;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.tool-card[data-v-51826ebe]:hover {

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  background: linear-gradient(180deg, rgba(0, 255, 204, 0) 0%, #00FFCC40 100%);
  box-sizing: border-box;
  color: #FbFbFb;
  border: 1px solid #FFFFFF60;
}
.card-icon[data-v-51826ebe]{
  width:100%;
  height: 100%;
}
.card-icon-wrapper[data-v-51826ebe] {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  margin-right: 1rem;

  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px; /* Give the SVG some breathing room */
  box-sizing: border-box;
}
.card-text[data-v-51826ebe] {
  flex-grow: 1;
  color: #FbFbFb;
  min-width: 0; /* Prevents text from overflowing on flex items */
}
.card-title[data-v-51826ebe] {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}
.card-description[data-v-51826ebe] {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: #FbFbFb40;
}
.card-arrowyes[data-v-51826ebe] {
  font-size: 1.5rem;
  color: #d9d9d9;
  width: 40px;
  height: 40px;
  display: block;
  line-height: 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 7%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  border-radius: 60%;
  transition: color 0.2s ease;
}
.card-arrow[data-v-51826ebe] {
  font-size: 1.5rem;
  color: #d9d9d9;
  width: 40px;
  height: 40px;
  display: block;
  line-height: 40px;
  text-align: center;
  border-radius: 60%;
  transition: color 0.2s ease;
}
.tool-card:hover .card-arrow[data-v-51826ebe] {
  font-size: 1.5rem;
  color: #d9d9d9;
  width: 40px;
  height: 40px;
  display: block;
  line-height: 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 7%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  border-radius: 60%;
  transition: color 0.2s ease;
}
.footer-note[data-v-51826ebe] {
  text-align: center;
  margin-top: 2.5rem;
  color: var(--text-tertiary);
  font-size: 0.85rem;
}

.video-container[data-v-a5498140] {
    background-color: #000000;
    overflow: hidden;
    border-radius: 16px;
    position: relative;
    width: 100%;
    height: 100%;
}
.controls[data-v-a5498140] {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    background: rgba(0, 0, 0, 0.6);
    padding: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.controlsNO[data-v-a5498140]{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    background: rgba(0, 0, 0, 0.6);
    padding: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: opacity 0.3s ease; /* 添加过渡效果使显示/隐藏更平滑 */
    opacity: 0;  /* 默认隐藏 */
}
.controlsNO[data-v-a5498140]:hover {
  opacity: 1;  /* 悬停时显示 */
}
.progress-bar[data-v-a5498140] {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    position: relative;
    cursor: pointer;
}
.progress[data-v-a5498140] {
    height: 100%;
    background: #2196F3;
    transition: width 0.1s linear;
}
.thumb[data-v-a5498140] {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: -4px;
    transform: translateX(-50%);
    cursor: grab;
}
.time-display[data-v-a5498140] {
    color: white;
    font-size: 14px;
    min-width: 100px;
    text-align: center;
}
.play-btn[data-v-a5498140] {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0 10px;
}
video[data-v-a5498140] {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}
.loadtext[data-v-a5498140]{
    color: #FbFbFb;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.loadvideo[data-v-a5498140]{
    position: absolute;
    top: 40%;
    left: 46%;
    transform: translate(-50%, -50%);
    animation: myAnimation-a5498140 3s linear infinite;
}
@keyframes myAnimation-a5498140 {
0% {
      transform: rotate(0deg);
}
100% {
      transform: rotate(360deg);
}
}
.play-button[data-v-a5498140] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  opacity: 0.8;
}
.play-button-stop[data-v-a5498140] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;  /* 默认隐藏 */
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: opacity 0.3s ease; /* 添加过渡效果使显示/隐藏更平滑 */
}
.play-button-stop[data-v-a5498140]:hover {
  opacity: 1;  /* 悬停时显示 */
}
  
[data-v-7a8e85b5]::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
video[data-v-7a8e85b5]::-webkit-media-controls-play-button {
        display: none;
}
.con-sample-template[data-v-7a8e85b5]{
  position: relative;
    margin-top: 24px;
    height: calc( 100% - 98px );
    width: 99%;
    min-height: 300px;
    min-width: 900px;
    overflow: hidden;
}
.video-container[data-v-7a8e85b5] {
  position: relative;
  display: inline-block;
}
video[data-v-7a8e85b5] {
  display: block;
  width: 100%;
  height: auto;
}
.play-button[data-v-7a8e85b5] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  opacity: 0.8;
}
.play-button-stop[data-v-7a8e85b5]:hover {
  opacity: 1;  /* 悬停时显示 */
}
.filePopoverOde[data-v-7a8e85b5]{
  width: 140px ;
  height: 40px;
  cursor: pointer;
  border-radius: 12px;
  text-align: center;
  color: #fbfbfb;
  line-height: 40px;
}
/* .play-button:hover {
  background-color: rgba(0, 0, 0, 0.9);
} */
.container[data-v-7a8e85b5]{
    display: inline-block;
    border-radius: 16px;
    width: 20%;
    height: 23vh;
    cursor: pointer;
    min-height: 150px;
    margin-right: 30px;
    margin-bottom: 20px;
    min-width: 210px;
  white-space: pre-wrap;
    position:relative;
        /* cursor: pointer; */
}
.titleBox[data-v-7a8e85b5] {
    width: 100%;
    min-width: 201px;
    z-index: 1000;
    border-radius: 0 0 16px 16px;
    height: 50%; /* 改为固定高度或使用min-height */
    line-height: 56px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    color: #fbfbfb;
    display: flex; /* 添加flex布局 */
    flex-direction: column; /* 垂直排列 */
    padding: 0px 0; /* 添加内边距 */
}
.titleBox > .box[data-v-7a8e85b5] {
    text-align: left;
    width: 100%;
    padding-left: 10px;
    padding-top: 10px;
    line-height: 1.2; /* 调整行高 */
    margin-bottom: 8px; /* 添加底部间距 */
    flex-shrink: 0; /* 防止压缩 */
}
.titleBox > .msgtext[data-v-7a8e85b5] {
    width: 100%;
    overflow: auto;
    height: auto; /* 改为自动高度 */
    text-align: left;
    word-break: break-all;
    word-wrap: break-word;
    white-space: normal;
    font-size: 12px;
    color: rgba(251, 251, 251, 0.6);
    line-height: 1.5; /* 调整行高 */
    padding: 0 12px;
    flex-grow: 1; /* 占据剩余空间 */
    overflow: hidden; /* 隐藏溢出内容 */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制显示2行 */
    -webkit-box-orient: vertical;
}

/*
  ==============================================================
  主卡片容器 (.publiCon)
  ==============================================================
*/
.publiCon[data-v-aca95aa9] {
  display: inline-flex;
  flex-direction: column;
  width: 158px;
  height: 212px;
  cursor: pointer;

  border-radius: 12px;
  position: relative;
  overflow: hidden;
  background-color: #282828;
}

/*
  ==============================================================
  背景层 (.card-background)
  ==============================================================
*/
.card-background[data-v-aca95aa9] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  /* 悬停时背景的动画 */
  transition: filter 0.15s ease-in-out, transform 0.15s ease-in-out;
}
.publiCon[data-v-aca95aa9]:hover{ transform: scale(1.02);}
/* 鼠标悬停时，对背景层应用模糊和放大效果 */
.publiCon:hover .card-background[data-v-aca95aa9] {
  filter: blur(4px);
}
.publiCon:hover .myicon[data-v-aca95aa9]{
  opacity: 1;
}

/*
  ==============================================================
  顶部区域 (.top-section) & 底部信息栏 (.myVideoMsg)
  ==============================================================
*/
.top-section[data-v-aca95aa9] {
  flex: 1;
  position: relative;
  z-index: 2;
}
.myVideoMsg[data-v-aca95aa9] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 10px 12px;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.85) 75%);
}
.platform-logo[data-v-aca95aa9] { width: 24px; height: 24px; flex-shrink: 0;
}
.text-info[data-v-aca95aa9] { line-height: 1.4; text-align: left; overflow: hidden; color: #fff;
}
.title-text[data-v-aca95aa9] { display: block; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.date-text[data-v-aca95aa9] { display: block; font-size: 11px; color: rgba(251, 251, 251, 0.7);
}


/*
  ==============================================================
  核心交互逻辑：右侧图标 vs 中间覆盖层
  ==============================================================
*/

/* 1. 右侧图标 (.myicon) 的样式 */
.myicon[data-v-aca95aa9] {
  /* 关键改动 1: 默认可见，没有投影 */
  opacity: 0;
  visibility: visible;
  filter: none; /* 默认无投影 */

  color: #fbfbfb;
  position: absolute;
  z-index: 5; /* 确保它在自己的层级 */

  /* 关键改动 2: 为透明度和投影添加过渡动画 */
  transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}




/* 2. 中间覆盖层 (.mouse-overlay) 的样式 */
.mouse-overlay[data-v-aca95aa9] {
  /* 关键改动 3: 默认隐藏 */
  opacity: 0;
  visibility: hidden;

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10; /* 比右侧图标层级高 */

  /* 为它的出现添加过渡动画 */
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* 鼠标悬停在卡片上时，显示中间覆盖层 */
.publiCon:hover .mouse-overlay[data-v-aca95aa9] {
  opacity: 1;
  visibility: visible;
}


/*
  ==============================================================
  其他辅助样式 (无需修改)
  ==============================================================
*/
.mouse-overlay .box[data-v-aca95aa9] { display: flex;
}
.mouse-overlay .icon[data-v-aca95aa9] {
  background: rgba(0, 0, 0, 0.25);
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
  transition: background 0.3s ease;
}
.mouse-overlay .icon[data-v-aca95aa9]:hover { background: rgba(0, 0, 0, 0.5);
}
.filePopoverOde[data-v-aca95aa9]{ width: 100%; height: 20px; cursor: pointer; border-radius: 12px; text-align: center; color: #fbfbfb; line-height: 20px;
}

/* 遮罩层 */
.user-profile-modal-overlay[data-v-50dee8f1] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4000;
}

/* 主容器 */
.user-profile-modal[data-v-50dee8f1] {
  width: 870px;
  height: 652px;
  background-color: #202124;
  border-radius: 16px;
  padding: 24px;
  color: #e8eaed;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* 关闭按钮 */
.close-btn[data-v-50dee8f1] {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  color: #9aa0a6;
  transition: color 0.2s ease;
}
.close-btn[data-v-50dee8f1]:hover {
  color: #e8eaed;
}

/* 头部 */
.modal-header[data-v-50dee8f1] {
  display: flex;
  align-items: center;
  gap: 16px;
}
.user-info[data-v-50dee8f1] {
  display: flex;
  flex-direction: column;
}
.user-name[data-v-50dee8f1] {
  font-size: 18px;
  font-weight: 600;
}
.user-desc[data-v-50dee8f1] {
  height: 12px;
  font-size: 14px;
  color: #9aa0a6;
  margin-top: 4px;
}

/* 社交链接 */
.social-links[data-v-50dee8f1] {
  margin-top: 20px;
  display: flex;
  gap: 12px;
}
.social-btn[data-v-50dee8f1] {
  background-color: #303134;
  border: 1px solid #3c4043;
  color: #e8eaed;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.social-btn[data-v-50dee8f1]:hover, .social-btn[data-v-50dee8f1]:focus {
  background-color: #3c4043;
  border-color: #5f6368;
}
/* 特别为哔哩哔哩按钮调整颜色 */
.social-btn.bilibili[data-v-50dee8f1] {
  background-color: #3a3238;
}
.social-btn.bilibili[data-v-50dee8f1]:hover {
  background-color: #4f4249;
}


/* Tabs 样式覆盖 */
.profile-tabs[data-v-50dee8f1] {
  margin-top: 2px;
}
[data-v-50dee8f1] .el-tabs__nav-wrap::after {
  display: none; /* 移除默认的下划线 */
}
[data-v-50dee8f1] .el-tabs__item {
  color: #9aa0a6;
  font-size: 15px;
  font-weight: 500;
}
[data-v-50dee8f1] .el-tabs__item.is-active {
  color: #e8eaed;
}
[data-v-50dee8f1] .el-tabs__active-bar {
  background-color: #e8eaed;
}

/* 作品网格 */
.works-grid[data-v-50dee8f1] {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  min-height: 270px;
  max-height: 400px; /* 设定一个最大高度以启用滚动 */
  overflow-y: auto;
  padding-right: 8px; /* 为滚动条留出空间 */
}
/* 自定义滚动条样式 */
.works-grid[data-v-50dee8f1]::-webkit-scrollbar {
  width: 6px;
}
.works-grid[data-v-50dee8f1]::-webkit-scrollbar-track {
  background: transparent;
}
.works-grid[data-v-50dee8f1]::-webkit-scrollbar-thumb {
  background-color: #5f6368;
  border-radius: 10px;
}
.work-item[data-v-50dee8f1] {
  position: relative;
  aspect-ratio: 3 / 4; /* 保持卡片比例 */
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background-color: #303134;
}
.work-image[data-v-50dee8f1] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
}
.work-item[data-v-50dee8f1]:hover  {
  transform: scale(1.05);
}
.work-info-overlay[data-v-50dee8f1] {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  color: white;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

/* 空状态 */
.empty-state[data-v-50dee8f1] {
  text-align: center;
  color: #9aa0a6;
  padding: 40px 0;
}
.ptlogo[data-v-50dee8f1]{
  width: 20px;
}

.containerWork[data-v-3ac30e12]{
  min-width: 144px;
  min-height: 190px;
  overflow: hidden;
  cursor: pointer ;
  position: relative;
  border-radius: 8px;
  display: inline-flex;
  margin-top: 0.6vw;
  margin-right: 1vw;
  /* Add this to ensure the hover effect is smooth for the image */
  transition: transform 0s ease-in-out;
}
/* Style for the main image that will blur */
.containerWork > .main-image[data-v-3ac30e12] {
  /* Keep its existing styles: height: 100%;z-index: 10;position: absolute;left: 50%;transform: translateX(-50%) */
  filter: blur(0px); /* Start sharp */
  transition: filter 0s ease-in-out; /* Smooth transition for the blur */
}

/* Style for the background blurred image (already blurred) */
.containerWork > .blurred-bg-image[data-v-3ac30e12] {
  /* Keep its existing styles: width: 100%;transform: scale(1.5);z-index: 0;filter: blur(5px); */
}
.dyicon[data-v-3ac30e12]{
  display: none;
}
.containerWork[data-v-3ac30e12]:hover{
  transform: scale(1.05);
}
/* When containerWork is hovered, apply blur to its main image */
.containerWork:hover > .main-image[data-v-3ac30e12] {
  filter: blur(5px); /* Adjust blur amount as needed */
}
.containerWork:hover .dyicon[data-v-3ac30e12] {
  display: block;
}
.textbox[data-v-3ac30e12]{
  z-index: 20;
  background: linear-gradient(0deg,rgba(0, 0, 0, 0.8)  0%, rgba(0, 0, 0, 0) 100%);
  color:#fff;
  width:100%;
  height:44px;
  position:absolute;
  bottom: 0px;
  border-radius: 8px;
  font-size:14px;
  line-height:44px;
}
@media (max-width: 1508px) {
.textbox[data-v-3ac30e12]{
    height:54px;
    position:absolute;
    top:calc( 100% - 54px) ;
    border-radius: 8px;
    font-size:12px;
}
}
@media (max-width: 1208px) {
.textbox[data-v-3ac30e12]{
    height:44px;
    position:absolute;
    top:calc( 100% - 44px) ;
    border-radius: 8px;
    font-size:0.6rem;
}
}


[data-v-5e366d9e]::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.con-sample-template[data-v-5e366d9e]{
    margin-top: 24px;
    height: 75vh;
    width: 99%;
    min-height: 300px;
    min-width: 900px;
    overflow: scroll;
}

.videoCon[data-v-683de807]{
    margin: 10px;width:240px ;height:183px ;background-color: black;display: inline-block;cursor: pointer;
    border-radius: 16px 16px 0 0;
}
.source[data-v-683de807]{
    width: 24px;
    height: 24px;
    margin: 6px;
}
.infoChargingMethod[data-v-683de807]{
    position: absolute;
    top: 30px;
    left: 80%;
    font-size: 12px;
    opacity: 0.6;
}
.infoDate[data-v-683de807]{
    position: absolute;
    top: 30px;
    left: 45px;
    font-size: 12px;
    opacity: 0.6;
}
.infoTitle[data-v-683de807]{
    position: absolute;
    top: 12px;
    left: 45px;
    font-size: 14px;
}
.userHand[data-v-683de807]{
    position: absolute;
    top: 10px;left: 5px;
}
.InfoBox[data-v-683de807]{
    width: 100%;
    height: 30%;
    color: #FBFBFB;
    display: block;
    position: relative;
}
.topImage[data-v-683de807]{
width:100%;
height:70%;
border-radius:16px;
}

.con-sample-template[data-v-0bcbc044]{
    margin-top: 24px;
    height: 75vh;
    width: 95%;
    min-height: 300px;
    min-width: 900px;
    overflow: hidden;
}

.msicon[data-v-037b3807]{
    width: 24px;
    height: 24px;

    text-align: center;
    animation: myAnimation-037b3807 2s infinite;
}
@keyframes myAnimation-037b3807 {
0% {  transform: rotate(0deg);
}
100% { transform: rotate(360deg);
}
}
.upload-demo[data-v-037b3807] {
    width: 100%;
    max-width: 600px;
}
[data-v-037b3807] .el-upload-dragger {
    padding: 0;
    background-color: transparent;
    border: none;
}
.dragover[data-v-037b3807] {
    border-color: var(--el-color-primary) !important;
    background-color: rgba(64, 158, 255, 0.1);
}
.progress-container[data-v-037b3807] {
    margin-top: 20px;
    text-align: center;
}
.progress-text[data-v-037b3807] {
    display: block;
    margin-top: 10px;
    color: var(--el-color-primary);
}
  
.mouse > .box>.icon[data-v-0bb6783d]{
  background: #00000000;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 12px;
  display: inline-block;
}
.mouse > .box>.icon[data-v-0bb6783d]:hover{
  background: #fbfbfb25;
}
.mouse[data-v-0bb6783d]{
  width: 100%;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  height: 70%;
  overflow: hidden;
  background: #00000060;
  border-radius: 8px;
}
.mouse > .box[data-v-0bb6783d] {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translate(-50%,-50%);
}
.topImagede-leave-active[data-v-0bb6783d] {
    transition: height 1s
}
.topImagede-leave-to[data-v-0bb6783d] {
  height: 0%;
}
.topImagede-enter-active[data-v-0bb6783d]{
  transition: height 1s
}
.topImagede-enter-to[data-v-0bb6783d]{
  height: 70%;
}
.videoCon[data-v-0bb6783d]{
    margin: 10px;width:240px ;height:183px ;background-color: rgba(0, 0, 0, 0);display: inline-block;cursor: pointer;
    border-radius: 16px 16px 0 0;
    position: relative;
}
.source[data-v-0bb6783d]{
    width: 32px;
    height: 32px;
    margin-top: 15px;
}
.infoChargingMethod[data-v-0bb6783d]{
    position: absolute;
    top: 30px;
    left: 90%;
    font-size: 12px;
    opacity: 0.6;
}
.infoDate[data-v-0bb6783d]{
    position: absolute;
    top: 30px;
    left: 45px;
    font-size: 12px;
    opacity: 0.6;
}
.infoTitle[data-v-0bb6783d]{
    position: absolute;
    top: 12px;
    left: 45px;
    font-size: 14px;
}
.userHand[data-v-0bb6783d]{
    position: absolute;
    top: 10px;left: 5px;
}
.InfoBox[data-v-0bb6783d]{
    width: 100%;
    height: 30%;
    color: #FBFBFB;
    display: block;
    position: relative;
}
.topImage[data-v-0bb6783d]{
width:100%;
height:70%;
border-radius:16px;
}

.navigation{
    margin-right:49px ;
    font-size: 16px;
    cursor: pointer;
}
.font_tit{
font-size: 16px;
color: #fbfbfb;
font-weight: 500;
}
.navigationON{
    color: #FBFBFB;
}
.navigationOFF{
    color: #FBFBFB;
    opacity: 0.6;
}
.TabBox{
  position: relative;
    padding: 22px 12px;
    min-width: 900px;
    width: 88%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(251, 251, 251, 0.05);
    border-radius: 16px;
    margin-top: 20px;
  margin-bottom: 20px;
}
.msgBox{
    height: calc( 100% - 4px );
    width: 100%;
    overflow: hidden;
}
.myShadow{
  width: calc( 100% + 4px) ;
  position: absolute;
  bottom: 0px;
  left: -0.5px;
  height: 200px;
  background: linear-gradient(0deg, #0D0E12 0%, #0D0E1200 100%);
  z-index: 2001;
  pointer-events: none;
}
.main-content-area {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  height: calc(100vh - 85px); /* 保持你原来的高度计算 */
  min-width: 900px;
  min-height: 600px;
  position: relative;
}
.pingTai{
width: 186px;
height: 48px;
border-radius: 16px;

background: rgba(251, 251, 251, 0.05);
margin-top: 12px;
line-height: 48px;text-align: center;
display: inline-block;
position: relative;
margin-right: 16px;
}
.pingTai>.logo{
    position: absolute;
    top: 30%;
    left: 30%;
    transform: translate(-50%,-50%);
    width: 20px;
    height: 20px;
}
.pingTai>.logo>img{
    width: 20px;
    height: 20px;
}
.pingTai>.name{
    display: inline-flex;
    font-size: 16px;
    height: 20px;
    line-height: 20px;
    color: #fbfbfb;
    margin-left: 10px;
}
.changeUrl{
  opacity: 1.5;position: absolute;right: 20px;cursor: pointer;
}
.changeUrl:hover{
  color: #3682a3 !important;
}
.pingTaiInfo{
    width:100%;padding-bottom: 10px;padding-right:10px;padding-left:10px;padding-top:5px;background: #00000020;text-align: center;
}


/* MODIFICATION START: 布局修改 */
.aContainer[data-v-395f118e]{
  width:100%;
  height:96%;
  min-width:900px;
  min-height: 600px;
  opacity: 1;
  animation: dialog-open-395f118e 0.5s cubic-bezier(0.32, 0.14, 0.15, 0.86);

  /* 1. 将容器改为网格布局 */
  display: grid;
  /* 2. 定义两列，左侧内容区占2份空间，右侧列表区占1份空间 */
  grid-template-columns: 2fr 1fr;
  /* 3. 定义列与列之间的间距 */
  -moz-column-gap: 40px;
       column-gap: 40px;
  /* 4. 添加内边距以匹配截图中的左右边距 */
  padding: 0 2% 0 3.2%;
  box-sizing: border-box;
}
/* MODIFICATION END */
@keyframes dialog-open-395f118e {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
[data-v-395f118e]::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.activeItem[data-v-395f118e]{
  word-break: break-all;
  word-wrap: break-word;
  white-space: normal;
  width: 97%;
  margin-right: 3%;
  margin-bottom: 14px;
  height: 113px;
  color:#FBFBFB ;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid rgba(251, 251, 251, 0.1);
  background: rgba(251, 251, 251, 0.05);
  border-radius: 16px;
}
.AF[data-v-395f118e]{
  border: 2px solid rgba(251, 251, 251, 0.8);
}
.activeItem span[data-v-395f118e]{
  top: 50%;
  left: 50%;
  display: block;
  width: 70%;
  transform: translate(-50%,-50%);
  position: relative;
}
.art_shode[data-v-395f118e]{
  pointer-events: none;
  position: absolute;
  left: 0;
  top:86%;
  display: block;
  z-index: 100;
  width: 100%;
  height: 170px;
  background: linear-gradient(360deg, rgb(12,16,22) 0%,rgba(11, 15, 19, 0.7) 70%, rgba(11, 15, 19, 0) 100%);
}
.back[data-v-395f118e]{
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
}
.articelInfo[data-v-395f118e]{
  width: 100%;
  height: 100%;
  padding-left:100px ;
  padding-right: 100px;
  margin-bottom: 20px;
}
.articellistInfothis[data-v-395f118e]{
  width: 100%;
  height: 780px;
  padding-bottom: 100px;
  overflow: scroll;
}
.articelInfo .title[data-v-395f118e]{
  font-size: 24px;
  width: 100%;
  text-align: center;
}
.articelInfo .articelImsg[data-v-395f118e]{
  height: calc( 100% - 30px);
  width: 100%;
  position: relative;
  padding-bottom: 100px;
  scrollbar-width: none; overflow: auto;
}

/* MODIFICATION START: 布局修改 */
.articelBox[data-v-395f118e]{
  height:calc( 100% - 5px );
  /* 移除绝对定位和写死的宽度，由网格布局自动管理 */
  /* width:65%; */
  /* position: absolute; */
  /* left: 0; */
  /* top:0; */

  /* 添加相对定位，为其内部的绝对定位子元素(如.back)提供定位上下文 */
  position: relative;
}
.articelListBox[data-v-395f118e]{
  height:calc( 100% - 65px );
  /* 移除绝对定位和写死的宽度、位置、内边距，由网格布局自动管理 */
  /* width:30%; */
  /* position: absolute; */
  /* left: 70%; */
  /* padding-left: 40px; */
  /* top:0; */

  /* 添加相对定位，为其内部的绝对定位子元素(如.shode)提供定位上下文 */
  position: relative;
}
/* MODIFICATION END */
.activeItemImg[data-v-395f118e]{
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 10px;
}
.shode[data-v-395f118e]{
  pointer-events: none;
  position: absolute;
  left: 0;
  top:80%;
  display: block;
  z-index: 100;
  width: 100%;
  height: 270px;
  background: linear-gradient(360deg, rgb(12,16,22) 0%, rgba(11, 15, 19, 0) 101%);
}

.selecBox[data-v-2ebdb545]{
        text-align: left;
        margin-right: 16px;
}
.tabCon[data-v-2ebdb545]{
        width: 100%;
        height: 426px;
        overflow: hidden;
        margin-top: 15px;
}
.Container[data-v-2ebdb545]{
        width:100%;
        height:598px;
}
.resourceMsg[data-v-2ebdb545]{
}
.fileHead[data-v-2ebdb545]{
        width:42px;
        border-radius:16px;
        font-size: 12px;
}
.HorizontalAlignment[data-v-2ebdb545]{
        position: relative;
        display: flex;
        align-items: center;
}
.filemsg[data-v-2ebdb545]{
        margin-left:14px;
}
.itemButton[data-v-2ebdb545] {
    width: 170px;
    border-radius: 14px;
    height: 40px;
    text-align: center;
    color: #FBFBFB;
    line-height: 40px;
    padding-left: 10px;
    cursor: pointer;
}
.itemButton[data-v-2ebdb545]:hover {
    text-align: center;
    width: 170px;
    border-radius: 14px;
    height: 40px;
    background-color: rgba(240, 248, 255, 0.219);
    color: #FBFBFB;
    line-height: 40px;
    padding-left: 10px;
    cursor: pointer;
}
    .character-skeleton[data-v-f6ee5503] {
  position: relative;
}
.character-skeleton .chest > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-thigh > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-calf > g > path[data-v-f6ee5503]:first-child, .character-skeleton .head > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-thigh > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-calf > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-upper-arm > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-forearm > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-forearm > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-upper-arm > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-weapon > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-weapon > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-foot > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-foot > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-hand > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-hand > g > path[data-v-f6ee5503]:first-child {
  fill: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}
.character-skeleton .chest > g > path[data-v-f6ee5503]:first-child:not(.act):hover, .character-skeleton .r-thigh > g > path[data-v-f6ee5503]:first-child:not(.act):hover, .character-skeleton .r-calf > g > path[data-v-f6ee5503]:first-child:not(.act):hover, .character-skeleton .head > g > path[data-v-f6ee5503]:first-child:not(.act):hover, .character-skeleton .l-thigh > g > path[data-v-f6ee5503]:first-child:not(.act):hover, .character-skeleton .l-calf > g > path[data-v-f6ee5503]:first-child:not(.act):hover, .character-skeleton .r-upper-arm > g > path[data-v-f6ee5503]:first-child:not(.act):hover, .character-skeleton .l-forearm > g > path[data-v-f6ee5503]:first-child:not(.act):hover, .character-skeleton .r-forearm > g > path[data-v-f6ee5503]:first-child:not(.act):hover, .character-skeleton .l-upper-arm > g > path[data-v-f6ee5503]:first-child:not(.act):hover, .character-skeleton .r-weapon > g > path[data-v-f6ee5503]:first-child:not(.act):hover, .character-skeleton .l-weapon > g > path[data-v-f6ee5503]:first-child:not(.act):hover, .character-skeleton .l-foot > g > path[data-v-f6ee5503]:first-child:not(.act):hover, .character-skeleton .r-foot > g > path[data-v-f6ee5503]:first-child:not(.act):hover, .character-skeleton .l-hand > g > path[data-v-f6ee5503]:first-child:not(.act):hover, .character-skeleton .r-hand > g > path[data-v-f6ee5503]:first-child:not(.act):hover {
  fill: rgba(0, 255, 204, 0.3764705882);
}
.character-skeleton .chest > path[data-v-f6ee5503], .character-skeleton .r-thigh > path[data-v-f6ee5503], .character-skeleton .r-calf > path[data-v-f6ee5503], .character-skeleton .head > path[data-v-f6ee5503], .character-skeleton .l-thigh > path[data-v-f6ee5503], .character-skeleton .l-calf > path[data-v-f6ee5503], .character-skeleton .r-upper-arm > path[data-v-f6ee5503], .character-skeleton .l-forearm > path[data-v-f6ee5503], .character-skeleton .r-forearm > path[data-v-f6ee5503], .character-skeleton .l-upper-arm > path[data-v-f6ee5503], .character-skeleton .r-weapon > path[data-v-f6ee5503], .character-skeleton .l-weapon > path[data-v-f6ee5503], .character-skeleton .l-foot > path[data-v-f6ee5503], .character-skeleton .r-foot > path[data-v-f6ee5503], .character-skeleton .l-hand > path[data-v-f6ee5503], .character-skeleton .r-hand > path[data-v-f6ee5503] {
  display: none;
}
.character-skeleton .chest > .hide[data-v-f6ee5503], .character-skeleton .r-thigh > .hide[data-v-f6ee5503], .character-skeleton .r-calf > .hide[data-v-f6ee5503], .character-skeleton .head > .hide[data-v-f6ee5503], .character-skeleton .l-thigh > .hide[data-v-f6ee5503], .character-skeleton .l-calf > .hide[data-v-f6ee5503], .character-skeleton .r-upper-arm > .hide[data-v-f6ee5503], .character-skeleton .l-forearm > .hide[data-v-f6ee5503], .character-skeleton .r-forearm > .hide[data-v-f6ee5503], .character-skeleton .l-upper-arm > .hide[data-v-f6ee5503], .character-skeleton .r-weapon > .hide[data-v-f6ee5503], .character-skeleton .l-weapon > .hide[data-v-f6ee5503], .character-skeleton .l-foot > .hide[data-v-f6ee5503], .character-skeleton .r-foot > .hide[data-v-f6ee5503], .character-skeleton .l-hand > .hide[data-v-f6ee5503], .character-skeleton .r-hand > .hide[data-v-f6ee5503] {
  display: block;
}
.character-skeleton .chest.Click > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-thigh.Click > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-calf.Click > g > path[data-v-f6ee5503]:first-child, .character-skeleton .head.Click > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-thigh.Click > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-calf.Click > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-upper-arm.Click > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-forearm.Click > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-forearm.Click > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-upper-arm.Click > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-weapon.Click > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-weapon.Click > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-foot.Click > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-foot.Click > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-hand.Click > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-hand.Click > g > path[data-v-f6ee5503]:first-child {
  fill: #00FFCC;
  opacity: 0.2;
}
.character-skeleton .chest.act > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-thigh.act > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-calf.act > g > path[data-v-f6ee5503]:first-child, .character-skeleton .head.act > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-thigh.act > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-calf.act > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-upper-arm.act > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-forearm.act > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-forearm.act > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-upper-arm.act > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-weapon.act > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-weapon.act > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-foot.act > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-foot.act > g > path[data-v-f6ee5503]:first-child, .character-skeleton .l-hand.act > g > path[data-v-f6ee5503]:first-child, .character-skeleton .r-hand.act > g > path[data-v-f6ee5503]:first-child {
  fill: #00FFCC;
  opacity: 0.5;
}
.character-skeleton .chest.act > g > path[data-v-f6ee5503]:first-child:hover, .character-skeleton .r-thigh.act > g > path[data-v-f6ee5503]:first-child:hover, .character-skeleton .r-calf.act > g > path[data-v-f6ee5503]:first-child:hover, .character-skeleton .head.act > g > path[data-v-f6ee5503]:first-child:hover, .character-skeleton .l-thigh.act > g > path[data-v-f6ee5503]:first-child:hover, .character-skeleton .l-calf.act > g > path[data-v-f6ee5503]:first-child:hover, .character-skeleton .r-upper-arm.act > g > path[data-v-f6ee5503]:first-child:hover, .character-skeleton .l-forearm.act > g > path[data-v-f6ee5503]:first-child:hover, .character-skeleton .r-forearm.act > g > path[data-v-f6ee5503]:first-child:hover, .character-skeleton .l-upper-arm.act > g > path[data-v-f6ee5503]:first-child:hover, .character-skeleton .r-weapon.act > g > path[data-v-f6ee5503]:first-child:hover, .character-skeleton .l-weapon.act > g > path[data-v-f6ee5503]:first-child:hover, .character-skeleton .l-foot.act > g > path[data-v-f6ee5503]:first-child:hover, .character-skeleton .r-foot.act > g > path[data-v-f6ee5503]:first-child:hover, .character-skeleton .l-hand.act > g > path[data-v-f6ee5503]:first-child:hover, .character-skeleton .r-hand.act > g > path[data-v-f6ee5503]:first-child:hover {
  opacity: 1;
}
.character-skeleton .back[data-v-f6ee5503] {
  fill: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}
.character-skeleton .back[data-v-f6ee5503]:not(.act):hover {
  fill: #00FFCC;
}
.character-skeleton .back > path[data-v-f6ee5503] {
  display: none;
}
.character-skeleton .back.Click > g > path[data-v-f6ee5503]:first-child {
  fill: #00FFCC;
  opacity: 0.2;
}
.character-skeleton .back.act[data-v-f6ee5503] {
  fill: #00FFCC;
  opacity: 0.5;
}
.character-skeleton .back.act[data-v-f6ee5503]:hover {
  opacity: 1;
}
.styleImgBOX[data-v-f04a39e6]{
  width: 83px;
  height: 83px;
  overflow: hidden;
  border-radius: 15px;
  padding: 1.5px;
  background: linear-gradient(135deg, #CBFFF8 6%, #21FFF3 37%, #FFF600 99%) ;
}
.moveable-overlay[data-v-f04a39e6] {
    position: absolute;
  z-index: 100000; /* 确保高于 Canvas */
  pointer-events: auto; /* 允许交互 */
}
.uploadReferenceDiagram[data-v-f04a39e6]{
  overflow: hidden;
  width: 120px;
  height: 120px;
  border-radius: 15px;
  background: rgba(251, 251, 251, 0.05);
  box-sizing: border-box;
  border: 1px dashed rgba(251, 251, 251, 0.4);
  text-align: center;
  line-height: 120px;
}
.rightBoxthree[data-v-f04a39e6]{
  overflow: hidden;
  padding: 10px;
  touch-action: none;
  cursor: pointer;
  position: relative;
  background: #181A1E;
  border-radius: 16px;
  width: 98%;
  height: 80%;
  margin-left: 2%;
  text-align: center;
  line-height: 100%;
}
#canvas[data-v-f04a39e6] {
  width: 100%;
  height: 100%;
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none; /* 防止文本选择 */
}
.rightButton[data-v-f04a39e6]{
  width: 100%;
  height: 20%;
}
.leftBOX[data-v-f04a39e6]{
  padding: 10px;
  width: 35%;
  height: 100%;
  background: linear-gradient(0deg, #181A1E, #181A1E);
  border-radius: 16px;
}
.leftBOXthree[data-v-f04a39e6]{
  padding: 10px;
  cursor: pointer;
  position: relative;
  background: #181A1E;
  border-radius: 16px;
  width: 34%;
  height: 100%;
  text-align: center;
  line-height: 100%;
}
.zsUpload.drag-over[data-v-f04a39e6] {
  border: 2px dashed #21FFF3 !important;
  background: rgba(33, 255, 243, 0.1) !important;
}
.rightBOX[data-v-f04a39e6]{
  width: 55%;
  border-radius: 16px;
  margin-left: 2%;
  height: 100%;
  text-align: center;
  background: linear-gradient(0deg, #181A1E, #181A1E);
}
.leftTit[data-v-f04a39e6]{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.leftBOXtow[data-v-f04a39e6]{
  cursor: pointer;
  position: relative;
  background: #181A1E;
  border-radius: 16px;
  width: 68%;
  height: 100%;
  text-align: center;
  line-height: 100%;
}
.zsUpload[data-v-f04a39e6]{
  border-radius: 16px;
  border: 1px dashed rgba(251, 251, 251, 0.4);
  box-sizing: border-box;
  background: rgba(251, 251, 251, 0.05);
  width: 95px;
  height: 95px;
  line-height: 95px;
  text-align: center;
  cursor: pointer;
}
.uploadBox[data-v-f04a39e6]{
  overflow: hidden;
  color: #FBFBFB;
  height: 88px;
  width: 224px;
  border-radius: 16px;
  line-height: 88px;
  text-align: center;
  background: rgba(251, 251, 251, 0.05);
  border: 1px dashed rgba(251, 251, 251, 0.4);
  box-sizing: border-box;
}
.rightBOXtow[data-v-f04a39e6]{
  position: relative;
  background: #181A1E;
  border-radius: 16px;
  width: 30%;
  font-size: 12px;
  height: 100%;
  margin-left: 2%;
}
.mgs[data-v-f04a39e6]{
  width: 100%;
  height: 70vh;
  min-height: 600px;
}
.boxintabGroup[data-v-f04a39e6]{
  text-align: center;
  height: 70px;
  width: 48px;
}
.button_box[data-v-f04a39e6]{
  width: 100%;
  text-align: center;
  margin-top: 55px;
}
.GroupInfoMSG[data-v-f04a39e6]{
  font-size: 12px;
  background: linear-gradient(115deg, #CBFFF8 0%, #21FFF3 36%, #FFF600 98%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.tabGroup[data-v-f04a39e6]{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}
.HorizontalAlignment[data-v-f04a39e6]{
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.topTab[data-v-f04a39e6]{
  border: 2px solid #FFFFFF;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  color: #FFFFFF;
  border-radius: 50%;
  line-height: 40px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
}
.el-textarea__inner[data-v-f04a39e6]::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.AF[data-v-f04a39e6]{
  border: 2px solid #21FFF3;
  color: #3D3D3D;
  background: linear-gradient(135deg, #CBFFF8 1%, #21FFF3 37%, #FFF600 99%);
}
[data-v-f04a39e6]::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.line[data-v-f04a39e6]{
  width: 66px;
  height: 20px;
  margin: 10px;
  border-top: 1px dashed #FFFFFF;
}
.styleText[data-v-f04a39e6]{
  font-size: 12px;
  font-weight: 500;
  background: linear-gradient(104deg, #CBFFF8 6%, #21FFF3 36%, #FFF600 98%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.listAIimg[data-v-f04a39e6]{
  width: 33%;
  margin-left: 2%;
  height: 100%;
  background: #181A1E;
  border-radius: 16px;
  overflow: auto;
}
.aiimgBox[data-v-f04a39e6]{
  height: 45%;width: 90%;
  margin-left: 5%;margin-top: 10px;
  border-radius: 16px;
  border: 1px solid #FFFFFF;
  cursor: pointer;
  overflow: hidden;
}
.listAIimg[data-v-f04a39e6]::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.afaiimg[data-v-f04a39e6]{
  height: 45%;width: 90%;
  margin-left: 5%;margin-top: 10px;
  border-radius: 16px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid #00FFCC;
}
.aiimgBox[data-v-f04a39e6] :hover{
  border-color: #00FFCC;
}

/* --- 全局与基础设置 --- */
[data-v-bf765ddb]:root {
  --bg-color: #1a1c23;
  --card-bg-color: #252831;
  --border-color: #3c3f4a;
  --text-primary: #e0e0e0;
  --text-secondary: #8a8d93;
  --accent-color: #00e0c7;
}
.view[data-v-bf765ddb] {
  width: 100%;
  height: 100vh;
  padding: 17px 1.5rem 44px 52px ;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background-color: var(--bg-color);
  color: var(--text-primary);
  overflow: hidden; /* 防止页面本身滚动 */
}
[data-v-bf765ddb]::-webkit-scrollbar { display: none;
}

/* --- 1. 顶部信息栏 (保持您修改后的样式) --- */
.top-bar[data-v-bf765ddb] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  flex-shrink: 0; /* 防止顶部栏在flex布局中被压缩 */
}
.info-card[data-v-bf765ddb] {
  background: linear-gradient(111deg, rgba(0, 0, 0, 0) -2%, #2C2F36 100%);
  border: 1px solid rgba(251, 251, 251, 0.1);
  border-radius: 0.75rem;
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
}
.info-header[data-v-bf765ddb] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fbfbfb;
  font-size: 1rem;
}
.description[data-v-bf765ddb] {
  color: #fbfbfb80;
  font-size: 0.875rem;
  flex-grow: 1;
  line-height: 1.5;
}
.actions[data-v-bf765ddb] { display: flex; gap: 1rem; margin-top: auto;
}
.stats[data-v-bf765ddb] { display: flex; gap: 2rem;  padding-top: 0.5rem;}
.stat-item[data-v-bf765ddb]{width: 50%;text-align: center}
.stat-item .value[data-v-bf765ddb] { font-size: 2.0rem; font-weight: bold;color: #FBFBFB;width: 100%;cursor: pointer;}
.value[data-v-bf765ddb]:hover{
  transform: scale(1.05);
}
.stat-item .label[data-v-bf765ddb] { font-size: 0.7rem; color:#fbfbfb80;width: 100% ;
}
.gradient-underline-text[data-v-bf765ddb] {
  /* --- 核心改动 --- */
  display: inline-block; /* 让div的宽度收缩以包裹内容 */

  /* --- 保留原有样式 --- */
  position: relative;
  cursor: pointer;

  /* 这些是让文字渐变的样式，保留它们 */
  background-clip: text;
  background: linear-gradient(120deg, #CBFFF8 7%, #21FFF3 36%, #FFF600 98%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient-underline-text[data-v-bf765ddb]::after {
  content: ''; /* 伪元素必须有 content 属性才能显示 */
  position: absolute; /* 绝对定位，相对于父元素 .gradient-underline-text */
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px; /* 控制下划线与文字的距离，负值向上移动 */
  width: 10%; /* 下划线宽度与文字容器宽度一致 */
  height: 1px; /* 下划线粗细 */

  /* 方案A: 使用和文字一样的渐变色下划线 */
  background: linear-gradient(120deg, #CBFFF8 7%, #21FFF3 36%, #FFF600 98%);

  /* 方案B: 如果你只想要一条纯白色下划线 */
  /* background: #FFF; */
}
.gradient-underline-textB[data-v-bf765ddb] {
  /* --- 核心改动 --- */
  display: inline-block; /* 让div的宽度收缩以包裹内容 */

  /* --- 保留原有样式 --- */
  position: relative;
  cursor: pointer;
}
.gradient-underline-textB[data-v-bf765ddb]::after {
  content: ''; /* 伪元素必须有 content 属性才能显示 */
  position: absolute; /* 绝对定位，相对于父元素 .gradient-underline-text */
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px; /* 控制下划线与文字的距离，负值向上移动 */
  width: 10%; /* 下划线宽度与文字容器宽度一致 */
  height: 1px; /* 下划线粗细 */
  background:#FBFBFB ;
}
/* --- 2. 内容区域 --- */
.content-section[data-v-bf765ddb] {
  display: flex;
  flex-direction: column;

  flex-grow: 1;
  min-height: 0; /* flexbox bug fix for overflow */
}
.toolbar[data-v-bf765ddb] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.tabs[data-v-bf765ddb] { display: flex; gap: 0.5rem; font-size: 1rem;color: #FBFBFB
}
.tab[data-v-bf765ddb] { color: var(--text-secondary); cursor: pointer;
}
.tab.active[data-v-bf765ddb] { color: var(--text-primary); font-weight: 600;
}

/* --- 3. 响应式网格 (已修复) --- */
.content-grid[data-v-bf765ddb] {
  display: grid;
  max-height: 87%;
  /* 已修改: 全部使用 rem 单位，以实现和谐缩放 */
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.225rem 1.5625rem;
  overflow-y: auto;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem; /* 保持rem */
}
.work-item[data-v-bf765ddb] {
  position: relative; /* 关键：让内部的绝对定位元素相对于它 */
  width: 200px;
  padding: 0.6rem 0px;
  height: 300px;
  overflow: hidden; /* 隐藏 transform:scale 超出的部分 */
  cursor: pointer;
}

/* 需要被模糊和缩放的内容容器 */
.work-item .containerWorks[data-v-bf765ddb] {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  /* 平滑过渡效果 */
  transition: transform 0.3s ease, filter 0.3s ease;
}
/* 确保内容填满容器 */
.work-item .containerWorks img[data-v-bf765ddb] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}


/* 覆盖层，包含蒙层和播放按钮 */
.work-item .overlay[data-v-bf765ddb] {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #00000050;
  z-index: 10;
  /* 默认隐藏，通过透明度控制显示 */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 播放按钮样式 */
.work-item .play[data-v-bf765ddb] {
  width: 50px; /* 稍微调大一点方便点击 */
  height: 50px;
  z-index: 20;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* 美化一下按钮 */
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- 核心交互逻辑 --- */

/* 当鼠标悬停在总容器 .work-item 上时 */
.work-item:hover .containerWorks[data-v-bf765ddb] {
  filter: blur(4px);
  transform: scale(1.05);
}
.work-item:hover .overlay[data-v-bf765ddb] {
  /* 显示蒙层 */
  opacity: 1;
}
/* 针对msWorkBox组件的外部样式包装 (已修复) */
.msWorkBox-wrapper[data-v-bf765ddb] {
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 0.4rem;
  width: 100%;
  height: 100%;
  /* 已修改: 调整为竖向宽高比以匹配新图片 */
  aspect-ratio: 3 / 4;
  transition: transform 0.2s ease-in-out;
}


.errimg[data-v-2b20dbda]{
    position: fixed;
    top: 50%;
    left: 50%;
    color: #FBFBFB;
    font-size: 40px;
    transform: translate(-50%,-50%);
}

[data-v-9eaf6c83]::-webkit-scrollbar {
   display: none; /* Chrome Safari */
}
.con-sample-template[data-v-9eaf6c83]{
     margin-top: 24px;
     height: 75vh;
     width: 95%;
     min-height: 300px;
     min-width: 900px;
     overflow: hidden;
}
 
.paymentInformation[data-v-edd0cf87]{
  width:100%;padding-bottom: 10px;padding-right:10px;padding-left:10px;padding-top:5px;background: #00000020;text-align: center;
}
.paymentInformations[data-v-edd0cf87]{
  width:100%;padding-bottom: 10px;padding-right:10px;padding-left:10px;padding-top:5px;text-align: left;color: #FbFbFb;
}
.paymentInformations .msgbox[data-v-edd0cf87]{
  display: flex;
  -o-object-fit: cover;
     object-fit: cover;
}
.paymentInformations .msgbox .title[data-v-edd0cf87]{
  width: 100px;
}
.selTit[data-v-edd0cf87]{
  padding: 10px;
  color: #FBFBFB;
}
.tableInHistoryw[data-v-edd0cf87]{
  height: 440px;
  background-color: rgb(25,26,30);
  border-radius: 12px;
  width: 640px;
  padding: 10px;
  margin-top: 12px;
}
.tableInHistory[data-v-edd0cf87]{
  height: 440px;
  background-color: rgb(25,26,30);
  border-radius: 12px;
  width: 834px;
  padding: 10px;
  margin-top: 12px;
}
.tips[data-v-edd0cf87]{
  width: 100%;
  text-align: center;
  color: #00FFCC;
  margin-top: 16px;
  font-size: 14px;
}
.itemButton[data-v-edd0cf87]{
  width: 170px;
  border-radius: 12px;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  cursor: pointer;
}
.itemButton[data-v-edd0cf87]:hover{
  background: rgba(251, 251, 251, 0.05);
}
.itemButton span[data-v-edd0cf87]{
  font-size: 16.5px;
  margin-left:11px ;
  color: #FBFBFB;
  font-weight: 500;
}
/* MODIFIED: Changed to Flexbox for alignment */
.topNavbar[data-v-edd0cf87]{
  z-index: 101;
  width: calc( 100% - 300px );
  height: 65px;
  position: absolute;
  min-width: 900px;
  left: 300px;
  padding-right: 24px;
  display: flex;
  justify-content: flex-end; /* Aligns children (rightBox) to the right */
  align-items: center;

  box-sizing: border-box;
}
/* MODIFIED: Changed to Grid layout */
.rightBox[data-v-edd0cf87]{
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 12px;
}
.eicker[data-v-edd0cf87]{
  background-color: #00BBFF;
}
.goldadd[data-v-edd0cf87]{
  background: linear-gradient(106deg, #CBFFF8 4%, #21FFF3 36%, #FFF600 98%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.goldrome[data-v-edd0cf87]{
  color: #CF4040;
}
/* MODIFIED: Removed positioning hacks handled by Grid parent */
.cardban[data-v-edd0cf87]{
  position: relative;
  display: inline-flex;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  line-height: 32px;
  box-shadow: inset 0px -4px 8px 0px rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
  box-sizing: border-box;
  text-align: center;
  border: 1px solid #FbFbFb20;
}
.fqlrequestforTitleBox[data-v-edd0cf87]{
  width: 100%;

  min-height: 350px;
  max-height: 550px;
  overflow-y: auto;
  text-align: center;
}
.separator[data-v-edd0cf87] {
  margin-top: 2%;
  width: 1px;
  height: 80%;
  background-color: #555555;
}

/* Styling for the user avatar component wrapper */
.user-avatar[data-v-edd0cf87] {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden; /* Ensures the inner image is clipped to a circle */
}
.fqlrequestforTitleList[data-v-edd0cf87]{
  width: 100%;
  border-radius: 14px;
  color: #fbfbfb;
  text-align: left;
  padding-left: 16px;
  max-height: 520px;
  padding-top: 12px;
  background-color: #00000020;
  min-height: 330px;
}
.userInfoAndHead[data-v-edd0cf87]{
  height: 32px;
  padding: 0 8px 0 12px;
  gap: 10px;
  position: relative;
  line-height: 32px;
  display: inline-flex;
  overflow: hidden;
  border-radius: 36px;
  border: #fbfbfb20 solid 1px;
}
.currency-item[data-v-edd0cf87] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.currency-text[data-v-edd0cf87] {
  color: #FBFBFB;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.imgBase[data-v-edd0cf87] {
  background: rgba(255, 255, 255, 0.02);
  padding: 10px 15px;
  cursor: pointer;
  /* margin-left: 16px; -- Removed, handled by grid gap */
  height: 32px;
  font-size: 14px;
  border-radius: 63px;
  box-shadow: inset 0px -3px 8px 0px rgba(255, 255, 255, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid #fbfbfb20;
  color: #fbfbfb;
  box-sizing: border-box;
}
.icon-lingdian[data-v-edd0cf87]{
  display: inline-flex;background: linear-gradient(135deg, #FFFDE1 -1%, #FFEA00 27%, #B1FFD5 75%, #FFF9BC 101%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;z-index: 1;
}
.mado[data-v-edd0cf87]{
  display: inline-flex;background: linear-gradient(141deg, #FFFFFF 3%, #21FFF3 35%, #83FFA4 63%, #FFFB85 84%, #FFFAE9 108%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;z-index: 1;
}
.lingdian[data-v-edd0cf87]{
  width: 30px;
  display: inline-block;padding-left: 12px;background: linear-gradient(135deg, #FFFDE1 -1%, #FFEA00 27%, #B1FFD5 75%, #FFF9BC 101%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;z-index: 1;
}
/* NEW: Style for the separator */
.right-box-separator[data-v-edd0cf87] {
  height: 20px;
  width: 1px;
  background-color: #fbfbfb20;
}

.modleConwYes[data-v-fa070de5]{
  border-radius: 16px;
  display: inline-block;
  margin-right: 17px;
  cursor: pointer;
  width: 147px;
  height: 100%;
  padding:  1px 1px 1px 1px;
  background: linear-gradient(147deg, #CBFFF8 6%, #21FFF3 37%, #FFF600 99%);
  position: relative;
}
.modleConw[data-v-fa070de5]{
  border-radius: 16px;
  display: inline-block;
  margin-right: 17px;
  cursor: pointer;
  width: 147px;
  height: 100%;
  position: relative;
}
.modleImg[data-v-fa070de5]{
  border-radius: 16px;
  width: 120px;
  height: 120px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top:12px;
}
.textms[data-v-fa070de5]{
  position: absolute;
  left: 50%;
  width: 90%;
  text-align: center;
  white-space: nowrap;       /* 保持文本在一行 */
  overflow: hidden;          /* 隐藏溢出的内容 */
  text-overflow: ellipsis;   /* 显示省略符号来代表被修剪的文本 */
  transform: translateX(-50%);
  color: #FbFbFb;
  top: 140px;
}
.textmsf[data-v-fa070de5] {
  padding: 6px 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;  /* 修正拼写错误 */
  display: -webkit-box;
  height: 48px;
  -webkit-box-orient: vertical;
  position: absolute;
  bottom: 4px;

  color: #fbfbfb40;
  left: 0;  /* 添加 left 定位 */
  right: 0; /* 添加 right 定位 */
  font-size: 12px;
  width: 100%;
  word-break: break-word;
  white-space: normal;
}
.modlemub[data-v-fa070de5]{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF20;
  z-index: 100;
  border-radius: 16px;
  pointer-events: none;
  display: none;
}
.modleCon:hover .modlemub[data-v-fa070de5]{
  display: block;
}
.modleConYes[data-v-fa070de5]{
  width: 100%;
  height: 100%;
  background:rgb(32,34,37);
  border-radius: 16px;
}
.modleCon[data-v-fa070de5]{
  width: 100%;
  height: 100%;
  background:rgb(32,34,37);
  border-radius: 16px;
}

.mscButtonSow[data-v-c66ea53c] {
  padding: 1px;
  border: 1px solid rgba(251, 251, 251, 0.1);
  border-radius: 63px; /* This creates the pill shape */
  display: inline-block;
  color: #FbFbFb;
  background: rgba(251, 251, 251, 0.05);
  font-size: 12px;
  overflow: hidden; /* Important to contain the inner element within the rounded corners */
  cursor: pointer; /* Make the whole button clickable */
  /* Add a smooth transition for the hover effect */
  transition: background-color 0.2s, border-color 0.2s;
}

/* CORRECTED: Removed the space before :hover */
/* This now applies the hover effect to the outer container itself */
.mscButtonSow[data-v-c66ea53c]:hover {
  background: rgba(251, 251, 251, 0.2);
  border-color: rgba(251, 251, 251, 0.6);
}
.mscButton[data-v-c66ea53c] {
  text-align: center;
  padding: 2px 10px;
}
.mscButtonS[data-v-c66ea53c]{
  margin-left: 3.5%;
  margin-top: 20px;
}
.mscimgList[data-v-c66ea53c]{
  white-space: nowrap;
  height: 120px;

  overflow: hidden ;
  margin-left: 3.5%;
  margin-top: 20px;
}
.msicon[data-v-c66ea53c] {
  position: absolute;
  top: 50%;
  left: 50%;

  /* --- 新增：强制容器为正方形 --- */
  /* 给一个比内部图标稍大的固定尺寸，例如 30x30 像素 */
  width: 30px;
  height: 30px;

  /* --- 新增：使用 Flexbox 来居中内部的 <MSIcon> 图标 --- */
  display: flex;
  align-items: center;      /* 垂直居中 */
  justify-content: center;  /* 水平居中 */

  /* 保持旋转动画的逻辑不变 */
  animation: myAnimation-c66ea53c 1s linear infinite;
}
@keyframes myAnimation-c66ea53c {
0% {
    /* 每一帧都先平移再旋转 */
    transform: translate(-50%, -50%) rotate(0deg);
}
100% {
    /* 每一帧都先平移再旋转 */
    transform: translate(-50%, -50%) rotate(360deg);
}
}
.popoverN[data-v-c66ea53c]{
  text-align: left;width: 150px;display: inline-block;border-radius: 8px;font-size: 12px;
}
.popoverL[data-v-c66ea53c]{
  text-align: left;
}
.modlename[data-v-c66ea53c]{
  margin-left: 5px;
  padding: 2px 8px;
  line-height:20px;
  color: #FbFbFb60;
  margin-top: 5px;

  font-size: 12px;
  background:#f0f0f000;
  border-radius: 6px;
  border: 1px solid rgba(251, 251, 251, 0.1);
}
.saveBut[data-v-c66ea53c]{
  background-color: rgb(48,48,52);
  padding: 2px 6px;font-size: 12px;position: absolute;right: 8px;border-radius: 8px;border: 1px solid rgba(251, 251, 251, 0.2);color: #FbFbFb;cursor: pointer;
}
.historyItem[data-v-c66ea53c]{
  display: flex;width: 100%;position: relative;padding: 10px;border-radius: 12px;
}
.historyItem[data-v-c66ea53c]:hover{
  background-color: #FbFbFb20;
}
.indexImg[data-v-c66ea53c]{
  text-align: center;
  background: rgb(37, 38, 41);
  position: relative;
  cursor: pointer;

  display: inline-block;
  margin-right: 8px;
  border-radius: 8px;
  overflow: hidden;
}
.msc-text[data-v-c66ea53c]{
  margin-left: 10px;
  max-height: 77px;line-height: 24px;
  overflow: hidden;
  max-width: 55vw;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;  /* 修正拼写错误 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size: 12px;
  word-break: break-word;
  white-space: normal;
}
.indexImgerr[data-v-c66ea53c]{
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  display: inline-block;
  margin-right: 8px;
  width: 120px;
  height: 120px;
  background: #FFFFFF20;
}
.lodingItem[data-v-c66ea53c]{
  color: #FFFFFF;
  position: absolute;
  display: flex;
  left: 50%;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.errItem[data-v-c66ea53c]{
  color: #FFFFFF;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.msc[data-v-c66ea53c]{
  color: #FFFFFF;
  font-size: 12px;
  display: flex;
  margin-top: 20px;
  margin-left: 3.5%;
}
.headBox-Time[data-v-c66ea53c]{
  color: #FFFFFF20;
  margin-left: 10px;
  position: absolute;
  right: 10px;
  font-size: 12px;
}
.headBox[data-v-c66ea53c]{
  display: flex;
  width: 100%;
  position: relative;
  height: 30px;
  line-height: 30px;
}
.headBox-name[data-v-c66ea53c]{
  margin-left: 10px;
  color: #FFFFFF;
  margin-right: 10px;
}
.headBox-img[data-v-c66ea53c]{

  height: 30px;
}
.cons-ai[data-v-c66ea53c]{
  margin-top: 2%;
  width: 95%;
  margin-left: 2.5%;
}
.filePopoverOde[data-v-c66ea53c]{
  height: unset;
  width: unset;
  padding: 10px 5px;
  cursor: pointer;
  position: relative;
  text-align: left;
  font-size: 12px;
  border-radius: 12px;
  color: #fbfbfb;
}
.filePopoverOde[data-v-c66ea53c]:hover{
  background-color: #2d2d2d;
}
.lodingHistory[data-v-c66ea53c]{
  overflow-y: auto;
  position: absolute;
  border-radius: 8px;
  width: 400px;
  height: 100px;
  background: #1e2025;
}
.butconch[data-v-c66ea53c]{
  padding: 5px;
  display: flex;
  background: #00000080;
  border-radius: 8px;
  backdrop-filter: blur(8px);
}
.mscButtonch[data-v-c66ea53c]{
  width: 25px;
  height: 25px;
  line-height: 25px;
}
.mscButtonch[data-v-c66ea53c]:hover{
  background: #fbfbfb20;
  border-radius: 8px;
}
.mscButtonSowch[data-v-c66ea53c]{
}

.butconch[data-v-446a0390]{
  display: none;
  padding: 5px;
  z-index: 1010;

  background: #00000080;
  border-radius: 8px;
  backdrop-filter: blur(8px);
}
/* 将所有与列表项相关的样式移到这里 */
.list-item-wrapper[data-v-446a0390] {
  padding: 0 30px 0 0;
}
.image-grid-row[data-v-446a0390] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 2px;
  margin-bottom: 2px; /* 行间距 */
}
.image-item[data-v-446a0390] {
  aspect-ratio: 1;
  background-color: #2a2b2f;

  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}
.image-item:hover .butconch[data-v-446a0390]{
  display: flex;
}
.image-item[data-v-446a0390]:hover {
  transform: scale(0.98);
  z-index: 10;
}
.image-item img[data-v-446a0390] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.group-title[data-v-446a0390] {
  font-size: 14px;
  font-weight: normal;
  color: #e5e5e5;
  margin-top: 20px;
  margin-bottom: 12px;
}
.list-item-wrapper:first-child .group-title[data-v-446a0390] {
  margin-top: 0;
}
.image-slot-error[data-v-446a0390] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  /* 您可以根据UI主题设置一个背景色 */
  background-color: rgb(37,39,42);
  border-radius: inherit; /* 继承父元素的圆角 */
}
.mscButtonch[data-v-446a0390]{
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
}
.mscButtonch[data-v-446a0390]:hover{
  background: #fbfbfb20;
  border-radius: 8px;
}
/* 这是加载失败时显示的图片本身的样式 */
.error-fallback-img[data-v-446a0390] {
  /* 设置一个合适的尺寸，避免图片过大 */
  width: 50px;
  height: 50px;
  -o-object-fit: contain;
     object-fit: contain; /* 保证图片比例，不变形 */
}

.image-gallery-container[data-v-b8f61211] {
   color: #e5e5e5; padding: 20px;
  height: 100vh; display: flex; flex-direction: column; box-sizing: border-box;
}
.gallery-header[data-v-b8f61211] {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; flex-shrink: 0;
}
.tabs[data-v-b8f61211] { display: flex; gap: 24px;
}
.tab-item[data-v-b8f61211] {
  color: #8e9095; cursor: pointer; padding-bottom: 8px; font-size: 14px;
  transition: color 0.2s, border-color 0.2s; border-bottom: 2px solid transparent;
}
.tab-item[data-v-b8f61211]:hover { color: #e5e5e5;
}
.tab-item.active[data-v-b8f61211] { color: #e5e5e5; border-bottom-color: #e5e5e5;
}
.actions[data-v-b8f61211] { display: flex; align-items: center; gap: 16px;
}
.search-input[data-v-b8f61211] { width: 240px;
}
[data-v-b8f61211] .el-input__wrapper {
  background-color: #2a2b2f; box-shadow: none;
  border: 1px solid #3a3b3f; border-radius: 8px;
}
[data-v-b8f61211] .el-input__inner { color: #e5e5e5;
}
.workspace-btn[data-v-b8f61211] {
  color: #FbFbFb;background: rgba(251, 251, 251, 0.05);box-shadow: inset 0px -4px 8px 0px rgba(255, 255, 255, 0.05);border: 1px solid rgba(251, 251, 251, 0.2);border-radius: 63px;
}
.workspace-btn[data-v-b8f61211]:hover { background-color: #3a3b3f; border-color: #4a4b4f;color: #FbFbFb
}
.gallery-body[data-v-b8f61211] {
  flex-grow: 1;
  overflow: hidden;
  position: relative;
}
.virtual-scroll-list[data-v-b8f61211] {
  height: 100%;
  width: 100%;
  overflow-y: auto;
}
.virtual-scroll-list[data-v-b8f61211]::-webkit-scrollbar { width: 6px;
}
.virtual-scroll-list[data-v-b8f61211]::-webkit-scrollbar-thumb { background: #4a4b4f; border-radius: 3px;
}
.virtual-scroll-list[data-v-b8f61211]::-webkit-scrollbar-track { background: #2a2b2f;
}
.loading-tip[data-v-b8f61211] {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  text-align: center; color: #8e9095; padding: 10px 20px;
  background-color: rgba(30, 31, 34, 0.8); border-radius: 4px; font-size: 14px;
}
.empty-state[data-v-b8f61211] {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; justify-content: center; align-items: center;
}
[data-v-b8f61211] .el-empty__description p { color: #8e9095;
}

.lens-recipe-dialog .el-dialog__body[data-v-19126bf3] {
  padding-top: 0;
}
.selection-section[data-v-19126bf3] {
  margin-bottom: 20px;
}
.selection-section h3[data-v-19126bf3] {
  font-size: 16px;
  margin-bottom: 15px;
  color: #c0c0c0; /* Slightly lighter text for headings */
}
.lens-recipe-list[data-v-19126bf3] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* Adjusted gap for better spacing */
  margin-bottom: 20px;
}
.lens-recipe-item[data-v-19126bf3] {
  width: 100px; /* Adjusted width for better fit */
  height: 100px; /* Adjusted height */
  border: 1px solid #4a4a4a; /* Darker border for unselected */
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-in-out;
  background-color: #2a2a2a; /* Slightly lighter background for items */
  position: relative;
  box-sizing: border-box; /* Ensure padding/border is included in width/height */
}
.lens-recipe-item[data-v-19126bf3]:hover {
  border-color: #6a6a6a;
}
.lens-recipe-item.selected[data-v-19126bf3] {
  border-color: #409eff; /* Element Plus primary color for selected */
  box-shadow: 0 0 0 2px #409eff80; /* Subtle blue glow */
}
.lens-recipe-item img[data-v-19126bf3] {
  width: 100%;
  height: 70%; /* Image takes 70% of height */
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.lens-recipe-item p[data-v-19126bf3] {
  margin: 0;
  padding: 5px 0;
  font-size: 12px;
  color: #e0e0e0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%; /* Ensure text takes full width */
  background-color: #333; /* Darker background for text area */
  height: 30%; /* Text area takes 30% of height */
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-lens-icon[data-v-19126bf3] {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #909399; /* Grey color for icon */
  font-size: 24px;
}
.no-lens-icon .el-icon[data-v-19126bf3] {
  font-size: 36px; /* Larger icon */
  margin-bottom: 5px; /* Space between icon and text */
}
.el-radio-group[data-v-19126bf3] {
  display: flex;
  gap: 10px; /* Space between radio buttons */
}
.el-radio-button[data-v-19126bf3] .el-radio-button__inner {
  background-color: #333 !important;
  border-color: #4a4a4a !important;
  color: #e0e0e0 !important;
}
.el-radio-button[data-v-19126bf3] .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: #409eff !important;
  border-color: #409eff !important;
  color: #fff !important;
}
.el-radio-button.is-disabled[data-v-19126bf3] .el-radio-button__inner {
  background-color: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #707070 !important;
  cursor: not-allowed;
  opacity: 0.7;
}
.dialog-footer[data-v-19126bf3] {
  display: flex;
  justify-content: flex-end;
}

/* 样式保持不变，因为卡片尺寸和动画逻辑在之前的修改中已经调整 */
/* 如果你需要，这里可以再包含所有样式 */
.image-upload-component-container[data-v-5c548679] {
  display: flex;
  flex-direction: column;
  padding: 2px 20px;
  border-radius: 12px;
  max-width: 600px;
  margin: 10px auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #e0e0e0;
}
.smart-reference-button[data-v-5c548679] {
  background-color: #333;
  color: #e0e0e0;
  border: none;
  border-radius: 8px;
  padding: 10px 15px;
  margin-bottom: 20px;
  cursor: pointer;
  font-size: 14px;
  align-self: flex-start;
  transition: background-color 0.2s ease;
}
.smart-reference-button[data-v-5c548679]:hover {
  background-color: #444;
}
.upload-content-wrapper[data-v-5c548679] {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.image-cards-display[data-v-5c548679] {
  display: flex;
  position: relative;
  /* Adjust height for smaller cards */
  height: 84px;
  /* 动态计算最小宽度以容纳所有卡片，使用新的 CARD_OFFSET 和卡片宽度 */
  min-width: calc(60px + (var(--5c548679-effectiveCardCount) > 0 ? (var(--5c548679-effectiveCardCount) - 1) : 0) * var(--5c548679-CARD_OFFSET) * 1px);
}
.uploaded-image-card[data-v-5c548679],
.upload-placeholder-card[data-v-5c548679] {
  /* Reduced card size */
  width: 60px;
  height: 84px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  overflow: hidden;
  /* Transition for box-shadow and left, transform is instant for z-index effect */
  transition: box-shadow 0.2s ease, left 0.3s ease;
  will-change: transform, box-shadow; /* Optimize for animation performance */
}
.upload-placeholder-card[data-v-5c548679] {
  cursor: pointer;
  background: #282828;
  border: 1px dashed #555;
  transition: left 0.3s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.upload-placeholder-card[data-v-5c548679]:hover {
  background-color: #383838;
  border-color: #777;
}
.upload-placeholder-card .plus-icon[data-v-5c548679] {
  font-size: 28px; /* Adjusted icon size for smaller card */
  color: #666;
  line-height: 1;
}
.uploaded-image-card img[data-v-5c548679] {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
}
.delete-image-button[data-v-5c548679] {
  /* Adjusted position for smaller card */
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 16px; /* Smaller delete button */
  height: 16px;
  font-size: 12px; /* Smaller font */
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  padding: 0;
  transition: background-color 0.2s ease;
  opacity: 0; /* Hidden by default */
  pointer-events: none; /* Make it non-interactive when hidden */
}
.uploaded-image-card:hover .delete-image-button[data-v-5c548679] {
  opacity: 1; /* Show on card hover */
  pointer-events: auto; /* Make it interactive on hover */
  background-color: rgba(0, 0, 0, 0.8); /* Slightly darker for better visibility */
}
.delete-image-button[data-v-5c548679]:hover {
  background-color: rgba(255, 0, 0, 0.8);
}
.description-input[data-v-5c548679] {
  flex-grow: 1;
  min-width: 200px;
  min-height: 140px; /* Can be adjusted */
  background-color: #2b2b2b;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  color: #e0e0e0;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}
.description-input[data-v-5c548679]::-moz-placeholder {
  color: #888;
}
.description-input[data-v-5c548679]::placeholder {
  color: #888;
}
.description-input[data-v-5c548679]:focus {
  outline: none;
  border-color: #666;
}

/* 响应式调整 */
@media (max-width: 480px) {
.upload-content-wrapper[data-v-5c548679] {
    flex-direction: column;
    gap: 15px;
}
.description-input[data-v-5c548679] {
    width: 100%;
}
.image-cards-display[data-v-5c548679] {
    width: 100%;
    justify-content: center;
    position: static;
    height: auto;
    flex-wrap: wrap;
    min-width: auto;
}
.uploaded-image-card[data-v-5c548679],
  .upload-placeholder-card[data-v-5c548679] {
    position: static;
    transform: none !important;
    left: auto !important;
    margin: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: auto !important; /* Disable hover z-index on small screens */
}
  /* Ensure delete button is always visible on small screens */
.uploaded-image-card .delete-image-button[data-v-5c548679] {
    opacity: 1;
    pointer-events: auto;
}
}

.gallery[data-v-cda8197e]{
  width: calc(100% - 400px) ;
  height: 100vh;
  position: absolute;
  top:0;
  left: 400px;
}
.lodingAICopy[data-v-cda8197e]{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.lodingAICopy .text[data-v-cda8197e]{
  font-size: 12px;
  color: #fbfbfb;
  display: inline-block;
}
.copyai_C[data-v-cda8197e]{
  display: flex;
  position: absolute;
  height: 35px;
  bottom: 5px;
  left: 10px;
}
.scroller[data-v-cda8197e]{
  height: 100%;
  overflow-y: scroll;
}
.copyai_C .copyai_T[data-v-cda8197e]{
  text-align: center;
  width: 25px;
  cursor: pointer;
  border-radius: 5px;
  background: #00FFCC;
  opacity: 0.5;
}
.copyai_C .copyai_T[data-v-cda8197e]:hover{
  opacity: 1;
}
.msicon[data-v-cda8197e] {
  color: #00FFCC;
  display: inline-block;
  margin-right: 10px;
  text-align: center;
  animation: myAnimation-cda8197e 1s linear infinite;
}
@keyframes myAnimation-cda8197e {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
.textmsf[data-v-cda8197e] {
  padding: 6px 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;  /* 修正拼写错误 */
  display: -webkit-box;
  height: 48px;
  -webkit-box-orient: vertical;
  color: #fbfbfb40;
  font-size: 12px;
  word-break: break-word;
  white-space: normal;
}
.copyai_C .copyai_F[data-v-cda8197e]{
  text-align: center;
  width: 25px;
  cursor: pointer;
  border-radius: 5px;
  margin-left: 10px;
  background: #FF005E;
  opacity: 0.5;
}
.copyai_C .copyai_F[data-v-cda8197e]:hover{
  opacity: 1;
}
.topLink[data-v-cda8197e]{
  width: 100%;
  height: 60px;
  line-height: 60px;
  position: relative;
}
.msg .msgContent[data-v-cda8197e]{
  width: 100%;
  height: calc(100% - 64px);;
  overflow-y: hidden;
}
.delall[data-v-cda8197e]{
  right: 35px;
  position: absolute;
  cursor: pointer;
}
.selectCopycon[data-v-cda8197e]{
  position: absolute;top:10px;left: 10px;
  z-index: 3000;
  max-height: 220px;
  border: 3px solid #FFFFFF00;
  min-width: 200px;
  background-color: #Fbfbfb10;
  width: 350px;
  border-radius: 16px;
}
.ai_descBox[data-v-cda8197e]{
  width: 100%;
  height:29%;
  font-size: 12px;
  overflow-y:auto;
  max-height: 100px;
  padding: 10px;
  color: #FFFFFF;
  border-radius:16px;
  position: relative;
}
.proto_descBox[data-v-cda8197e]{
  width: calc(100%) ;
  height:19%;
  max-height: 30px;
  font-size: 12px;
  padding: 10px;
  overflow-y:auto;

  margin: 10px;
  color: #FFFFFF;
}
.modleList[data-v-cda8197e]{
  position: relative;

  padding: 10px;
  width: calc(100% - 48px) ;
  margin-left: 24px;
  height: 235px;
  background: #00000020;
  border-radius: 20px;
  margin-top: 10px;
}
.imgMod[data-v-cda8197e]{
  width: 100%;
  height: 80px;
  padding: 0 20px;
  margin: 10px 0;
}
.imgMod .info[data-v-cda8197e]{
  width: 100%;
  display: flex;
  border-radius: 12px;
  height: 100%;
  background: rgba(251, 251, 251, 0.05);
}
.imgMod .info .text[data-v-cda8197e]{
  color: #FbFbFb;
  font-size: 12px;
  width: 180px;
  margin-top: 10px;
  margin-left: 0px;
  margin-right: 10PX;
}
.imgMod .info .img[data-v-cda8197e]{
  justify-content: center;
  width: 80px;
  margin: 10px;
  overflow: hidden;
  display: flex;

  border-radius: 12px;
  height:60px;
  background: rgba(251, 251, 251, 0.05);
}
.mashumodlist:hover .scroll-btnleft[data-v-cda8197e]{
  display: block;
}
.mashumodlist:hover .scroll-btnright[data-v-cda8197e]{
  display: block;
}
.uploadImg[data-v-cda8197e]{
  max-width: 30px;max-height: 30px;overflow: hidden;border-radius: 10px;background-color: #fbfbfb;
}
.ImgCon[data-v-cda8197e]{
  position: relative;
  height: 40px;
}
.ImgCon:hover .delbutton[data-v-cda8197e]{
  display: block;
}
.delbutton[data-v-cda8197e]{
  display: none;
  width: 20px;
  cursor: pointer;
  z-index: 200;
  height: 20px;
  position: absolute;
  bottom: 25px;
  line-height: 20px;
  left: 20px;
  border-radius: 50%;
  text-align: center;

  background-color: #00000050;
}
/* .uploadImg:hover{
  opacity: 1;
} */
.uploadImg:hover .delbutton[data-v-cda8197e]{
  display: block;
}
.popoverItem[data-v-cda8197e]{
  cursor: pointer;
  color: #FFFFFF;
  width: 100%;
  border-radius: 10px;
  padding: 10px 0;
  text-align: center;
}
.popoverItem[data-v-cda8197e]:hover{
  opacity: 1;
  background: #FFFFFF20;
}
.deviseAI[data-v-cda8197e]{
  overflow-y: hidden;
  flex: 1;
  background: #FFFFFF05;
  height: calc( 100vh - 5px )  ;
  width: 380px;
  padding-top: 20px;
  margin-left: 24px;
  display: inline-block;
}
.deviseMsg[data-v-cda8197e]{
  position: absolute;
  left: 400px;
  top: -55px;
  min-width: 900px;
  width: calc( 100% - 820px);
  height: calc( 100vh  + 55px);
  margin-left: 2%;
  margin-right: 4%;
}
.scroll-btnright[data-v-cda8197e]{
  display: none;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  z-index: 20000;
  border-radius: 50%;
  background: #000;
  font-size: 0.9rem;
  color: #FFFFFF;
  opacity: 0.7;
  position: absolute;
  right: 5%;
  top:50%;
  transform: translateY(-50%);
}
.scroll-btnleft[data-v-cda8197e]{
  display: none;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  z-index: 20000;
  border-radius: 50%;
  background: #000;
  font-size: 0.9rem;
  color: #FFFFFF;
  opacity: 0.5;
  position: absolute;
  left: 5%;
  top:50%;
  transform: translateY(-50%);
}
.scroll-btnleft[data-v-cda8197e] :hover{
  opacity: 0.7;
}
.deviseAIButton[data-v-cda8197e]{
  position: relative;
  display: flex;
  padding: 10px 25px 0 25px;
}
.deviseAIButton .aispan[data-v-cda8197e]{
  margin-left: 4px;
}
.deviseAIButton .icon[data-v-cda8197e]{
  margin-right: 10px;
  display: inline-block;
  padding: 2px 15px;
  font-size: 12px;
  border-radius: 10px;
  background: rgb(160, 166, 168,0.2);
  border: #FFFFFF50  solid 1px;
  cursor: pointer;
  color: #FFFFFF;
}
.deviseAIInput[data-v-cda8197e]{
  position: relative;
  padding: 0px 10px;
  max-height: 510px;
  margin-left: 6px;
}
.deviseType[data-v-cda8197e]{
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
.deviseMsg .msg[data-v-cda8197e]{
  width: 100%;
  border-radius: 24px;

  height: calc( 100% - 14px );
}
.deviseMsg .msg[data-v-cda8197e] ::-webkit-scrollbar{
  display: none; /* 隐藏滚动条 */
}
.deviseMsg .text[data-v-cda8197e]{
  width: 100%;
  font-size: 12px;
  border-radius: 24px;
  color: #FFFFFF;
  margin-top: 24px;
}
.deviseAILOGO[data-v-cda8197e]{
  width: 136px;
  height: 32px;
}
.deviseFiex[data-v-cda8197e]{
  z-index: 0;
  width: 100%;
  min-width: 1180px;
}
.deviseAICon[data-v-cda8197e]{
  width: 100%;
  height:100% ;
  z-index: 1;
  position: fixed;
  top: 0px;
  min-width: 900px;
  left: 0;
}
.deviseAISolleDom[data-v-cda8197e]{
  width: 100%;
  height: calc( 100% - 185px );
  overflow-y: auto;
  overflow-x: hidden;
}
.deviseAISelect[data-v-cda8197e]{
  padding: 10px;
  margin-left: 15px;
}
.aimodCon[data-v-cda8197e]{
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  max-height: 500px;
  overflow-y: auto;
}
.deviseAIwu[data-v-cda8197e]{
  width: 60vw;
  height: 100px;
  background: linear-gradient(180deg, #0D0E12 0%, rgba(13, 14, 18, 0) 100%);
  position: absolute;
  top: 0;
  left: 400px;
  z-index: 100;
}
.divider[data-v-cda8197e] {

  display: flex;          /* 1. 启用 Flexbox 布局 */
  align-items: center;    /* 2. 让文字和线条垂直居中对齐 */
  text-align: center;     /* 3. 确保文字本身是居中的（作为后备） */
  width: 100%;            /* 4. 让容器占满父元素的宽度 */
  font-size: 12px;
}

/* 使用伪元素生成两条线 */
.divider[data-v-cda8197e]::before,
.divider[data-v-cda8197e]::after {
  content: '';            /* 6. 伪元素必须有 content 属性才能显示 */
  flex: 1;                /* 7. (核心) 让线条自动伸展，填满所有可用空间 */
  height: 1px;            /* 8. 线条的粗细 */
}

/* 左侧线条的渐变效果 */
.divider[data-v-cda8197e]::before {
  /* 从右到左，由不透明的灰色渐变到完全透明 */
  background: linear-gradient(to left, rgba(255, 255, 255, 0.25), transparent);
}

/* 右侧线条的渐变效果 */
.divider[data-v-cda8197e]::after {
  /* 从左到右，由不透明的灰色渐变到完全透明 */
  background: linear-gradient(to right, rgba(255, 255, 255, 0.25), transparent);
}

/* 中间文字的样式 */
.divider span[data-v-cda8197e] {
  white-space: nowrap;      /* 防止文字过长时换行 */
  margin: 0 1em;            /* 控制文字和线条之间的左右间距 */
  color: rgba(255, 255, 255, 0.4); /* 设置文字颜色和透明度 */
  font-size: 12px;
}
.ai_button[data-v-cda8197e]{
  background: rgba(251, 251, 251, 0.05);
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 8px;
  color: #FbFbFb;
  border: 1px solid rgba(251, 251, 251, 0.1);
}
.sdskboxNO[data-v-cda8197e]{
  width: 100%;
  cursor: not-allowed;
  height: 30px;
  font-size: 12px;
  color: #FbFbFb20;
  line-height: 30px;
  text-align: center;
}
.sdskbox[data-v-cda8197e]{
  width: 100%;
  cursor: pointer;
  height: 30px;
  font-size: 12px;
  color: #FbFbFb;
  line-height: 30px;
  text-align: center;
}
.sdskbox[data-v-cda8197e] :hover{
  background-color: rgba(251, 251, 251, 0.2);
}
.scroll-to-bottom-btn[data-v-cda8197e]{
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  background-color: #FBFBFB20;
  text-align: center;
  cursor: pointer;
}
.scroll-to-bottom-btn[data-v-cda8197e]:hover{
  background-color: #FBFBFB50;
  transform: scale(1.08);
}
.aiSelectButton[data-v-cda8197e]{
  width: 100px;
  display: inline-block;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  border-radius: 60px;
  background: rgb(41, 43, 48);
  font-size: 14px;
  padding: 0 10px;

  margin-left: 10px;
}

/* 移除了旧的 .paymon 和 .cusButton 样式，替换为新的 */
.custCON[data-v-15424b95]{
  display: flex;
}
.custFrom[data-v-15424b95]{
  padding-top: 18px;
  flex: 1;
}

/* START: 修改和新增的样式 */
.custillustrate1[data-v-15424b95], .custillustrate2[data-v-15424b95] {
  flex: 1;
  position: relative; /* 关键：为绝对定位的按钮提供定位上下文 */
}
.custillustrate1[data-v-15424b95]{
  height:55vh;
}
.custillustrate2[data-v-15424b95]{
  height:45vh;
}

/* 新的底部操作区样式 */
.bottom-actions[data-v-15424b95] {
  position: absolute;
  bottom: -10px;
  right: 20px;

  display: flex;
  align-items: center; /* 垂直居中对齐支付信息和按钮 */
  gap: 20px; /* 支付信息和按钮之间的间距 */
}
.pay-info[data-v-15424b95] {
  font-size: 14px;
  color: #FbFbFb;
  opacity: 0.5;
  text-align: right;
}
/* END: 修改和新增的样式 */
.custtitles[data-v-15424b95]{
  width: 100%;
  color: unset;
}
.zsUpload[data-v-15424b95]{
  border-radius: 16px;
  border: 1px dashed rgba(251, 251, 251, 0.4);
  box-sizing: border-box;
  background: rgba(251, 251, 251, 0.05);
  width: 95px;
  height: 95px;
  line-height: 95px;
  text-align: center;
  cursor: pointer;
}
.requestforTitleBox > .requestforTitleList[data-v-15424b95]{
  width: 100%;
  border-radius: 14px;
  text-align: left;
  padding-left: 16px;
  padding-top: 12px;
  background-color: #00000020;
  height: 436px;
}
.requestforTitleBox[data-v-15424b95]{
  width: 100%;
  height: 500px;
  text-align: center;
  overflow-y: scroll;
}
.ImgInProject[data-v-15424b95]:hover{
  cursor: zoom-in;
}
.custtitle[data-v-15424b95]{
  width: 100%;
  color: #FBFBFB;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
}
.deleteFile[data-v-15424b95]{
  cursor: pointer;
  position: absolute;
  z-index: 3000;
  width: 24.96px;
  text-align: center;
  line-height: 24px;
  height: 24px;
  border-radius: 0px 16px 0px 16px;
  background: #FF005E;
  left:calc( 100% - 24.96px );
}

.Passi_table[data-v-589c0884]{
  width: calc(100% - 52px - 24px);
  margin-right: 24px;
  margin-left: 52px;
  height: 55vh;
  min-width: 900px;
  min-height: 100px;
  border-radius: 16px;
  background:#FBFBFB05;
  overflow: hidden;
  margin-top: 40px;
}
@media screen and (max-height: 900px) {
.Passi_table[data-v-589c0884]{
    height: 50vh;
}
}
@media screen and (max-height: 700px) {
.Passi_table[data-v-589c0884]{
    height: 45vh;
}
}
.rigbox[data-v-589c0884]{
  position: absolute;
  right: 0;
}
.tooltip-width[data-v-589c0884] {
  width: 200px !important;
  max-width: 200px !important;
}
.Passi_table_top[data-v-589c0884]{
  position: relative;
  width:  calc( 100% - 52px - 24px);
  margin-left: 52px;
  display: flex;
}
.itemButtonMater[data-v-589c0884]{
  width: 120px;
  border-radius: 12px;
  height: 40px;
  color: #FbFbFb;
  font-size: 15px;
  line-height: 40px;
  cursor: pointer;
  text-align: center;
  /* margin-left: 5px;
  padding-left: 19px;
  padding-top: 11px;
  padding-bottom: 11px; */
}
.itemButtonMater[data-v-589c0884]:hover{
  background: rgba(251, 251, 251, 0.05);
}
.title-bar[data-v-589c0884] {
  width: 8px;
  margin-top: 7px;
  height: 22px;
  background: #FFFFFF;
  border-radius: 0 3px 3px 0;
}
.my-table-row-height[data-v-589c0884] {
  --vxe-ui-table-row-height-default: 80px;
  --vxe-ui-table-row-height-medium: 60px;
  --vxe-ui-table-row-height-small: 40px;
  --vxe-ui-table-row-height-mini: 20px;
}
[data-v-589c0884] .my-custom-cell-style .vxe-cell {
  /* 模拟 vxe-table 的 flex 布局来实现垂直和水平居中 */
  display: flex;
  width: 105%!important;
  justify-content: center;
  align-items: center;
  margin: 0 0 10px;
  background-color:rgb(20,21,24);
  /* 确保它撑满整个单元格的高度 */
  height: 100%;
}
.Passi_table_top .title[data-v-589c0884] {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  margin-left: 10px;
  color: #FBFBFB;
  margin-top: 7px;
}
.Passi_table_con[data-v-589c0884]{
    width: 100%;
}
.passi-info[data-v-589c0884]{
  opacity: 0.6;
  width: 10vw;
  min-width: 100px;
  margin-top: 10px;
  line-height: 32px;
  text-align: center;
}
.passi-img[data-v-589c0884]{
  width: 43px;
  height: 43px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.view[data-v-589c0884]{
  min-width: 900px;
  min-height: 600px;
  width: 100%;
  height:100%;
}
.Passi_contenitore[data-v-589c0884]{
  margin-top: 20px;
  width: 100%;
  padding: 10px;
  position: relative;
  height: 18%;
}
.Passi_contenitore .next[data-v-589c0884]{
  margin-left: 20px;
  height: 5vh;
  min-height: 81px;
  position: relative;
  width: 60px;
}
.next img[data-v-589c0884]{
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
}
.Passi[data-v-589c0884]{
  color: #FFFFFF;
  display: flex;
  text-align: center;
}
.Passi .imgandText[data-v-589c0884]{
 width: 100px;
}
.passi-text[data-v-589c0884]{
  margin-top: 10px;
  font-size: 18px;
  font-weight: 500;
}
.poetext[data-v-589c0884]{
  text-align: center;
  font-weight: bold;
  margin-top: 20px;
  color: #FBFBFB;
  width: 100%;
  padding: 10px;
  font-size: 24px;
  font-family:AlimamaFangYuanTiVF-Thin;
}
.completedWorkViewMsg[data-v-589c0884]{
  display: flex;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.completedWorkViewIMG[data-v-589c0884]{
  width: 170px;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  margin-right: 60px;
}
.completedWorkViewinfo[data-v-589c0884]{
  color: #FBFBFB;
}
.completedWorkViewinfo .title[data-v-589c0884]{
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
}
.completedWorkViewinfo .avatar[data-v-589c0884]{
  display: flex;
  font-size: 12px;
  margin-bottom: 10px;
}
.completedWorkViewinfo .msglabel[data-v-589c0884]{
  font-size: 12px;
  margin-bottom: 10px;
}
.material_idA[data-v-589c0884]{
  cursor: pointer;
  text-decoration:underline;
}

.zsUpload[data-v-7de588f8]{
  border-radius: 16px;
  border: 1px dashed #FFFFFF;
  box-sizing: border-box;
  background: rgba(251, 251, 251, 0.05);
  width: 95px;
  height: 95px;
  line-height: 95px;
  text-align: center;
  cursor: pointer;
}
.zsUpload[data-v-7de588f8]:hover{
  border-color: #00FFCC;
}
.deleteFile[data-v-7de588f8]{
  cursor: pointer;

  position: absolute;
  z-index: 3000;
  width: 24.96px;
  text-align: center;
  line-height: 24px;
  height: 24px;
  border-radius: 0px 16px 0px 16px;
  background: #FF005E;
  left:calc( 100% - 24.96px );
}
.uploadCon[data-v-7de588f8]{
  width: 100%;
  height: 246px;
}

/* MODIFICATION START: 整体容器布局优化 */
.container[data-v-83f95eb3] {
  width: 100%;
  height: 100%;
  min-height: 200px; /* 保持最小高度 */
  overflow: hidden;
  padding: 15px 24px 20px 56px;
  box-sizing: border-box;

  /* 1. 将主容器改为Grid布局 */
  display: grid;
  /* 2. 定义三行：顶部图片(auto), 内容区(1fr, 占据所有剩余空间) */
  grid-template-rows: auto 1fr;
  gap: 20px; /* 替代了原有的margin */
  color: #FBFBFB;
}
/* MODIFICATION END */

/* MODIFICATION START: 内容区布局优化 */
.Passi_table_con[data-v-83f95eb3]{
  width: 100%;
  min-width: 1000px;

  /* 3. 将内容区改为Grid布局 */
  display: grid;
  /* 4. 定义两行：操作栏(auto), 表格(1fr) */
  grid-template-rows: auto 1fr;
  gap: 20px; /* 替代了表格的 margin-top */
  min-height: 0; /* 允许子元素（表格）正确地占据剩余空间并滚动 */
}
/* MODIFICATION END */

/* MODIFICATION START: 顶部操作栏布局优化 */
.Passi_table_top[data-v-83f95eb3]{
  position: relative;
  width: 100%;
  /* 5. 将其改为Flexbox，用于轻松实现两端对齐 */
  display: flex;
  justify-content: space-between; /* 关键：让子元素两端对齐 */
  align-items: center; /* 垂直居中 */
}
/* MODIFICATION END */
.requestforTitleBoxupdate > .requestforTitleList[data-v-83f95eb3]{
  width: 100%;
  border-radius: 14px;
  text-align: left;
  padding-left: 16px;
  padding-top: 12px;
  background-color: #00000020;
  max-height: 90vh;
  min-height: 100px;
}
.requestforTitleBoxupdate[data-v-83f95eb3]{
  width: 100%;
  max-height: 90vh;
  min-height: 100px;
  text-align: center;
  overflow-y: scroll;
}
.textmsf[data-v-83f95eb3] {
  padding: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;  /* 修正拼写错误 */
  display: -webkit-box;
  max-height: 72px;
  left: 50%;
  -webkit-box-orient: vertical;
  position: absolute;
  bottom: 55%;
  transform: translate(-50%,50%);
  color: #fbfbfb;
  font-size: 14px;
  width: calc(100% - 50px);
  word-break: break-word;
  white-space: normal;
}
.listConditionF[data-v-83f95eb3]{
  margin-right: 20px;
  color: #FBFBFB60;
  cursor: pointer;
}
.listConditionF[data-v-83f95eb3]:hover{
  color: #FFFFFF;
}
.my-table-row-height[data-v-83f95eb3] {
  --vxe-ui-table-row-height-default: 90px;
  --vxe-ui-table-row-height-medium: 60px;
  --vxe-ui-table-row-height-small: 40px;
  --vxe-ui-table-row-height-mini: 20px;
}
.listConditionT[data-v-83f95eb3] {
  margin-right: 20px;
  color: #00FFCC;
  cursor: pointer;
}
.listConditionT[data-v-83f95eb3]:hover{
  color: #00FFCC60;
}
.fileselect[data-v-83f95eb3]{
  width: 388px;
  height: 40px;
  /* MODIFICATION: 移除导致问题的 float 和 margin */
  /* float: right; */
  /* margin-right: 3%; */
}

/* MODIFICATION START: 右侧操作区布局优化 */
.rigbox[data-v-83f95eb3]{
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center; /* 垂直居中 */
  gap: 16px; /* 项目之间的间距 */

  /* 移除所有导致问题的绝对定位和旧布局属性 */
  /* top: 21%; */
  /* position: absolute; */
  /* right: 0; */
}
/* MODIFICATION END */
.timeType[data-v-83f95eb3]{
  color: #FBFBFB40;
  font-size: 12px;
}
.taskType_Box_T[data-v-83f95eb3]{
  width: 88px;
  height: 32px;
  border-radius: 16px;
  border: 1px solid #FBFBFB;
  line-height: 32px;
  text-align: center;
  display: inline-block;
}
.taskType_Box_F[data-v-83f95eb3]{
  width: 88px;
  height: 32px;
  cursor: pointer;
  border-radius: 16px;
  line-height: 32px;
  text-align: center;
  display: inline-block;
}
.taskType_Box_F[data-v-83f95eb3]:hover{
  border: 1px solid #FBFBFB;
  opacity: 0.5;
}
.Passi_table_top .title[data-v-83f95eb3] {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  margin-left: 10px;
  color: #FBFBFB;
  margin-top: 7px;
}
.Passi_table[data-v-83f95eb3]{
  width: 100%; /* 宽度由父级Grid控制 */
  height: 100%; /* 高度由父级Grid控制，撑满剩余空间 */
  min-width: 900px;
  min-height: 300px;
  border-radius: 16px;
  background:#FBFBFB05;
  overflow: hidden;
  /* 移除不必要的 margin */
  /* margin-left: 0.5%; */
  /* margin-top: 50px; */
}

.section[data-v-bf7f2dfe] {
  padding: 80px 5%;
  text-align: center;
  position: relative;
  overflow: hidden; /* 用于视差或内部动画 */
}
.hero-section[data-v-bf7f2dfe] {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 也可以用纯色或更复杂的CSS渐变 */
}
.hero-section h1[data-v-bf7f2dfe] {
  font-size: 3.5rem;
  margin-bottom: 20px;
  font-weight: 700;
  background: linear-gradient(90deg, #60efff, #00ffaa); /* Logo渐变色 */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fadeInDown-bf7f2dfe 1s ease-out;
}
.hero-section p[data-v-bf7f2dfe] {
  font-size: 1.2rem;
  max-width: 700px;
  margin-bottom: 50px;
  line-height: 1.6;
  animation: fadeInUp-bf7f2dfe 1s ease-out 0.5s;
  animation-fill-mode: backwards; /* 动画开始前不可见 */
}
.cta-button[data-v-bf7f2dfe] {
  padding: 12px 30px;
  background: linear-gradient(90deg, #60efff, #00ffaa);
  color: #1a1c23;
  text-decoration: none;
  border-radius: 25px;
  font-weight: bold;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: zoomIn-bf7f2dfe 1s ease-out 1s;
  animation-fill-mode: backwards;
}
.cta-button[data-v-bf7f2dfe]:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 255, 170, 0.3);
}
.mission-section[data-v-bf7f2dfe] {
  background-color: #23252e; /* 稍浅一点的暗色 */
}
.mission-content[data-v-bf7f2dfe] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}
.mission-text[data-v-bf7f2dfe] {
  flex-basis: 55%;
}
.mission-visual[data-v-bf7f2dfe] {
  flex-basis: 40%;
  /* 在这里放置动态图形或视频 */
  height: 227px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mission-visual img[data-v-bf7f2dfe] { /* 如果是图片 */
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
}
.features-section h2[data-v-bf7f2dfe], .mission-section h2[data-v-bf7f2dfe], .team-section h2[data-v-bf7f2dfe], .join-us-section h2[data-v-bf7f2dfe] {
  font-size: 2.5rem;
  margin-bottom: 50px;
  background: linear-gradient(90deg, #60efff, #00ffaa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.features-grid[data-v-bf7f2dfe] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}
.background-videoe[data-v-bf7f2dfe]{

  opacity: 0.2;
  position: absolute;
  z-index: -1;
  width: 100%;
}
.feature-card[data-v-bf7f2dfe] {
  background-color: #2a2d37;
  padding: 30px;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}
.feature-card[data-v-bf7f2dfe]:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.feature-card .icon[data-v-bf7f2dfe] {
  font-size: 2.5rem; /* 用SVG或字体图标 */
  margin-bottom: 15px;
  color: #00ffaa; /* 品牌色 */
}
.feature-card h3[data-v-bf7f2dfe] {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #fff;
}
.feature-card p[data-v-bf7f2dfe] {
  font-size: 1rem;
  line-height: 1.6;
}
.team-section[data-v-bf7f2dfe] {
  background-color: #1a1c23;
}
.team-section p[data-v-bf7f2dfe] {
  max-width: 800px;
  margin: 0 auto 30px;
  font-size: 1.1rem;
  line-height: 1.7;
}
.join-us-section[data-v-bf7f2dfe] {
  background-color: #23252e;
}

/* 简单入场动画 */
@keyframes fadeInDown-bf7f2dfe {
from { opacity: 0; transform: translateY(-30px);
}
to { opacity: 1; transform: translateY(0);
}
}
@keyframes fadeInUp-bf7f2dfe {
from { opacity: 0; transform: translateY(30px);
}
to { opacity: 1; transform: translateY(0);
}
}
@keyframes zoomIn-bf7f2dfe {
from { opacity: 0; transform: scale(0.8);
}
to { opacity: 1; transform: scale(1);
}
}

/* 响应式调整 */
@media (max-width: 768px) {
.hero-section h1[data-v-bf7f2dfe] { font-size: 2.5rem;
}
.hero-section p[data-v-bf7f2dfe] { font-size: 1rem;
}
.mission-content[data-v-bf7f2dfe] { flex-direction: column;
}
.mission-text[data-v-bf7f2dfe], .mission-visual[data-v-bf7f2dfe] { flex-basis: 100%;
}
.mission-visual[data-v-bf7f2dfe] { margin-top: 30px; height: 200px;
}
.features-section h2[data-v-bf7f2dfe], .mission-section h2[data-v-bf7f2dfe], .team-section h2[data-v-bf7f2dfe], .join-us-section h2[data-v-bf7f2dfe] { font-size: 2rem;
}
}

#app{
    max-width: 100vw;
    width: 100vw;
    height: 100vh;
    font-family: 'AlibabaPuHuiTi-3-55-Regular',sans-serif;
    padding: 0 !important;
    margin: 0 !important;
    Touch-action: none;
    overflow: hidden;
}
html, body {
    margin: 0;  /* 移除外边距 */
    padding: 0; /* 移除内边距 */
    overflow: hidden; /* 防止在某些情况下出现双滚动条 */
}
@font-face {
    font-family:'AlibabaPuHuiTi-3-55-Regular';
    src: url('https://storage.mochiani.com/System/AlibabaPuHuiTi-3-55-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
      font-display: swap;
    }
@font-face {
    font-family:'albbcun';
    src: url('https://storage.mochiani.com/System/Front/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4%E6%99%AE%E6%83%A0%E4%BD%93%203.0%2075%20SemiBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family:'AlimamaFangYuanTiVF-Thin';
    src: url('https://storage.mochiani.com/System/Front/AlimamaFangYuanTiVF-Thin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}@font-face {
    font-family: 'AmsIcon';
    src: url('/assets/ms-icon-0ee74a57.eot'),
         url('/assets/ms-icon-7717a458.woff') format('woff'),
         url('/assets/ms-icon-0a65952d.ttf') format('truetype'),
         url('/assets/ms-icon-1fa9e983.svg') format('svg');
    font-weight: normal;
    font-style: normal;
  }
.Shadow{
    width: 100%;
    position: absolute;
    bottom: 0px;
    height: 200px;
    background: linear-gradient(0deg, #0D0E12 0%, #0D0E1200 100%);
    z-index: 2001;
    pointer-events: none;
}.el-radio__input.is-checked .el-radio__inner {
    background: rgb(69,71,74);
    border-color: rgb(69,72,74);
    /* opacity: 0.2; */
}
.el-radio__input.is-checked+.el-radio__label {
    font-size: 12px;
    color: unset;
    background: linear-gradient(106deg, #CBFFF8 6%, #21FFF3 36%, #FFF600 98%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.el-radio__inner {
    background-color: rgb(69,71,74);
    border: rgb(69,71,74) solid 1px;
    border-radius: var(--el-radio-input-border-radius);
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    height: var(--el-radio-input-height);
    position: relative;
    width: var(--el-radio-input-width);
}
.el-radio{
    margin-right: 10px!important;
}
.el-radio__label {
    font-size: 12px!important;
    padding-left: 8px;
    color: #fff;
}
.el-radio__inner:after {
    background-color: #fbfbfb;
    border-radius: var(--el-radio-input-border-radius);
    content: "";
    height: 6px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%) scale(0);
    transition: transform .15s ease-in;
    width: 6px;
}.el-popper.is-light, .el-popper.is-light>.el-popper__arrow:before {
    background: #1E2025;
    border: 1px solid rgba(251, 251, 251, 0.2);

}
.el-popover.el-popper{
    border-radius: 16px;
    color: unset!important;
}
 .my-custom-popover-class .el-popover.el-popper{
    border-radius: 16px !important;
}
.el-upload-dragger.is-dragover{
    background-color: #00000000;
    border: 2px dashed rgb(0,255,204);
    color: rgb(0,255,204);
}
.zero-padding-popover .el-popover__content {
    padding: 0 !important;
}
.permission-hint-notification{
    background-color: #010203;
    border: 0;
    color: #FbFbFb;
}
.permission-hint-notification .el-notification__title{
    color: #FbFbFb;
}
.permission-hint-notification .el-notification__content{
    color: #FbFbFb;
}
.zero-padding-popover{
    min-width: 0px !important;
}
.zero-padding-popover-open0{
   opacity: 0;
    pointer-events: none;
}
.zero-padding-popover img {
    border-radius: 16px;
    display: block;   /* 消除图片底部的潜在间隙 */
    width: 100%;      /* 让图片宽度严格等于其容器（即305px）的宽度 */
    height: auto;
}
.el-upload-dragger {
    background-color: #00000000;
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    padding: var(--el-upload-dragger-padding-horizontal) var(--el-upload-dragger-padding-vertical);
    position: relative;
    text-align: center;
}
.tsmadou-custom-popper {
    background-color: #1E2025 !important;
    border-radius: 8px !important;
    padding: 5px !important;
}
.tsmadou-custom-popper .el-popper__arrow::before {
    background-color: #1E2025 !important;
    right: 0px !important; /* 调整箭头位置，有时需要微调 */
    left: 0px !important; /* 调整箭头位置，有时需要微调 */
}.el-tabs__item.is-active, .el-tabs__item:hover {
    color: #fbfbfb;
}
.el-tabs__active-bar {
    background-color: #fbfbfb11;
}
.el-tabs__item {
    align-items: center;
    box-sizing: border-box;
    color: #fbfbfb60;
    display: flex;
    font-size: 16px;
    font-weight: 500;
    height: var(--el-tabs-header-height);
    justify-content: center;
    list-style: none;
    padding: 20px 20px;
    position: relative;
}
.el-tabs__nav-wrap:after {
    background-color: #FBFBFB;
    opacity: 0.1;
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: var(--el-index-normal);
}

.el-avatar {
    --el-avatar-text-color: var(--el-color-white);
    --el-avatar-bg-color: var(--el-text-color-disabled);
    --el-avatar-text-size: 14px;
    --el-avatar-icon-size: 18px;
    --el-avatar-border-radius: var(--el-border-radius-base);
    --el-avatar-size-large: 56px;
    --el-avatar-size-small: 24px;
    --el-avatar-size: 40px;
    align-items: center;
    background: #00000000!important;
    box-sizing: border-box;
    color: var(--el-avatar-text-color);
    display: inline-flex
;
    font-size: var(--el-avatar-text-size);
    height: var(--el-avatar-size);
    justify-content: center;
    outline: none;
    overflow: hidden;
    text-align: center;
    width: var(--el-avatar-size);
}.el-input__wrapper {
    display: inline-flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    padding: 1px 11px;
    background: rgba(251, 251, 251, 0.05);
    background-image: none;
    border-radius: 61px !important;
    cursor: text;
    transition: var(--el-transition-box-shadow);
    transform: translateZ(0);
    box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
}
.el-input .el-input__count .el-input__count-inner {
    background: rgba(251, 251, 251, 0);
    line-height: initial;
    display: inline-block;
    padding-left: 8px;
}
.aiInput .el-textarea__inner {
    background-color: #f8f8f800 !important;
}
.aiInput .el-textarea__inner:focus{
    border-color:#f8f8f800;
}

.aiInput .el-textarea__inner:hover {
    /*
      使用 Element Plus 的悬浮边框颜色变量。
      如果你不希望悬浮时有效果，可以删除这段。
    */
    border-color:#f8f8f800;
}
.el-textarea__inner {
    -webkit-appearance: none;
    background-color: rgba(251, 251, 251, 0.05);
    background-image: none;
    border: none;
    border-radius: 16px;
    box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
    box-sizing: border-box;
    color: var(--el-input-text-color,var(--el-text-color-regular));
    display: block;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.5;
    padding: 5px 11px;
    position: relative;
    resize: vertical;
    transition: var(--el-transition-box-shadow);
    width: 100%;
}
.el-textarea .el-input__count {
    background:#00000000;
    bottom: 5px;
    color: var(--el-color-info);
    font-size: 12px;
    line-height: 14px;
    position: absolute;
    right: 10px;
}
.el-input__inner {
    color:#f8f8f8;
}
.el-textarea__inner {
    color: #f8f8f8;
    outline: none;        /* 移除轮廓 */
    box-shadow: none;    /* 移除某些浏览器的阴影 */
}
.el-textarea__inner:focus {
    outline: none;
}
/* 1. 为所有状态下的 textarea 内部元素设置一个透明边框占位，并彻底禁用 box-shadow */
.el-textarea__inner {
    /* 关键：使用真实的 border 替代 box-shadow 来显示轮廓 */
    border: 1px solid transparent;

    /* 关键：彻底禁用 Element Plus 默认的 box-shadow 聚焦效果，这是白点的根源 */
    box-shadow: none !important;

    /* 让边框颜色变化时有平滑的过渡动画 */
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* 2. 当 textarea 内部元素获得焦点时，改变其边框颜色 */
.el-textarea__inner:focus {
    /*
      使用 Element Plus 的官方 CSS 变量来设置聚焦颜色，保证主题统一。
      你可以全局覆盖 --el-color-primary 或者在这里直接写死颜色如 #5677fc
    */
    border-color: var(--el-color-primary);
}

/* 3. （可选）如果你希望鼠标悬浮时也有边框高亮效果 */
.el-textarea__inner:hover {
    /*
      使用 Element Plus 的悬浮边框颜色变量。
      如果你不希望悬浮时有效果，可以删除这段。
    */
    border-color: var(--el-border-color-hover);
}
.el-input {
    --el-input-text-color: var(--el-text-color-regular);
    --el-input-border: var(--el-border);
    --el-input-hover-border: #f8f8f8;
    --el-input-focus-border: #f8f8f8;
    --el-input-transparent-border: 0 0 0 1px transparent inset;
    --el-input-border-color: #5677fc00;
    --el-input-border-radius: var(--el-border-radius-base);
    --el-input-bg-color: var(--el-fill-color-blank);
    --el-input-icon-color: var(--el-text-color-placeholder);
    --el-input-placeholder-color: var(--el-text-color-placeholder);
    --el-input-hover-border-color:#f8f8f8;
    --el-input-clear-hover-color: var(--el-text-color-secondary);
    --el-input-focus-border-color: #f8f8f8;
    --el-input-width: 100%;
    --el-input-height: var(--el-component-size);
    box-sizing: border-box;
    display: inline-flex;
    font-size: var(--el-font-size-base);
    line-height: var(--el-input-height);
    position: relative;
    vertical-align: middle;
    width: var(--el-input-width);
}
.el-textarea {
    --el-input-text-color: var(--el-text-color-regular);
    --el-input-border: var(--el-border);
    --el-input-hover-border: var(--el-border-color-hover);
    --el-input-focus-border: var(--el-color-primary);
    --el-input-transparent-border: 0 0 0 1px transparent inset;
    --el-input-border-color:#f8f8f800;
    --el-input-border-radius: var(--el-border-radius-base);
    --el-input-bg-color: var(--el-fill-color-blank);
    --el-input-icon-color: var(--el-text-color-placeholder);
    --el-input-placeholder-color: var(--el-text-color-placeholder);
    --el-input-hover-border-color: var(--el-border-color-hover);
    --el-input-clear-hover-color: var(--el-text-color-secondary);
    --el-input-focus-border-color: #5677fc;
    --el-input-width: 100%;
    display: inline-block;
    font-size: var(--el-font-size-base);
    position: relative;
    vertical-align: bottom;
    width: 100%;
}
.fileselect .el-input__wrapper {
    display: inline-flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    padding: 1px 11px;
    background: rgba(29,32,35);
    background-image: none;
    border-radius: 61px;
    cursor: text;
    transition: var(--el-transition-box-shadow);
    transform: translateZ(0);

}
.el-input.is-disabled .el-input__wrapper {
     background-color: #f8f8f800;
    box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;
    cursor: not-allowed;
    pointer-events: none;
}
.el-textarea.is-disabled .el-textarea__inner {
    background-color: #fbfbfb20;
    box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;
    color: var(--el-disabled-text-color);
    cursor: not-allowed;
    max-height: 200px!important;
}
.el-textarea__inner{
    max-height: 200px;
    font-size: 12px;
}
.el-input-number__decrease, .el-input-number__increase{
    background-color: #f8f8f800;
}
.el-input-number__increase{
    border-left: 1px solid #fbfbfb20;
}
.el-input-number__decrease {
    border-radius: var(--el-border-radius-base) 0 0 var(--el-border-radius-base);
    border-right: 1px solid #fbfbfb20;
    left: 1px;
}
.el-input-number__decrease:hover, .el-input-number__increase:hover {
    color: #00FFCC;
}
.el-date-editor .el-range-input{
    color: #FBFBFB;
}.el-dialog {
    --el-dialog-width: 50%;
    --el-dialog-margin-top: 15vh;
    --el-dialog-bg-color: #1E2025;
    --el-dialog-box-shadow: var(--el-box-shadow);
    --el-dialog-title-font-size: var(--el-font-size-large);
    --el-dialog-content-font-size: 14px;
    --el-dialog-font-line-height: var(--el-font-line-height-primary);
    --el-dialog-padding-primary: 16px;
    --el-dialog-border-radius: var(--el-border-radius-base);

    background: var(--el-dialog-bg-color);
    border-radius: 12px;
    box-shadow: var(--el-dialog-box-shadow);
    box-sizing: border-box;
    margin: var(--el-dialog-margin-top,15vh) auto 50px;
    overflow-wrap: break-word;
    padding: var(--el-dialog-padding-primary);
    position: relative;
    width: var(--el-dialog-width,50%);
}
.el-loading-mask {
    z-index: 12001 !important; /* dialog 的 z-index 是 2000 */
}
.imgArrdialog .el-dialog__header {
    margin-top: 5px !important;
}
.el-dialog__title{
    color: #fbfbfb;
    font-size: 16px;
    font-weight: 500;
}
.el-dialog__header.show-close{
    text-align: center;

}
.ModuleDescInfo{
    width: 280px;
    max-height: 400px;
    overflow-y: auto;
}
.ModuleDescInfo img {
    max-width: 100%!important;
}
.cavansDialog .el-dialog__header.show-close{
    text-align: left;
}
.el-overlay-dialog {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    opacity: 1;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(20px);
    background-color: #00000080;
}
.dialog-fade-enter-active{
    animation: none;
}
.dialog-footer{
    width: 100%;
    text-align: center;
}
/* .dialog-fade-enter-active {
    .el-dialog {
      animation: dialog-open 0.3s cubic-bezier(0.32, 0.14, 0.15, 0.86);
    }
  } */
  /* @keyframes dialog-open {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
  } */

/* @keyframes overlayAnimation {
0% {
    
    backdrop-filter: blur(0px);
}
100% {
    backdrop-filter: blur(5px);
}
} */

 .el-loading-mask {
     z-index: 12001 !important;
 }
.el-image-viewer__mask{
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    opacity: 1;
}
.el-dialog__body img{
    max-width: 100%;
}
.el-dialog__body{
color: #d9d9d9;
}
.el-notification__content img{
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
}
.permission-hint-notification {
    right: 176px!important;
    width: 600px;
}.el-upload-dragger{
    border-radius: 16px;
}
.el-upload-dragger:hover {
    border-color: #00FFCC;
}.el-select {
    --el-select-border-color-hover: var(--el-border-color-hover);
    --el-select-disabled-color: var(--el-disabled-text-color);
    --el-select-disabled-border: var(--el-disabled-border-color);
    --el-select-font-size: var(--el-font-size-base);
    --el-select-close-hover-color: var(--el-text-color-secondary);
    --el-select-input-color: var(--el-text-color-placeholder);
    --el-select-multiple-input-color: var(--el-text-color-regular);
    --el-select-input-focus-border-color: var(--el-color-primary);
    --el-select-input-font-size: 14px;
    --el-select-width: 100%;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: var(--el-select-width);
    background: rgb(41,43,48);
    border-radius:31px ;
}
.zpcc .el-select__placeholder {
    text-align: center;
    color: #fbfbfb;
}
.myWorkvalue .el-select {
    background: rgb(41,43,48,0);
}
.cloudXMlist .el-select__wrapper.is-focused{
    box-shadow:0 0 0 0px #F8F8F800 inset;
}
.el-select__wrapper.is-focused{
    box-shadow:0 0 0 1px #F8F8F8 inset;
}
.el-select__wrapper {
    box-shadow:0 0 0 0 #F8F8F8 inset;
}
.el-cascader-panel.is-bordered {
    border: 0px solid #fff;
    border-radius: var(--el-cascader-menu-radius);
}
.ydd .el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover {
    background: rgba(248, 248, 248, 0.25);
}
.ydd .el-scrollbar {
    border-radius:8px;
    background: #1c1c1c;
    color: #f8f8f8;
}
.ydd .el-cascader-node__label{
    color: #f8f8f8;
}
.el-select__placeholder {
    color: #fbfbfb;
}
.el-select-dropdown__item {
    background: #0000000c !important;
    color: #f8f8f876 !important;
}
 

.mySelectStyle.el-popper[data-popper-placement^=bottom] .el-popper__arrow::before {
    background: rgba(0, 136, 255, 0.1) !important;
    border: 1px solid #254277 !important;
}

.mySelectStyle.el-popper[data-popper-placement^=top] .el-popper__arrow::before {
    background: #254277 !important;
    border: 1px solid #254277 !important;
}
.el-select__wrapper.is-hovering:not(.is-focused){
    box-shadow: 0 0 0 0;
}
.el-select__wrapper.is-focused{
    box-shadow: 0 0 0 0;
}
.devSelect .el-select__wrapper{
    position: relative;
    top:50%;
    transform: translateY(-50%);
}
.el-radio-button__inner{
    border-radius: 0!important;
    background:#00000020!important;
    color:#fbfbfb50!important;
    border: #FbFbFb30 solid 1px;
}

 .el-radio-button:first-child .el-radio-button__inner{
     border-left: 1px solid #FbFbFb20!important;
 }
.el-select__wrapper.is-disabled {
    background-color: var(--el-fill-color-light);
    border-radius: 60px;
    color: var(--el-text-color-placeholder);
    cursor: not-allowed;
}
.el-radio-button.is-active .el-radio-button__original-radio:not(:disabled)+.el-radio-button__inner
{
    color: #00FFCC !important;
/* background-color: var(--el-radio-button-checked-bg-color, var(--el-color-primary)); */
    border-color:#00FFCC !important;
    background-color: #1E2025 !important;
    box-shadow: 0 0 0 1px #00FFCC;
    border-radius: 10px;
}
.el-radio-button__inner{
    border-radius: 10px!important;
}.el-button.is-link {
    color: #00BBFF;
}
.el-tag.el-tag--info{
    --el-tag-bg-color: #000;
    --el-tag-border-color: rgba(251, 251, 251, 0.1);
    --el-tag-hover-color: var(--el-color-info);
    --el-tag-text-color: #fbfbfb;
}

 .el-carousel__container {
     height: 200px;
     position: relative;
 }


 .el-carousel__button {
     box-shadow: 0px 0 0 2px rgba(0, 0, 0, 0.3);
 }

.el-textarea__inner {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.el-textarea__inner::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

/* 鼠标悬停状态 */
.custom-date-picker.el-date-editor:hover {
    --border-color: #c0c4cc;
}

/* 聚焦状态 */
.custom-date-picker.el-date-editor.is-active {
    --border-color: #ff40a0;  /* 保持与Element主题色一致 */
    box-shadow: 0 0 0 2px rgba(64,158,255,.2);
}

/* 内部输入框背景色 */
.custom-date-picker .el-range-input {
    background: var(#5677fc);
    color: #606266;
}

/* 图标颜色 */
.custom-date-picker .el-range__icon,
.custom-date-picker .el-range__close-icon {
    color: #909399;
}

/* 日期面板样式（可选） */
.custom-date-picker .el-picker-panel {
    background: #ffffff;
    border: 1px solid var(--border-color);
}

.el-date-editor {
    --el-date-editor-width: 220px;
    --el-date-editor-monthrange-width: 300px;
    --el-date-editor-daterange-width: 350px;
    --el-date-editor-datetimerange-width: 400px;
    --el-input-text-color: var(--el-text-color-regular);
    --el-input-border: var(--el-border);
    --el-input-hover-border: var(#ddffcc);
    --el-input-focus-border: var(#23ffdf);
    --el-input-transparent-border: 0 0 0 1px transparent inset;
    --el-input-border-color: #66666600;
    --el-input-border-radius: var(--el-border-radius-base);
    --el-input-bg-color: var(#002025);
    --el-input-icon-color: var(--el-text-color-placeholder);
    --el-input-placeholder-color: var(--el-text-color-placeholder);
    --el-input-hover-border-color: var(--el-border-color-hover);
    --el-input-clear-hover-color: var(--el-text-color-secondary);
    --el-input-focus-border-color: #ff209000;
    --el-input-width: 100%;
    position: relative;
    text-align: left;
    vertical-align: middle;
}

.el-picker__popper.el-popper{
    background-color: rgba(43, 43, 43, 0.9);
    border: 1px solid #808080;
}

.date-popper {
    background: transparent !important;
}

.el-date-picker {
    background-color: rgba(43, 43, 43, 0.9)  !important;
    /* --el-datepicker-text-color: #fff; */
    --el-datepicker-off-text-color: rgba(175, 175, 175, 0.7);
    --el-datepicker-header-text-color: #fff;
    --el-datepicker-active-color: rgba(194, 61, 47, 0.8);
    --el-datepicker-hover-text-color: rgba(194, 61, 47, 0.9);
    --el-datepicker-icon-color: rgba(255, 255, 255, 0.7);
}


.el-date-range-picker__content.is-left {
    background: #1E2025;
}
.el-date-range-picker__content.is-right {
    background: #1E2025;
}
.el-date-range-picker {
    --el-datepicker-text-color: var(--el-text-color-regular);
    --el-datepicker-off-text-color: #6f6f71;
    --el-datepicker-header-text-color: var(--el-text-color-regular);
    --el-datepicker-icon-color: var(--el-text-color-primary);
    --el-datepicker-inner-border-color:  #f8f8f830;
    --el-datepicker-inrange-bg-color:  #f8f8f830;
    --el-datepicker-inrange-hover-bg-color: #f8f8f830;
    --el-datepicker-border-color: var(--el-disabled-border-color);
    --el-datepicker-hover-text-color: #FBFBFB;
    width: 646px;
}
.el-picker-panel__body-wrapper {
    background: transparent !important;
}

.el-picker-panel__body {
    background: transparent !important;

}

/* 当天颜色 */
.el-date-table td.today .el-date-table-cell__text {
    color: rgba(255, 164, 149, 0.9);
}

/* 标题颜色 */
.el-date-picker__header-label {
    color: #fff;
}

/* 当月日期颜色 */
.el-date-table__row .available {
    color: rgba(255, 255, 255, 0.9);
}

/* 小菱形颜色 */
.el-picker__popper.el-popper[data-popper-placement^=top] .el-popper__arrow:before{
    background-color: rgba(43, 43, 43, 0.9);

}

/*倒计时*/
.el-statistic {
    --el-statistic-title-font-weight: 400;
    --el-statistic-title-font-size: var(--el-font-size-extra-small);
    --el-statistic-title-color: #5677fc;
    --el-statistic-content-font-weight: 400;
    --el-statistic-content-font-size: var(--el-font-size-extra-large);
    --el-statistic-content-color: var(--el-text-color-primary);
}
.el-statistic__content
{
color: unset;
    font-size:14px;
    font-weight: var(--el-statistic-content-font-weight);
}
.el-switch.is-checked .el-switch__core {
    background: linear-gradient(106deg, #CBFFF8 5%, #21FFF3 36%, #FFF600 98%);
    background-color: unset!important;
    box-sizing: border-box;
    /* Gradient/Stroke/White-100 */
    border: 1px solid;

}
.el-tag.el-tag--success {
    --el-tag-text-color: #fbfbfb50;
    border-radius: 50px !important;
     --el-tag-bg-color: #FBFBFB10;
     --el-tag-border-color: #FBFBFB30;
}.elDatePicker.el-picker-panel {
  color: #fff;
  background: #002450;
  border: 1px solid #1384b4;
}
.elDatePicker.el-picker-panel .el-picker-panel__icon-btn {
  color: #ffffff;
}
.elDatePicker.el-picker-panel .el-date-picker__header-label {
  color: #ffffff;
}
.elDatePicker.el-picker-panel .el-date-table th {
  color: #ffffff;
}.el-image-viewer__canvas{
      position: absolute;
      height: 70%;
      top: 10%;
    }
.el-image__preview {
    cursor: zoom-in;
}
.el-carousel__container{
    height: 7vw;
    min-height: 90px;
}
/*@media (max-width: 1708px) {*/
/*    .el-carousel__container{*/
/*        height: 14vh;*/
/*    }*/
/*}*/
/*@media (max-width: 1579px) {*/
/*    .el-carousel__container{*/
/*        height: 12vh;*/
/*    }*/
/*}*/
.el-carousel__button{
    display: none;
}
/*@media (max-width: 1420px) {*/
/*    .el-carousel__container{*/
/*        height: 11vh;*/
/*    }*/
/*}*/
/*@media (max-width: 1350px) {*/
/*    .el-carousel__container{*/
/*        height: 78px;*/
/*    }*/
/*}*/
.el-image-viewer__canvas img{
    max-width: 1300px !important;
}.titleBreadcrumb .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
    color: #fbfbfb4b;
    font-weight: bold;
    text-decoration: none;
    transition: var(--el-transition-color);
}
.titleBreadcrumb  .el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover {
    color:  #fbfbfb;
    cursor: pointer;
}
.titleBreadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
    color:  #fbfbfb;
    cursor: text;
    font-weight: normal;
}
.el-breadcrumb {
    font-size: 16px;
    line-height: 22px;
}.filesize .el-progress-bar__outer {
    background:  linear-gradient(180deg, rgba(25, 26, 30, 0.2) 0%, rgba(110, 114, 132, 0.2) 99%);
    border-radius: 100px;
    height: 6px;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
}
.filesize .el-progress-bar__inner {
    background-color: #00FFCC;
    border-radius: 100px;
    height: 100%;
    left: 0;
    line-height: 1;
    position: absolute;
    text-align: right;
    top: 0;
    transition: width .6s ease;
    white-space: nowrap;
}/* 修改表头背景色和字体颜色 */
.vxe-table .vxe-header--row {
    background-color: rgba(25,26,30) !important;
    color: #fbfbfb !important;
    -o-text-overflow:ellipsis;
  }
  .custom-vxe-table .vxe-header--row {
    background-color: rgb(25, 26, 30) !important;
    color: #fbfbfb71 !important;
  }
  /* 修改表格行高亮颜色 */
  .vxe-table .vxe-body--row.row--hover {
    background-color: rgb(25, 29, 33) !important;
  }
  .vxe-table--render-default .vxe-table--body-wrapper {
    background-color: #00000061;
}
.vxe-table--render-default.border--default .vxe-table--header-wrapper, .vxe-table--render-default.border--full .vxe-table--header-wrapper, .vxe-table--render-default.border--outer .vxe-table--header-wrapper
{
    background-color: #f8f8f800;
}
.vxe-table--render-default.border--default.sx-pos--bottom .vxe-table--scroll-x-wrapper:after, .vxe-table--render-default.border--full.sx-pos--bottom .vxe-table--scroll-x-wrapper:after, .vxe-table--render-default.border--inner.sx-pos--bottom .vxe-table--scroll-x-wrapper:after, .vxe-table--render-default.border--outer.sx-pos--bottom .vxe-table--scroll-x-wrapper:after {
    bottom: 0;
    height: calc(100% + var(--vxe-ui-table-border-width));
    border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
    opacity: 0;
}
.vxe-table--layout-wrapper{
    background-color: rgb(25,26,30,00);
}
  /* 修改边框颜色 */
  .vxe-table .vxe-table--border-line {
    border-color: #00000000 !important;
  }
  .vxe-table .vxe-table--scroll-y-handle {
    overflow-y: scroll;
    overflow-x: hidden;
    width: 0px;
    height: 100%;
}
.vxe-table .vxe-table--scroll-x-handle {
    /*overflow-y: hidden;*/
    /*overflow-x: hidden;*/
    height: 18px;
}
.vxe-table--render-default {
    position: relative;
    font-size: 14px;
    color: #fbfbfb;
    font-family: var(--vxe-ui-font-family);
    direction: ltr;
}
.vxe-table--scroll-y-virtual{
    width: 0px !important;
}
/* 定义滚动条整体样式 */
::-webkit-scrollbar {
    width: 8px;       /* 垂直滚动条宽度 */
    height: 8px;      /* 水平滚动条高度 */
}

/* 滚动条轨道（背景） */
::-webkit-scrollbar-track {
    background: #f1f1f100;
    border-radius: 4px;
}

/* 滚动条滑块（可拖动部分） */
::-webkit-scrollbar-thumb {
    background: #88888820;
    border-radius: 4px;
}

/* 滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 滚动条角落（水平和垂直滚动条交汇处） */
::-webkit-scrollbar-corner {
    background: #f1f1f1;
}
.vxe-table--render-default.border--full .vxe-body--column, .vxe-table--render-default.border--full .vxe-footer--column, .vxe-table--render-default.border--full .vxe-header--column {
    background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
    background-repeat: no-repeat;
    background-size: 0 100%, 100% 4px;
    background-position: 100% 0, 100% 100%;
    background: rgb(25,28,32);
    border: 0;
}
.vxe-header--column.col--ellipsis>.vxe-cell .vxe-cell--title {
    font-size: 12px;
}
.vxe-table--render-default .vxe-table--body-wrapper {
    background-color: rgb(25,28,32);
}
.vxe-table--render-default .vxe-body--column:not(.col--active).col--ellipsis>.vxe-cell{
    padding: 10px;
    background: rgb(20,21,24);
    width: 100% !important;

   margin-bottom: 10px;

}
.vxe-table--render-default.border--full .vxe-body--column, .vxe-table--render-default.border--full .vxe-footer--column, .vxe-table--render-default.border--full .vxe-header--column {
    background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
    background-repeat: no-repeat;
    background-size: 0 100%, 100% 0px;
    background-position: 100% 0, 100% 100%;
    border: 0;
}
.vxe-body--column:not(.col--active).col--ellipsis:first-child >.vxe-cell{
    border-radius: 10px 0px 0px 10px;

   
}
.card-style-table[data-v-e4b4c248] .vxe-body--column{
    padding-bottom: 0px !important;
}
.vxe-body--column:not(.col--active).col--ellipsis:last-child >.vxe-cell{
    border-radius:0px 10px  10px 0px;
    overflow: hidden;

}
.vxe-table--render-default.border--default.sy-pos--right .vxe-table--scroll-y-bottom-corner:before, .vxe-table--render-default.border--default.sy-pos--right .vxe-table--scroll-y-top-corner:before, .vxe-table--render-default.border--full.sy-pos--right .vxe-table--scroll-y-bottom-corner:before, .vxe-table--render-default.border--full.sy-pos--right .vxe-table--scroll-y-top-corner:before {
    width: calc(100% + 1px);  
    left: 0px;
}
.vxe-table--render-default.border--default .vxe-table--scroll-y-bottom-corner:before, .vxe-table--render-default.border--default .vxe-table--scroll-y-top-corner:before, .vxe-table--render-default.border--full .vxe-table--scroll-y-bottom-corner:before, .vxe-table--render-default.border--full .vxe-table--scroll-y-top-corner:before {
    border-left-width: 0; 
    border-right-width: 0;

}
.vxe-table--render-default.border--default.sy-pos--right .vxe-table--scroll-y-bottom-corner:before, .vxe-table--render-default.border--default.sy-pos--right .vxe-table--scroll-y-top-corner:before, .vxe-table--render-default.border--full.sy-pos--right .vxe-table--scroll-y-bottom-corner:before, .vxe-table--render-default.border--full.sy-pos--right .vxe-table--scroll-y-top-corner:before {
    width: 0;
    left: 0px;
}
/* 使用更具体的选择器覆盖原有样式 */
.custom-vxe-table.vxe-table {
    background-color: rgb(24,26,30) !important;
  }
  
  .custom-vxe-table .vxe-table--body-wrapper {
    background-color:   rgb(24,26,30) !important;
  }
  
  .custom-vxe-table .vxe-header--row {
    background-color:   rgb(24,26,30) !important;
      -o-text-overflow:ellipsis;
  }
  
  /* 行悬浮效果 */
  .custom-vxe-table .vxe-body--row.row--hover,
  .custom-vxe-table .vxe-body--row:hover {
    background-color: #1E2025 !important;

  }
  .custom-vxe-table .vxe-body--row:hover .vxe-body--column:not(.col--active).col--ellipsis:first-child >.vxe-cell {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
  }
  
  .custom-vxe-table .vxe-body--row:hover .vxe-body--column:not(.col--active).col--ellipsis:last-child > .vxe-cell {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
  }
  /* 单元格透明 */
  .custom-vxe-table .vxe-body--column,
  .custom-vxe-table .vxe-header--column {
    background-color: transparent !important;
  }
  
  /* 滚动条样式保持原有 */
  .custom-vxe-table .vxe-table--scroll-y-handle,
  .custom-vxe-table .vxe-table--scroll-x-handle {
    /* 保留原有滚动条样式 */
  }
  .custom-vxe-table .vxe-body--column:not(.col--active).col--ellipsis:first-child >.vxe-cell{
    border-radius: 8px 0px 0px 8px;

   
}
.custom-vxe-table .vxe-body--column:not(.col--active).col--ellipsis:last-child >.vxe-cell{
    border-radius:0px 8px  8px 0px;
    overflow: hidden;

}
.custom-vxe-table .vxe-table--render-wrapper .vxe-table--body-wrapper .vxe-body--column:not(.col--active).col--ellipsis>.vxe-cell {
    padding: 10px !important;;
    background: rgb(0, 79, 238,0)!important;;
    width: 100% !important;

   margin-bottom: 10px;

}
.tableInHistory :deep(.last-cell-fix) {
    /*
      请将 #2D303B 替换为您表格单元格的实际背景颜色！
      如果样式不生效，可以尝试在颜色值后面添加 !important
      例如: background-color: #2D303B !important;
    */
    background-color: #002aff !important;
}
.vxe-table--body-wrapper {
    overscroll-behavior-y: none !important;
    overscroll-behavior-x: none !important;
    touch-action: none !important; /* 在触屏设备上也防止弹性滚动 */
}
.vxe-table--body-wrapper::-webkit-scrollbar {
    overscroll-behavior: none !important;
}
html, body {
    overscroll-behavior: none;
}

.table, .vxe-table--body-wrapper {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto; /* 重点：禁用 iOS 弹性滚动 */
}.el-checkbox {
    --el-checkbox-checked-bg-color: #ffffff2a;
    --el-checkbox-checked-icon-color: var(--el-color-white);
    --el-checkbox-input-border-color-hover: #ffffff2a;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: var(--el-checkbox-checked-bg-color);
    border-color: #ffffff2a;
}
.item-checkbox .el-checkbox__input.is-checked .el-checkbox__inner{
    background-color: #00FFCC!important;
    border-color: #00FFCC!important;
}