/* 早睡热力图容器 */
#sleep-calendar-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06);
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
  transition: all 0.3s;
}
#sleep-calendar-card:hover {
  box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15);
}
.sleep-title {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 15px;
  color: #4c4948;
}

/* 格子布局 */
.sleep-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
}
.sleep-day {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background-color: #ebedf0; /* 默认灰色 */
  cursor: pointer;
  position: relative;
}

/* 颜色等级 */
.level-perfect { background-color: #216e39; } /* 完美 (<23:00) */
.level-good { background-color: #40c463; }    /* 不错 (<00:00) */
.level-late { background-color: #ffd33d; }    /* 晚睡 (<01:00) */
.level-bad { background-color: #ff4d4f; }     /* 修仙 (>01:00) */

/* 简单的提示框 (Tooltip) */
.sleep-day:hover::after {
  content: attr(data-date) "\A" attr(data-time); /* 显示日期和时间 */
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: pre; /* 允许换行 */
  z-index: 10;
  pointer-events: none;
}

/* 强制修复文章内的粗体显示 */
#article-container strong,
#article-container b {
  font-weight: bold !important;
  color: #000; /* 可选：如果你想让粗体字更黑一点，可以加这行 */
}

/* ====== 作者卡片按钮：好运渐变发光胶囊 ====== */
#aside-content .card-info #card-info-btn {
  /* 1. 核心渐变色：从左边的草绿过渡到右边的明黄 */
  background: linear-gradient(90deg, #1db54a, #f7d51d) !important;
  
  /* 2. 完美的胶囊圆角 */
  border-radius: 50px !important; 
  
  /* 3. 字体样式：纯白、加粗 */
  color: #ffffff !important; 
  font-weight: 800 !important; 
  letter-spacing: 1px !important; /* 字距稍微拉开一点更现代 */
  
  /* 4. 去除多余的边框和背景 */
  border: none !important; 
  
  /* 5. 🌟 核心灵魂：同色系的弥散发光阴影 */
  box-shadow: 0 8px 20px rgba(116, 212, 53, 0.4) !important; 
  
  /* 6. 动画过渡时间 */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; 
}

/* 鼠标悬停时的互动反馈 */
#aside-content .card-info #card-info-btn:hover {
  /* 微微上浮并放大 */
  transform: translateY(-3px) scale(1.02) !important; 
  /* 阴影范围扩大，光晕变亮 */
  box-shadow: 0 12px 25px rgba(116, 212, 53, 0.55) !important; 
}

/* 如果你的按钮里带了图标，让图标和文字有点间距 */
#aside-content .card-info #card-info-btn i {
  margin-right: 6px;
}