label[data-v-670c0e2e] {
    cursor: pointer;
    line-height: 1.2;
    display: block
}

form[data-v-670c0e2e] input {
    font-family: Courier New, Courier, monospace
}

[data-v-670c0e2e] .um-config-dialog {
    max-width: 90%;
    width: 40em
}

[data-v-701d8fe2] .um-edit-dialog {
    max-width: 90%;
    width: 30em
}

.unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.btn-like,
.edit-item i,
.music-cover i {
    cursor: pointer
}

.btn-like:active,
.edit-item i:active,
.music-cover i:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px)
}

.mt-0 {
    margin-top: 0 !important
}

.mb-0 {
    margin-bottom: 0 !important
}

.ml-0 {
    margin-left: 0 !important
}

.mr-0 {
    margin-right: 0 !important
}

.m-0 {
    margin: 0 !important
}

.pt-0 {
    padding-top: 0 !important
}

.pb-0 {
    padding-bottom: 0 !important
}

.pl-0 {
    padding-left: 0 !important
}

.pr-0 {
    padding-right: 0 !important
}

.p-0 {
    padding: 0 !important
}

.mt-1 {
    margin-top: 5px !important
}

.mb-1 {
    margin-bottom: 5px !important
}

.ml-1 {
    margin-left: 5px !important
}

.mr-1 {
    margin-right: 5px !important
}

.m-1 {
    margin: 5px !important
}

.pt-1 {
    padding-top: 5px !important
}

.pb-1 {
    padding-bottom: 5px !important
}

.pl-1 {
    padding-left: 5px !important
}

.pr-1 {
    padding-right: 5px !important
}

.p-1 {
    padding: 5px !important
}

.mt-2 {
    margin-top: 10px !important
}

.mb-2 {
    margin-bottom: 10px !important
}

.ml-2 {
    margin-left: 10px !important
}

.mr-2 {
    margin-right: 10px !important
}

.m-2 {
    margin: 10px !important
}

.pt-2 {
    padding-top: 10px !important
}

.pb-2 {
    padding-bottom: 10px !important
}

.pl-2 {
    padding-left: 10px !important
}

.pr-2 {
    padding-right: 10px !important
}

.p-2 {
    padding: 10px !important
}

.mt-3 {
    margin-top: 15px !important
}

.mb-3 {
    margin-bottom: 15px !important
}

.ml-3 {
    margin-left: 15px !important
}

.mr-3 {
    margin-right: 15px !important
}

.m-3 {
    margin: 15px !important
}

.pt-3 {
    padding-top: 15px !important
}

.pb-3 {
    padding-bottom: 15px !important
}

.pl-3 {
    padding-left: 15px !important
}

.pr-3 {
    padding-right: 15px !important
}

.p-3 {
    padding: 15px !important
}

.mt-4 {
    margin-top: 20px !important
}

.mb-4 {
    margin-bottom: 20px !important
}

.ml-4 {
    margin-left: 20px !important
}

.mr-4 {
    margin-right: 20px !important
}

.m-4 {
    margin: 20px !important
}

.pt-4 {
    padding-top: 20px !important
}

.pb-4 {
    padding-bottom: 20px !important
}

.pl-4 {
    padding-left: 20px !important
}

.pr-4 {
    padding-right: 20px !important
}

.p-4 {
    padding: 20px !important
}

.mt-5 {
    margin-top: 25px !important
}

.mb-5 {
    margin-bottom: 25px !important
}

.ml-5 {
    margin-left: 25px !important
}

.mr-5 {
    margin-right: 25px !important
}

.m-5 {
    margin: 25px !important
}

.pt-5 {
    padding-top: 25px !important
}

.pb-5 {
    padding-bottom: 25px !important
}

.pl-5 {
    padding-left: 25px !important
}

.pr-5 {
    padding-right: 25px !important
}

.p-5 {
    padding: 25px !important
}

.mt-6 {
    margin-top: 30px !important
}

.mb-6 {
    margin-bottom: 30px !important
}

.ml-6 {
    margin-left: 30px !important
}

.mr-6 {
    margin-right: 30px !important
}

.m-6 {
    margin: 30px !important
}

.pt-6 {
    padding-top: 30px !important
}

.pb-6 {
    padding-bottom: 30px !important
}

.pl-6 {
    padding-left: 30px !important
}

.pr-6 {
    padding-right: 30px !important
}

.p-6 {
    padding: 30px !important
}

.mt-7 {
    margin-top: 35px !important
}

.mb-7 {
    margin-bottom: 35px !important
}

.ml-7 {
    margin-left: 35px !important
}

