body {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;    /* 垂直居中 */
    min-height: 100vh;      /* 确保body至少有视口高度 */
    margin: 0;
    background-color: #f4f7f6; /* 淡雅的背景色 */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 清晰的字体 */
    padding: 20px; /* 给body加点内边距，防止超大日历贴边 */
    box-sizing: border-box;
}

.calendar-container {
    background-color: #ffffff;
    border-radius: 15px; /* 增大圆角 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* 增强阴影 */
    overflow: hidden; /* 确保圆角生效 */
    width: 800px; /* << 修改：设置宽度为 800px */
    max-width: 95%; /* 添加最大宽度，以防屏幕过小 */
    text-align: center;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #6ab0de; /* 柔和的蓝色调 */
    color: white;
    padding: 20px 30px; /* << 修改：增大内边距 */
}

.calendar-header h2 {
    margin: 0;
    font-size: 1.6em; /* << 修改：增大字体 */
    font-weight: normal;
}

.nav-button {
    background: none;
    border: none;
    color: white;
    font-size: 2em; /* << 修改：增大按钮字体 */
    cursor: pointer;
    padding: 5px 15px; /* << 修改：调整内边距 */
    border-radius: 8px; /* 轻微增大圆角 */
    transition: background-color 0.2s ease;
}

.nav-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.nav-button:disabled {
    color: #b0d4ec; /* 禁用状态的颜色 */
    cursor: not-allowed;
    background-color: transparent; /* 移除悬停效果 */
}

.calendar-weekdays,
.calendar-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* 7列等宽 */
    padding: 15px 25px; /* << 修改：调整内边距 */
    gap: 10px; /* << 修改：增大格子之间的间隙 */
}

.calendar-weekdays div {
    font-weight: bold;
    color: #555;
    padding: 12px 0; /* << 修改：增大内边距 */
    font-size: 1.1em; /* << 修改：增大字体 */
}

/* 日期格子容器 */
.calendar-body div {
    display: flex; /* 使用 flex 居中内部的链接 a */
    justify-content: center;
    align-items: center;
    /* 注意：这里的高度现在由内部的 a 决定，或者可以设置 min-height */
    min-height: 65px; /* << 修改：设置最小高度，确保行高 */
    /* 移除这里的背景和过渡，移到 a 标签上 */
}

/* 非当前月份的日期格子（占位） */
.calendar-body div.empty {
    background-color: transparent;
    cursor: default;
}

/* 有效日期的链接样式 - 控制视觉呈现（如圆形） */
.calendar-body div a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;  /* << 新增：固定宽度 */
    height: 45px; /* << 新增：固定高度，与宽度相等形成圆形基础 */
    text-decoration: none;
    color: #333;
    border-radius: 50%; /* << 修改：保持圆形 */
    font-size: 1.1em; /* << 修改：增大日期数字字体 */
    transition: background-color 0.2s ease, color 0.2s ease;
    /* 可以添加一个微妙的边框 */
    /* border: 1px solid transparent; */
}

/* 鼠标悬停在日期链接上 */
.calendar-body div a:hover {
     background-color: #e0f7fa; /* 淡青色悬停背景 */
    /* border: 1px solid #bee7f0; */
}

/* 当前日期高亮 */
.calendar-body div.today a {
    background-color: #6ab0de; /* 与头部颜色一致 */
    color: white;
    font-weight: bold;
    /* border-color: #5a9bc8; */
}