#mainContent {height:100%;}
/* PC端并排布局 */
.calendar-pc {display: flex;flex-direction: row;width: 100%;min-height: 480px;}
.calendar-pc #partCalendar {width:50%;min-width: 320px;border-right: 2px solid #eee;box-sizing: border-box;}
.calendar-pc #partSchedule {width: 50%;min-width: 320px;box-sizing: border-box;padding-left: 12px;}
.calendar-pc .calendar-divider {width: 2px;background: #eee;margin: 0 0;}

/* 移动端上下布局 */
.calendar-mobile {display: block;width: 100%;}
.calendar-mobile #partCalendar,
.calendar-mobile #partSchedule {width: 100%;box-sizing: border-box;}
.calendar-mobile .calendar-divider {width: 100%;height: 1px;border-bottom: 1px dotted #bbb;margin: 12px 0;}



.calendar-container {  display: flex;  flex-direction: column; 
 font-family: "微软雅黑", Arial, sans-serif;margin:5px;  position:relative;}
.calendar-section {display:flex;flex-direction:column;overflow-y:visible; margin-bottom: 10px; background: #fff; border-radius: 5px;
border:1px dotted #ccc; position:relative;padding-bottom:20px;}
.nav-bar { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 10px 3px; background: #f8f9fa; border-bottom: 1px solid #eee;}
.nav-btn {background:#fff;border:1px solid #449D48; height:32px;width:40px; transition: all 0.3s; border-radius: 5px; display: flex; justify-content: center; align-items: center; cursor:pointer;}
.nav-btn:active { color: #333; background: #e6e6e6; transform: scale(0.95);}
/*公农历切换*/
.calendar-toggle { display: flex; align-items: center; background: #e6e6e6; border-radius: 24px; padding: 4px; margin: 0 8px;}
.toggle-text { font-size: 14px; color: #666; padding: 4px 16px; border-radius: 20px; transition: all 0.3s; cursor:pointer;}
.toggle-text.active { color: #fff; background: #4CAF50; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.year-month-text { font-size: 15px; color: #333; font-weight: 500; padding:5px; background: #fff; 
   border-radius: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); width:85px; text-align: center;}
.lunar-picker-container { display: flex; align-items: center; gap: 8px;}
.lunar-year-text { min-width: 100px; font-size: 15px;}
.lunar-month-text { min-width: 80px; font-size: 15px;}
/*日历表头*/
.weekdays { display: grid; grid-template-columns: repeat(7, 1fr); padding: 20px 0; background: #fff; border-bottom: 1px solid #f0f0f0;}
.weekday { font-size: 15px; color: #999; text-align: center; font-weight: 600;}
/*日历区域*/
.days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 12px; background: #fff;}
.day-cell {display: flex; flex-direction: column; justify-content: center; align-items: center; padding:10px 5px; position: relative; border-radius: 5px; transition: all 0.2s; cursor:pointer;background:#fafafa;}
   .day-cell:active { background: #f5f5f5;}   /*  aspect-ratio: 1;*/
.dayLine1 { font-size: 18px; color: #333; font-weight: 500; line-height: 1.2;overflow:hidden;}
.dayLine2 { font-size: 12px; color: #999; margin-top: 6px; line-height: 1;overflow:hidden;}
.jieqi { font-size:12px; color: #ff6b6b; margin-top: 4px; line-height: 1;overflow:hidden;}
.today { background: #e6f7ff; box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);}
.today .solar-day { color: #1890ff; font-weight: bold;}
.selected { background: #1890ff; box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);}
.selected .dayLine1, .selected .dayLine2, .selected .jieqi { color: #fff;}
.other-month { opacity: 0.3;}
/*回今天按钮*/
.back-to-today { position: absolute; right:10px; bottom:0px; background:#fff; border:2px solid #449D48; padding:8px; border-radius: 5px; cursor:pointer;  z-index: 2;}
.back-to-today .iconfont {color:#449D48;font-weight:800; font-size:30px;}
.back-to-today:hover{background:#fff;}

.selected-date-details {display: flex;align-items: center;background: #fff;border-radius: 12px;flex-direction:row;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);border: 1px dotted #ccc;margin: 10px 0;padding: 18px 10px;min-height: 110px;}
.date-details-left {width: 110px;min-width: 90px;background: #f6f6f6;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.08);
display: flex;flex-direction: column;align-items: center;justify-content: center;margin:0px 10px;padding: 10px 0;border:1px solid#ccc;}
.date-weekday {font-size: 16px;color: #449D48;font-weight:500;margin-bottom: 5px;}
.date-third{font-size: 16px;color: #333;font-weight:300;}
.date-main {font-size: 32px;color: #333;font-weight: bold;letter-spacing: 2px;}
.date-details-right {display: flex;flex-direction: column;justify-content: center;margin-left:20px;}
.date-solarym {font-size: 22px;color: #1890ff;font-weight: 600;margin-bottom:10px;letter-spacing:6px}
.date-lunar {font-size: 15px;color: #666;margin-bottom: 10px;}
.date-ganzhi-jieqi {font-size: 15px;color: #000;letter-spacing:2px;}
       
/* 天机签广告条 */
.tianji-ad {  display: flex;  align-items: center;  padding: 20px;background:#fff;border-radius:12px;margin:5px;box-shadow: 0 2px 8px rgba(0,0,0,0.05);border: 1px dotted #ccc;}
.tianji-ad-left {  margin-right: 20px;margin-top:-10px;}
.tianji-icon {  width: 60px;  height: 60px;font-size:60px;}
.tianji-ad-right {  flex: 1;}
.tianji-ad-title { display: flex;  align-items: baseline;  margin-bottom: 8px;}
.tianji-title-text {  font-size: 20px;  font-weight: 500;  color: #333;  margin-right: 10px;}
.tianji-subtitle-text {  font-size: 16px;  color: #4CAF50;}
.tianji-ad-desc {  font-size: 16px;  color: #666;}
         
/* 扩展功能部分 */
.extension-section {  margin-top: 10px;  display: flex;  flex-direction: column;  gap: 20px;}

/* 八字切换栏样式 */
.bazi-button-bar {    width: 100%;    box-sizing: border-box;    padding: 8px 12px;    background: transparent;    display: flex;    justify-content: flex-end; /* 右侧显示 */
    align-items: center;    transition: box-shadow 0.15s ease;}
    .bazi-button-bar .bazi-buttons {        display: flex;        gap: 8px;        align-items: center;    }
/* 单个按钮样式 */
.bazi-button {    background: #f5f6f7;    border: 1px solid #e6e6e6;    color: #333;    padding: 6px 10px;    border-radius: 4px;    cursor: pointer;
    font-size: 13px;    line-height: 1;    min-width: 56px;    text-align: center;}
    .bazi-button:hover {        background: #eef1f4;    }
    .bazi-button.active {        background: #2d8cf0;        color: #fff;        border-color: #2d8cf0;        box-shadow: 0 1px 4px rgba(45,140,240,0.2);    }
/* 固定到顶部时 */
.bazi-button-bar.bazi-fixed {    position: fixed;    top: 0;    left: 0;    right: 0;    z-index: 1100;    background: #ffffff;    padding: 6px 16px;    box-shadow: 0 2px 8px rgba(0,0,0,0.08);}
/* 在小屏幕上按钮自适应 */
@media (max-width: 600px) {
    .bazi-button {        padding: 6px 8px;        font-size: 12px;        min-width: 44px;    }
    .bazi-button-bar {        padding: 6px 8px;    }
}

/* 天机签部分 */
.tianji-section {  border: 1px dotted #ccc;  border-radius: 16px;  padding: 20px;  background: #fff;margin-right:10px;}
/* 天机签详情 */
.tianji-OneQian {border:1px solid #ccc;margin:0px -10px;padding:10px;background:#fcfcfc;border-radius:5px;}
.tianji-OneQian::before {  content: "";  position: absolute;  top: 0px;  left: 0;  width: 100%;margin:auto;
  height: 4px;  background: linear-gradient(90deg, rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.9), rgba(76, 175, 80, 0.1));}
.tianji-detail {  display: flex;  flex-direction: column;  gap: 16px;}
.tianji-header {  display: flex;  border-bottom: 1px solid #ccc;  padding-bottom: 5px;}
.tianji-header-left {  display: flex;  flex-direction: column;  align-items: center;  padding-right: 15px;margin-right: 15px; border-right:1px dotted #ccc;}
.tianji-icon-sm {  width: 50px;  height: 50px;font-size:50px;  margin-bottom: 10px;}
.tianji-name {  font-size: 16px;  color: #333;  font-weight: 500;margin-bottom:5px;}
.tianji-header-right {  flex: 1;}
.tianji-date {  font-size: 14px;  color: #333;  font-weight: 500; }
.tianji-tip {  display: flex;  border-bottom: 1px solid #ccc;  padding: 5px;font-size:12px;color:#999;}

.tianji-realname {font-size:18px;font-weight:bold ;color:#666;}
.tianji-remark {  font-size: 15px;  color: #666;  line-height: 1.5;text-indent: 2em;}

.tianji-analysis { display: flex;  flex-direction: column;  gap: 16px}
.tianji-analysis:last-child{border-bottom:none;}
.tianji-item {  background: #f9f9f9;  border-radius: 12px;  padding: 10px;  position: relative;}
.tianji-item-header {  display: flex;  justify-content: space-between;  align-items: center;  margin-bottom: 8px;}
.tianji-time {  font-size: 18px;  font-weight: 500;  color: #333;}
.tianji-time-icon{font-size:20px; margin-bottom:-10px ; margin-right: 10px;}
.tianji-level-icon {font-size:22px;font-weight:bold ; }
.tianji-advice {  font-size: 15px;  color: #333;  margin-bottom: 8px;}
.tianji-reason {  font-size: 13px;  color: #888; }

/* 日程部分 */
.schedule-section {  border: 1px dotted #ccc;  border-radius: 16px;  padding: 20px;  background: #fff;margin-right:10px;}
.schedule-title {  font-size: 20px;  font-weight: 500;  color: #333;  margin-bottom: 16px;  border-bottom: 1px solid #f0f0f0;  padding-bottom: 10px;}
#baziFilterSelect {float:right; min-width:100px;font-size:18px;padding:5px 10px; display:none;background:#E1F6FE;border-radius:5px;}
.schedule-list {  display: flex;  flex-direction: column; gap: 16px;}
.schedule-item {  background: #f9f9f9;  border-radius: 12px;  padding: 16px;}
.schedule-item-bazi-icon {float:right;display:inline-block;width:40px;height:40px;line-height:40px;font-size:20px; text-align:center;border-radius:50%;background:#fff;border:1px solid #ccc; color:#666;font-weight:bold;cursor:pointer;}

.schedule-time {  font-size: 28px;  color: #666;  margin-bottom: 8px;}
.schedule-content {  display: flex;  align-items: center;}
.schedule-level-icon {  width: 40px;  height: 40px;  margin-right: 10px;}
.schedule-detail { font-size: 28px;  color: #333;  flex: 1;  line-height: 1.4;}

/* 日历网格中的标记 */
.day-markers {  position: absolute;  right: 2px;  display: flex; flex-direction: column;vertical-align: top; justify-content: ;  gap: 4px;}
.day-marker {  width:30px;  height:30px;}
.tianji-marker {  margin-top: 2px;}
.schedule-marker {  margin-bottom: 2px;}