@charset "UTF-8";
/* 全局样式重置 */
:root {
  --primary-color: #3498db;
  --secondary-color: #2980b9;
  --accent-color: #e74c3c;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
  --gray-color: #6c757d;
  --success-color: #28a745;
  --border-radius: 8px;
  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
  /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
}
/*2025年6月20日14:28:11 ↓*/
body {
    margin: 0;
    padding: 0;
    padding-bottom: clamp(30px, 5vh, 90px);
    font-family: Arial, sans-serif;
    background-color: #f8fafc;
  }
html {
  scroll-padding-top: clamp(70px, 10vh, 140px);
}
/*头部*/
.header {
      background-color: #2989d8;
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: clamp(12px, 2.5vh, 54px) clamp(20px, 3vw, 64px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影增强悬浮效果 */
      position: sticky; /* 关键属性 */
      top: 0; /* 固定在顶部 */
      z-index: 1000; /* 确保在其他内容之上 */
      transition: background-color 0.3s ease; /* 可选：添加过渡效果 */
    }
    .header:hover {
      background-color: #1a69a4;
    }

/* logo*/
.logo-container {
      display: flex;
      align-items: center;
    }
    .logo {
      width: clamp(28px, 3.8vh, 65px);
      height: clamp(28px, 3.8vh, 65px);
      margin-right: clamp(6px, 0.8vw, 16px);
      transition: transform 0.3s ease;
    }
    .logo-text {
      font-size: clamp(16px, 2.3vh, 50px);
      font-weight: bold;
    }
    .logo-text_2 {
      font-size: clamp(12px, 1.6vh, 35px);
      font-weight: bold;
      white-space: nowrap;
    }
    .logo:hover {
      transform: rotate(15deg);
    }

/* nav*/
.nav {
      margin-top: clamp(6px, 1.2vh, 26px);
    }
    .nav-list {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      flex-wrap: wrap;
    }
    .nav-item {
      margin-right: clamp(8px, 1vw, 24px);
      margin-bottom: 5px;
    }
    .nav-link {
      color: white;
      text-decoration: none;
      font-size: clamp(14px, 1.6vh, 32px);
      padding: clamp(4px, 0.8vh, 18px) clamp(8px, 1vw, 20px);
      border-radius: 4px;
      transition: all 0.3s;
      display: inline-block;
      white-space: nowrap;
    }
    .nav-link:hover {
      background-color: rgba(255, 255, 255, 0.2);
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .active {
      background-color: rgba(255, 255, 255, 0.2);
      font-weight: 500;
    }

/*2025年6月20日14:30:25 ↑*/

/* 主要内容区域 */
.main-content {
  margin-left: 250px; /* 侧边栏宽度 */
  margin-top: clamp(15px, 2vh, 40px);
  padding: 0 20px;
  padding-bottom: 30px;
}

.content-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  background-color: white;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 20px;
}

  /*展示基本信息的格式*/
.label {
  font-weight: bold;
  width: 200px;
  display: inline-block;
  text-align: right;
}

.value {
  margin-left: auto;
  word-wrap: break-word; /* 允许长单词/URL 换行到下一行 */
  /* 或 */
/*word-break: normal; */
  /* 正常断字（更灵活） */
}

/*以下为左侧容器部分*/
.content-sidebar {
  position: fixed;
  left: 30px;
  top: clamp(75px, 10vh, 145px);
  width: 220px;
  bottom: clamp(35px, 4vh, 70px);
  height: calc(100vh - clamp(110px, 15vh, 215px));
  background-color: white;
  color: var(--text-color);
  padding: 20px 0;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
  overflow-y: auto;
}

.content-sidebar-header {
  padding: 0 20px 15px;
  border-bottom: 1px solid #e0e0e0;
  text-align: center;
}

.content-sidebar-header h3 {
  font-size: 1.1rem;
  margin-bottom: 5px;
}

.content-sidebar-menu {
  list-style: none;
  padding: 15px 0;
}

.content-sidebar-menu li {
  padding: 10px 20px;
  transition: var(--transition);
}

.content-sidebar-menu li a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 1rem;
  transition: var(--transition);
  display: flex;
  align-items: center;
}

.content-sidebar-menu li a i {
  margin-right: 10px;
  width: 20px;
  text-align: center;
  color: var(--primary-color);
}

.content-sidebar-menu li:hover {
  background-color: #f5f7fa;
}

.content-sidebar-menu li.active {
  background-color: #e8f4fc;
  border-left: 3px solid var(--primary-color);
}
/*以上为左侧容器部分*/

