body, html {
  height: 100%;
  margin: 0;
  font-family: 'Arial', sans-serif;
  background-color: #1c1c1c; /* 深色背景 */
  color: #b8b8b8; /* 亮色文字 */
  padding-top: 30px; /* 为 header 留出空间 */
}

* {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard syntax */
}

.header {
  width: 100%;
  background-color: #333;
  color: white;
  text-align: left;
  padding-left: 20px;
  display: flex; /* 启用flex布局 */
  align-items: center; /* 子元素垂直居中 */
  position: fixed; /* 使 header 固定在顶部 */
  top: 0; /* 定位到页面顶部 */
  z-index: 25; /* 确保 header 位于其他内容之上 */
}

.tabs {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background-color: #333;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.2);
}

.tab-link {
  flex-grow: 1;
  text-align: center;
  line-height: 60px;
  background-color: inherit;
  color: #b8b8b8; /* 文字颜色 */
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 17px;
  transition: background-color 0.3s;
}

.tab-link:hover, .tab-link.active {
  background-color: #444; /* 更深的背景色 */
}

.tab-content {

  display: none; /* Hide all content by default */
  padding: 20px;
  height: calc(100% - 60px); /* Account for tab height */
  overflow-y: auto; /* Add scroll for content overflow */
}

.control-monitoring {
  font-family: 'Courier New', Courier, monospace; /* 更具科技感的字体 */
  font-size: 16px;
  line-height: 1.6;
}

.language-switcher {
  position: fixed;
  top: 0;
  right: 0;
  padding-right: 20px;
  height: 81px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  z-index: 26;
}

.control_item {
  font-family: 'Courier New', Courier, monospace; /* 更具科技感的字体 */
  font-size: 30px;
  line-height: 1.6;
}

.language-switcher button {
  background-color: #34495e; /* 按钮背景颜色 */
  color: white; /* 文字颜色 */
  border: none; /* 去除边框 */
  border-radius: 5px; /* 圆角 */
  padding: 5px 10px; /* 内边距 */
  margin: 0 2px; /* 两个按钮之间的间隔 */
  cursor: pointer; /* 鼠标悬停时的指针样式 */
  height: 40px;
  transition: background-color 0.3s; /* 平滑背景色过渡 */
}

.language-switcher button:hover {
  background-color: #4a6fa5; /* 鼠标悬停时的背景颜色 */
}

.container {
  position: relative;
  width: 500px; /* 调整为你的图片宽度 */
  height: 300px; /* 调整为你的图片高度 */
}
.container img {
  width: 100%;
  height: auto;
  margin-bottom: 100px;
}
.wheel-info {
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  position: absolute;
  color: white; /* 根据需要调整文本颜色 */
  background-color: rgba(0, 0, 0, 0.9); /* 轻微的背景色 */
  padding: 5px;
  border-radius: 5px; /* 圆角边框 */
  line-height: 7px;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;

}

.wheel-info-figure {
  margin: 0 auto;
}
/* 分别定位四个轮胎信息，这里的值需要根据实际图片尺寸调整 */
.front-left {
  top: 180px;
  left: 20px;
  width: 180px;
}
.front-right {
  top: 180px;
  right: 20px;
  width: 180px;
}
.back-left {
  top: 650px;
  left: 20px;
  width: 180px;
}
.back-right {
  top: 650px;
  right: 20px;
  width: 180px;
}
.steer-throttle{
  top: 450px;
  left: 50px;
  width: 200px;
}
.actua-steer-throttle{
  top: 450px;
  left: 300px;
  width: 200px;
}
.wheel-name{
  font-weight: bold;
  color: rgb(7, 244, 7);
  font-size: 15px;
}

.card-container {
  font-family: 'Courier New', Courier, monospace;
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 卡片之间的间距 */
  overflow-y: auto; /* 当内容超过容器高度时允许滚动 */
  padding-top: 20px;
}

.card {
  flex: 0 1 200px; /* 卡片的基础宽度为200px，但允许收缩以适应容器宽度 */
  background-color: #3f3d3d; /* 卡片的背景颜色，可根据需要调整 */
  padding: 20px; /* 卡片内边距 */
  border-radius: 10px; /* 卡片圆角 */
  transition: background-color 0.3s;
}

/* 弹出窗口背景遮罩 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 50;
  display: none;
}

/* 弹出窗口本身 */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background-color: #2c2c2c;
  padding: 20px;
  border-radius: 10px;
  z-index: 51;
  display: flex;
  flex-direction: column;
}

