/* v 1.3.0 在原有style标签内追加，用于detailInfo里显示天象图示 */
.detailInfoContainer {
  margin: 20px auto;
  width: 80%;
  /* 移除固定高度，让容器自适应内容 */
  justify-content: center;
}
.moon-phase-box {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}
#moonPhaseIcon {
  font-size: 48px;
  width: 60px;
  text-align: center;
}

  /* v1.1 新增标题栏样式 */
  h3 {
    background: linear-gradient(135deg, #009879 0%, #0069d9 100%);
    color: white;
    padding: 2px 2px;
    border-radius: 8px;
    margin: 5px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    border: 1px solid rgba(255,255,255,0.2);
    width: 155px;
  }

  /* 悬停效果 */
  h3:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    background: linear-gradient(135deg, #008a6e 0%, #0069d9 100%);
    width: 200px;
  }

  /* 展开状态指示 */
  h3::after {
    position: absolute;
    right: 15px;
    transition: transform 0.3s ease;
    color: rgba(255,255,255,0.8);
  }

  h3[style*="display:none"]::after {
    transform: rotate(90deg);
  }

  /* 当前激活状态 */
  h3.active {
    background: linear-gradient(135deg, #007bff 0%, #009879 100%);
    border-left: 4px solid #ffd700;
  }

      /* 设置输入框、选择框和按钮的通用样式 */
      input,
      select,
      button {
        /* 设置输入框、选择框和按钮的外边距为 5px，使元素之间有一定间隔 */
        margin: 5px;
        /* 增加内边距为 5px，让输入框、选择框和按钮内部的内容有更多空间，提升视觉舒适度 */
        padding: 5px;
        /* 设置元素的边框为 1px 宽的灰色实线 */
        border: 1px solid #ccc;
        /* 设置边框为圆角，半径为 4px，使元素外观更柔和 */
        border-radius: 8px;
        /* 统一输入框、选择框和按钮的宽度为 155px，使页面布局更整齐 */
        width: 155px;
        /* 统一输入框、选择框和按钮内文字的字体大小为 14px */
        font-size: 14px;
      }

      /* 为按钮添加额外的样式 */
      button {
        /* 设置按钮的背景颜色为蓝色 */
        background-color: #007bff;
        /* 设置按钮文字颜色为白色 */
        color: white;
        /* 设置鼠标悬停在按钮上时的指针样式为手型，提示用户可点击 */
        cursor: pointer;
      }

      /* 鼠标悬停在按钮上时的样式 */
      button:hover {
        /* 鼠标悬停时将按钮的背景颜色变为深蓝色，增强交互效果 */
        background-color: #0056b3;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      }

      button.active {
        background-color: #dc3545;
        /*        background-color: #007bff;*/
      }

      button.active:hover {
        background-color: #0056b3;
      }

      /* 为输入框添加额外的样式 */
      input {
        /* 去除输入框获取焦点时的默认轮廓线 */
        outline: none;
      }

      /* 输入框获取焦点时的样式 */
      input:focus {
        /* 输入框聚焦时将边框颜色变为蓝色，提示用户当前操作的输入框 */
        border-color: #007bff;
      }

      /* 定义自定义输入框的样式，用于天体信息栏的输入框 */
      .custom-input {
        /* 修改输入框的宽度为 500px，以适应天体信息输入的需求 */
        width: 500px;
        /* 修改输入框的高度为 20px */
        height: 20px;
      }

      /* 输出窗口样式 */
      #outputWindow {
        /* 设置输出窗口的边框为 1px 宽的灰色实线 */
        border: 1px solid #ccc;
        /* 设置输出窗口的内边距为 10px，使内容与边框有一定间隔 */
        padding: 10px;
        /* 设置输出窗口与上方元素的外边距为 10px */
        margin-top: 10px;
        /* 设置输出窗口的高度为 200px */
        height: 200px;
        /* 当输出内容超出窗口高度时，显示垂直滚动条以便查看全部内容 */
        overflow-y: auto;
      }

      label {
        /* 设置标签与下方元素的外边距为 3px */
        margin-bottom: 3px;
        /* 将标签显示为行内块元素，使其可以和输入框在同一行显示 */
        display: inline-block;
        /* 统一标签的宽度为 155px，使页面布局更整齐 */
        width: 155px;
        /* 将标签内的文字居中显示 */
        text-align: center;
        /* 设置标签与输入框之间的右边距为 5px */
        margin-right: 5px;
        /* 设置标签文字的颜色为深灰色 */
        color: #333;
      }

      /* 新增标题居中样式 */
      h1 {
        /* 将标题文字居中显示 */
        text-align: center;
      }

      /* 减小行间距 */
      body {
        /* 设置页面主体内容的行高为 2，使文字排版更紧凑 */
        line-height: 2;
        font-family: Arial, sans-serif;
        padding: 20px;
      }

      .section {
        margin-bottom: 30px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 20px;
      }

      .info-table {
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 20px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
      }

      .info-table thead tr {
        background-color: #009879;
        color: #ffffff;
        text-align: left;
      }

      .info-table th,
      .info-table td {
        border: 1px solid #ddd;
        padding: 12px 15px;
        text-align: center;
      }

      .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
      }

      .star-card {
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 15px;
        width: 200px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .info-table tbody tr {
        border-bottom: 1px solid #dddddd;
      }

      .info-table tbody tr:nth-of-type(even) {
        background-color: #f3f3f3;
      }

      .info-table tbody tr:last-of-type {
        border-bottom: 2px solid #009879;
      }

      /*
      .info-table tbody tr:hover {
        font-weight: bold;
        color: #009879;
      }
        */

      /* 鼠标悬停在表格行上的样式 */
      #monthlyEventsTable tbody tr:hover,
      #superMoonTable tbody tr:hover,
      #eclipseTable tbody tr:hover,
      #planetWithMoonTable tbody tr:hover,
      #planetConvergeTable tbody tr:hover,
      #lunarOcculationTable tbody tr:hover,
      #planetMotionTable tbody tr:hover,
      #annualEventsTable tbody tr:hover,
      #skySmileTable tbody tr:hover,
      #earthShineTable tbody tr:hover,
      #zodiacalLightTable tbody tr:hover,
      #noShadowAtZenithTable tbody tr:hover,
      #milkyWayEyeTable tbody tr:hover,
      #meteorShowerTable tbody tr:hover,
      #monthlyJupiterMoonTable tbody tr:hover {
        background-color: #b2ebf2;
        cursor: pointer;
      }

      /* 表格行被点击时的样式 */
      #monthlyEventsTable tbody tr:active,
      #superMoonTable tbody tr:active,
      #eclipseTable tbody tr:active,
      #planetWithMoonTable tbody tr:active,
      #planetConvergeTable tbody tr:active,
      #lunarOcculationTable tbody tr:active,
      #planetMotionTable tbody tr:active,
      #annualEventsTable tbody tr:active,
      #skySmileTable tbody tr:active,
      #earthShineTable tbody tr:active,
      #zodiacalLightTable tbody tr:active,
      #noShadowAtZenithTable tbody tr:active,
      #milkyWayEyeTable tbody tr:active,
      #meteorShowerTable tbody tr:active,
      #monthlyJupiterMoonTable tbody tr:active {
        background-color: #84e4f0;
        cursor: pointer;
      }

      /* 新增样式，让 detailDiv 居中 */
      .detailDiv-centered {
        position: relative;
        margin: 0 auto;
        width: fit-content; /*让元素宽度自适应内容 */
        /* 新增背景颜色 */
        background-color: #f9f9f9;
        /* 新增边框样式 */
        border: 2px solid #009879;
        /* 新增边框圆角 */
        border-radius: 8px;
        /* 新增内边距 */
        padding: 15px;
        /* 新增阴影效果 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* 新增过渡效果，让鼠标悬停时更平滑 */
        transition: all 0.3s ease;
      }

      /* 折叠布局样式 - 主要信息区域 */
      .primary-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-bottom: 15px;
      }

      .primary-info .info-item {
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 10px 15px;
        text-align: center;
        transition: all 0.2s ease;
        width: 90%;
        max-width: 600px;
      }

      .primary-info .info-item:hover {
        background-color: #f1f3f4;
      }

      .info-label {
        font-weight: bold;
        color: #333;
      }

      .info-value {
        color: #666;
      }

      /* 次要信息区域容器 */
      .secondary-info-section {
        margin: 0;
        text-align: center;
      }

      /* 切换按钮样式 - 与主页面按钮风格统一 查看更多信息*/
      .toggle-btn {
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 6px;
        padding: 8px 16px;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.3s ease;
        margin-bottom: 10px;
        font-weight: bold;
        min-width: 100px;
      }

      .toggle-btn:hover {
        background-color: #0056b3;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      }

      .toggle-btn:active {
        background-color: #004085;
      }

      .toggle-btn.expanded .toggle-icon {
        transform: rotate(180deg);
      }

      /* 次要信息区域 */
      .secondary-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-top: 15px;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 6px;
      }

      .secondary-info .info-item {
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 10px 15px;
        text-align: center;
        transition: all 0.2s ease;
        width: 100%;
      }

      .secondary-info .info-item:hover {
        background-color: #f1f3f4;
      }

      .secondary-info .info-item:last-child {
        margin-bottom: 0;
      }

      /* 响应式设计 */
      @media (max-width: 768px) {
        .primary-info .info-item,
        .secondary-info .info-item {
          width: 95%;
        }
        
        .secondary-info {
          padding: 15px;
        }
      }

      /* 筛选功能样式优化 */
      select[multiple] {
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 5px;
        background-color: white;
      }
      
      select[multiple] option {
        padding: 3px 5px;
      }
      
      select[multiple] option:hover {
        background-color: #f0f0f0;
      }
      
      select[multiple] option:checked {
        background-color: #007bff;
        color: white;
      }
      
      #filterSection label {
        font-weight: bold;
        color: #333;
      }
      
      #filterSection button {
        margin-right: 10px;
      }
      

      

      
      /* 输入框样式优化 */
      .animation-window .control-grid input {
        flex: 1;
        min-width: 0;
        max-width: 200px;
        box-sizing: border-box;
        width: 100%;
      }
      
      /* datetime-local输入框特殊处理 */
      .animation-window .control-grid input[type="datetime-local"] {
        min-width: 180px;
        max-width: 220px;
      }
      
      /* number输入框特殊处理 */
      .animation-window .control-grid input[type="number"] {
        max-width: 100px;
      }
      

      
      @media (max-width: 768px) {
        .animation-window .control-grid {
          grid-template-columns: 1fr;
          gap: 10px;
        }
        
        .animation-window .control-grid input {
          max-width: 100%;
        }
      }
      
      @media (min-width: 769px) {
        .animation-window .control-grid {
          grid-template-columns: 1fr 1fr 1fr;
        }
      }
      
      /* 动画窗口按钮样式 */
      .animation-window button {
        padding: 8px 15px;
        border: none;
        border-radius: 5px;
        color: white;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.3s ease;
        min-width: 80px;
      }
      
      .animation-window button:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      }
      
      /* 动画窗口输入框样式 */
      .animation-window input {
        padding: 8px;
        border: 1px solid #555;
        border-radius: 5px;
        background: #1e2f42;
        color: white;
        font-size: 13px;
        transition: all 0.3s;
      }
      
      .animation-window input:focus {
        border-color: #ffd700;
        box-shadow: 0 0 5px rgba(255,215,0,0.5);
      }
      
      /* 动画窗口标签样式 - 统一字号 */
      .animation-window label {
        font-size: 14px;
        color: #ffd700;
        font-weight: bold;
        white-space: nowrap;
      }
      
      /* 进度条样式 */
      .animation-window input[type="range"] {
        width: 100%;
        height: 6px;
        border-radius: 3px;
        background: #2a3b4c;
        outline: none;
      }
      
      .animation-window input[type="range"]::-webkit-slider-thumb {
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #ffd700;
        cursor: pointer;
      }
      
      
      /* 关闭按钮样式 - 修复椭圆问题 */
      .close-btn {
        background: #dc3545;
        border: none;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        color: white;
        cursor: pointer;
        font-size: 16px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        /* 防止resize影响 */
        box-sizing: border-box;
        flex-shrink: 0;
      }
      
      .close-btn:hover {
        background: #c82333;
        transform: scale(1.1);
        box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
      }
      
      /* 画布容器样式 */
      .animation-canvas-container {
        width: 100%;
        border: 1px solid #444;
        border-radius: 5px;
        background: #0a1a2f;
        overflow: hidden;
      }
      
      .animation-canvas-container canvas {
        width: 100%;
        height: auto;
        display: block;
      }
      
      /* 增强的窗口调整功能 */
      .animation-window {
        /* 允许水平和垂直独立调整 */
        resize: horizontal vertical;
      }
      
      /* 自定义调整手柄样式 */
      .animation-window::-webkit-resizer {
        background-color: #ffd700;
        border-radius: 2px;
        border: 1px solid rgba(255, 215, 0, 0.3);
      }
      
      .animation-window::-webkit-resizer:hover {
        background-color: #ffed4a;
        border-color: rgba(255, 215, 0, 0.6);
      }