/* 与 L4D2 站点统一的透明玻璃风格 */
html,
body {
    background: transparent !important;
    background-color: transparent !important;
}

#loader-mask {
    background-color: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(8px);
}

#app {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.92) !important;
    padding: 20px 10px !important;
}

#app-footer {
    display: none !important;
}

#app-footer,
.tip,
.el-upload__tip {
    color: rgba(255, 255, 255, 0.65) !important;
}

#app-footer a,
.tip a {
    color: rgba(255, 255, 255, 0.75) !important;
}

#app-footer a:hover,
.tip a:hover {
    color: #ff85c0 !important;
}

#app-footer a[href*="使用提示"],
#app-footer a[href*="wiki/%E4%BD%BF%E7%94%A8"],
#loader-tips-timeout a[href*="使用提示"] {
    display: none !important;
}

.music-cover .el-image {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.el-upload-dragger {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px dashed rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(12px);
}

.el-upload-dragger:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.el-upload-dragger .el-upload__text {
    color: rgba(255, 255, 255, 0.85) !important;
}

.el-button {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
}

.el-button:hover,
.el-button:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #fff !important;
}

.el-button--primary,
.el-button--success,
.el-button--danger {
    background: transparent !important;
}

.el-table,
.el-table tr,
.el-table th.el-table__cell {
    background: rgba(0, 0, 0, 0.25) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.el-table td {
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

.el-table__header th {
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

.el-table tr:hover td {
    background: rgba(255, 255, 255, 0.08) !important;
}

.el-dialog {
    background: rgba(20, 20, 20, 0.85) !important;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.el-dialog .el-dialog__header .el-dialog__title,
.el-dialog .el-dialog__body {
    color: rgba(255, 255, 255, 0.9) !important;
}

.el-dialog .el-dialog__body .el-input .el-input__inner {
    background: rgba(0, 0, 0, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}

.el-checkbox.is-bordered {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.el-checkbox.is-bordered.is-checked {
    background: rgba(255, 133, 192, 0.25) !important;
    border-color: rgba(255, 133, 192, 0.5) !important;
}

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

.el-radio__label {
    color: rgba(255, 255, 255, 0.85) !important;
}

.update-info {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

.update-info .update-title {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.update-info .update-content {
    color: rgba(255, 255, 255, 0.75) !important;
}

.edit-item .label {
    color: rgba(255, 255, 255, 0.9) !important;
}

.edit-item .value {
    color: rgba(255, 255, 255, 0.8) !important;
}

.edit-item .input input {
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
}

.el-notification {
    background: rgba(30, 30, 30, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: transparent !important;
    }

    #app {
        color: rgba(255, 255, 255, 0.92) !important;
    }
}