* 
    {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body 
    {
      font-family: Arial, "Microsoft YaHei", sans-serif;
      background-color: #f9f9f9;
      color: #333;
      line-height: 1.6;
      padding: 2px 10px;
    }

    /* 顶部菜单样式 */
    .top-menu 
    {
      background: linear-gradient(45deg, #4a86c4, #7ab0e0);
      padding: 15px;
      margin-top: 6px;
      margin-bottom: 6px;
      text-align: center;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      max-width: 500px;
      width: calc(100% - 20px);
      margin-left: auto;
      margin-right: auto;
      display: flex;
      align-items: center;
      height: 60px;
    }

    .logo 
    {
      width: 100px; /* 修改为新尺寸 */
      height: 60px;
      margin-right: 15px;
      border-radius: 8px 0 0 8px; /* 圆角与顶部菜单左侧对齐 */
      vertical-align: middle;
    }

    .menu-links 
    {
      flex-grow: 1;
      text-align: center;
    }
    
    .input-group 
    {
      display: flex;
      flex-direction: column; /* 使input和date-tip垂直堆叠 */
    }

   .date-tip 
   {
     font-size: 14px;
     color: #d00;
     /* display: block; 和 clear: both; 在这里不再需要，因为父级input-group已经控制了布局 */
     font-weight:bold;
     margin-top: 5px; /* 可选：增加与上方input的间距 */
   }
   
   #birthday 
   {
     min-width: 120px; /* 您可以根据需要调整这个值 */
   }
   
   #calType 
   {
     min-width: 85px; /* 您可以根据需要调整这个值 */
   }

    .top-menu a 
    {
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      text-decoration: none;
      margin: 0 20px;
      transition: color 0.3s;
    }

    .top-menu a:hover 
    {
      color: #ffdd00;
    }

    .main-title 
    {
      font-size: 28px;
      font-weight: bold;
      color: #00559C;
      margin: 2px 0 2px 0; /* 保持与横线距离一致 */
      text-align: center;
      position: relative;
      display: inline-block;
    }
    
    .main-title-red 
    {
      font-size: 28px;
      font-weight: bold;
      color: #d00;
      margin: 2px 0 2px 0; /* 保持与横线距离一致 */
      text-align: center;
      position: relative;
      display: inline-block;
    }
    
    .main-title::after 
    {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 4px;
      background-color: #d00;
    }

    .site-url 
    {
      text-align: center;
      font-weight:bold;
      margin: -8px 0 5px 0; /* 上移，顶部与标题顶部对齐 */
    }

    .site-url a 
    {
      text-decoration: none;
      font-size: 18px;
      color: #00559C; /* 与主标题相同的蓝色 */
    }

    .site-url .highlight-w 
    {
      font-size: 24px;
      color: #d00; /* suanw.com 的 w 颜色 */
      font-weight: bold;
    }

    #main-box 
    {
      max-width: 500px;
      width: calc(100% - 20px);
      margin: 0 auto;
      padding: 5px 5px 15px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid #ddd;
    }

    .grid-container 
    {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: repeat(5, auto);
      gap: 10px;
      width: 100%;
    }

    .form-item 
    {
      display: flex;
      align-items: center;
      padding: 3px 5px;
      justify-content: flex-start;
    }

    .form-item.center-button 
    {
      grid-column: 1 / 3;
      justify-content: center;
    }

    label 
    {
      display: inline-block;
      width: 70px;
      text-align: left;
      font-size: 16px;
      font-weight: bold;
      color: #00559C;
      margin-right: 8px;
    }

    input[type="text"],
    input[type="time"],
    input[type="date"],
    select,
    span 
    {
      font-size: 16px;
      color: #333;
    }

    #caltype 
    {
      width: 100px;
      height: 30px;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
    }

    #shengfen, #xianshi 
    {
      width: 120px;
      height: 30px;
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
    }

    input[type="text"],
    input[type="time"],
    input[type="date"] 
    {
      width: 120px;
      height: 30px;
      padding: 5px;
      margin: 2px 0;
      border: 1px solid #ccc;
      border-radius: 4px;
      outline: none;
      transition: border-color 0.3s;
    }

    input[type="time"]:disabled 
    {
      background-color: #f0f0f0;
      cursor: not-allowed;
    }

    input[type="text"]:focus,
    input[type="time"]:focus,
    input[type="date"]:focus 
    {
      border-color: #00559C;
    }

    input[type="radio"],
    input[type="checkbox"] 
    {
      margin-right: 5px;
    }

    .gender-label 
    {
      margin-right: 10px;
    }

    #runyue 
    {
      margin-left: 10px;
    }

    .submitButton 
    {
      font-size: 18px;
      font-weight: bold;
      height: 40px;
      width: 180px;
      margin: 2px 0;
      text-align: center;
      background: linear-gradient(45deg, #00559C, #007acc);
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s, transform 0.2s;
    }

    .submitButton:hover 
    {
      background: linear-gradient(45deg, #007acc, #0099ff);
      transform: scale(1.05);
    }

    .footer-links 
    {
      margin-top: 5px;
      text-align: center;
      padding: 5px 10px;
      background-color: #f0f0f0;
      border-radius: 8px;
      max-width: 500px;
      width: calc(100% - 20px);
      margin-left: auto;
      margin-right: auto;
    }

    .footer-links span 
    {
      color: #333;
      font-size: 16px;
      font-weight: bold;
    }

    .footer-links a 
    {
      color: #00559C;
      font-size: 16px;
      text-decoration: none;
      margin: 0 10px;
      font-weight: bold;
    }

    .footer-links a:hover 
    {
      color: #007acc;
      text-decoration: underline;
    }

    @media (max-width: 768px) 
    {
      #main-box, .top-menu, .footer-links 
      {
        max-width: 450px;
        width: calc(100% - 20px);
      }
      
       #birthday 
       {
         min-width: 130px; /* 在屏幕宽度小于或等于768px时应用此最小宽度 */
       }

      #main-box 
      {
        padding: 2px 10px 15px;
      }

      .main-title 
      {
        font-size: 24px;
      }
      
      .main-title-red 
      {
        font-size: 24px;
      }

      input[type="text"],
      input[type="time"],
      input[type="date"] 
      {
        width: 100px;
      }

      #caltype 
      {
        width: 80px;
      }

      #shengfen, #xianshi 
      {
        width: 100px;
      }

      .submitButton 
      {
        width: 150px;
        height: 35px;
        font-size: 16px;
      }

      .logo
      {
        width: 80px; /* 响应式调整 */
        height: 60px;
      }      

    }

    @media (max-width: 480px) 
    {
      #main-box, .top-menu, .footer-links 
      {
        width: calc(100% - 10px);
      }
      
       #birthday 
       {
         min-width: 150px; /* 在屏幕宽度小于或等于768px时应用此最小宽度 */
       }

      #main-box 
      {
        padding: 2px 10px 15px;
      }

      .main-title 
      {
        font-size: 20px;
      }
      
      .main-title-red 
      {
        font-size: 20px;
      }

      .grid-container 
      {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(9, auto);
        gap: 8px;
      }

      .form-item 
      {
        flex-direction: row;
        align-items: center;
      }

      .form-item.center-button 
      {
        grid-column: 1 / 2;
      }

      label 
      {
        width: 70px;
        text-align: left;
      }

      input[type="text"],
      input[type="time"],
      input[type="date"],
      #caltype,
      #shengfen,
      #xianshi 
      {
        width: calc(100% - 80px);
        max-width: 150px;
      }

      .submitButton 
      {
        width: 100%;
        height: 40px;
        font-size: 16px;
      }

      .top-menu a 
      {
        font-size: 16px;
        margin: 0 10px;
      }

      .logo 
      {
        width: 80px;
        height: 60px;
        margin-right: 10px;
      }

      .top-menu 
      {
        height: 50px;
        padding: 2px 10px;
        margin-top: 6px;
      }
    }