/* Art Design Pro inspired popup theme for the legacy layui layer API. */
:root {
    --art-popup-primary: #409eff;
    --art-popup-text: #303133;
    --art-popup-secondary: #606266;
    --art-popup-border: #ebeef5;
    --art-popup-border-light: #f0f2f5;
    --art-popup-surface: #ffffff;
    --art-popup-shadow: 0 12px 32px rgba(15, 23, 42, .14), 0 2px 8px rgba(15, 23, 42, .06);
    --art-popup-radius: 10px;
    --art-button-primary: #409eff;
    --art-button-primary-hover: #66b1ff;
    --art-button-success: #67c23a;
    --art-button-success-hover: #85ce61;
    --art-button-warning: #e6a23c;
    --art-button-warning-hover: #ebb563;
    --art-button-danger: #f56c6c;
    --art-button-danger-hover: #f78989;
    --art-button-text: #606266;
    --art-button-border: #dcdfe6;
    --art-button-muted: #909399;
}

/* Unified Art Design Pro style for toolbar and table operation buttons. */
.layui-btn,
.layui-btn-primary,
.layui-btn-normal,
.layui-btn-success,
.layui-btn-warm,
.layui-btn-danger,
.layui-btn-lg,
.layui-btn-sm,
.layui-btn-xs {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    overflow: hidden;
    box-sizing: border-box;
    height: 32px !important;
    min-width: 64px;
    padding: 0 14px !important;
    color: #ffffff !important;
    background: var(--art-button-primary) !important;
    border: 1px solid var(--art-button-primary) !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 30px !important;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.layui-btn:hover,
.layui-btn-normal:hover {
    color: #ffffff !important;
    background: var(--art-button-primary-hover) !important;
    border-color: var(--art-button-primary-hover) !important;
    box-shadow: 0 2px 8px rgba(64, 158, 255, .2);
    opacity: 1 !important;
    transform: translateY(-1px);
}

.layui-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.layui-btn:disabled,
.layui-btn.layui-btn-disabled {
    color: #c0c4cc !important;
    background: #f5f7fa !important;
    border-color: #e4e7ed !important;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1 !important;
    transform: none;
}

.layui-btn-primary {
    color: var(--art-button-text) !important;
    background: #ffffff !important;
    border-color: var(--art-button-border) !important;
}

.layui-btn-primary:hover {
    color: var(--art-button-primary) !important;
    background: #ecf5ff !important;
    border-color: #c6e2ff !important;
    box-shadow: 0 2px 8px rgba(64, 158, 255, .12);
}

.layui-btn-success {
    background: var(--art-button-success) !important;
    border-color: var(--art-button-success) !important;
}

.layui-btn-success:hover {
    background: var(--art-button-success-hover) !important;
    border-color: var(--art-button-success-hover) !important;
    box-shadow: 0 2px 8px rgba(103, 194, 58, .2);
}

.layui-btn-warm,
.layui-btn-warning {
    background: var(--art-button-warning) !important;
    border-color: var(--art-button-warning) !important;
}

.layui-btn-warm:hover,
.layui-btn-warning:hover {
    background: var(--art-button-warning-hover) !important;
    border-color: var(--art-button-warning-hover) !important;
    box-shadow: 0 2px 8px rgba(230, 162, 60, .2);
}

.layui-btn-danger,
.layui-btn.layui-bg-red {
    background: var(--art-button-danger) !important;
    border-color: var(--art-button-danger) !important;
}

.layui-btn-danger:hover,
.layui-btn.layui-bg-red:hover {
    background: var(--art-button-danger-hover) !important;
    border-color: var(--art-button-danger-hover) !important;
    box-shadow: 0 2px 8px rgba(245, 108, 108, .2);
}

.layui-btn-lg {
    height: 40px !important;
    min-width: 88px;
    padding: 0 18px !important;
    font-size: 14px !important;
    line-height: 38px !important;
}

.layui-btn-sm {
    height: 30px !important;
    min-width: 58px;
    padding: 0 12px !important;
    font-size: 12px !important;
    line-height: 28px !important;
}

.layui-btn-xs {
    height: 28px !important;
    min-width: 52px;
    padding: 0 10px !important;
    font-size: 12px !important;
    line-height: 26px !important;
}

.layui-btn-icon,
.layui-btn.icon-only {
    min-width: 32px;
    width: 32px;
    padding: 0 !important;
}

.layui-btn-sm.layui-btn-icon,
.layui-btn-sm.icon-only {
    min-width: 30px;
    width: 30px;
}

.layui-btn-xs.layui-btn-icon,
.layui-btn-xs.icon-only {
    min-width: 28px;
    width: 28px;
}

.layui-btn i,
.layui-btn .layui-icon {
    margin: 0;
    font-size: 13px;
    line-height: 1;
}

.layui-btn-xs i,
.layui-btn-xs .layui-icon {
    font-size: 12px;
}

.layui-table .layui-btn + .layui-btn,
.layui-table-cell .layui-btn + .layui-btn,
.layui-table-tool .layui-btn + .layui-btn {
    margin-left: 6px;
}

.layui-table-cell .layui-btn {
    margin-top: 0;
    margin-bottom: 0;
}

.layui-table-tool .layui-inline[lay-event] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    color: var(--art-button-muted) !important;
    background: #ffffff !important;
    border: 1px solid var(--art-button-border) !important;
    border-radius: 6px !important;
    line-height: 30px !important;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.layui-table-tool .layui-inline[lay-event]:hover {
    color: var(--art-button-primary) !important;
    background: #ecf5ff !important;
    border-color: #c6e2ff !important;
    box-shadow: 0 2px 8px rgba(64, 158, 255, .12);
}

.layui-table-tool .layui-inline[lay-event] .layui-icon,
.layui-table-tool .layui-inline[lay-event] i {
    margin: 0;
    font-size: 14px;
}

/* Dialogs and iframe pages. Toasts and image viewers keep their own layout. */
.layui-layer:not(.login-verify-toast):not(.login-status-toast):not(.layui-layer-loading):not(.layui-layer-photos):not(.layui-layer-tips) {
    overflow: hidden;
    color: var(--art-popup-text);
    background: var(--art-popup-surface);
    border: 1px solid var(--art-popup-border) !important;
    border-radius: var(--art-popup-radius) !important;
    box-shadow: var(--art-popup-shadow) !important;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast):not(.layui-layer-loading):not(.layui-layer-photos):not(.layui-layer-tips) .layui-layer-title {
    height: 54px;
    padding: 0 58px 0 20px;
    overflow: hidden;
    color: var(--art-popup-text) !important;
    background: var(--art-popup-surface) !important;
    border-bottom: 1px solid var(--art-popup-border-light) !important;
    border-radius: var(--art-popup-radius) var(--art-popup-radius) 0 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 54px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin {
    top: 12px;
    right: 12px;
    height: 30px;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin > a,
.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin > span {
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 30px;
    margin-left: 2px;
    border-radius: 6px;
    color: #909399 !important;
    background: transparent !important;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    transition: background-color .2s ease, color .2s ease;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin > a:hover,
.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin > span:hover {
    color: var(--art-popup-text) !important;
    background: #f2f6fc !important;
    opacity: 1;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin > a cite {
    display: none;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin > a::after,
.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin > a::before {
    display: none !important;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin .layui-layer-close,
.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin .layui-layer-close1,
.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin .layui-layer-close2 {
    position: static;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: #909399 !important;
    background: transparent !important;
    font-size: 0;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin .layui-layer-close::before,
.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin .layui-layer-close1::before,
.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin .layui-layer-close2::before {
    display: block !important;
    content: "\1006";
    font-family: layui-icon;
    font-size: 16px;
    line-height: 30px;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin .layui-layer-min::before {
    display: block !important;
    top: 15px;
    left: 9px;
    width: 12px;
    margin: 0;
    border-bottom-color: #909399;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin .layui-layer-max::before,
.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin .layui-layer-max::after {
    display: block !important;
    border-color: #909399;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin .layui-layer-min:hover::before,
.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin .layui-layer-max:hover::before,
.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin .layui-layer-max:hover::after {
    border-color: var(--art-popup-primary);
    background-color: transparent;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-content {
    color: var(--art-popup-secondary);
    background: var(--art-popup-surface);
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast).layui-layer-dialog .layui-layer-content {
    padding: 20px 24px;
    color: var(--art-popup-secondary);
    font-size: 14px;
    line-height: 24px;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast).layui-layer-dialog .layui-layer-padding {
    padding: 22px 24px 22px 58px;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-btn,
.layui-layer:not(.login-verify-toast):not(.login-status-toast).layui-layer-easy .layui-layer-btn {
    min-height: 60px;
    padding: 12px 20px 16px !important;
    overflow: hidden;
    border-top: 1px solid var(--art-popup-border-light);
    background: var(--art-popup-surface) !important;
    text-align: right !important;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-btn a,
.layui-layer:not(.login-verify-toast):not(.login-status-toast).layui-layer-easy .layui-layer-btn a {
    min-width: 68px;
    height: 34px;
    margin: 0 0 0 10px;
    padding: 0 16px;
    color: var(--art-popup-secondary) !important;
    background: #ffffff !important;
    border: 1px solid #dcdfe6 !important;
    border-radius: 6px;
    font-size: 14px;
    line-height: 32px;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-btn a:hover,
.layui-layer:not(.login-verify-toast):not(.login-status-toast).layui-layer-easy .layui-layer-btn a:hover {
    color: var(--art-popup-primary) !important;
    background: #ecf5ff !important;
    border-color: #c6e2ff !important;
    opacity: 1;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-btn .layui-layer-btn0,
.layui-layer:not(.login-verify-toast):not(.login-status-toast).layui-layer-easy .layui-layer-btn .layui-layer-btn0 {
    color: #ffffff !important;
    background: var(--art-popup-primary) !important;
    border-color: var(--art-popup-primary) !important;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-btn .layui-layer-btn0:hover,
.layui-layer:not(.login-verify-toast):not(.login-status-toast).layui-layer-easy .layui-layer-btn .layui-layer-btn0:hover {
    color: #ffffff !important;
    background: #66b1ff !important;
    border-color: #66b1ff !important;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-footer,
.layui-layer:not(.login-verify-toast):not(.login-status-toast).layui-layer-easy .layui-layer-footer {
    color: var(--art-popup-secondary);
    background: var(--art-popup-surface) !important;
    border-top: 1px solid var(--art-popup-border-light);
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast).layui-layer-prompt .layui-layer-content {
    padding: 20px 24px 10px;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast).layui-layer-prompt .layui-layer-input {
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0 12px;
    color: var(--art-popup-text);
    background: #ffffff;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    font-size: 14px;
    line-height: 34px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast).layui-layer-prompt textarea.layui-layer-input {
    height: 100px;
    padding: 8px 12px;
    line-height: 20px;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast).layui-layer-prompt .layui-layer-input:focus {
    border-color: var(--art-popup-primary);
    box-shadow: 0 0 0 2px rgba(64, 158, 255, .12);
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast).layui-layer-msg {
    min-width: 180px;
    color: var(--art-popup-text);
    background: #ffffff !important;
    border: 1px solid var(--art-popup-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08), 0 3px 6px -4px rgba(0, 0, 0, .12) !important;
}

.layui-layer:not(.login-verify-toast):not(.login-status-toast).layui-layer-msg .layui-layer-content {
    padding: 12px 20px;
    color: var(--art-popup-text);
    background: #ffffff;
    font-size: 14px;
}

/* Keep the same popup proportions on small screens. */
@media screen and (max-width: 640px) {
    .layui-layer:not(.login-verify-toast):not(.login-status-toast):not(.layui-layer-loading):not(.layui-layer-photos):not(.layui-layer-tips) {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px);
    }

    .layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-title {
        height: 50px;
        padding-left: 16px;
        line-height: 50px;
    }

    .layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin {
        top: 10px;
        right: 10px;
    }

    .layui-layer:not(.login-verify-toast):not(.login-status-toast).layui-layer-dialog .layui-layer-content,
    .layui-layer:not(.login-verify-toast):not(.login-status-toast).layui-layer-dialog .layui-layer-padding {
        padding: 18px 16px;
    }

    .layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-btn,
    .layui-layer:not(.login-verify-toast):not(.login-status-toast).layui-layer-easy .layui-layer-btn {
        padding: 10px 12px 14px !important;
    }
}

/* Dark mode follows the Art Design Pro surface and border contrast. */
html.dark .layui-layer:not(.login-verify-toast):not(.login-status-toast):not(.layui-layer-loading):not(.layui-layer-photos):not(.layui-layer-tips),
body.elem-style-dark .layui-layer:not(.login-verify-toast):not(.login-status-toast):not(.layui-layer-loading):not(.layui-layer-photos):not(.layui-layer-tips) {
    --art-popup-text: #e5e7eb;
    --art-popup-secondary: #a3aab8;
    --art-popup-border: #363a45;
    --art-popup-border-light: #30343d;
    --art-popup-surface: #23262e;
    --art-popup-shadow: 0 12px 32px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .2);
}

html.dark .layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin > a:hover,
html.dark .layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin > span:hover,
body.elem-style-dark .layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin > a:hover,
body.elem-style-dark .layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-setwin > span:hover {
    background: #30343d !important;
}

html.dark .layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-btn a,
body.elem-style-dark .layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-btn a {
    color: #d1d5db !important;
    background: #2b2f38 !important;
    border-color: #4b5563 !important;
}

html.dark .layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-btn a:hover,
body.elem-style-dark .layui-layer:not(.login-verify-toast):not(.login-status-toast) .layui-layer-btn a:hover {
    color: #8cc8ff !important;
    background: #1f3a56 !important;
    border-color: #409eff !important;
}

html.dark .layui-layer:not(.login-verify-toast):not(.login-status-toast).layui-layer-prompt .layui-layer-input,
body.elem-style-dark .layui-layer:not(.login-verify-toast):not(.login-status-toast).layui-layer-prompt .layui-layer-input {
    color: #e5e7eb;
    background: #1f2229;
    border-color: #4b5563;
}