.output-container {
    display: flex;
    /* 启用flexbox布局 */
    align-items: flex-end;
    /* 使按钮与输出框顶部对齐 */
    position: fixed;
    /* 固定定位 */
    bottom: 0;
    /* 距离页面底部为0 */
    left: 0;
    /* 距离页面左边为0 */
    z-index: 1;
    /* 确保输出框在页面上的其他内容之上 */
    width: 100%;
}

.output-box {
    width: 100%;
    /* 这里可以添加其他样式，如背景色、内边距等 */
    background-color: white;
    padding: 10px;
    border: 1px solid #ccc;
    color: black;
}

.buttons-container {
    display: flex;
    flex-direction: column;
    /* 使按钮垂直排列 */
    justify-content: space-between;
    /* 分散按钮 */
}

.buttons-container button {
    margin-bottom: 5px;
    /* 为按钮添加一些间距 */
}

/* 最后一个按钮不需要底部边距 */
.buttons-container button:last-child {
    margin-bottom: 0;
}

.checkboxes-container {
    display: block;
    flex-wrap: wrap;
    gap: 10px;
    /* 设置选择框之间的间隔 */
}

.category {
    margin-bottom: 20px;
    flex: 1 1 200px;
    /* 每个类别的选择框将至少有200px宽，并且可以伸缩 */
    margin-bottom: 20px;
    /* 设置类别选择框的下边距 */
}

/* 隐藏原生复选框 */
.custom-checkbox input[type="checkbox"] {
    display: none;
}

/* 创建一个新的自定义复选框外观 */
.custom-checkbox .checkbox-label {
    position: relative;
    padding-left: 25px;
    /* 留出空间放置自定义复选框图标 */
    padding: 5px; /* 添加内边距，增加可点击区域 */

    border: 2px solid #ccc; /* 可选，为了可视化区域 */
    margin-bottom: 5px; /* 添加一些间距 */
    margin-left: 5px;
    cursor: pointer;
    display: inline-block;
}

/* 在标签内部添加复选框的自定义外观 */
.custom-checkbox .checkbox-label::before {
    display: none;
}

.custom-checkbox input[type="checkbox"]:checked + .checkbox-label {
    font-weight: bold; /* 复选框选中时的标签样式 */
    background-color: #bfdeff;
}
/* 鼠标悬停时的样式 */
.custom-checkbox :hover {
    background-color: #f5b6b6;
    border-color: #999;
}

.tabs-container {
    display: flex;
    justify-content: space-around;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
    padding: 10px 0;
}

.tab {
    padding: 10px 20px;
    cursor: pointer;
    background-color: transparent;
    outline: 1px;
}

.tab.active {
    border-bottom: 2px solid blue;
}