@font-face {
    font-family: 'Poppins';
    src: url(../resourc/Poppins-Regular.ttf) format('truetype');
  }
  @font-face {
    font-family: 'Source Han Sans';
    src: url(../resourc/SourceHanSansCN-Regular.otf) format('truetype');
  }
  html{
      font-family: "Poppins" !important;
      font-size: 14pt;
  }
  
  html[lang*='zh']{
      
      font-family: 'Source Han Sans' !important;
  }
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  /* 修复容器高度计算 */
  .container {
  display: flex;
  height: calc(100vh - 70px); /* 减去header高度 */
  overflow: hidden; /* 防止外层滚动 */
  }
  
  .right-nav {
      display: none;
      width: 0;
      overflow-y: auto;
      overflow-x: hidden; /* 添加：隐藏水平滚动条 */
      transition: width 0.3s ease;
  }
  body.mobile .right-nav{
      position: absolute;
      right: 0px;
      bottom: 20px;
      width: 10vw;
      display: inline-block;
      height: 100px;
  }
  body.mobile .right-nav .pinToTop{
      background-color: #4ECCC0;
      border-radius: 50%;
  }
  
  
  /* 或者使用折叠状态 */
  .right-nav.collapsed {
  width: 0;
  padding: 0;
  border: none;
  overflow: hidden;
  }
  
  
  .content-body {
  flex: 1;
  overflow: auto; /* 只有这里可以滚动 */
  }
  
  /*body, input{
      font-family: "Noto Sans CJK sc","Open Sans",sans-serif;
  }*/
  body {
      background-color: #f5f7fa;
      color: #333;
      line-height: 1.6;
       overflow: hidden; /* 添加这一行 */
  }
  
  
  .content-body {
  flex: 1;
  overflow: auto; /* 只有这里可以滚动 */
  }
  
  /* 顶部搜索栏 */
  .header {
      background: white;
      color: #2c3e50;
      padding: 15px 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      border-bottom: 1px solid #e1e5e9;
  }
  body.mobile .header {
      display: block;
      padding: 4% 8%;
  }
  
  
  .logo {
      font-size: 22px;
      font-weight: bold;
      color: #2c3e50;
  }
  body.mobile .logo .manual-name{
      display: none;
  }
  
  body.mobile .logo{
      overflow: auto;
  }
  
  body.desktop .logo .downloadImg{
      display: none;
  }
  body.mobile .logo .downloadImg{
      float:right;
  }
  
  .search-container {
      position: relative;
      width: 450px;
  }
  body.mobile .search-container {
      width: 80vw;
  }
  .search-container .download_btn{
      display: inline-block;
      width: 30%;
      padding-right: 5px;
  }
  body.mobile .search-container .download_btn{
      display: none;
      
  }
  .search-container .download_btn button{
      width: 100%;
      height: 40px;
      background-color: #ffffff;
      border-radius: 5px;
      border-color: #4eccc000;
  }
  .search-container .download_btn button a{
      width: 100%;
      line-height: 40px;
      display: inline-block;
      text-decoration: auto;
      font-size: 12pt;
      
  }
  
  .search-container .download_btn button a:active {
      color: #4eccc0 !important;
  }
  .search-container .download_btn button a:hover {
      color: #4eccc0 !important;
  }
  
  .search-container .download_btn button a:-webkit-any-link {
      color: #666666;
  }
  
  .search-input {
      width: 70%;
      padding: 10px 15px;
      border: 1px solid #ddd;
      border-radius: 25px;
      background: #f8f9fa;
      font-size: 14px;
      outline: none;
      transition: all 0.3s;
      font-family: "Poppins" !important;
      background-image: url('../resourc/search.png'); /* 路径到你的放大镜图标 */
       background-repeat: no-repeat;
       background-size:10px;
       background-position: 20px center; /* 调整图标的位置 */
       padding-left: 40px; /* 确保输入框有足够的空间显示图标和文本 */
  }
  
  body.mobile .search-input {
      width: 100%;
      }
  
  .search-input:focus {
      border-color: #3498db;
      box-shadow: 0 0 10px rgba(52, 152, 219, 0.2);
  }
  
  .search-results {
      position: absolute;
      
      font-size: 14px;
      font-family: "Poppins" !important;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      max-height: 400px;
      overflow-y: auto;
      z-index: 1000;
      display: none;
  }
  
  .search-result-item {
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
      cursor: pointer;
      transition: background 0.2s;
  }
  
  .search-result-item:hover {
      background: #f0f7ff;
  }
  
  .search-highlight {
      background-color: #ffeb3b;
      padding: 0 2px;
      border-radius: 2px;
  }
  
  
  
  /* 左侧导航 */
  .left-nav {
      width: 280px;
      background: white;
      border-right: 1px solid #e1e5e9;
      overflow-y: auto;
      padding: 20px 0;
  }
  
  .nav-item {
      padding: 12px 25px;
      cursor: pointer;
      transition: all 0.2s;
      border-left: 3px solid transparent;
      user-select: none;
  }
  
  .nav-item.level1 {
      font-weight: bold;
      color: #2c3e50;
      font-size: 16px;
      margin-top: 10px;
  }
  
  .nav-item.level2 {
      padding-left: 40px;
      color: #5a6c7d;
      font-size: 14px;
  }
  
  .nav-item.level3 {
      padding-left: 55px;
      font-size: 13px;
      color: #6c757d;
  }
  
  .nav-item.level2:hover, 
  .nav-item.level3:hover, 
  .nav-item.active {
      background: #4eccc030;
      border-left: 3px solid #4eccc0;
      color: #4eccc0;
      font-weight: bold;
  }
  
  .nav-item.has-children::after {
      content: "▶";
      float: right;
      font-size: 12px;
      transition: transform 0.3s;
  }
  
  .nav-item.has-children.expanded::after {
      transform: rotate(90deg);
  }
  
  .nav-children {
      display: none;
      background: #f8f9fa;
  }
  
  .nav-children.expanded {
      display: block;
  }
  /* 在现有nav-item样式后添加 */
  .nav-item.level4 {
  padding-left: 70px;
  font-size: 12px;
  color: #8a8a8a;
  }
  
  .nav-item.level4:hover, 
  .nav-item.level4.active {
  background: #4eccc0aa;
  border-left: 3px solid #4eccc0;
  color: #4eccc0;
  font-weight: bold;
  } 
  /* 中间内容区域 */
  .content {
      flex: 1;
      background: white;
      overflow-y: auto;
      padding: 0;
      position: relative;
  }
  
  .breadcrumb {
      background: #f8f9fa;
      padding: 15px 30px;
      border-bottom: 1px solid #e1e5e9;
      font-size: 14px;
  }
  
  .breadcrumb-item {
      display: inline-block;
      color: #5a6c7d;
      cursor: pointer;
      transition: color 0.2s;
  }
  
  .breadcrumb-item:hover {
      color: #2196f3;
  }
  
  .breadcrumb-separator {
      margin: 0 8px;
      color: #bdc3c7;
  }
  
  .breadcrumb-item.current {
      color: #2c3e50;
      font-weight: 500;
      cursor: default;
  }
  
  .breadcrumb-item.current:hover {
      color: #2c3e50;
  }
  
  .content-body {
      flex: 1;
  overflow: hidden; /* 只有这里可以滚动 */
  overflow-x: hidden; /* 添加：隐藏水平滚动条 */
  }
  
  .content-section {
      margin-bottom: 40px;
      padding-bottom: 20px;
      border-bottom: 1px solid #eee;
  }
  
  .content-section h2 {
      color: #2c3e50;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 2px solid #3498db;
  }
  
  .content-section h3 {
      color: #34495e;
      margin: 25px 0 15px;
      padding-left: 10px;
      border-left: 4px solid #3498db;
  }
  
  .content-section p {
      margin-bottom: 15px;
      text-align: justify;
  }
  
  
  
  /* 左侧导航保持不变 */
  .left-nav {
  width: 280px;
  background: white;
  border-right: 1px solid #e1e5e9;
  overflow-y: auto;
  padding: 20px 0;
  }
  
  /* 中间内容区域占据剩余全部空间 */
  .content {
  flex: 1;
  background: white;
  overflow-y: hidden;
  padding: 0;
  position: relative;
  }
  
  /* 在现有CSS中添加以下样式 */
  .content-body .p {
      margin-bottom: 15px;
      text-align: justify;
  }
  
  .content-body .section {
      margin-bottom: 30px;
  }
  
  .content-body .sectiontitle {
      color: #34495e;
      margin: 25px 0 15px;
      padding-left: 10px;
      border-left: 4px solid #3498db;
  }
  
  .content-body .fig {
      margin: 20px 0;
      text-align: center;
  }
  
  .content-body .image {
      max-width: 100%;
      height: auto;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 5px;
  }
  
  .content-body .title.topictitle1 {
      color: #2c3e50;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid #3498db;
  }
  
  
  .chapter-nav-title {
      font-size: 16px;
      font-weight: bold;
      color: #2c3e50;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
  }
  
  .chapter-item {
      padding: 10px 15px;
      margin-bottom: 8px;
      cursor: pointer;
      border-radius: 5px;
      transition: all 0.2s;
      font-size: 14px;
      color: #5a6c7d;
  }
  
  .chapter-item:hover {
      background: #e3f2fd;
      color: #1976d2;
  }
  
  .chapter-item.active {
      background: #2196f3;
      color: white;
  }
  /* 主要优化 */
  .container {
  display: flex;
  overflow: hidden;
  }
  
  body.mobile .left-nav{
      position: absolute;
      left: -350px;
      height: calc(100vh - 155px);
      z-index: 10;
      transition: 1s;
  }
  
  
  .left-nav {
  width: 280px;
  min-width: 280px;
  background: white;
  border-right: 1px solid #e1e5e9;
  overflow-y: auto;
  padding: 20px 0;
  }
  
  
  .right-nav.expanded {
  width: 240px;
  min-width: 240px;
  padding: 20px 15px;
  }
  
  .nav-button {
      display: flex;
      align-items: center;
      padding: 8px 15px;
      border-radius: 5px;
      cursor: pointer;
      transition: all 0.2s;
      color: #4eccc0;
      font-weight: 700;
  }
  
  .nav-button:hover {
      background: #4eccc050;
      transform: translateY(-2px);
  }
  
  .nav-button.prev::before {
      content: "<<<";
  /*    content: "←";*/
      margin-right: 8px;
      
  }
  
  .nav-button.next::after {
      content: ">>>";
  /*    content: "→";*/
      margin-left: 8px;
  }
  
  body.desktop .nav-button.prev::before,body.desktop .nav-button.next::after {
      font-size:20pt;
  }
  
  .nav-button.disabled {
      color: #bdc3c7;
      cursor: not-allowed;
  }
  
  .nav-button.disabled:hover {
      background: transparent;
      transform: none;
  }
  
  /* 加载动画 */
  .loading {
      text-align: center;
      padding: 40px;
      color: #7f8c8d;
  }
  
  .loading::after {
      content: "";
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 2px solid #3498db;
      border-top: 2px solid transparent;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-left: 10px;
  }
  
  @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  
  /* 新增样式：确保单个HTML文件内容正确显示 */
  .extracted-content {
      line-height: 1.6;
  }
  
  .extracted-content p {
      margin-bottom: 15px;
      text-align: justify;
  }
  
  .extracted-content img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 15px auto;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 5px;
  }
  
  .extracted-content h1 {
      color: #2c3e50;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid #3498db;
  }
  
  .error-message {
      background: #ffeaa7;
      border: 1px solid #fdcb6e;
      border-radius: 5px;
      padding: 20px;
      margin: 20px 0;
  }
  /* 注意/警告样式 - 应用于所有HTML文件 */
  .note.caution.note_caution,
  .note.caution,
  .note.note_caution,
  .caution.note_caution,
  .note.caution,
  [class*="caution"],
  [class*="note_caution"] {
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  border-left: 4px solid #fdcb6e;
  border-radius: 4px;
  padding: 15px 15px 15px 45px;
  margin: 15px 0;
  position: relative;
  font-family: "Microsoft YaHei", sans-serif;
  color: #856404;
  line-height: 1.5;
  }
  
  .note.caution.note_caution::before,
  .note.caution::before,
  .note.note_caution::before,
  .caution.note_caution::before {
  content: "!";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: #fdcb6e;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  }
  
  /* 确保在iframe中也能正确显示 */
  .extracted-content .note.caution.note_caution,
  .content-body .note.caution.note_caution,
  iframe .note.caution.note_caution {
  background-color: #fff3cd !important;
  border: 1px solid #ffeaa7 !important;
  border-left: 4px solid #fdcb6e !important;
  border-radius: 4px !important;
  padding: 15px 15px 15px 45px !important;
  margin: 15px 0 !important;
  position: relative !important;
  color: #856404 !important;
  }
  
  .extracted-content .note.caution.note_caution::before,
  .content-body .note.caution.note_caution::before,
  iframe .note.caution.note_caution::before {
  content: "!" !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  background-color: #fdcb6e !important;
  color: white !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: bold !important;
  font-size: 14px !important;
  }
  /* 滚动条美化 */
  ::-webkit-scrollbar {
  width: 6px;
  }
  
  ::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
  }
  
  ::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
  }
  
  /* 防止文本溢出 */
  /*.nav-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }*/
  
  .breadcrumb {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  } 
  /* 底部导航 */
  .footer-nav {
  font-family: "Poppins" !important;
  position: fixed;
  bottom: 0;
  left: 280px;
  right: 0;
  background: white;
  border-top: 1px solid #e1e5e9;
  padding: 12px 30px; /* 调整内边距，使总高度约为40px */
  display: flex;
  justify-content: space-between;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
  height: 40px; /* 明确设置高度为40px */
  align-items: center; /* 垂直居中内容 */
  margin-top: 0; /* 移除之前可能存在的上边距 */
  }
  body.mobile .footer-nav{ 
      left: 0;
      width: 100vw;
      top: calc(100vh - 40px);
  }
  
  /* 调整容器高度，为底部导航留出更多空间 */
  .container {
  display: flex;
  overflow: hidden;
  }
  
  /* 确保内容区域有足够的底部内边距 */
  .content-body {
  flex: 1;
  overflow: auto;
  padding-bottom: 40px; /* 增加底部内边距，确保内容不会与底部导航重叠 */
  }
  
  /* 为iframe内容也添加底部内边距 */
  .content-body iframe {
  width: 100% !important; /* 强制100%宽度 */
  height: 100%;
  border: none;
  display: block;
  margin: 0 !important; /* 移除所有外边距 */
  padding: 0 !important; /* 移除所有内边距 */
  }
  
  /* 可选：为底部导航按钮增加更多内边距，让它们更明显 */
  .nav-button {
  display: flex;
  align-items: center;
  padding: 12px 20px; /* 增加按钮内边距 */
  border-radius: 6px; /* 稍微增加圆角 */
  cursor: pointer;
  transition: all 0.2s;
  color: #4eccc0;
  font-weight: 500;
  margin: 0 10px; /* 按钮之间的间距 */
  } 
  /* 优化正文区域滚动条 */
  .content-body {
  flex: 1;
  overflow: hidden; /* 隐藏外部滚动条 */
  padding: 0 0px; 
  
  
  }
  /* 确保所有可能的内容都有间距 */
  .content-body .loading,
  .content-body .error-message {
  padding-right: 20px;
  }
  /* 强制移除所有可能的右边距 */
  .content .content-body,
  .content-body iframe,
  .content-body .extracted-content {
  margin-right: 0 !important;
  padding-right: 0 !important;
  }
  
  /* 优化iframe滚动 */
  .content-body iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block; /* 移除iframe默认的内联间隙 */
  
  }
  
  /* 确保iframe内容正确显示 */
  .content-body iframe body {
  overflow: auto; /* iframe内部可以滚动 */
  padding: 20px 30px; /* 为iframe内容添加内边距 */
  }
  
  /* 可选：隐藏iframe的滚动条（如果需要更简洁的外观） */
  .content-body iframe::-webkit-scrollbar {
  width: 8px;
  }
  
  .content-body iframe::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
  }
  
  .content-body iframe::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
  }
  
  .content-body iframe::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
  }
  
  
  
  
  /* 确保内容区域占据正确空间 */
  .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  height: calc(100vh - 70px - 50px);/* 为底部导航预留空间 */
  }
  body.mobile .content{
      height: calc(100vh - 155px);
  }
  /* 搜索加载状态 */
  .search-loading {
  padding: 20px;
  text-align: center;
  color: #666;
  }
  
  .search-loading::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #3498db;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 10px;
  }
  
  #occlusion{
      display: none;
      width: 100%;
      position: absolute;
      left: 0px;
      top: 0px;
      height: 100vh;
      z-index: 9;
  }
  #occlusion.expand{
      display: block;
  }