/*以下为卡片样式*/
/*{#  更新后的卡片样式#}*/
.modern-card {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    background-color: white;
    overflow: hidden;
    margin: 10px 0;
}
.modern-card-sm {
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  background-color: white;
  overflow: hidden;
  margin: 10px 0; /* 比父卡片更小的外边距 */
    padding-bottom: 20px;
}

.modern-card-sm .modern-card-header {
  /*  改一下设置*/
  background-color: var(--card-bg, var(--primary-color));
  color: white;
  padding: 8px 15px; /* 比父卡片更小的内边距 */
}

.modern-card-header {
  /*  改一下设置*/
  background-color: var(--card-bg, var(--primary-color));
  color: white;
  padding: 12px 20px;
}
.modern-card-header--green {
  --card-bg: #2ecc71; /* 绿色 */
    color: black;
}
.modern-card-header--red {
  --card-bg: #e74c3c; /* 红色 */
  color: black;
  /* 根据需要调整文字颜色 */
}
/* 浅色变体类 */
.modern-card-header--mint {
  --card-bg: #a2f2e0; /* 薄荷绿（柔和清新） */
    color: black;
}
.modern-card-header--lavender {
  --card-bg: #e6d5ff; /* 薰衣草紫（优雅浅紫） */
    color: black;
}
.modern-card-header--peach {
  --card-bg: #ffd8b1; /* 蜜桃色（温暖浅橙） */
    color: black;
}
.modern-card-header--sky {
  --card-bg: #c7e5ff; /* 天空蓝（通透浅蓝） */
    color: black;
}
.modern-card-header--pale-yellow {
  --card-bg: #fff9c4; /* 浅鹅黄（明亮不刺眼） */
    color: black;
}
.modern-card-header--dusty-pink {
  --card-bg: #ffcce6; /* 灰粉色（低饱和粉） */
    color: black;
}
.modern-card-header--ice {
  --card-bg: #e0f7fa; /* 冰蓝色（冷调浅色） */
    color: black;
}
/* 自然柔和色调 */
.modern-card-header--sand {
  --card-bg: #f5e9d3; /* 浅沙色（中性温暖） */
  color: black;
}
.modern-card-header--sage {
  --card-bg: #d1e5c2; /* 鼠尾草绿（灰调柔绿） */
  color: black;
}
.modern-card-header--fog {
  --card-bg: #e0e0e6; /* 雾灰色（冷调中性） */
  color: black;
}

/* 明亮浅色变体 */
.modern-card-header--butter {
  --card-bg: #fff3b8; /* 奶油黄（比鹅黄更柔和） */
  color: black;
}
.modern-card-header--coral {
  --card-bg: #ffc1b6; /* 浅珊瑚（低饱和粉橙） */
  color: black;
}
.modern-card-header--seafoam {
  --card-bg: #b8e8d8; /* 海泡沫绿（蓝绿混合） */
  color: black;
}
.modern-card-sm .modern-card-header h2 {
  font-size: 1rem; /* 比父卡片更小的字体大小 */
  margin: 0;
  display: flex;
  align-items: center;
}

.modern-card-header h2 {
  font-size: 1.2rem;
  margin: 0;
  display: flex;
  align-items: center;
}

.modern-card-sm .modern-card-header h2 i {
  margin-right: 6px; /* 比父卡片更小的图标间距 */
}

.modern-card-header h2 i {
  margin-right: 8px;
}

.modern-card-sm .modern-card-body {
  padding: 15px; /* 比父卡片更小的内边距 */
}

.modern-card-body {
    padding: 20px;
    overflow-x: hidden; /* 防止横向滚动 */
    /*2025年6月25日14:15:58，看起来overflow不太行*/
    }
/*以上为卡片样式*/

/*以下是氨基酸部分*/
/*展示氨基酸的格式*/
.sequence-container {
  width: 100%;
  border-bottom: 1px solid gray;
  display: flex;
  flex-wrap: wrap;
}
/* 数字标签样式 */
.position-label {
  width: 150px;
  text-align: left;
  margin-right: 0px;
}

/* 氨基酸字符样式 */
.amino-acid {
  width: 15px;
  text-align: left;
  margin-right: 0px;
}
/*以上是氨基酸部分*/

/*以下是结构可视化部分*/
.structure-viewer {
  width: 100%;
  height: 400px;
  margin-top: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}
