body {
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    display: flex; /* 使用Flexbox布局 */
    flex-direction: column;
    height: 100vh; /* 容器高度为视口高度 */
}


.container {
    background-color: #ffffff;
    padding: 20px; /* 容器内边距 */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 80%;
    max-width: 800px;
    margin: auto; /* 水平自动边距 */
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

.status {
  font-size: 20px;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  min-width: 100px;
}

.awake {
  background-color: #4caf50;
  color: #ffffff;
}

.asleep {
  background-color: #f44336;
  color: #ffffff;
}

.unknown {
  background-color: #9e9e9e;
  color: #ffffff;
}

.history {
  margin-top: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

table, th, td {
  border: 1px solid #ddd;
}

th, td {
  padding: 8px;
  text-align: center;
}

th {
  background-color: #BEBEBE;
}

.summary {
  margin-top: 20px;
  padding: 10px;
  border-radius: 5px;
  text-align: left;
}

.summary.good {
  background-color: #dff0d8;
  color: #3c763d;
}

.summary.ok {
  background-color: #fcf8e3;
  color: #8a6d3b;
}

.summary.bad {
  background-color: #f2dede;
  color: #a94442;
}

.mental-state {
  font-size: 24px;
  font-weight: bold;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
}

.progress-container {
  position: relative;
  width: 100%;
  height: 30px;
  background: linear-gradient(to right, rgba(255, 0, 0, 0.5) 0%, rgba(255, 255, 0, 0.5) 20%, rgba(0, 128, 0, 0.5) 40%, rgba(0, 128, 0, 0.5) 50%, rgba(255, 255, 0, 0.5) 60%, rgba(255, 0, 0, 0.5) 80%);
  border-radius: 15px;
  margin-top: 20px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.progress-bar {
  position: absolute;
  height: 100%;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1));
  width: 10px;
  transition: width 0.4s ease-in-out;
}

.progress-text {
  margin-top: 3px;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 添加文字阴影 */
  z-index: 1; /* 确保文字在进度条之上 */
  position: relative; /* 确保 z-index 生效 */
  padding: 5px 8px; /* 添加内边距 */
  background: rgba(0, 0, 0, 0.3); /* 半透明背景 */
  border-radius: 10px; /* 圆角边框 */
  display: inline-block; /* 让背景和内边距围绕文字 */
}

/* 新增的类名 */
.asleep-row {
  background-color: #D3D3D3;
}

/* 抖动动画效果 */
@keyframes shake {
  0% { transform: translateX(-2px); }
  25% { transform: translateX(2px); }
  50% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

/* 屎黄色半透明背景样式 */
.poop-summary {
  padding: 20px;
  display: inline-block; /* 根据内容的宽度自适应 */
  font-size: 12px; /* 大字号 */
  background-color: rgba(194, 155, 41, 0.8); /* 屎黄色，80%透明度 */
  border-radius: 10px; /* 圆角边框 */
  color: #fff; /* 白色文字 */
  text-align: center; /* 中心对齐 */
  animation: shake 0.5s ease-in-out infinite; /* 添加抖动动画 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
  white-space: nowrap; /* 防止内容换行 */
  margin: 20px auto; /* 居中对齐 */
}
