.page-suno {
  display flex
  height 100%
  // background-color #0E0808
  overflow auto
  .item-group{
    scrollbar-width: auto !important; /* 恢复滚动条（Firefox） */
  -ms-overflow-style: auto !important; /* 恢复滚动条（IE、Edge） */
  ::-webkit-scrollbar {
    display: block !important; 
  }
    }
 
  .left-bar {
    max-width 340px
    min-width 340px
    padding 20px 30px

    .bar-top {
      display flex
      flex-flow row
      justify-content: space-between;
      align-items center

      .upload-music {
        .iconfont {
          margin-right 5px
          font-size 14px
        }
      }
    }

    .params {
      padding 20px 0
      color: var(--text-theme-color);
      position relative

      .pure-music {
        position absolute
        right 0
        top 24px
        display flex

        .text {
          margin-top 5px
          margin-left 5px
        }
      }

      .label {
        padding 10px 0

        .text {
          margin-right 10px
        }
        .el-icon {
          top 2px
        }
      }
      .item {
        margin-bottom: 20px
        position relative

        .create-btn {
          margin 20px 0
          background-image url("~@/assets/img/suno-create-bg.svg")
          background-size: cover;
          background-position: 50% 50%;
          transition: background 1s ease-in-out;
          overflow: hidden;
          font-size 16px
          width 100%
          padding 16px
          border-radius 25px
          border none
          cursor pointer

          img {
            position relative
            top 3px
            margin-right 5px
          }

          &:hover {
            opacity: 0.9;
          }
        }
        

        .song {
          display flex
          padding 10px
          background-color #252020
          border-radius 10px
          margin-bottom 10px
          font-size 14px
          position relative

          .el-image {
            width 50px
            height 50px
            border-radius 10px
          }
          .icon-mp3 {
            font-size 42px
            color #A85295
          }
          .title {
            display flex
            margin-left 10px
            align-items center
          }

          .el-button--info {
            position absolute
            right 20px
            top 20px
          }
        }

        .extend-secs {
          padding 10px 0
          font-size 14px

          input {
            width 50px
            text-align center
            padding 8px 10px
            font-size 14px
            background none
            border 1px solid #8f8f8f
            margin 0 10px
            border-radius 10px
            outline: none;
            transition: border-color 0.5s ease, box-shadow 0.5s ease;
            &:focus {
              border-color: #0F7A71;
              box-shadow: 0 0 5px #0F7A71;
            }
          }
        }

        .btn-lyric {
          position absolute
          left 10px
          bottom 10px
          font-size 12px
          padding 2px 5px
          background-color var(--sm-btn-bg)
          color: #fff
        }
      }

      .tag-select {
        position relative
        overflow-x auto
        overflow-y hidden
        scrollbar-width: auto !important; /* 恢复滚动条（Firefox） */
        -ms-overflow-style: auto !important; /* 恢复滚动条（IE、Edge） */
        width 100%

        ::-webkit-scrollbar {
          display: block !important; 
        }

        .inner {
          display flex
          flex-flow row
          padding-bottom 10px

          .tag {
            margin-right 10px
            word-break keep-all
            background: var(--card-bg);
            color:var(--theme-text-color-primary);
            opacity 0.7
            border-radius 8px
            padding 3px 6px
            cursor pointer
            font-size 13px
            &:hover{
              color:var( --el-color-primary)
            }
          }
        }
      }
    }
  }
  .right-box {
    width 100%
    color rgb(250 247 245)
    overflow auto
    background: var(--chat-bg)


    .list-box {
      padding 20px
      .item {
        display flex
        flex-flow row
        padding 5px 0
        cursor pointer
        margin-bottom 10px

        &:hover {
         background: rgba(188,149,236,0.08)
        }

        .left {
          .container {
            width 60px
            height 90px
            position relative

            .el-image {
              height 90px
              border-radius 5px
            }

            .duration {
              position absolute
              bottom 0
              right 0
              background-color rgba(14,8,8,.7)
              padding 0 3px
              font-family 'Input Sans'
              font-size 14px
              font-weight 700
              border-radius .125rem
            }

            .play {
              position absolute
              width: 56px;
              height 100%
              top: 0;
              left: 50%;
              border none
              border-radius 5px
              background rgba(100, 100, 100, 0.3)
              cursor pointer
              color #ffffff
              opacity 0
              transform: translate(-50%, 0px);
              transition opacity 0.3s ease 0s
              display flex
              justify-content center
              align-items center
            }

            &:hover {
              .play {
                opacity 1
                //display block
              }
            }
          }
        }

        .center {
          width 100%
          //border 1px solid saddlebrown
          display flex
          justify-content center
          align-items flex-start
          flex-flow column
          height 90px
          padding 0 20px

          .title {
            padding 6px 0
            font-size 16px
            font-weight 700

            a {
              color var( --a-link-color)
              &:hover {
                text-decoration underline
              }
            }

            .model {
              color #8f8f8f
              // background-color #1C1616
              // border 1px solid #8f8f8f
              font-weight normal
              font-size 12px
              padding 1px 3px
              border-radius 5px
              margin-left 10px

              .iconfont {
                font-size 12px
              }
            }
          }

          .tags {
            font-size 14px
            color var(--text-fb)
            padding 3px 0
          }
        }

        .right {
          min-width 350px;
          font-size 14px
          padding 0 0 0 15px
          display flex
          justify-content right

          .tools {
            display flex
            justify-content right
            align-items center
            flex-flow row
            height 90px

            .btn-publish {
              padding 2px 10px

              // .text {
              //   margin-right 10px
              // }
            }

            .btn-icon {
              background none
              padding 6px
              transition background 0.6s ease 0s
              color #919191

              &:hover {
                // background #5f5958
                // color #e1e1e1
                color:var(--el-color-primary)
              }

              .downloading {
                width 16px
              }
            }
          }
        }
      }


      .task {
        height 100px
        background-color #2A2525
        display flex
        margin-bottom 10px
        .left {
          display flex
          justify-content left
          align-items center
          padding 20px
          width 320px
          .title {
            font-size 14px
            color #e1e1e1
            white-space: nowrap; /* 防止文字换行 */
            overflow: hidden; /* 隐藏溢出的内容 */
            text-overflow: ellipsis; /* 用省略号表示溢出的内容 */
          }
        }
        .center {
          display flex
          width 100%
          justify-content center
          .failed {
            display flex
            align-items center
            color #E4696B
            font-size 14px
          }
        }
        .right {
          display flex
          width 100px
          justify-content center
          align-items center
        }
      }
    }

    .pagination {
      margin-top 20px
      display flex
      justify-content center
    }
    .music-player {
      width 100%
      position: fixed;
      bottom: 0;
      left: 50px;
      padding 20px 0
    }
  }


  .btn {
    margin-right 10px
    color: var((--theme-text-color-primary))
    border none
    border-radius 5px
    padding 5px 10px
    cursor pointer
    background: var(--btn-bg)
    

    &:hover {
      opacity :0.8
    }
  }
}
.submit-btn {
  display flex
  align-items: center
  margin: 20px 0
  justify-content: center;
  .el-button {
    width 200px
  }

}