:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --day-bg: #ffffff;
    --day-border: #ddd;
    --checked-bg: #1976D2;  /* 蓝色 - 已打卡背景 */
    /* 将浅紫色块文字颜色设置为黑色 */
    --single-archive-bg: #42A5F5;  /* 浅蓝色 - 单篇文章背景 */
    --single-archive-text: black;
    /* 将深紫色块文字颜色设置为黑色 */
    --multiple-archives-bg: #0D47A1;  /* 深蓝色 - 多篇文章背景 */
    --multiple-archives-text: black;
    --checked-text: white;
}

.dark-mode {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
    --day-bg: #2d2d2d;
    --day-border: #444;
    --checked-bg: #42A5F5;  /* 暗色模式下的蓝色 */
    --checked-text: black;
    --single-archive-bg: #64B5F6;  /* 暗色模式下的浅蓝色 */
    --single-archive-text: black;
    --multiple-archives-bg: #1976D2;  /* 暗色模式下的深蓝色 */
    --multiple-archives-text: black;
}

/* 添加在最前面 */
.check-in-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 主日历容器 */
#check-in-calendar {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

/* 年度日历容器 */
#annual-check-in-calendar {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* 日历头部 - 主日历和年度日历共用 */
.calendar-header,
.annual-month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.calendar-header {
    font-size: 1.5em;
}

.annual-month-header {
    font-size: 1.2em;
    text-align: center;
    font-weight: bold;
}

.calendar-header button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    color: var(--text-color);
}

/* 星期名称 - 主日历和侧边栏共用基础样式 */
.calendar-weekdays,
.sidebar-check-in .calendar-weekdays,
.annual-month-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 10px;
    margin-left: -6px;
    gap: 1px;
    color: #1976D2;  /* 蓝色 - 星期名称颜色 */
}

.calendar-weekdays div,
.annual-month-weekdays div {
    text-align: center;
    font-weight: bold;
    padding: 5px;
}

/* 侧边栏星期名称特定样式 */
.sidebar-check-in .calendar-weekdays {
    margin-bottom: 10px;
    column-gap: 0.5px;
    padding-left: -3px;
}

.sidebar-check-in .calendar-weekdays div {
    font-weight: bold;
    padding: 5px 0;
    width: 100%;
}

.sidebar-check-in .calendar-weekdays div:first-child {
    padding-left: -10px;
}

/* 年度日历星期名称特定样式 */
.annual-month-weekdays {
    margin-bottom: 5px;
    gap: 2px;
}

.annual-month-weekdays div {
    font-size: 0.8em;
}

/* 日期格子 - 基础样式 */
.calendar-days,
.sidebar-check-in .calendar-days,
.annual-month-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.calendar-day,
.annual-month-day {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--day-border);
    border-radius: 4px;
    background-color: var(--day-bg);
    box-sizing: border-box;
    transition: background-color 0.3s;
    cursor: pointer;
}

/* 主日历日期格子特定样式 */
.calendar-day {
    height: 40px;
}

/* 侧边栏日期格子特定样式 */
.sidebar-check-in .calendar-days {
    column-gap: 0.3px;
    row-gap: 0.3px;
}

.sidebar-check-in .calendar-day {
    height: 24px;
    width: 24px;
    font-size: 0.8em;
    font-weight: bold;
    margin: 1px;
}

/* 年度日历日期格子特定样式 */
.annual-month-days {
    gap: 2px;
}

.annual-month-day {
    height: 20px;
    font-size: 0.7em;
    border-radius: 2px;
}

/* 空日期格子 */
.calendar-day.empty,
.annual-month-day.empty {
    border: none;
    background-color: transparent;
}

/* 状态样式 - 保持独立不合并 */
.calendar-day.checked-in,
.sidebar-check-in .calendar-day.checked-in,
.annual-month-day.checked-in {
    background-color: var(--checked-bg);
    color: var(--checked-text);
    border-color: var(--checked-bg);
}

.calendar-day.single-archive,
.sidebar-check-in .calendar-day.single-archive,
.annual-month-day.single-archive {
    background-color: var(--single-archive-bg);
    color: var(--single-archive-text);
}

.calendar-day.multiple-archives,
.sidebar-check-in .calendar-day.multiple-archives,
.annual-month-day.multiple-archives {
    background-color: var(--multiple-archives-bg);
    color: var(--multiple-archives-text);
}

/* 悬停效果 */
.calendar-day:hover {
    background-color: #e0e0e0;
}

.dark-mode .calendar-day:hover {
    background-color: #444;
}

/* 月份选择器 */
.month-selector {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.month-selector select {
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid var(--day-border);
    background-color: var(--day-bg);
    color: var(--text-color);
}

/* 侧边栏月份选择器特定样式 */
.sidebar-check-in .month-selector select {
    padding: 2px 6px;
    font-size: 0.8em;
}

/* 侧边栏容器 */
.sidebar-check-in {
    border-radius: 8px;
    padding: 10px;
    margin: 10px 0;
}

.sidebar-check-in #check-in-calendar {
    max-width: 220px;
    margin: 0 auto;
    padding: 5px;
}

/* 年度选择器 */
#year-selector {
    max-width: 800px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 统一侧边栏日历字体样式 */
.sidebar-check-in .calendar-header {
    font-size: 1em; /* 统一字体大小 */
    font-family: inherit; /* 继承父元素字体 */
    font-weight: bold;
    margin-bottom: 8px;
    color: #1976D2;  /* 蓝色 - 侧边栏日历头部颜色 */
}

.sidebar-check-in .month-selector select {
    padding: 2px 6px;
    font-size: 0.8em; /* 统一字体大小 */
    font-family: inherit; /* 继承父元素字体 */
}

#year-selector select {
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid var(--day-border);
    background-color: var(--day-bg);
    color: var(--text-color);
    font-size: 0.9em; /* 统一字体大小 */
    font-family: inherit; /* 继承父元素字体 */
}

/* 侧边栏标题 */
#sidebar-archive-title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 1em;
    font-family: inherit; /* 继承父元素字体 */
}