/* 模态框组件样式 */  
.modal-overlay {  
    position: fixed;  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    background: rgba(0, 0, 0, 0.5);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    z-index: 1000;  
}  
  
.modal-content {  
    background: var(--surface-color);  
    border-radius: 8px;  
    box-shadow: var(--shadow-lg);  
    max-width: 600px;  
    width: 90%;  
    max-height: 80vh;  
    overflow-y: auto;  
}  
  
.modal-header {  
    padding: 20px 24px;  
    border-bottom: 1px solid var(--border-color);  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
}  
  
.modal-title {  
    font-size: 18px;  
    font-weight: 600;  
}  
  
.modal-close {  
    background: none;  
    border: none;  
    font-size: 24px;  
    cursor: pointer;  
    color: var(--text-secondary);  
}  
  
.modal-body {  
    padding: 24px;  
}  
  
.modal-footer {  
    padding: 16px 24px;  
    border-top: 1px solid var(--border-color);  
    display: flex;  
    justify-content: flex-end;  
    gap: 12px;  
}

.modal-close:hover {  
    background: var(--hover-color);  
}

/* 确认弹窗遮罩层 */  
.dialog-overlay {  
    position: fixed;  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    background: rgba(0, 0, 0, 0.5);  
    z-index: 10100;  
    animation: modalFadeIn 0.2s ease;  
}  
  
/* 自定义确认弹窗 */  
.custom-confirm-dialog {  
    position: fixed;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    background: var(--surface-color);  
    border-radius: 8px;  
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);  
    z-index: 10101;  
    min-width: 400px;  
    max-width: 500px;  
    animation: modalSlideIn 0.3s ease;  
}  
  
/* 弹窗头部 */  
.dialog-header {  
    padding: 20px 24px;  
    border-bottom: 1px solid var(--border-color);  
}  
  
.dialog-header h3 {  
    margin: 0;  
    font-size: 18px;  
    font-weight: 600;  
    color: var(--text-primary);  
}  
  
/* 弹窗内容 */  
.dialog-body {  
    padding: 24px;  
}  
  
.dialog-body p {  
    margin: 0;  
    font-size: 14px;  
    line-height: 1.6;  
    color: var(--text-secondary);  
}  
  
/* 弹窗底部 */  
.dialog-footer {  
    padding: 16px 24px;  
    border-top: 1px solid var(--border-color);  
    display: flex;  
    justify-content: flex-end;  
    gap: 12px;  
}  
  
.dialog-footer .btn {  
    min-width: 80px;  
}  

/* 输入弹窗 */  
.custom-input-dialog {  
    position: fixed;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    background: var(--surface-color);  
    border-radius: 8px;  
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);  
    z-index: 10101;  
    min-width: 400px;  
    max-width: 500px;  
    animation: modalSlideIn 0.3s ease;  
}  
  
/* 提示弹窗 */  
.custom-alert-dialog {  
    position: fixed;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    background: var(--surface-color);  
    border-radius: 8px;  
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);  
    z-index: 10101;  
    min-width: 400px;  
    max-width: 500px;  
    animation: modalSlideIn 0.3s ease;  
} 
  
.custom-input-dialog .dialog-input {  
    width: 100%;  
    padding: 10px 12px;  
    border: 1px solid var(--border-color);  
    border-radius: 6px;  
    font-size: 14px;  
    margin-top: 10px;  
    background: var(--background-color);  
    color: var(--text-primary);  
}  
  
.custom-input-dialog .dialog-input:focus {  
    outline: none;  
    border-color: var(--primary-color);  
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);  
}

/* 动画 */  
@keyframes modalFadeIn {  
    from { opacity: 0; }  
    to { opacity: 1; }  
}  
  
@keyframes modalSlideIn {  
    from {  
        opacity: 0;  
        transform: translate(-50%, -48%);  
    }  
    to {  
        opacity: 1;  
        transform: translate(-50%, -50%);  
    }  
}  
  
/* 响应式优化 */  
@media (max-width: 600px) {  
    .custom-confirm-dialog {  
        min-width: 90%;  
        max-width: 90%;  
    }  
}