body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #333;
    color: white;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

.area {
    border: 2px solid #444;
    padding: 20px;
    background-color: #222;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

input[type="text"], input[type="range"] {
    width: 100%;
    margin: 10px 0;
}

label {
    display: block;
}

@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}.sub-area {
    margin-top: 20px;
    padding: 10px;
    background-color: #1c1c1c; /* 暗色调背景 */
    border: 1px solid #444; /* 边框 */
}


.kpi-container {
    display: flex;
    justify-content: space-around; /* 使子元素在容器内平均分布 */
    gap: 20px; /* 子元素之间的间距 */
}

.sub-areas {
    flex: 1; /* 使所有子元素等宽 */
    margin-top: 20px;
    padding: 10px;
    background-color: #1c1c1c; /* 暗色调背景 */
    border: 1px solid #444; /* 边框 */
}
#syncData {
    padding: 10px 20px;
    border: none;
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, box-shadow 0.3s;
}

#syncData:hover {
    background-color: #45a049;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#syncData:active {
    background-color: #3e8e41;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Tooltip container */
.help-icon {
position: relative;
display: inline-block;
}

.help-icon .fas {
cursor: pointer;
}

.help-text {
visibility: hidden;
width: auto;
background-color: black;
color: #fff;
border-radius: 6px;
padding: 5px 10px;

/* 定位 */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;

/* 自适应大小 */
white-space: nowrap;
}

.help-icon:hover .help-text {
visibility: visible;
}
/*横向排列*/
.flex-container {
display: flex;
align-items: center; /* 确保所有元素在交叉轴上居中对齐 */
}

.help-icon {
position: relative;
display: inline-flex; /* 使用inline-flex以保持图标的大小不受Flexbox影响 */
margin-right: 8px; /* 为了在问号图标和标签之间添加一些间隙 */
}

.help-text {
visibility: hidden;
width: auto;
background-color: black;
color: #fff;
border-radius: 6px;
padding: 5px 10px;

/* 定位 */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
transform: translateX(-50%); /* 使用transform来精确居中 */

/* 自适应大小 */
white-space: nowrap;
}

.help-icon:hover .help-text {
visibility: visible;
}


#movement {
    width: 200px; /* 设置输入框的宽度 */
    padding: 8px 12px; /* 内边距增加输入空间和美观性 */
    font-size: 16px; /* 文本大小 */
    border: 1px solid #ccc; /* 边框颜色 */
    border-radius: 4px; /* 圆角边框 */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
    outline: none; /* 移除焦点时的默认外边框 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
}

#movement:focus {
    border-color: #4A90E2; /* 获得焦点时边框颜色变化 */
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5); /* 获得焦点时阴影更明显 */
}