body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background-color: #f0f2f5;
      color: #333;
      line-height: 1.6;
  }

  .container {
      max-width: 900px;
      margin: 30px auto;
      padding: 20px 40px;
      background-color: #fff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      border-radius: 8px;
  }

  h1 {
      text-align: center;
      color: #1a5c9a;
  }

  .intro {
      text-align: center;
      color: #666;
      margin-bottom: 25px;
  }

  .constitution-group {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 25px;
  }

  .constitution-group legend {
      font-size: 1.2em;
      font-weight: bold;
      color: #1a5c9a;
      padding: 0 10px;
  }

  .question {
      margin-bottom: 15px;
      padding-bottom: 20px;
      /* 间距，给选项留出空间 */
      border-bottom: 1px dashed #eee;
  }

  .question:last-child {
      border-bottom: none;
      margin-bottom: 0;
  }

  .question-text {
      font-weight: 500;
      margin-bottom: 10px;
  }

  .options {
      display: flex;
      /* 弹性盒子布局，让选项水平排列 */
      flex-wrap: wrap;
      /* 当空间不足时换行 */
      justify-content: flex-start;
      /* 选项靠开始对齐 */
      align-items: center;
      /* 垂直居中对齐 */
      padding-top: 8px;
      /* 选项与问题文本之间的间距 */
  }

  /* 选项的样式 */
  .options label {
      /* display: block; -- 因为用了flexbox布局，所以不需要 */
      margin-right: 25px;
      /* 选项之间的右边距 */
      margin-bottom: 10px;
      /* 换行后的垂直间距 */
      white-space: nowrap;
      /* 防止选项文字换行，如"没有（根本不）" */
      cursor: pointer;
  }

  .options input[type="radio"] {
      margin-right: 8px;
  }

  button[type="submit"] {
      display: block;
      width: 100%;
      padding: 15px;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
      background-color: #28a745;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.2s;
  }

  button[type="submit"]:hover {
      background-color: #218838;
  }

  .results-container {
      margin-top: 30px;
      padding: 20px;
      background-color: #e9f5ff;
      border: 1px solid #b3d7ff;
      border-radius: 8px;
  }

  #resultsTable {
      width: 100%;
      border-collapse: collapse;
  }

  #resultsTable th,
  #resultsTable td {
      border: 1px solid #ddd;
      padding: 10px;
      text-align: center;
  }

  #resultsTable th {
      background-color: #1a5c9a;
      color: white;
  }

  #resultsTable tbody tr:nth-child(even) {
      background-color: #f8f9fa;
  }

  .highlight {
      font-weight: bold;
      color: #d9534f;
  }

  .chart-container {
      position: relative;
      margin-bottom: 30px;
      /* 图表与下方内容之间的间距 */
      width: 100%;
      height: auto;
  }

  /* --- 新增：用户信息表单样式 --- */
  .form-group {
      margin-bottom: 20px;
  }

  .form-group label {
      display: block;
      font-weight: bold;
      margin-bottom: 8px;
      color: #333;
  }

  .form-group input[type="text"],
  .form-group input[type="number"],
  .form-group input[type="password"],
  .form-group input[type="tel"],
  .form-group input[type="date"],
  .form-group select {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
      box-sizing: border-box;
      /* 确保 padding 不会影响宽度 */
  }

  .form-group .radio-group {
      display: flex;
      align-items: center;
  }

  .form-group .radio-group label {
      font-weight: normal;
      margin-right: 30px;
      margin-bottom: 0;
      /* 重置 label 的下边距 */
  }

  .form-group small {
      display: block;
      color: #666;
      font-size: 12px;
      margin-top: 5px;
  }

  #startBtn,
  #loginBtn {
      display: block;
      width: 100%;
      padding: 15px;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
      background-color: #007bff;
      /* 换个颜色和提交按钮区分 */
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.2s;
      margin-top: 30px;
  }

  #startBtn:hover,
  #loginBtn:hover {
      background-color: #0056b3;
  }

  /* --- 新增：结果页的"下一步"按钮 --- */
  .next-step-container {
      text-align: center;
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid #ddd;
  }

  .button-new {
      display: inline-block;
      padding: 12px 25px;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
      background-color: #ff7f50;
      /* 珊瑚色，醒目但不同于提交按钮 */
      border-radius: 5px;
      text-decoration: none;
      transition: background-color 0.2s;
  }

  .button-next:hover {
      background-color: #e56a40;
  }

  /* --- 新增：健康数据页面的表单样式 --- */
  .data-group {
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 10px;
      margin-bottom: 30px;
      font-size: 12px;
  }

  .form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 15px;
  }


  /* --------------------------------------------- */


  /* 响应式布局样式 */
  .data-group {
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
      padding: 10px;
      box-sizing: border-box;
  }

  .nav-buttons-container {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      justify-content: flex-start;
      align-items: center;
      margin-top: 15px;
  }

  .nav-button-wrapper {
      flex: 1 1 auto;
      min-width: 100px;
  }

  .button-next {
      display: inline-block;
      width: 100%;
      padding: 12px 20px;
      background-color: #007bff;
      color: white;
      text-decoration: none;
      border: none;
      border-radius: 6px;
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      box-sizing: border-box;
  }

  .nav-button-cancel {
      background-color: #6c757d;
      text-decoration: none;
      border: none;
      text-align: center;
      transition: all 0.3s ease;
      box-sizing: border-box;
      margin-top: 10px;
      display: block;
      width: 100%;
      padding: 13px;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.2s;
      margin: 0px;
  }

  .button-next:hover {
      background-color: #0056b3;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  /* 移动端适配 */
  @media (max-width: 768px) {
      .data-group {
          padding: 15px;
      }

      .nav-buttons-container {
          flex-direction: column;
          gap: 12px;
      }

      .nav-button-wrapper {
          min-width: 100%;
          width: 100%;
      }

      .button-next {
          padding: 14px 20px;
          font-size: 15px;
      }

      h2 {
          font-size: 1.4rem;
          text-align: center;
      }
  }

  @media (max-width: 480px) {
      .data-group {
          padding: 10px;
      }

      .button-next {
          padding: 12px 16px;
          font-size: 14px;
      }

      h2 {
          font-size: 1.3rem;
      }
  }

  /* 大屏幕适配 */
  @media (min-width: 1200px) {
      .nav-buttons-container {
          justify-content: center;
          gap: 20px;
      }

      .nav-button-wrapper {
          flex: 0 1 300px;
      }
  }

  /* 过敏史和健康提升诉求选项样式 */
  .checkbox-group {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
      margin-bottom: 15px;
  }

  .checkbox-group label {
      font-size: 16px;
      font-weight: 500;
      margin-right: 0;
      display: flex;
      align-items: center;
  }

  .checkbox-group input[type="checkbox"] {
      transform: scale(1.3);
      margin-right: 10px;
  }

  .full-width {
      grid-column: 1 / -1;
  }

  #other_drug_allergy input[type="text"],
  #other_food_allergy input[type="text"] {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
  }

  @media (max-width: 768px) {
      .checkbox-group {
          grid-template-columns: 1fr;
          gap: 10px;
      }

      .checkbox-group label {
          font-size: 14px;
      }

      .checkbox-group input[type="checkbox"] {
          transform: scale(1.2);
      }
  }

  /* 基础样式 */
  body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      color: #333;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
  }

  .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 10px;
      background-color: white;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin-top: 20px;
      margin-bottom: 20px;
      align-items: center;
  }

  h1,
  h2 {
      color: #2c3e50;
      text-align: center;
  }

  .intro {
      text-align: center;
      color: #7f8c8d;
      margin-bottom: 30px;
  }

  /* 表单样式 */
  .form-group {
      margin-bottom: 20px;
  }

  .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 16px;
      box-sizing: border-box;
  }

  .form-group input[type="radio"] {
      width: auto;
      margin-right: 5px;
  }

  .radio-group {
      display: flex;
      gap: 15px;
  }

  .radio-group label {
      font-weight: normal;
      display: flex;
      align-items: center;
  }

  /* 表单网格布局 */
  .form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
  }

  /* 日期输入组样式 */
  .date-input-group {
      display: flex;
      gap: 10px;
  }

  .date-input-group input,
  .date-input-group select {
      flex: 1;
      width: auto;
  }

  .date-input-group input[type="number"] {
      flex: 2;
  }

  .date-input-group input[type="hidden"] {
      display: none;
  }

  /* 表单提示信息 */
  small {
      display: block;
      color: #7f8c8d;
      font-size: 14px;
      margin-top: 5px;
  }

  /* 按钮样式 */
  button,
  .button,
  .button-cancel,
  .button-secondary {
      display: inline-block;
      padding: 12px 24px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      text-align: center;
      text-decoration: none;
      transition: background-color 0.3s;
      margin: 5px;
      width: 80%;
  }

  button:hover,
  .button:hover {
      background-color: #2980b9;
  }

  .button-cancel {
      background-color: #95a5a6;
  }

  .button-cancel:hover {
      background-color: #7f8c8d;
  }

  .button-secondary {
      background-color: #e67e22;
  }

  .button-secondary:hover {
      background-color: #d35400;
  }

  /* 数据组样式 */
  .data-group {
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 10px;
      margin-bottom: 20px;
  }

  .data-group legend {
      font-weight: bold;
      color: #2c3e50;
      padding: 0 10px;
  }

  /* 表格样式 */
  table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
      font-size: 12px;
      align-self: center;
      align-items: center;
  }

  table,
  th,
  td {
      border: 1px solid #ddd;
  }

  th,
  td {
      padding: 12px;
      text-align: left;
  }

  th {
      background-color: #ecf0f1;
  }

  tr:nth-child(even) {
      background-color: #f9f9f9;
  }

  .highlight {
      background-color: #ffeaa7;
      font-weight: bold;
  }

  /* 问题组样式 */
  .question-group {
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 15px;
      margin-bottom: 15px;
  }

  .question-group h3 {
      margin-top: 0;
      color: #2c3e50;
  }

  /* 问题样式 */
  .question {
      margin-bottom: 15px;
      padding: 10px;
      border: 1px solid #eee;
      border-radius: 4px;
      background-color: #fafafa;
  }

  .question-text {
      font-weight: bold;
      margin-bottom: 10px;
  }

  .options {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 10px;
  }

  .options label {
      font-weight: normal;
      display: flex;
      align-items: center;
      padding: 5px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: white;
      cursor: pointer;
      transition: background-color 0.2s;
  }

  .options label:hover {
      background-color: #ecf0f1;
  }

  .options input[type="radio"] {
      margin-right: 8px;
  }

  /* 结果容器样式 */
  .results {
      display: none;
      margin-top: 30px;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 4px;
      background-color: #fff;
  }

  /* 页脚样式 */
  .footer {
      text-align: center;
      margin-top: 30px;
      color: #7f8c8d;
      font-size: 14px;
  }

  /* 作者样式 */
  .author {
      text-align: right;
      margin-top: 30px;
      color: #7f8c8d;
      font-size: 14px;
  }

  .button-login {
      width: auto;
      height: 45px;
      padding: 10px 15px;
      background: linear-gradient(135deg, #3498db, #2c3e50);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      margin-top: 0;
      text-decoration: none;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
  }

  .button-assessment {
      width: auto;
      height: auto;
      padding: 5px 5px;
      background: linear-gradient(135deg, #3498db, #2c3e50);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 10px;
      font-weight: 300;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      margin-top: 0;
      text-decoration: none;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      text-align: center;
  }


  .back-btn {
      display: inline-block;
      margin-top: 20px;
      padding: 10px 20px;
      background-color: #1a5c9a;
      color: white;
      text-decoration: none;
      border-radius: 5px;
  }

  .back-btn:hover {
      background-color: #0d3a6e;
  }

  .button-group {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      margin-top: 20px;
  }

  .loading {
      text-align: center;
      padding: 20px;
      margin-top: 20px;
  }

  .spinner {
      border: 4px solid #f3f3f3;
      border-top: 4px solid #3498db;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      animation: spin 2s linear infinite;
      margin: 0 auto 20px;
  }

  /* 仅在超小屏幕下减小间距，保证3列依然能放下 */
  @media (max-width: 400px) {
      .button-group {
          gap: 5px;
          /* 间距变小，给按钮留更多空间 */
      }

      .button-group button {
          font-size: 12px;
          /* 字体变小 */
          padding: 5px 2px;
      }
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
      .container {
          padding: 10px;
          margin: 10px;
      }

      .form-grid {
          grid-template-columns: 1fr;
      }

      .options {
          grid-template-columns: 1fr;
      }

      .date-input-group {
          flex-direction: column;
      }

      .date-input-group input,
      .date-input-group select {
          width: 100%;
          flex: 1;
      }

      button,
      .button,
      .button-cancel {
          display: block;
          width: 80%;
          margin-bottom: 10px;
      }

      .button-group {
          grid-template-columns: 1fr;
          /* Mobile: 1 column */
      }
  }

  @media (min-width: 769px) and (max-width: 1024px) {
      .button-group {
          grid-template-columns: repeat(2, 1fr);
          /* Tablet: 2 columns */
      }
  }

  /* =========================================
   移动端响应式适配 (追加到 style.css 末尾)
   ========================================= */

  /* 1. 移动端顶部标题栏样式 */
  .mobile-header {
      display: none;
      /* PC端隐藏 */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 50px;
      background: linear-gradient(135deg, #1a5c9a, #0d3a6e);
      color: white;
      z-index: 2000;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      padding: 0 10px;
      box-sizing: border-box;
  }

  .mobile-header .back-icon {
      position: absolute;
      left: 15px;
      font-size: 24px;
      text-decoration: none;
      color: white;
      line-height: 50px;
      top: 0;
      cursor: pointer;
  }

  .mobile-header .header-title {
      font-size: 18px;
      font-weight: bold;
  }

  /* 2. 媒体查询：针对手机屏幕 (小于 768px) */
  @media (max-width: 768px) {

      /* 显示顶部栏 */
      .mobile-header {
          display: flex;
      }

      /* 调整主体容器，避开顶部栏 */
      .container,
      .content {
          margin: 60px auto 20px auto !important;
          /* 顶部留出空间 */
          padding: 15px !important;
          width: 95% !important;
          max-width: 100% !important;
          box-shadow: none;
          /* 移动端去掉大阴影，更扁平 */
      }

      /* 隐藏左侧悬浮 Sidebar (改用底部或顶部导航，这里按需求简化为隐藏，依赖顶部返回) */
      .sidebar {
          display: none !important;
      }

      /* 标题调整 */
      h1 {
          font-size: 1.5rem;
          margin-bottom: 15px;
      }

      h2 {
          font-size: 1.3rem;
      }

      /* 表单网格由多列变单列 */
      .form-grid {
          grid-template-columns: 1fr !important;
          gap: 10px;
      }

      .form-row {
          flex-direction: column;
      }

      /* 选项/单选框布局调整 */
      .options {
          flex-direction: column;
          align-items: flex-start;
      }

      .options label {
          margin-bottom: 8px;
          width: 100%;
          padding: 8px;
          border: 1px solid #eee;
          border-radius: 4px;
          box-sizing: border-box;
          /* 增加点击区域 */
      }

      /* 表格响应式：增加横向滚动条 */
      table {
          display: block;
          width: 100%;
          overflow-x: auto;
          white-space: nowrap;
          /* 防止内容过度换行 */
      }

      /* 按钮适配 */
      button,
      .button,
      .button-login,
      .back-btn {
          width: 100% !important;
          margin: 10px 0;
          box-sizing: border-box;
      }

      /* 底部导航栏适配 (如果保留 Sidebar 作为底部导航) */
      /* 如果你想保留底部导航，可以使用之前提供的 .sidebar 样式覆盖 */

      /* 调整日期输入组 */
      .date-input-group {
          flex-direction: row;
          /* 保持一行，但可能需要缩小字体 */
      }

      .date-input-group input,
      .date-input-group select {
          padding: 8px 2px;
          font-size: 14px;
      }

      /* 隐藏不需要在移动端显示的大图或调整SVG容器 */
      .organ-viz-container div {
          width: 100% !important;
          height: auto !important;
          background-size: contain !important;
          /* 注意：SVG 内部的高宽可能需要 JS 动态调整，或者CSS缩放 */
          transform: scale(0.8);
          transform-origin: top center;
          margin-bottom: -100px;
          /* 修正缩放后的空白 */
      }

      /* =========================================
   移动端底部导航栏适配 (Bottom Tab Bar)
   ========================================= */

      @media (max-width: 768px) {

          /* 1. 导航栏容器：固定到底部 */
          .sidebar {
              display: block !important;
              /* 确保显示 */
              position: fixed;
              top: auto;
              /*以此覆盖原本的top定位*/
              bottom: 0;
              /* 固定到底部 */
              left: 0;
              width: 100%;
              height: 60px;
              /* 底部导航高度 */
              background-color: #ffffff;
              box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
              /* 向上阴影 */
              border-radius: 0;
              /* 去掉圆角 */
              padding: 0;
              z-index: 9999;
              transform: none;
              /* 移除位移 */
          }

          /* 2. 列表布局：改为水平排列 */
          .sidebar ul {
              display: flex;
              flex-direction: row;
              justify-content: space-around;
              /* 均匀分布 */
              align-items: center;
              height: 100%;
              margin: 0;
              padding: 0;
          }

          .sidebar li {
              flex: 1;
              margin: 0;
              height: 100%;
          }

          /* 3. 链接样式：图标+文字垂直排列 */
          .sidebar a {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              height: 100%;
              padding: 0;
              border-radius: 0;
              font-size: 12px;
              /* 缩小字体 */
              color: #999;
              /* 默认灰色 */
              background-color: transparent !important;
              /* 去掉背景色 */
              line-height: 1.2;
          }

          /* 移除原本文字中的 <br> 换行影响，让 flex 自动控制 */
          .sidebar a br {
              display: none;
          }

          /* 4. 激活状态高亮 */
          .sidebar a.active {
              color: #1a5c9a;
              /* 激活颜色 */
              font-weight: bold;
              background-color: transparent;
          }

          /* 5. 使用 CSS 伪元素添加图标 (Emoji 或 图标字体) */

          /* 首页图标 */
          .sidebar a[href*="user_index"]::before {
              content: "🏠";
              /* 或者使用 font-awesome: "\f015" */
              font-size: 20px;
              margin-bottom: 2px;
              display: block;
          }

          /* 健康数据图标 */
          .sidebar a[href*="basic_health_data"]::before {
              content: "❤️";
              font-size: 20px;
              margin-bottom: 2px;
              display: block;
          }

          /* 健康评估图标 */
          .sidebar a[href*="health_assessment"]::before {
              content: "📝";
              font-size: 20px;
              margin-bottom: 2px;
              display: block;
          }

          /* 健康报告图标 */
          .sidebar a[href*="health_report"]::before {
              content: "📊";
              font-size: 20px;
              margin-bottom: 2px;
              display: block;
          }

          .sidebar a[href*="myself"]::before {
              content: "👤";
              /* 这里设置你想要的图标，例如 👤 或 🙋 */
              font-size: 20px;
              margin-bottom: 2px;
              display: block;
          }

          /* 6. 主体内容避让底部导航 */
          .content,
          .container {
              margin-bottom: 80px !important;
              /* 留出底部空间，防止内容被遮挡 */
          }
      }
  }