.mr-7 {
    margin-right: 35px !important
}

.m-7 {
    margin: 35px !important
}

.pt-7 {
    padding-top: 35px !important
}

.pb-7 {
    padding-bottom: 35px !important
}

.pl-7 {
    padding-left: 35px !important
}

.pr-7 {
    padding-right: 35px !important
}

.p-7 {
    padding: 35px !important
}

.mt-8 {
    margin-top: 40px !important
}

.mb-8 {
    margin-bottom: 40px !important
}

.ml-8 {
    margin-left: 40px !important
}

.mr-8 {
    margin-right: 40px !important
}

.m-8 {
    margin: 40px !important
}

.pt-8 {
    padding-top: 40px !important
}

.pb-8 {
    padding-bottom: 40px !important
}

.pl-8 {
    padding-left: 40px !important
}

.pr-8 {
    padding-right: 40px !important
}

.p-8 {
    padding: 40px !important
}

.el-checkbox.is-bordered {
    border-radius: 6px
}

.el-checkbox.is-bordered:hover {
    border-color: #409eff
}

.el-checkbox.is-bordered:hover .el-checkbox__label {
    color: #409eff
}

.el-checkbox.is-bordered .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #dcdfe6
}

.el-checkbox.is-bordered.is-checked {
    background-color: #409eff
}

.el-checkbox.is-bordered.is-checked .el-checkbox__label {
    color: #fff
}

.el-checkbox.is-bordered.is-checked .el-checkbox__inner {
    border-color: #fff;
    background-color: #fff
}

.el-checkbox.is-bordered.is-checked .el-checkbox__inner:after {
    border-color: #409eff
}

.el-button {
    border-radius: 6px
}

.el-upload-dragger:hover {
    background-color: rgba(64, 158, 255, .1)
}

.el-upload__tip {
    text-align: center;
    color: #999
}

.el-dialog {
    border-radius: 5px
}

.el-dialog.el-dialog--center .el-dialog__body {
    padding: 25px 25px 15px
}

.el-dialog.el-dialog--center .el-dialog__footer {
    padding: 10px 20px 30px
}

@media(prefers-color-scheme:dark) {
    .el-radio__label {
        color: #e6e6e6
    }

    .el-radio__input {
        color: #999
    }

    .el-radio__input .el-radio__inner {
        border-color: #404040;
        background-color: #333
    }

    .el-radio.is-checked .el-radio__inner {
        background-color: #409eff
    }

    .el-radio.is-checked .el-radio__label {
        font-weight: 700
    }

    .el-checkbox.is-bordered {
        border-color: #404040;
        color: #e6e6e6;
        background-color: #333
    }

    .el-checkbox.is-bordered .el-checkbox__inner {
        background-color: #4d4d4d;
        border-color: #8c8c8c
    }

    .el-checkbox.is-bordered:hover {
        border-color: #8c8c8c
    }

    .el-checkbox.is-bordered:hover .el-checkbox__inner {
        background-color: #4d4d4d;
        border-color: #8c8c8c
    }

    .el-checkbox.is-bordered:hover .el-checkbox__label {
        color: #999
    }

    .el-checkbox.is-bordered.is-checked {
        background-color: #409eff
    }

    .el-checkbox.is-bordered.is-checked .el-checkbox__inner {
        border-color: #fff
    }

    .el-checkbox.is-bordered.is-checked .el-checkbox__label {
        color: #fff;
        font-weight: 700
    }

    .el-checkbox.is-bordered.is-checked:hover {
        border-color: #409eff
    }

    .el-checkbox.is-bordered.is-checked:hover .el-checkbox__inner {
        background-color: #fff
    }

    .el-button {
        background-color: #333;
        border-color: #404040;
        color: #e6e6e6
    }

    .el-button:active {
        -webkit-transform: translateY(2px);
        transform: translateY(2px)
    }

    .el-button--default.is-plain {
        background-color: #333
    }

    .el-button--default.is-plain:hover {
        background-color: #409eff;
        border-color: #409eff;
        color: #fff
    }

    .el-button--default.is-circle {
        background-color: #215285;
        border-color: #215285
    }

    .el-button--default.is-circle:hover {
        background-color: #409eff;
        border-color: #409eff;
        color: #fff
    }

    .el-button--success.is-plain {
        background-color: #333
    }

    .el-button--success.is-plain:hover {
        background-color: #85ce61;
        border-color: #85ce61;
        color: #fff
    }

    .el-button--success.is-circle {
        background-color: #455c3a;
        border-color: #455c3a
    }

    .el-button--success.is-circle:hover {
        background-color: #85ce61;
        border-color: #85ce61;
        color: #fff
    }

    .el-button--danger.is-plain {
        border-color: #404040;
        background-color: #333
    }

    .el-button--danger.is-plain:hover {
        background-color: #f56c6c;
        border-color: #f56c6c
    }

    .el-button--danger.is-circle {
        background-color: #893f3f;
        border-color: #893f3f
    }

    .el-button--danger.is-circle:hover {
        background-color: #f56c6c;
        border-color: #f56c6c;
        color: #fff
    }

    .el-upload__tip {
        color: #999
    }

    .el-upload-dragger {
        background-color: #212121;
        border-color: #404040
    }

    .el-upload-dragger .el-upload__text {
        color: #999
    }

    .el-upload-dragger:hover {
        background: #2e2e2e;
        border-color: #8c8c8c
    }

    .el-table {
        background-color: #212121
    }

    .el-table:before {
        content: none
    }

    .el-table__header th {
        border-bottom-color: #404040 !important
    }

    .el-table th.el-table__cell {
        background-color: #2e2e2e;
        color: #999
    }

    .el-table td {
        border-bottom-color: #404040 !important
    }

    .el-table tr {
        background-color: #212121;
        color: #e6e6e6
    }

    .el-table tr:hover td {
        background-color: #2e2e2e !important
    }

    .el-notification {
        background-color: #4d4d4d;
        border-color: #404040
    }

    .el-notification__title {
        color: #fff
    }

    .el-notification__content {
        color: #999
    }

    .el-dialog {
        background-color: #262626
    }

    .el-dialog .el-dialog__body,
    .el-dialog .el-dialog__header .el-dialog__title {
        color: #e6e6e6
    }

    .el-dialog .el-dialog__body .el-input .el-input__inner {
        border-color: #404040;
        color: #e6e6e6;
        background-color: #333
    }

    .el-dialog .el-dialog__body .el-input .el-input__count .el-input__count-inner {
        background-color: transparent
    }

    .el-dialog .item-desc {
        color: #999
    }
}

