#heatmap-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin:20px 0;
}

#month-labels {
	display: grid;
	grid-template-columns: repeat(42, 15px); /* 42 列代表一年中的周数 */
	gap: 2px;
	margin-bottom: 5px;
}

.month-label {
	text-align: center;
	font-size: 10px;
	color:#ccc;
}

#heatmap {
	display: grid;
	grid-template-columns: repeat(42, 15px); /* 42 列代表一年中的周数 */
	grid-template-rows: repeat(7, 15px); /* 每周有7天 */
	gap: 2px;
	position: relative; /* 使 tooltip 的绝对定位基于此容器 */
}

.heatmap-cell {
	width: 15px;
	height: 15px;
	background-color: #ebedf0; /* 默认颜色 */
	border-radius: 6px;
	position: relative; /* 使 tooltip 的绝对定位基于此元素 */
}

.memo-active {
    background-color: #7fd896;
}

.movie-active {
    background-color: #91c7ff;
}

.both-active {
    background: linear-gradient(135deg, #58ed7e, #57a4f3 100%);
}

.tooltip {
	visibility: hidden; /* 默认隐藏 */
	position: absolute;
	background-color: rgba(0, 0, 0, 0.8);
	color: #fff;
	text-align: center;
	padding: 5px;
	border-radius: 6px;
	z-index: 1; /* 确保提示框在上方 */
	top: -25px;
	left: 50%;
	transform: translateX(-50%);
}

.heatmap-cell:hover .tooltip {
	visibility: visible; /* 鼠标悬停时显示 */
}


@media (max-width: 768px) {
	#heatmap-container{display:none;}
	}

}