/* 全局页面布局和基础样式 */
body {
    font-family: Arial, sans-serif; /* 选择清晰易读的无衬线字体，提高整体可读性 */
    background-color: #f0f2f5; /* 使用柔和的灰蓝色背景，减少视觉疲劳 */
    display: flex; /* 使用弹性布局使内容垂直和水平居中 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    min-height: 100vh; /* 确保内容占满整个视窗高度 */
    margin: 0; /* 移除默认外边距 */
    color: #333; /* 选择深灰色文字，提高对比度和可读性 */
}

/* 主容器样式，用于包裹整个模拟系统界面 */
.container {
    background-color: white; /* 使用白色背景创建层次感 */
    border-radius: 12px; /* 添加圆角，使界面更现代化 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 添加柔和的阴影，增加界面深度 */
    padding: 25px; /* 内部元素的内边距 */
    text-align: center; /* 居中对齐所有内容 */
    max-width: 500px; /* 限制最大宽度，保持界面紧凑 */
    width: 95%; /* 响应式宽度，适应不同屏幕 */
}

/* 模拟控制区域的布局样式 */
.simulation-controls {
    margin-bottom: 10px; /* 与下方内容的间距 */
    display: flex; /* 使用弹性布局排列控件 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    gap: 10px; /* 增加控件之间的间距 */
    width: 100%; /* 占满容器宽度 */
}

/* 模式选择标签样式 */
.simulation-controls label {
    font-weight: bold; /* 加粗字体增加视觉权重 */
    margin-right: 1px; /* 最小间距，紧邻下拉框 */
    white-space: nowrap; /* 防止标签换行 */
    color: #555; /* 柔和的文字颜色，不过于醒目 */
}

/* 画布样式 */
#simulationCanvas {
    border: 1px solid #ddd; /* 保留细微边框 */
    background-color: white; /* 白色背景 */
    border-radius: 0; /* 移除圆角 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 保留轻微阴影 */
}

/* 通用按钮和选择框样式 */
button, select {
    padding: 5px 5px; /* 进一步减小内边距 */
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
    background-color: #4CAF50; /* 绿色背景，传达积极、可操作的感觉 */
    color: white; /* 白色文字，最大化可读性 */
    border: none; /* 移除默认边框 */
    border-radius: 4px; /* 略微减小圆角 */
    width: fit-content; /* 按钮宽度正好匹配文字 */
    transition: background-color 0.3s ease; /* 颜色变化的平滑过渡 */
    font-size: 14px; /* 进一步减小字体 */
}

/* 按钮悬停状态 */
button:hover, select:hover {
    background-color: #45a049; /* 略深的绿色，提供交互反馈 */
}

/* 按钮禁用状态 */
button:disabled, select:disabled {
    background-color: #cccccc; /* 灰色，表示不可交互 */
    cursor: not-allowed; /* 禁用光标 */
}

/* 下拉选择框特殊样式 */
select {
    background-color: #2196F3; /* 蓝色背景，与按钮区分 */
    appearance: none; /* 移除浏览器默认下拉样式 */
    padding-right: 15px; /* 为自定义下拉箭头留空间 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1 4l5 5 5-5z' fill='%23ffffff'/%3E%3C/svg%3E"); /* 内联SVG箭头 */
    background-repeat: no-repeat;
    background-position: right 6px center; /* 箭头位置 */
    max-width: 140px; /* 限制最大宽度 */
}

/* 模式选择下拉框 */
#loopType {
    flex-grow: 1; /* 减小下拉框分配的空间 */
}