body {
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: PingFang SC, 微软雅黑, Helvetica Neue, Helvetica, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

#app {
    text-align: center;
    color: #2c3e50;
    padding: 30px
}

#app-control,
.table-content,
audio {
    margin-top: 20px
}

.music-cover {
    margin-bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap
}

.music-cover i {
    margin-top: 10px
}

.music-cover i:hover {
    color: #409eff
}

.music-cover .el-image {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #dcdfe6;
    width: 150px;
    height: 150px
}

.edit-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.edit-item .label {
    font-weight: 700;
    width: 80px;
    text-align: right;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.edit-item .value {
    padding: 5px 0;
    height: 20px;
    line-height: 20px;
    margin-left: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.edit-item .input {
    margin-left: 10px
}

.edit-item .input input {
    font-family: inherit;
    height: 30px;
    line-height: 20px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #dcdfe6;
    padding: 5px 5px
}

.edit-item i {
    margin-left: 10px
}

.edit-item i:hover {
    color: #409eff
}

.tip {
    margin-top: 20px;
    color: #999;
    font-size: 12px
}

.tip a {
    color: inherit
}

#app-footer {
    margin-top: 40px;
    text-align: center;
    color: #777;
    line-height: 1.3;
    font-size: 12px
}

#app-footer a {
    padding-left: .2rem;
    padding-right: .2rem;
    color: #5e5e5e
}

#app-footer a:hover {
    color: #409eff
}

.update-info {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dcdfe6;
    margin: 10px 0
}

.update-info .update-title {
    font-size: 13px;
    padding: 3px 10px;
    background-color: #dcdfe6
}

.update-info .update-content {
    font-size: 12px;
    line-height: 1.5;
    padding: 5px 8px
}

@media(prefers-color-scheme:dark) {
    #app {
        color: #999
    }

    body {
        background-color: #1a1a1a
    }

    .music-cover i:hover {
        color: #409eff
    }

    .music-cover .el-image {
        border: 1px solid #404040
    }

    .edit-item .input input {
        background-color: transparent !important;
        border-bottom: 1px solid #404040
    }

    .edit-item i:hover {
        color: #409eff
    }

    #app-footer a {
        color: #a6a6a6
    }

    #app-footer a:hover {
        color: #409eff
    }

    .update-info {
        border: 1px solid #333 !important
    }

    .update-info .update-title {
        color: #e6e6e6;
        background-color: #333 !important
    }

    .update-info .update-content {
        color: #999;
        padding: 10px
    }
}