/* 弹窗的整体样式，覆盖整个屏幕 */
.custom-modal {
    display: none; /* 默认隐藏，通过 JS 设置 display: flex 显示 */
    position: fixed; /* 固定定位，不随页面滚动 */
    left: 0; /* 定位到屏幕左边缘 */
    top: 0; /* 定位到屏幕顶部 */
    width: 100%; /* 宽度占满整个屏幕 */
    height: 100%; /* 高度占满整个屏幕 */
    background: rgba(0, 0, 0, 0.7); /* 保持 70% 透明度，遮罩效果明显 */
    justify-content: center; /* 水平居中内容 */
    align-items: center; /* 垂直居中内容 */
    z-index: 9999; /* 保持高 z-index，确保在最上层 */
}

/* 弹窗内容区域 */
.modal-content {
    display: flex; /* 保持 flex 布局 */
    flex-direction: column; /* 垂直排列（标题、内容、按钮） */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    background: white; /* 背景色为白色 */
    padding: 20px; /* 保持原有内边距 */
    border-radius: 12px; /* 保持圆角 12px */
    width: 280px; /* 保持宽度 280px */
    max-width: 90%; /* 保持最大宽度，适配小屏幕 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 保持阴影，增加立体感 */
}

/* 标题样式 */
#modalTitle {
    font-size: 16px; /* 减小字体大小（原 16px），与内容字体一致 */
    font-weight: 600; /* 字体稍粗 */
    color: #333; /* 深灰色文字 */
    margin-bottom: 12px; /* 保持下外边距 */
    text-align: center; /* 居中对齐 */
}

/* 内容样式 */
#modalMessage {
    font-size: 14px; /* 保持字体大小 */
    color: #555; /* 稍深的灰色 */
    line-height: 1.5; /* 保持行高 */
    margin-bottom: 32px; /* 增加下外边距（原 24px），拉开与按钮的距离 */
    text-align: center; /* 内容居中 */
}

/* 按钮容器 */
.modal-buttons {
    display: flex; /* 保持 flex 布局 */
    justify-content: center; /* 按钮居中排列 */
    width: 100%; /* 占满内容区域宽度 */
    gap: 16px; /* 保持 16px 间距 */
}

/* 取消按钮 */
#modalCancel {
    background: #d3d3d3; /* 添加灰色背景 */
    color: #333; /* 深灰色文字 */
    padding: 8px 20px; /* 保持内边距 */
    border: none; /* 保持无边框 */
    cursor: pointer; /* 保持鼠标手型 */
    border-radius: 6px; /* 保持圆角 6px */
    flex: 1; /* 均分宽度 */
    font-size: 14px; /* 保持字体大小 */
    font-weight: 500; /* 字体稍粗 */
    transition: background 0.2s ease; /* 背景色渐变效果 */
}

/* 取消按钮鼠标悬停效果 */
#modalCancel:hover {
    background: #c0c0c0; /* 悬停时背景变深 */
}

/* 确认按钮 */
#modalConfirm {
    background: #007bff; /* 添加蓝色背景 */
    color: white; /* 白色文字 */
    padding: 8px 20px; /* 保持内边距 */
    border: none; /* 保持无边框 */
    cursor: pointer; /* 保持鼠标手型 */
    border-radius: 6px; /* 保持圆角 6px */
    flex: 1; /* 均分宽度 */
    font-size: 14px; /* 保持字体大小 */
    font-weight: 500; /* 字体稍粗 */
    transition: background 0.2s ease; /* 背景色渐变效果 */
}

/* 确认按钮鼠标悬停效果 */
#modalConfirm:hover {
    background: #0056b3; /* 悬停时背景变深 */
}