* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
 }

 body {
   background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
   color: #333;
 }

 .container {
   width: 100%;
   min-width: 1100px;
   max-width: 1360px;
   margin: 20px auto;
   background: white;
   border-radius: 15px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   overflow: hidden;
   position: relative;
 }

 header {
   background: linear-gradient(120deg, #4b6cb7 0%, #182848 100%);
   color: white;
   padding: 25px 40px;
   text-align: center;
   position: relative;
 }

 .logo {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 15px;
 }

 .logo h1 {
   font-size: 2.5rem;
   font-weight: 600;
   letter-spacing: 1px;
 }

 .logo i {
   font-size: 2.8rem;
   color: #FFD700;
 }

 .subtitle {
   margin-top: 10px;
   font-size: 1.1rem;
   opacity: 0.9;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
 }

 .date-controls {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 20px;
   margin-top: 20px;
   flex-wrap: wrap;
 }

 .date-display {
   font-size: 1.8rem;
   font-weight: 500;
   background: rgba(255, 255, 255, 0.15);
   padding: 12px 30px;
   border-radius: 50px;
   min-width: 300px;
 }

 .nav-btn {
   background: rgba(255, 255, 255, 0.2);
   border: none;
   color: white;
   width: 45px;
   height: 45px;
   border-radius: 50%;
   font-size: 1.2rem;
   cursor: pointer;
   transition: all 0.3s ease;
 }

 .nav-btn:hover {
   background: rgba(255, 255, 255, 0.3);
   transform: translateY(-2px);
 }

 .today-btn {
   background: #FFD700;
   color: #182848;
   font-weight: 600;
   padding: 10px 20px;
   border-radius: 50px;
   border: none;
   cursor: pointer;
   transition: all 0.3s ease;
 }

 .today-btn:hover {
   background: #ffcc00;
   transform: scale(1.05);
 }

 .main-content {
   display: flex;
   padding: 10px;
   gap: 10px;
 }

 .calendar-section {
   flex: 1;
   max-width: 45%;
   background: #f9fbfd;
   border-radius: 12px;
   padding: 5px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
 }

 .calendar-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
   padding-bottom: 15px;
   border-bottom: 1px solid #eaeef2;
 }

 .month-year {
   font-size: 1.8rem;
   font-weight: 600;
   color: #2c3e50;
 }

 .weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   text-align: center;
   font-weight: 600;
   margin-bottom: 15px;
   color: #4b6cb7;
 }

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

 .calendar-day {
   height: 85px;
   background: white;
   border-radius: 8px;
   padding: 8px;
   display: flex;
   flex-direction: column;
   cursor: pointer;
   transition: all 0.2s ease;
   border: 1px solid #eaeef2;
   position: relative;
   overflow: hidden;
 }

 .calendar-day:hover {
   transform: translateY(-3px);
   box-shadow: 0 5px 15px rgba(75, 108, 183, 0.15);
   border-color: #4b6cb7;
 }

 .day-number {
   font-size: 1.1rem;
   font-weight: 600;
   align-self: flex-end;
 }

 .lunar-day {
   font-size: 0.8rem;
   color: #7f8c8d;
   margin-top: auto;
   text-align: center;
 }

 .current-day {
   background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
   color: white;
 }

 .current-day .lunar-day {
   color: rgba(255, 255, 255, 0.8);
 }

 .holiday {
   background: #fff9e6;
   border: 1px solid #ffcc00;
 }

 .holiday-marker {
   position: absolute;
   top: 5px;
   left: 5px;
   width: 6px;
   height: 6px;
   background: #ff6b6b;
   border-radius: 50%;
 }

 .detail-section {
   flex: 1;
   background: #f9fbfd;
   border-radius: 12px;
   padding: 25px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
 }

 .section-title {
   font-size: 1.5rem;
   color: #2c3e50;
   margin-bottom: 20px;
   padding-bottom: 15px;
   border-bottom: 1px solid #eaeef2;
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .detail-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 10px;
 }

 .detail-card {
   background: white;
   border-radius: 10px;
   padding: 10px;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
   margin-top: 20px;
 }

 .detail-grid .detail-card {
   margin-top: 0px;
 }

 .detail-card .detail-value {
   color: #333;
   line-height: 1.5;
 }

 .detail-card h3 {
   color: #4b6cb7;
   margin-bottom: 15px;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .detail-item {
   margin-bottom: 12px;
   display: flex;
 }

 .detail-label {
   font-weight: 600;
   min-width: 80px;
   color: #2c3e50;
 }

 .detail-value {
   flex: 1;
   color: #34495e;
 }

 .festival-card {
   grid-column: 1 / -1;
   background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
   color: #2c3e50;
 }

 .festival-card h3 {
   color: #d35400;
 }

 .festival-item {
   display: flex;
   justify-content: space-between;
   padding: 10px 0;
   border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
 }

 .calendar-info {
   margin-top: 40px;
   background: #e8f4f8;
   border-radius: 10px;
   padding: 25px;
   color: #2c3e50;
 }

 .calendar-info h2 {
   margin-bottom: 15px;
   color: #2c3e50;
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .calendar-info p {
   margin-bottom: 15px;
   line-height: 1.8;
 }

 .footer {
   text-align: center;
   padding: 25px;
   color: #7f8c8d;
   border-top: 1px solid #eaeef2;
 }

 .zodiac {
   color: #e74c3c;
   font-weight: 600;
 }

 .constellation {
   color: #9b59b6;
   font-weight: 600;
 }

 .season {
   color: #27ae60;
   font-weight: 600;
 }

 .element {
   display: inline-block;
   padding: 2px 8px;
   border-radius: 4px;
   font-size: 0.9rem;
 }

 .element-wood {
   background: #e8f5e9;
   color: #2e7d32;
 }

 .element-fire {
   background: #ffebee;
   color: #c62828;
 }

 .element-earth {
   background: #fff8e1;
   color: #f57f17;
 }

 .element-metal {
   background: #e3f2fd;
   color: #1565c0;
 }

 .element-water {
   background: #e0f7fa;
   color: #00838f;
 }

 .other-month {
   opacity: 0.5;
 }

 .solar-term {
   color: #e74c3c;
   font-weight: 600;
   font-size: 0.7rem;
   margin-top: 2px;
   text-align: center;
 }

 .loading-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(255, 255, 255, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 100;
   border-radius: 15px;
 }

 .spinner {
   width: 50px;
   height: 50px;
   border: 5px solid #f3f3f3;
   border-top: 5px solid #4b6cb7;
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }

 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }

   100% {
     transform: rotate(360deg);
   }
 }

 .lunar-date {
   font-weight: 600;
   color: #d35400;
 }

 .today-highlight {
   animation: pulse 2s infinite;
 }

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

   70% {
     box-shadow: 0 0 0 10px rgba(75, 108, 183, 0);
   }

   100% {
     box-shadow: 0 0 0 0 rgba(75, 108, 183, 0);
   }
 }