/* 表格样式改进 */
/* 用于结构的表格 */
#data-table {
  width: 100%;
  /* 2025年6月25日14:26:07 */
    max-width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}

#data-table th,
#data-table td {
  border: 1px solid #e0e0e0;
  padding: 10px;
  text-align: left;
}

#data-table th {
  background-color: var(--light-color);
  color: white;
  font-weight: bold;
}

.data-row:nth-child(even) {
  background-color: #f2f2f2;
}

.data-row:nth-child(odd) {
  background-color: #fff;
}

.data-row.highlight {
  background-color: #f9f999;
}
/*以上还包含表格部分*/
/*以上是结构可视化部分*/
/* 信息网格布局 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}
.info-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
}

.info-item {
    display: flex;
    flex-direction: column;
  }

.info-label {
      font-weight: bold;
      color: #555;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
    }

    .info-label i {
      margin-right: 8px;
      width: 16px;
      text-align: center;
      color: var(--primary-color);
    }

    .info-value {
      background-color: #f8f9fa;
      padding: 8px 12px;
      border-radius: 4px;
      border-left: 3px solid var(--primary-color);
      word-break: break-all;
    }

    .info-value {
      background-color: #f8f9fa;
      padding: 8px 12px;
      border-radius: 4px;
      border-left: 3px solid var(--primary-color);
      word-break: break-all;
      position: relative; /* 为子元素定位提供参考 */
    }
/*内部使用的是info-table*/
.info-table-2{
    width: 100%;
    /*2025年6月25日14:25:49*/
    max-width: 100%;
    overflow-x: auto;

    border-collapse: collapse;
    margin: 10px 0;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
    .info-table-2 th {
        padding: 12px 15px;
        border-bottom: 1px solid #e0e0e0; /* 添加完整的边框 */
        text-align: left;
    }
    .info-table-2 td {
        padding: 12px 15px;
        border-bottom: 1px solid #e0e0e0; /* 添加完整的边框 */
        text-align: left;
    }
.info-table {
        width: 100%;
        /*2025年6月25日14:25:49*/
        max-width: 100%;
        overflow-x: auto;

        border-collapse: collapse;
        margin: 10px 0;
        font-size: 14px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .info-table td {
        padding: 12px 15px;
        border-bottom: 1px solid #e0e0e0; /* 添加完整的边框 */
    }

    .info-table td:first-child {
        /*width: 40%;*/
        /*width: 350px;*/
        font-weight: 500;
        color: #555;
        background-color: #f8f9fa;  /* 为标签列添加浅色背景 */
    }

    .info-table tr:last-child td {
        border-bottom: none;
    }

    .info-table tr:hover {
        background-color: #f5f5f5;
    }
    /* 为表格添加顶部和底部的阴影效果 */
    .info-table tbody tr:first-child td {
        border-top: 2px solid #ddd;
    }

    .info-table tbody tr:last-child td {
        border-bottom: 2px solid #ddd;
    }

    /*用于修改表格宽度*/

.details-section {
  display: none;
}

/*以下是图片容器*/
.Fig-image-container {
    text-align: center;
    margin-bottom: 10px;

    /* 2025年11月28日17:10:47 以下删除 */
    /*overflow-x: hidden;*/

    /* 2025年11月28日17:10:20 以下增加 */
    max-width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Fig-image {
    max-height: 150px;
    max-width: 150px;
    /* 2025年11月28日17:09:17 以下增加 */
    height: auto;
    width: auto;
    object-fit: contain; /* 保持比例 */

}

.Fig-text-container {
    line-height: 1.5;
}

.Fig-label-value {
    margin: 0;
    font-size: 16px;
}

/* 为medium-zoom的放大图片设置基础样式 */
.medium-zoom-image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}
/*以上是图片容器*/

/* 底部样式 */
#bottom {
    background-color: #2989d8;
    color: #ccc7d5;
    font-size: clamp(10px, 1.5vh, 32px);
    padding: clamp(5px, 1.2vh, 26px) 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
    z-index: 100;
    transition: background-color 0.3s ease;
}

#bottom:hover {
    background-color: #1a69a4;
}

/* 打印时取消固定定位 */
@media print {
    .header, #bottom { position: static; }
}

/* 错误信息 */
.error-message {
    padding: 15px;
    margin: 20px 0;
    background-color: #f8d7da;
    color: #721c24;
    border-radius: 4px;
    border: 1px solid #f5c6cb;
}

/* 加载状态样式 */
.loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0;
    min-height: 200px;
}