.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* 图标和文字之间的间距 */
    padding: 8px 12px;
    border: 1px solid #007bff; /* 蓝色边框 */
    border-radius: 6px;
    background-color: white; /* 白色背景 */
    color: #007bff; /* 蓝色文字 */
    cursor: pointer;
    transition: all 0.2s ease; /* 平滑过渡效果 */
    font-size: 14px;
}

.icon-btn:hover {
    background-color: #007bff; /* 蓝色背景 */
    color: white; /* 白色文字 */
}

.icon-btn:disabled {
    border-color: #ccc;
    color: #ccc;
    cursor: not-allowed;
}

.icon-btn:disabled:hover {
    background-color: transparent;
    color: #ccc;
}

.icon-btn i {
    font-size: 16px; /* 图标大小 */
}



/* 按钮组容器 */
.button-group {
    display: flex;
    gap: 8px;
    align-items: center; /* 垂直居中 */
}

/* 分割线样式 */
#sepLine {
    margin: 15px auto 25px;
    width: 30%;
    /*border-bottom: 1px solid #ddd; !* 更柔和的分割线 *!*/
}

/* 警告信息容器 */
#alartWrapper {
    /* 你可以根据需要添加样式，例如字体颜色、背景色等 */
}

/* 滑块容器 */
.slider-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 覆盖 Bootstrap 样式 (如果需要) */
.btn-outline-primary {
    border: none; /* 移除 Bootstrap 边框 */
    color: inherit; /* 继承父元素的颜色 */
    background-color: transparent; /* 透明背景 */
    padding: 0; /* 移除 Bootstrap 内边距 */
}

.btn-outline-primary:hover {
    color: inherit; /* 继承父元素的颜色 */
    background-color: transparent; /* 透明背景 */
    border-color: transparent; /* 透明边框 */
}

.btn-outline-primary:focus,
.btn-outline-primary:active {
    /*box-shadow: none !important; !* 移除焦点/激活时的阴影 *!*/
}

/* 自定义select样式 */
.custom-select {
    /* 基础样式 */
    border: 1px solid #ced4da;
    border-radius: 0; /* 直角矩形 */
    background: transparent;
    padding: 6px 32px 6px 12px; /* 右侧留出箭头空间 */
    color: #495057;
    font-size: 14px;
    line-height: 1.5;

    /* 去除默认样式 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* 自定义下拉箭头 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M2 5l6 6 6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;

    /* 过渡效果 */
    transition: border-color 0.2s ease;
}

/* 悬停状态 */
.custom-select:hover {
    border-color: #888;
}

/* 焦点状态 */
.custom-select:focus {
    outline: none;
    border-color: #555;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
}

/* 父容器左对齐 */
.card-header {
    justify-content: flex-start !important; /* 强制左对齐 */
    gap: 15px; /* 添加右侧间距 */
}

.resizer:hover{
    /*background-color:  #f0f0f0 !important;*/
}

#cartoonArea{
    height: 50%;
    max-height: 50vh;
        max-width: 65vw;
    width: 100%;
    /*background: linear-gradient(135deg, #6a11cb, #2575fc);*/
    overflow: hidden; /* 裁剪超出部分 */
    position: relative;
    border: 1px solid #4CAF50; /* 绿色边框 */
    padding: 20px; /* 内边距 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
    /*background: #f9f9f9; !* 背景色 *!*/
    background-color: transparent; /* 完全透明 */

    transition: all 0.3s ease; /* 添加过渡效果 */
    margin: 10px;
}

@keyframes bounce {
    0% {
        transform: scale(0.5) translateY(100px);  /* 减少初始移动距离 */
        opacity: 0;
    }
    60% {
        transform: scale(1.15) translateY(-20px);  /* 降低弹跳幅度 */
        opacity: 1;
    }
    75% {
        transform: scale(0.95) translateY(10px);
    }
    90% {
        transform: scale(1.05) translateY(-5px);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

.bounce-animation {
    animation: bounce 0.6s ease-out forwards; /* 添加动画，持续时间为0.6秒 */
}

#robotImage {
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out; /* 控制渐变消失效果 */
    position: absolute; /* 使其能够自由定位 */
    cursor: pointer; /* 默认鼠标指针为点击 */
}

.robot {
    /* 添加动画属性优化 */
    will-change: transform, opacity;
    transform-origin: center bottom;
    position: fixed;
    top: 5%; right: 0;
    width: 100px;
    height: 100px;
    transform: translateY(-50%);
    z-index: 999;
    display: none;
}