/* 上一个网址不是本域名的 隐藏返回按钮 ,配合开头的 document.documentElement.classList.add('show-back-btn'); */
html:not(.show-back-btn) .navbar .back-btn {
    display: none !important; 
}




/* navbar-parent的属性本来是在navbar里的, 提取出来做个parent div 是为了宽度100%, 导航栏有内容的地方对其中间*/
.navbar-parent {
  height: 40px;
  width: 100%;
  border-bottom: 1px solid #f3f4f6;

  /* 固定在顶部 */
  position: sticky;   /* 设置为粘性定位 */
  top: 0;             /* 当滚动到距离顶部 0px 时固定 */
  z-index: 999;       /* 确保它在其他内容的上方 */
  background-color: #ffffff; /* 必须设置背景色，否则向下滚动时下方文字会透过来 */
}

/* 导航条外层容器 */
.navbar {
  position: relative;
  height: 40px;
  width: 100%;              /* 【修改】改为100%适配手机 */
  max-width: 950px;         /* 【修改】最大宽度维持你的950px */
  box-sizing: border-box;   /* 【新增】防止padding撑破容器 */
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  z-index: 50;
  font-size: 1.125rem;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", "微軟正黑體", sans-serif;
}

/* 导航链接 */
.navbar .nav-link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 0.5rem;
  color: #3b82f6;
  text-decoration: none;
  transition: color 0.2s;
  
  cursor: pointer;
  
  white-space: nowrap; /* 强制不换行 */
  flex-shrink: 0;      /* 保证固定按钮不会被压缩变形 */
}

.navbar .nav-link:hover {
  color: #2563eb;
}

/* 分隔符 */
.navbar .nav-separator {
  color: #9ca3af;
  flex-shrink: 0;      
}

/* 专门针对可能超长的文本进行省略截断 */
.navbar .nav-link.truncate-link {
  display: block;      
  height: auto;        
  line-height: normal; 
  flex: 0 1 auto;      /* 允许在空间不足时被压缩 */
  min-width: 0;        /* flex子项截断必备属性 */
  overflow: hidden;    
  text-overflow: ellipsis; 
}


/* 【元素3】主内容区：占满剩余所有空间，一直生长到右侧菜单按钮 */
.navbar .nav-main-area {
  flex: 1;                 /* 占据除菜单按钮外的所有空间 */
  display: flex;
  align-items: center;
  min-width: 0;            /* 【关键】允许其内部的元素被压缩，打破Flex最小宽度限制 */
}

/* 【元素1】链接容器：包含返回、首页等。空间不够时优先被压缩 */
.navbar .nav-links-wrapper {
  display: flex;
  align-items: center;
  flex: 1 1 auto;          /* 允许占据剩余空间，也允许被压缩 */
  min-width: 0;            /* 【关键】允许被压缩到0 */
  overflow: hidden;        /* 防止子元素溢出 */
}

/* 搜索小部件组合（包含【元素5】和【元素2】） */
.navbar .search-widget-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;          /* 这部分整体绝对不能被压缩 */
  margin-left: auto;       /* 将它自动推到其父容器(.nav-main-area)的最右侧 */
}


/* 【元素5】搜索框外部包裹 */
.navbar .search-input-wrapper {
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  
  /* 【新增】设置一个接近导航栏(40px)的高度，32px 上下各留 4px 刚刚好 */
  height: 32px; 
  
  /* 默认折叠状态 */
  width: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
}

/* 搜索框展开状态 (原有代码保持不变) */
.navbar .search-input-wrapper.open {
  width: 180px;        
  opacity: 1;
  padding-right: 4px;
}

/* 输入框本体的样式 */
.navbar .search-input {
  width: 100%;
  height: 100%;            /* 【新增】高度 100% 撑满上面的 wrapper (32px) */
  box-sizing: border-box;
  padding: 0 10px;         /* 【新增】左右增加一点内边距，让输入的文字不要紧贴边缘 */
  border: 1px solid #d1d5db; /* 【新增】加上浅色边框让搜索框更立体 */
  border-radius: 4px;      /* 【新增】稍微加一点圆角显得更精致 */
  outline: none;           /* 【新增】去掉浏览器默认的粗黑/蓝高亮线 */
  font-size: 0.95rem;      /* 【新增】调整一下字体大小适配新高度 */
  background-color: #f9fafb; /* 【可选】给输入框加一点极浅的灰色背景以示区分 */
}

/* 搜索框获得焦点时的边框颜色 */
.navbar .search-input:focus {
  border-color: #3b82f6;   /* 聚焦时边框变蓝 */
  background-color: #ffffff; /* 聚焦时背景变纯白 */
}



/* 【元素4】最右侧菜单按钮容器 */
.navbar .menu-widget-container {
  display: flex;
  align-items: center;
  flex-shrink: 0;      /* 固定大小，绝不被压缩 */
  z-index: 20;
}

/* 图标按钮通用样式 */
.navbar .icon-btn {
  height: 100%;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  color: #4b5563;
  transition: color 0.2s;
}

.navbar .icon-btn:hover {
  color: #3b82f6;
}

.navbar .icon-btn svg {
  width: 20px;
  height: 20px;
}