:root {
     --primary-color: #3a86ff;
     --secondary-color: #8338ec;
     --success-color: #38b000;
     --warning-color: #ffbe0b;
     --danger-color: #ff006e;
     --light-color: #f8f9fa;
     --dark-color: #212529;
 }

 body {
     font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
     background-color: #f5f7fb;
     color: #333;
     line-height: 1.6;
 }

 .countdown-display {
     background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
     border-radius: 20px;
     color: white;
     padding: 2.5rem;
     margin-bottom: 2.5rem;
     box-shadow: 0 10px 30px rgba(58, 134, 255, 0.3);
 }

 .countdown-number {
     font-size: 4rem;
     font-weight: 900;
     line-height: 1;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 }

 .countdown-label {
     font-size: 1.2rem;
     text-transform: uppercase;
     letter-spacing: 1px;
     opacity: 0.9;
 }

 .section-title {
     border-left: 5px solid var(--primary-color);
     padding-left: 1rem;
     margin-bottom: 1.5rem;
     font-weight: 700;
 }

 .calendar-container {
     background-color: white;
     border-radius: 15px;
     padding: 1.5rem;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
     margin-bottom: 2rem;
 }

 .calendar-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 1.5rem;
 }

 .month-title {
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--primary-color);
 }

 .calendar-grid {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 8px;
 }

 .calendar-day-header {
     text-align: center;
     font-weight: 700;
     color: #666;
     padding: 0.5rem 0;
     background-color: #f8f9fa;
     border-radius: 5px;
 }

 .calendar-day {
     aspect-ratio: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     border-radius: 8px;
     padding: 5px;
     cursor: pointer;
     transition: all 0.2s ease;
     position: relative;
     border: 2px solid transparent;
 }

 .calendar-day:hover {
     background-color: #f0f7ff;
     transform: translateY(-2px);
 }

 .calendar-day.today {
     border-color: var(--danger-color);
     background-color: #fff0f3;
 }

 .calendar-day.past {
     background-color: #f8f9fa;
     color: #999;
 }

 .calendar-day.future {
     background-color: #e9f5ff;
 }

 .day-number {
     font-size: 1.2rem;
     font-weight: 700;
     margin-bottom: 5px;
 }

 .day-countdown {
     font-size: 0.8rem;
     color: var(--danger-color);
     font-weight: 600;
 }

 .festival-label {
     font-size: 0.7rem;
     background-color: var(--warning-color);
     color: #000;
     padding: 1px 5px;
     border-radius: 10px;
     margin-top: 3px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 100%;
 }

 .solar-term-label {
     font-size: 0.7rem;
     background-color: var(--success-color);
     color: white;
     padding: 1px 5px;
     border-radius: 10px;
     margin-top: 3px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 100%;
 }

 .content-card {
     background-color: white;
     border-radius: 15px;
     padding: 1.5rem;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
     height: 100%;
     transition: transform 0.3s ease;
 }

 .content-card:hover {
     transform: translateY(-5px);
 }

 .card-icon {
     font-size: 2.5rem;
     color: var(--primary-color);
     margin-bottom: 1rem;
 }

 .tip-item {
     padding: 0.8rem 0;
     border-bottom: 1px solid #eee;
 }

 .tip-item:last-child {
     border-bottom: none;
 }

 .almanac-item {
     display: flex;
     justify-content: space-between;
     padding: 0.8rem 0;
     border-bottom: 1px solid #eee;
 }

 .almanac-item:last-child {
     border-bottom: none;
 }

 .almanac-good {
     color: var(--success-color);
 }

 .almanac-bad {
     color: var(--danger-color);
 }

 .motivation-quote {
     font-style: italic;
     font-size: 1.1rem;
     line-height: 1.8;
     background-color: #f8f9fa;
     padding: 1.5rem;
     border-radius: 10px;
     border-left: 4px solid var(--warning-color);
     margin-bottom: 1.5rem;
 }

 .motivation-author {
     text-align: right;
     font-weight: 600;
     color: #666;
 }

 .progress-ring {
     width: 120px;
     height: 120px;
     margin: 0 auto 1rem;
     position: relative;
 }

 .progress-ring-circle {
     transform: rotate(-90deg);
     transform-origin: 50% 50%;
 }

 .progress-ring-text {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 1.8rem;
     font-weight: 700;
     color: var(--primary-color);
 }

 .exam-date-info {
     background-color: #e9f5ff;
     padding: 1rem;
     border-radius: 10px;
     margin-top: 1rem;
     border-left: 4px solid var(--primary-color);
     color: var(--primary-color);
 }

 .nav-tabs .nav-link.active {
     background-color: var(--primary-color);
     color: white;
     border-color: var(--primary-color);
 }

 @media (max-width: 768px) {
     .countdown-number {
         font-size: 2.5rem;
     }

     .calendar-day {
         padding: 2px;
     }

     .day-number {
         font-size: 1rem;
     }

     .festival-label,
     .solar-term-label {
         font-size: 0.6rem;
     }
 }

 .health-tip {
     background-color: #f0fff4;
     border-left: 4px solid var(--success-color);
     padding: 1rem;
     border-radius: 0 8px 8px 0;
     margin-bottom: 1rem;
 }

 .study-tip {
     background-color: #fff8e1;
     border-left: 4px solid var(--warning-color);
     padding: 1rem;
     border-radius: 0 8px 8px 0;
     margin-bottom: 1rem;
 }

 .exam-tip {
     background-color: #e3f2fd;
     border-left: 4px solid var(--primary-color);
     padding: 1rem;
     border-radius: 0 8px 8px 0;
     margin-bottom: 1rem;
 }



 /* 新增样式 */
 .calendar-day.empty {
     background-color: transparent;
     border: none;
     cursor: default;
 }

 .calendar-day.empty:hover {
     background-color: transparent;
     transform: none;
 }

 .lunar-day {
     font-size: 0.7rem;
     color: #666;
     margin-bottom: 3px;
 }

 .day-countdown {
     font-size: 0.7rem;
     color: var(--danger-color);
     font-weight: 600;
     background-color: rgba(255, 0, 110, 0.1);
     padding: 1px 4px;
     border-radius: 8px;
     margin-top: 3px;
 }

 /* 响应式调整 */
 @media (max-width: 768px) {
     .lunar-day {
         font-size: 0.6rem;
     }

     .day-countdown {
         font-size: 0.6rem;
     }
 }

 /* 新增样式 */
 .calendar-day.empty {
     background-color: transparent;
     border: none;
     cursor: default;
 }

 .calendar-day.empty:hover {
     background-color: transparent;
     transform: none;
 }

 .calendar-day.gaokao-day {
     border-color: #ff0000 !important;
     background-color: #fff0f0 !important;
     color: #ff0000 !important;
 }

 .lunar-day {
     font-size: 0.7rem;
     color: #666;
     margin-bottom: 3px;
 }

 .day-countdown {
     font-size: 0.7rem;
     color: var(--danger-color);
     font-weight: 600;
     background-color: rgba(255, 0, 110, 0.1);
     padding: 1px 4px;
     border-radius: 8px;
     margin-top: 3px;
 }

 .calendar-container {
     margin-bottom: 2.5rem;
 }

 .calendar-legend {
     background-color: #f8f9fa;
     border-radius: 10px;
     padding: 1rem;
     margin-top: 2rem;
 }

 /* 响应式调整 */
 @media (max-width: 768px) {
     .lunar-day {
         font-size: 0.6rem;
     }

     .day-countdown {
         font-size: 0.6rem;
     }

     .calendar-container {
         padding: 1rem;
     }
 }

 /* 日历响应式设计 */
 .calendar-container {
     background-color: white;
     border-radius: 15px;
     padding: 1.5rem;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
     margin-bottom: 2rem;
     overflow-x: auto;
     /* 在小屏幕上允许横向滚动 */
 }

 .calendar-grid {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 8px;
     min-width: 0;
     /* 防止网格溢出容器 */
 }

 .calendar-day {
     aspect-ratio: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     border-radius: 8px;
     padding: 5px;
     cursor: pointer;
     transition: all 0.2s ease;
     position: relative;
     border: 2px solid transparent;
     min-height: 0;
     /* 防止内容溢出 */
     overflow: hidden;
     /* 防止内容溢出 */
 }

 /* 响应式调整 */
 @media (max-width: 1200px) {
     .calendar-day {
         padding: 4px;
     }

     .day-number {
         font-size: 1rem;
     }

     .lunar-day {
         font-size: 0.65rem;
     }

     .festival-label,
     .solar-term-label,
     .day-countdown {
         font-size: 0.65rem;
     }
 }

 @media (max-width: 992px) {
     .calendar-container {
         padding: 1rem;
     }

     .calendar-grid {
         gap: 6px;
     }

     .calendar-day {
         padding: 3px;
     }

     .day-number {
         font-size: 0.9rem;
         margin-bottom: 2px;
     }

     .lunar-day {
         font-size: 0.6rem;
         margin-bottom: 1px;
     }

     .festival-label,
     .solar-term-label,
     .day-countdown {
         font-size: 0.6rem;
         padding: 1px 3px;
     }

     .calendar-day-header {
         padding: 0.3rem 0;
         font-size: 0.85rem;
     }
 }

 @media (max-width: 768px) {
     .calendar-container {
         padding: 0.75rem;
         margin-bottom: 1.5rem;
         border-radius: 10px;
     }

     .calendar-grid {
         gap: 4px;
     }

     .calendar-day {
         padding: 2px;
         border-radius: 6px;
     }

     .day-number {
         font-size: 0.85rem;
         font-weight: 600;
     }

     .lunar-day {
         font-size: 0.55rem;
         margin-bottom: 0;
     }

     .festival-label,
     .solar-term-label,
     .day-countdown {
         font-size: 0.55rem;
         padding: 0 2px;
         border-radius: 6px;
         max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         display: block;
         text-align: center;
     }

     .calendar-day-header {
         font-size: 0.8rem;
         padding: 0.2rem 0;
     }

     .calendar-header {
         margin-bottom: 1rem;
     }

     .month-title {
         font-size: 1.2rem;
     }
 }

 @media (max-width: 576px) {
     .calendar-container {
         padding: 0.5rem;
         margin-bottom: 1rem;
         border-radius: 8px;
     }

     .calendar-grid {
         gap: 3px;
     }

     .calendar-day {
         padding: 1px;
         border-width: 1px;
     }

     .day-number {
         font-size: 0.75rem;
     }

     .lunar-day {
         font-size: 0.5rem;
     }

     .festival-label,
     .solar-term-label,
     .day-countdown {
         font-size: 0.5rem;
         padding: 0 1px;
     }

     .calendar-day-header {
         font-size: 0.7rem;
         padding: 0.15rem 0;
     }

     .month-title {
         font-size: 1rem;
     }

     /* 在极小的屏幕上，如果内容太多，可以只显示最重要的信息 */
     .calendar-day .festival-label,
     .calendar-day .solar-term-label {
         display: none;
         /* 在极小屏幕上隐藏节日节气标签 */
     }

     .calendar-day:hover {
         z-index: 10;
         transform: scale(1.1);
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     }
 }

 /* 移动端横屏适配 */
 @media (max-width: 768px) and (orientation: landscape) {
     .calendar-grid {
         gap: 5px;
     }

     .calendar-day {
         padding: 3px;
     }

     .day-number {
         font-size: 0.8rem;
     }

     .lunar-day {
         font-size: 0.6rem;
     }
 }

 /* 平板设备优化 */
 @media (min-width: 768px) and (max-width: 992px) {
     .calendar-grid {
         gap: 6px;
     }

     .calendar-day {
         padding: 4px;
     }
 }

 /* 在小屏幕上为日历添加一个包装器，确保不会破坏整体布局 */
 @media (max-width: 768px) {
     #calendar {
         padding: 0 5px;
     }

     .calendar-container {
         margin-left: -5px;
         margin-right: -5px;
         border-radius: 0;
         box-shadow: none;
         background-color: transparent;
         padding: 0;
     }

     .calendar-grid {
         background-color: white;
         border-radius: 10px;
         padding: 10px;
         box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
     }
 }

 /* 添加日历日期的悬停效果，在小屏幕上提供更好的交互 */
 .calendar-day:hover .calendar-day-info {
     display: block;
 }

 .calendar-day-info {
     display: none;
     position: absolute;
     top: calc(100% + 5px);
     left: 50%;
     transform: translateX(-50%);
     background-color: rgba(0, 0, 0, 0.9);
     color: white;
     padding: 8px;
     border-radius: 6px;
     font-size: 0.8rem;
     white-space: nowrap;
     z-index: 100;
     pointer-events: none;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

 .calendar-day-info::after {
     content: '';
     position: absolute;
     bottom: 100%;
     left: 50%;
     transform: translateX(-50%);
     border-width: 5px;
     border-style: solid;
     border-color: transparent transparent rgba(0, 0, 0, 0.9) transparent;
 }

 /* 针对日历中的特殊日期添加视觉提示 */
 .calendar-day.gaokao-day {
     border-color: #ff0000 !important;
     background-color: #fff0f0 !important;
     color: #ff0000 !important;
     animation: pulse 2s infinite;
 }

 @keyframes pulse {
     0% {
         box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4);
     }

     70% {
         box-shadow: 0 0 0 6px rgba(255, 0, 0, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
     }
 }

 /* 优化空日期的显示 */
 .calendar-day.empty {
     background-color: transparent !important;
     border-color: transparent !important;
     cursor: default;
 }

 .calendar-day.empty:hover {
     transform: none !important;
     background-color: transparent !important;
 }

 /* 优化整体布局 */
 .container {
     padding-left: 10px;
     padding-right: 10px;
 }

 @media (max-width: 576px) {
     .container {
         padding-left: 8px;
         padding-right: 8px;
     }
 }