.sidebar {
  margin-top:67.1044776px;
}  
.chat-box {
  height:calc(60.62vh / 0.67);
}
/* 原版随搜导航独立样式命名空间 */
.hd-top-nav {
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid #ddd;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  position: fixed;   /* 固定在最上方 */
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
}
.hd-top-nav * { box-sizing: border-box; }

/* 左中右区域 */
.hd-top-nav .hd-nav-left { flex-shrink: 0; }
.hd-top-nav .hd-nav-center {
  flex-grow: 1;
  display: flex;
  justify-content: center;
}
.hd-top-nav .hd-nav-right {
  display: flex;
  align-items: center;
}

/* logo 样式 */
.hd-top-nav .logo-wrapper {
  width: 100px;
  height: 40px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hd-top-nav .hd-nav-logo {
  height: 200%;
  width: auto;
  object-fit: contain;
  object-position: center;
}

/* 搜索框 */
.hd-top-nav .hd-search-box {
  width: 100%;
  padding: 8px 12px;
  border-radius: 20px;
  border: none;
  background-color: #f6f7f8;
  font-size: 14px;
  margin-left:30px;
}
.hd-top-nav .hd-search-box:hover { background-color:#e9ecef; }
.hd-top-nav .hd-search-box:focus { outline:none; }

/* 普通图标按钮 */
.hd-top-nav .hd-icon-btn {
  background-color: transparent;
  border: none;
  margin-left: 8px;
  font-size: 14px;
  cursor: pointer;
  color: #1c1c1c;           /* 保留原黑色图标 */
  padding: 4px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hd-top-nav .hd-icon-btn:hover {
  background-color: #f2f2f2;
  border-radius: 50%;
  transition: all .2s ease-in-out;
}

/* 铃铛图标红点 */
.hd-top-nav #notifBtn { position:relative; display:inline-flex; align-items:center; justify-content:center;}
.hd-top-nav #notifCount {
  position:absolute;
  top:-4px;
  right:-4px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  background:red;
  color:white;
  border-radius:50%;
  font-size:11px;
  line-height:16px;
  text-align:center;
  display:none;
  box-shadow:0 0 2px rgba(0,0,0,0.3);
}

/* 菜单按钮 */
.hd-top-nav .menu-icon {
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:0;
}
.hd-top-nav .menu-icon .bar {
  width:24px; height:3px;
  background-color:#333;
  margin:4px 0;
  border-radius:2px;
  transition: all .3s;
}
.hd-top-nav .menu-icon .bar.long { width:16px; }
.hd-top-nav .menu-icon .bar.short { width:12px; }

/* 头像区 */
.hd-top-nav .avatar-btn {
  position: relative;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  padding: 0;
  overflow: visible;
  border: 2px solid transparent;
  transition: border-color .2s, box-shadow .2s;
  margin-left: 20px;
  transform: scaleX(-1);
}
.hd-top-nav .avatar-btn:hover {
  border-color:#ccc;
  box-shadow:0 0 4px rgba(0,0,0,0.1);
}
.hd-top-nav .avatar-btn .avatar-img {
  width:100%;
  height:100%;
  border-radius:inherit;
  object-fit:cover;
}
.hd-top-nav .avatar-btn .online-indicator {
  position:absolute;
  bottom:0;
  right:0;
  width:0.375rem;
  height:0.375rem;
  background-color:green;
  border:2px solid white;
  border-radius:50%;
  z-index:2;
}
@media (max-width: 768px) {
    #chat-box {
        margin-top: 55.141px!important;
    }
    #chatimage{
      margin-top: 122px;
    }
    .help-log-wrapper{
    margin-top: 141.38px!important;
    }
    .shop-container{
        margin-top: 122.804476px!important;
    }
    #shequ{
        margin-top: 142.8044px!important;
    }
    .dropdown {
    margin-top: 50.5px!important;
    }
    .product-image{
      display: none;
    }
    .message-board {
    display: none;
    }
    .staff-section {
    display: none;
    }
}
.dropdown {
margin-top: 80px;
}
#shop-container,.help-log-wrapper {
    margin-top: 55.1px;
}
#shequ{
    margin-top: 70.1px;
}
#chat-box,.profile-container {
    margin-top: 79.1044px;
}
/* 手机端 */
@media (max-width:768px){
  .hd-top-nav{
    flex-direction:column;
    align-items:center;
    padding:10px;
  }
  .hd-top-nav .hd-nav-left,
  .hd-top-nav .hd-nav-center,
  .hd-top-nav .hd-nav-right{
    justify-content:center;
    flex-wrap:wrap;
  }
  .hd-top-nav .hd-nav-logo{
    height:200%;
  }
  .hd-top-nav .hd-search-box{
    width:90vw;
    max-width:90vw;
    margin:2px auto;
  }
  .hd-top-nav .hd-nav-right {
    gap:10px;
    margin-top:8px;
  }
  .hd-top-nav .menu-icon{display:flex;position:relative;margin-left:12px;}
}