/* 输入框样式 */
.modal input[type="text"] {
  width: 90%;
  padding: 10px;
  margin: 10px 0;
  background-color: #3f3d3d;
  border: 1px solid #555;
  border-radius: 5px;
  color: white;
}

/* 按钮样式 */
.modal button {
  padding: 10px 20px;
  margin-right: 10px;
  margin-top: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* 保存按钮 */
.modal .save-btn {
  background-color: #5b5b5b;
  color: #d1d1d1
}

.modal .save-btn:hover {
  background-color: #c7c7c7;
  color: #7d7d7d
}

/* 关闭按钮 */
.modal .close-btn {
  background-color: #5b5b5b;
  color: #d1d1d1
}

.modal .close-btn:hover {
  background-color: #c7c7c7;
  color: #7d7d7d
}

.vector-show {
  margin-left: 30px;
}

.gear_show_big {
  font-size: 80px;
  font-weight: 900;
  text-align: center;
  padding-top: 30px;
}

.current_gear_title {
  font-size: 23px;
  font-weight: bold;
  text-align: center;
  padding-top: 18px;
}

.map_container_card{
  z-index: 30;
  position: fixed;
  top: 50px;
  left: 50px;
}

.card_bordered {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  /* border: 2px solid #000; */
  /* border-color: #c7c7c7; */
}

#default_ip {
  line-height: 20px;
}

#default_ip a{
  color: #8f8f8f;
  margin-top: 10px;
}

.status-card {
  background-color: #2c2c2c; /* 卡片背景颜色 */
  color: #b8b8b8; /* 文字颜色 */
  padding: 20px; /* 内边距 */
  border-radius: 10px; /* 圆角 */
  margin: 20px; /* 外边距 */
}

.status-card h2 {
  margin: 0 0 20px 0; /* 标题外边距 */
}

.status-card ul {
  list-style: none; /* 去除列表符号 */
  padding: 0; /* 去除内边距 */
  margin: 0; /* 去除外边距 */
}

.status-card li {
  display: flex; /* 使用Flex布局 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 10px; /* 项目间距 */
  font-weight: bold;
  font-size: 20px;
}

.status-dot {
  height: 15px; /* 圆点大小 */
  width: 15px; /* 圆点大小 */
  border-radius: 50%; /* 圆形 */
  margin-right: 10px; /* 与文字间距 */
  /* margin-top: -1px; */
}


.floating-log-card {
  position: fixed; /* 使卡片悬浮 */
  left: 300px; /* 距离页面右边距 */
  top: 20px; /* 距离页面底部 */
  width: 300px; /* 卡片宽度 */
  background-color: #2c2c2c; /* 卡片背景颜色 */
  color: #b8b8b8; /* 文字颜色 */
  padding: 20px; /* 内边距 */
  border-radius: 10px; /* 圆角 */
  z-index: 31; /* 确保卡片位于顶层 */
  height: 400px; /* 最大高度 */
  overflow-y: auto; /* 超出部分滚动 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 阴影效果 */
}

.floating-log-card h2 {
  margin: 0 0 10px 0; /* 标题外边距 */
}

.floating-log-card ul {
  list-style: none; /* 去除列表符号 */
  padding: 0; /* 去除内边距 */
  margin: 0; /* 去除外边距 */
}

.floating-log-card li {
  margin-bottom: 10px; /* 项目间距 */
  word-wrap: break-word; /* 长单词或URL换行 */
  transition: background-color 0.3s;
}

.floating-log-card strong {
  color: #e2e2e2; /* 标题颜色 */
}

.floating-log-card small {
  display: block; /* 让时间戳单独一行 */
  color: #7d7d7d; /* 时间戳颜色 */
  margin-top: 5px; /* 时间戳与消息内容间距 */
}

.floating-log-card li:hover {
  background-color: rgba(158, 158, 158, 0.2);
}

#compassArrow{
  width: 100%;
  height: 100%;
  display: block;
}

/* Achievement Banner */
.achievement-banner {
  position: fixed;
  top: 60px;
  left: 20px;
  background-color: #3a3a1f;
  color: #fff3b0;
  border: 1px solid #6c6c3b;
  padding: 8px 12px;
  border-radius: 8px;
  z-index: 40;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  font-weight: bold;
}