*{
    margin: 0;
    padding: 0;
}


/*定义颜色组*/
:root{
    --theme:#09c362;/*主题绿色*/
    --themetm:rgb(7,193,96,0.1);/*带透明主题绿色*/
    --thetitle:#586c97;/*主题文本颜色 暗蓝*/
    --protext:rgb(255,85,33);/*提示文本颜色 橙色*/
    --protextbg:rgb(255,85,33,0.1);/*提示文本背景颜色 淡橙色*/
    --backbg:rgb(245 245 245);/*背景颜色 淡灰色*/
    --cobg:rgb(255 255 255);/*背景颜色或文本色 白色*/
    --bganh:#4c5254;/*暗黑色*/
    --textqh:#282828;/*浅黑色字体颜色*/
    --textbs:rgb(255 255 255);/*白色字体颜色*/
    --texths:rgb(120 120 120);/*灰色字体颜色*/
    --fgxys:#f2f2f2;/*灰色分割线颜色*/
    --iconhs:rgb(120 120 120);/*灰色icon*/
    --iconbs:rgb(255 255 255);/*白色icon*/
    --bodys:#f0f0f0;/*body背景色*/
    --dzplcdfg:#383e41;/*点赞评论菜单分割线*/
    --dbztlys:rgba(240, 240, 240, 0.8);/*顶部状态栏 白色*/
    --dbztlysh:rgba(240, 240, 240, 0);/*顶部状态栏 透明*/
    --dbztlyshs:rgba(52, 52, 52, 0.8);/*顶部状态栏 黑色*/
    --gdwys:rgb(195 195 195);/*滚动条颜色*/
    --zsgfh:rgb(42,41,41,0.10);
    --imgbgy:rgb(245,245,245,0.60);
    --menu:rgb(200,200,200,0.40);/*右下角悬浮菜单*/
    --adgg:rgb(175,175,175);
}


/*夜间模式*/
/*定义颜色组*/
.dark-theme{
    --theme:#09c362;
    --themetm:rgb(7,193,96,0.1);
    --thetitle:#586c97;
    --protext:rgb(255,85,33);
    --protextbg:rgb(255,85,33,0.1);
    --backbg:rgb(62 62 62);
    --cobg:#323335;
    --bganh:#4c5254;
    --textqh:#ffffff;
    --textbs:rgb(255 255 255);
    --texths:rgb(136 136 136);
    --fgxys:#404040;
    --iconhs:rgb(255 255 255);
    --iconbs:rgb(255 255 255);
    --bodys:#424242;
    --dzplcdfg:#383e41;
    --dbztlys:rgb(66,66,66,0.8);
    --dbztlysh:rgba(240, 240, 240, 0);
    --dbztlyshs:rgba(52, 52, 52, 0.8);
    --gdwys:rgb(112 112 112);
    --zsgfh:rgb(124,124,124,0.2);
    --imgbgy:rgb(70,70,70,0.40);
    --menu:rgb(100,100,100,0.40);
    --adgg:rgb(116,116,116);
}

body {
    background: #f0f0f0;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overscroll-behavior: none; /* 完全禁用边界效果 */
    overscroll-behavior-y: contain;
    
}

/*设置滚动条宽度*/
/*body::-webkit-scrollbar {
        width:4px;
}*/
/*设置外层滑动槽的颜色*/
/*body::-webkit-scrollbar-track {
    background-color: rgb(0,0,0,0);
}*/
/*设置滑动条的颜色*/
/*body::-webkit-scrollbar-thumb {
    background-color: rgb(0 0 0 / 30%);
    border-radius: 4px;
}*/
/*设置滚动条宽度*/
::-webkit-scrollbar {
        width:4px;
    }
/*设置外层滑动槽的颜色*/
::-webkit-scrollbar-track {
    background-color: rgb(0,0,0,0);
}
/*设置滑动条的颜色*/
::-webkit-scrollbar-thumb {
    background-color: rgb(0 0 0 / 30%);
    border-radius: 4px;
}


html, body {
    height: 100%;
}


a{
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-user-select:none;
	-moz-user-focus: none;
    -moz-user-select: none;
    -ms-user-drag: none;
    -webkit-user-drag: none;  /* Chrome/Safari/Edge */
    -khtml-user-drag: none;  /* Konqueror */
    -moz-user-drag: none;    /* Firefox */
    user-drag: none;         /* 标准属性 */
    text-decoration:none;
    outline: none;
    color:rgba(255, 255, 255, 0);
    
    
}

img {
    -webkit-user-drag: none;  /* Chrome/Safari/Edge */
    -khtml-user-drag: none;  /* Konqueror */
    -moz-user-drag: none;    /* Firefox */
    user-drag: none;         /* 标准属性 */
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-user-select:none;
	-moz-user-focus: none;
    -moz-user-select: none;
    /*animation:myfirsjsimgtm 2s;
    -webkit-animation:myfirsjsimgtm 2s; /* Safari and Chrome */
}


div{
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-user-select:none;
	-moz-user-focus: none;
    -moz-user-select: none;
}

ul {
    list-style:none;
}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}

input {
  /* ios下背景色会默认渐变显示，并且会有圆角 */
  -webkit-appearance: none;
  border-radius: 0;
  line-height: normal;
  /* 光标问题  */
}
select{
    border-radius: 0;
    line-height: normal;
    background: rgb(255 255 255);
}



/* 主体 */
.content{
    width: 100vw;
    max-width: 100%;
    /*min-width: 350px;*/
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-direction: column;
    height: 100vh; /* 全屏高度 */
    
    /*background: blueviolet;*/
/* 设置宽度为100vw 铺满屏幕 最大宽度100%去掉windows系统横向滚动条 高度100vh铺满屏幕 */
}






.sh-main {
    width: 100%;
    max-width: 550px;
    /* min-width: 350px; */
    z-index: 1;
    flex: 1; /* 占据剩余空间 */
    display: flex;
    flex-direction: column;
    align-items: center;
}











/* 首页导航按钮UI */
/*.nav-container {
    display: flex;
    justify-content: center;
    background-color: #fff;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgb(171 166 166 / 15%);
}*/
.nav-container {
    /**width: 100%;
    height: 60px;
    max-width: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;*/
    /* padding: 10px 0; */
    /***position: fixed;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgb(171 166 166 / 15%);*/
    /* backdrop-filter: saturate(180%) blur(20px); */
    /***background: #fff;*/
    
    
    width: 100%;
    height: 60px;
    max-width: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    background: #fff;
    border-bottom: 1px solid rgb(171 166 166 / 15%);
    z-index: 100;
    
}



.nav-menu {
    display: flex;
    list-style: none;
    gap: 20px;
}

.nav-item {
    position: relative;
   /*  padding-bottom: 8px; */ /* 增加底部内边距，为横线留出空间 */
}

.nav-link {
    text-decoration: none;
    color: #666;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 0;
    transition: color 0.3s ease;
    display: inline-block;
}

.nav-link:hover {
    color: #333;
}

.nav-link.active {
    color: #000;
    font-weight: 600;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0; /* 横线位于nav-item底部 */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
    border-radius: 1px;
}




/* 底部导航按钮UI */
/*.bottom-nav {
    width: 100%;
    height: 60px;
    /*max-width: 600px;*/
    /***display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid rgb(171 166 166 / 15%);
    z-index: 100;
}*/

.bottom-nav {
    width: 100%;
    max-width: 550px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;  /* 固定定位 */
    bottom: 0;           /* 距离底部0 */
    background: #fff;
    border-top: 1px solid rgb(171 166 166 / 15%);
    z-index: 100;
    background: rgb(255 255 255 / 80%);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.nav-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 12px;
    text-decoration: none;
    flex: 1;
}
.nav-item>span{
    font-size: 15px;
    font-weight: bold;
}
.nav-item-mesg-count{
    position: absolute;
    top: 5px;
    right: 20px;
    background: #fa506d;
    color: #fff;
    height: 17px;
    max-width: 32px;
    font-size: 12px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 6px;
    border-radius: 360px;
    font-weight: 400 !important;
}
.nav-item.active {
    color: #000000;
    height: 100%;
}

.nav-icon {
    font-size: 22px;
    margin-bottom: 4px;
}

.publish-btn {
    /* width: 50px;
    height: 50px;
    background-color: #ff4e4e;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -20px; */ /* 让按钮向上突出 */
    /* box-shadow: 0 2px 10px rgba(255, 78, 78, 0.5); */
   /* width: 40px;*/
    height: 100%;
    /* background-color: #ff4e4e; */
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
    flex: 1;
}

.publish-icon {
    /*color: white;
    font-size: 24px;
    font-weight: bold;
    width: 40px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background-color: #000000;
    cursor: pointer;*/
    font-size: 18px;
    font-weight: bold;
    width: 30px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid #000;
    color: #000;
}







.sh-head-top{
    width: 100%;
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 550px;
}
.sh-head-top-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
}
.sh-head-top-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    pointer-events: none;
}
.sh-head-top-user-profile{
    /*position: absolute;
    bottom: -40px;
    right: 25px;
    left: 25px;*/
    width: 100%;
    max-width: 550px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: #fff;
    padding-bottom: 5px;
    margin-bottom: 5px;
}
.sh-head-top-user-profile-avatar{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -42px;
    z-index: 1;
    margin-right: 25px;
}
.sh-head-top-user-profile-avatar img {
  width: 60px;
  height: 60px;
  cursor: pointer;
  border-radius: 4px;
  object-fit: cover;
}
.sh-head-top-user-info{
    margin: 10px 25px 0 25px;
}
.sh-head-top-user-profile-name{
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    max-width: 350px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 12px;
}
.sh-head-top-user-signature{
    font-size: 12px;
    color: #666;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    -webkit-user-select: text;
    -moz-user-focus: text;
    -moz-user-select: text;
}




/* 首页文章内容UI */
.sh-content {
  width: 100%;
  /* height: 100%; */
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 每行2列 */
  gap: 5px; /* 元素之间的间距 */
  margin: 0 0 0 0;
 
  
  /*overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior-y: contain;*/
}

/*设置滚动条宽度*/
/*.sh-content::-webkit-scrollbar {
        width: 4px;
    }*/
/*设置外层滑动槽的颜色*/
/*.sh-content::-webkit-scrollbar-track {
    background-color: rgb(229 216 216 / 42%);
}*/
/*设置滑动条的颜色*/
/*.sh-content::-webkit-scrollbar-thumb {
    background-color: red;
    border-radius: 4px;
}*/


/* 可选：为网格项添加样式 */
.grid-item {
  text-align: center;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.grid-item>a{
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    pointer-events: none;
    /*max-height: 280px;
    min-height: 280px;*/
    
    position: relative;
    padding-top: 125%;
}

.grid-item>a>img{
    width: 100%;
    /*height: 300px;*/
    /*height:fit-content;*/
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%; /* 自定义位置（水平 50%，垂直 20%） */
    /*max-height: 280px;*/
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
}

.grid-item>a>.grid-item-sh-mhbg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 0;
    filter: blur(60px);
}

/* 视频 */
.grid-item>a>video{
    width: 100%;
    min-width: 100%;
    height: 300px;
    /* height: fit-content; */
    height: 100%;
    object-fit: cover;
    /* max-height: 280px; */
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}
.grid-item>a>.grid-item-sh-videobs{
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    /*background: rgb(64 64 64 / 25%);*/
    font-size: 14px;
    padding: 5px;
    /*border-radius: 360px;
    backdrop-filter: blur(10px);
    width: 15px;
    height: 15px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    filter: drop-shadow(0 0 0.75px rgba(0,0,0,.42)) drop-shadow(0 1px 0.5px rgba(0,0,0,.18)) drop-shadow(0 2px 3px rgba(0,0,0,.2));
}
.grid-item>a>.grid-item-sh-videobs>svg{
    width: 18px;
    height: 18px;
}

/* 标题 */
.grid-item-titlemk{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 10px 0 5px 0;
    pointer-events: none;
}
.grid-item-title{
    /* 新增多行省略样式 */
    display: -webkit-box;
    -webkit-line-clamp: 2;  /* 限制显示的行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    margin: 0 5px 0 5px;
    color: #000;
    text-align: left;
    text-align: -webkit-left;
}
.grid-item-title>img{
    width: 20px;
    height: 20px;
    margin-left: 2px;
    margin-right: 2px;
    vertical-align: middle;
}
/*.grid-item-icon{
    font-size: 14px;
    color: #35a939;
    margin: 0 10px 2px 10px;
}
.grid-item-icon>i{
    font-size: 16px;
    color: #35a939;
}*/

/* 头像与点赞 */
.sh-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* max-width: 600px; */
    /* padding: 15px; */
    /* border: 1px solid #eee; */
    border-radius: 4px;
    /* margin: 20px auto;*/
    margin-bottom: 10px;
    pointer-events: none;
}

.sh-left-section {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.sh-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #f0f0f0;
    margin-right: 5px;
    overflow: hidden;
}

.sh-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sh-nickname {
    font-size: 12px;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-right-section {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.sh-like-icon {
    cursor: pointer;
    color: #000000;
    margin: 0 2px 1px 0;
}
.sh-like-icon>i{
    color: #666;
    font-size: 15px;
}

.sh-like-count {
    font-size: 13px;
    color: #666;
}






.sh-index-placeholder-text-tis{
    display: flex;
    justify-content: center;
    margin: 25px 0 90px 0;
}
.sh-index-placeholder-text-tis>span{
    font-size: 14px;
    color: #999;
    cursor: pointer;
}









/*消息栏目导航样式UI*/
.message-panel {
    width: 95%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.message-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 15px;
    font-weight: 600;
    color: #000;
}

/* 关键修改：确保icons容器在最右侧 */
.icons {
    margin-left: auto; /* 这将把图标推到最右边 */
    display: flex;
    gap: 15px;
}
.icons>i{
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #000;
    cursor: pointer;
}
/*.icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: all 0.2s;
}*/

/*.icon:hover {
    opacity: 0.8;
}*/

.popup-menu {
    position: absolute;
    right: 0;
    top: 60px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 200px;
    padding: 10px 0;
    z-index: 100;
    display: none;
}

.popup-menu.active {
    display: block;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.menu-item:hover {
    background-color: #f5f5f5;
}

.menu-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.menu-text {
    font-size: 14px;
    color: #333;
}




/* 在线好友头像滚动容器样式 */
.avatar-scroll-container {
    width: 100%; /* 容器宽度100%撑满父元素 */
    overflow-x: auto; /* 当内容超出时显示水平滚动条 */
    padding: 10px 0; /* 上下内边距10px，左右无内边距 */
    white-space: nowrap; /* 禁止内容换行，保持单行显示 */
    /* iOS设备平滑滚动效果 */
    -webkit-overflow-scrolling: touch; 
    /* 滚动时产生平滑动画效果 */
    scroll-behavior: smooth;
    /* 防止滚动时影响父容器（类似微信聊天界面的边界回弹效果） */
    overscroll-behavior-x: contain;
    /* Firefox浏览器隐藏滚动条（但仍可滚动） */
    scrollbar-width: none;
}

/* Webkit内核浏览器（Chrome/Safari等）的滚动条样式 */
.avatar-scroll-container::-webkit-scrollbar {
    /*height: 4px;*/ /* 滚动条高度4px（水平滚动条的高度） */
    display: none;            /* Safari and Chrome */
}
/* 滚动条轨道（背景）样式 */
.avatar-scroll-container::-webkit-scrollbar-track {
    background-color: rgb(0,0,0,0); /* 完全透明的黑色（实际不可见） */
    border-radius: 4px; /* 轨道圆角4px */
}
/* 滚动条滑块（可拖动部分）样式 */
.avatar-scroll-container::-webkit-scrollbar-thumb {
    background: rgb(195 195 195); /* 浅灰色滑块 */
    border-radius: 4px; /* 滑块圆角4px */
}
/* 鼠标悬停在滚动条滑块上的样式 */
.avatar-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #555; /* 悬停时变为深灰色 */
}


.avatar-list {
    display: inline-flex;
    gap: 20px;
    padding: 0 10px;
}

.avatar-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

.avatar-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    margin-bottom: 8px;
}

.avatar {
    width: 100%;
    height: 100%;
    border-radius: 360px;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.online-status {
    position: absolute;
    bottom: -5px;
    right: 0px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #4CAF50;
    border: 2px solid #fff;
}

.nickname {
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.sh-contentmessage {
    width: 100%;
    height: 100%;
    display: flex;
    /* grid-template-columns: repeat(2, 1fr); */
    /* gap: 5px; */
    margin: 60px 0;
    flex-direction: column;
    background: #fff;
}




/*消息列表样式UI*/
.message-list-meslis {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* background-color: white; */
    overflow: hidden;
}

.message-item-container {
    position: relative;
    overflow: hidden;
    user-select: none; /* 防止文本选择 */
}

.message-item-meslis {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 12px 15px;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
    /*cursor: grab;*/ /* 鼠标抓取手势 */
    cursor: pointer;
}

.message-item-meslis:active {
    cursor: grabbing; /* 鼠标抓取中手势 */
}

.delete-button {
    position: absolute;
    right: 0;
    top: 0;
    width: 80px;
    height: 100%;
    background-color: #ff4757;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    z-index: 1;
    transition: transform 0.3s ease;
}

.delete-button:hover {
    background-color: #ff3742;
}

/* 滑动效果 */
.message-item-container.swiping .message-item-meslis {
    transform: translateX(-80px);
}

.avatar-wrapper-meslis {
    position: relative;
    width: 60px;
    height: 60px;
    margin-right: 10px;
    flex-shrink: 0;
}

.avatar-meslis {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.avatar-meslis-div{
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient( to right top, #285cfe, #4481dd, #53a4f1, #8da6ff );
}
.avatar-meslis-div2{
    background: linear-gradient( to right top, #ff4684, #f7649b, #ff4684, #ff2a6d );
}
.avatar-meslis-div>i{
    color: #fff;
    font-size: 28px;
}

.avatar-meslis-div {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1890ff;
    color: white;
    font-size: 24px;
    border-radius: 50%;
}

.avatar-meslis-div2 {
    background-color: #ff4757;
}

.online-status-meslis {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #4CAF50;
    border: 2px solid white;
}

.message-content-meslis {
    flex-grow: 1;
    min-width: 0;
}

.nickname-meslis {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-text-meslis {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.message-text-meslis>img{
    width: 20px;
    height: 20px;
    margin-left: 2px;
    margin-right: 2px;
    vertical-align: middle;
}
.time-info-meslis {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 10px;
    flex-shrink: 0;
}

.time-meslis {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}

.mesg-count{
    background: #fa506d;
    color: #fff;
    height: 17px;
    max-width: 32px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 6px;
    border-radius: 360px 0px 360px 360px;
}

/* 从第二个消息项开始添加带左边间距的顶部边框 分割线  */
.message-item-container:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 70px;
    right: 0;
    height: 1px;
    background-color: #f9f9f9;
    z-index: 3;
}





/*互动消息列表UI*/
.sh-interactive-container {
    height: 500px;
    max-height: 500px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    overflow-y: auto;
    display: none;
    flex-direction: column;
}

.sh-interactive-header {
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sh-interactive-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
}

.sh-interactive-badge {
    background: #f0f0f0;
    color: #8a8a8a;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-left: 8px;
    visibility: hidden;
}

.sh-interactive-item {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
    cursor: pointer;
}

.sh-interactive-item:hover {
    background: #fafafa;
}

.sh-interactive-avatar {
    width: 60px;
    height: 60px;
    position: relative;
    margin-right: 12px;
    flex-shrink: 0;
}

.sh-interactive-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.sh-interactive-info-icon {
    /*position: absolute;
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    background: white;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fa506d;
    font-size: 12px;
    font-weight: bold;*/
    position: absolute;
    bottom: -2px;
    right: -5px;
    /* width: 18px; */
    /* height: 18px; */
    /* background: white; */
    /* border: 2px solid #fff; */
    /* border-radius: 50%; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* color: #fa506d; */
    /* font-size: 12px; */
    /* font-weight: bold;*/
}
.sh-interactive-info-icon-i{
    /*border-radius: 360px;
    background: #fa506d;
    color: #ffffff;
    border: 3px solid #fff;
    font-size: 14px;
    padding: 4px;*/
    border-radius: 360px;
    background: #fa506d;
    color: #ffffff;
    border: 3px solid #fff;
    font-size: 12px;
    /* padding: 4px; */
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.sh-interactive-info-icon-i2{
    /*border-radius: 360px;
    background: #fa506d;
    color: #ffffff;
    border: 3px solid #fff;
    font-size: 14px;
    padding: 4px;*/
    border-radius: 360px;
    background: #3666fa;
    color: #ffffff;
    border: 3px solid #fff;
    font-size: 12px;
    /* padding: 4px; */
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sh-interactive-content {
    flex: 1;
    min-width: 0;
}

.sh-interactive-user {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.sh-interactive-username {
    font-size: 15px;
    font-weight: bold;
    color: #1a1a1a;
    margin-right: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-interactive-relationship {
    color: #8a8a8a;
    font-size: 12px;
    white-space: nowrap;

    padding: 3px 4px;
    border-radius: 4px;
    background: #f0f0f0;
    flex-shrink: 0;
}

.sh-interactive-text {
    /*color: #595959;*/
    color: #333;
    margin-bottom: 5px;
    line-height: 1.4;
    font-size: 14px;
}
.sh-interactive-text>img{
    width: 20px;
    height: 20px;
    margin-left: 2px;
    margin-right: 2px;
    vertical-align: middle;
}
.sh-interactive-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sh-interactive-time {
    /*color: #bfbfbf;*/
    color: #999;
    font-size: 12px;
}

.sh-interactive-preview {
    width: 60px;
    height: 80px;
    border-radius: 4px;
    object-fit: cover;
    margin-left: 12px;
    flex-shrink: 0;
    /*box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);*/
}

.sh-interactive-comment-image {
    width: 70px;
    height: 70px;
    border-radius: 4px;
    object-fit: cover;
    margin-top: 0px;
    /*border: 1px solid #f0f0f0;*/
}

.sh-interactive-footer {
    padding: 16px;
    text-align: center;
    color: #8a8a8a;
    font-size: 14px;
}














/* 个人中心*/
.sh-content-user{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    margin: 0 0 60px 0;
    
}
/* 外框架 */
.sh-user-outer-frame {
    width: 100%;
    height: 220px;
    position: relative;
}

/* 背景图/视频 */
.sh-user-background-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    pointer-events: none;
    z-index: 1;
}

/* 顶部导航栏 */
.sh-user-top-bar {
    /*position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 12px;
    color: white;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));*/
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    max-width: 550px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    z-index: 100;
    transition: all 0.3s;
}
.sh-user-top-bar-wk{
    flex-grow: 1;
    display: flex;
    justify-content: center;
}
.sh-user-top-bar-name{
    color: #000;
    font-size: 15px;
}
.sh-user-top-bar-view{
    color: #000;
    background: #fff;
    position: sticky;
}

/* 更多图标 */
.sh-user-more-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: 12px;
}
.sh-user-more-span{
    border: 1px solid #FA506D;
    color: #FA506D;
    padding: 4px 4px;
    border-radius: 4px;
    font-size: 14px;
    margin-right: 10px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.sh-user-more-span-active{
    border: 1px solid #dbdbdb;
    color: #000;
}
.sh-user-more-icon-left{
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 12px;
}

.sh-user-more-icon i {
    font-size: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #fff;
}
.sh-user-more-icon i:hover{
    background: rgb(42,41,41,0.10);
    border-radius: 4px;
}
.sh-user-more-icon-left i{
    font-size: 18px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #fff;
}

/* 内容区域 */
.sh-user-content-area {
    position: relative;
    z-index: 2;
    /*height: calc(100% - 60px);*/
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 15px;
}

/* 用户信息区域 */
.sh-user-info {
    margin-top: auto;
    display: flex;
    align-items: center;
    color: white;
    margin-bottom: 25px;
}

/* 头像 */
.sh-user-avatar {
    width: 90px;
    height: 90px;
    border-radius: 360px;
    border: 3px solid white;
    margin-right: 15px;
    object-fit: cover;
}

/* 用户文字信息 */
.sh-user-text {
    display: flex;
    flex-direction: column;
}

.sh-user-nickname {
    font-size: 18px;
    font-weight: bold;
}

.sh-user-account {
    font-size: 13px;
    opacity: 0.8;
    margin: 5px 0;
}


.user-data-container {
    width: 100%;
    border-radius: 10px 10px 0 0;
    margin-top: -10px;
    z-index: 1;
    background-color: #fff;
}

.content-wrapper {
    display: grid;
    grid-template-columns: 1fr auto; /* 左边内容自动扩展，右边按钮固定 */
    align-items: center;
    gap: 20px;
    margin: 20px 15px 10px 15px;
}

.stats-grid {
    /*display: grid;
    grid-template-columns: repeat(4, 1fr); /* 四列等分 */
    /*gap: 15px;
    white-space: nowrap; /* 防止内容换行 */
    display: flex;
    gap: 15px;
    white-space: nowrap;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    margin-bottom: 4px;
    line-height: 1;
}

.stat-label {
    font-size: 14px;
    color: #666;
    line-height: 1;
}

.edit-button {
    background-color: #f0f0f0;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    color: #000;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap; /* 按钮文字不换行 */
}

.edit-button:hover {
    background-color: #e0e0e0;
}


.content-wrapper-signature{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    /* gap: 20px; */
    margin: 0 15px;
}
.content-wrapper-signature>span{
    font-size: 14px;
    color: #666;
}

.content-wrapper-signaturegz{
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}
.content-wrapper-signaturegz>i{
    margin-right: 2px;
    font-size: 14px;
    margin-bottom: 1px;
}

/* 主容器 - 垂直居中 */
.content-wrapper-main-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #fff;
    margin: 8px 15px 0 15px;
}

/* 内容区块 */
.content-wrapper-box {
    display: flex;
    gap: 5px;
}

/* 小板块样式 */
.content-wrapper-item-span {
    display: inline-block;
    background-color: #f0f0f0;
    color: #666;
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 12px;
}





/*个人主页图标导航*/
/* 主容器 */
.sh-navigation-icon-navigation-container {
    background-color: #fff;
    margin: 20px 0 0 0;
    /*border-radius: 12px;
    padding: 20px;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
}

/* 图标导航区域 */
.sh-navigation-icon-navigation {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

/* 单个图标项 */
.sh-navigation-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    flex: 1;
    min-width: 0;
}

/* 图标容器 */
.sh-navigation-icon-wrapper {
    position: relative;
    margin-bottom: 4px;
}

.sh-navigation-icon-wrapper>i{
    font-size: 25px;
}
/* 图标样式 */
.sh-navigation-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 红色小圆点（仅第一个图标有） */
.sh-navigation-red-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background-color: #ff4757;
    border-radius: 50%;
    border: 2px solid white;
}

/* 标签文字 */
.sh-navigation-icon-label {
    font-size: 12px;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

/* 响应式设计 */
/*@media (max-width: 480px) {
    .sh-navigation-icon-navigation {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .sh-navigation-icon-item {
        flex: 0 0 calc(33.333% - 20px);
    }
}

@media (max-width: 320px) {
    .sh-navigation-icon-item {
        flex: 0 0 calc(50% - 20px);
    }
}*/

.content-wrapper-fnf{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    margin: 20px 15px 0 15px;
    gap: 10px;
}
.content-wrapper-fnf-nav{
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f0f0;
    border-radius: 6px;
    flex: 1;
    cursor: pointer;
}
.content-wrapper-fnf-nav>i{
    font-size: 14px;
    color: #000;
    margin-right: 4px;
    font-weight: bold;
}
.content-wrapper-fnf-nav>span{
    font-size: 14px;
    color: #000;
    font-weight: bold;
}


.content-wrapper-fnf-nav-active{
    background: #3666fa;
}
.content-wrapper-fnf-nav-active>i{
    color: #fff;
}
.content-wrapper-fnf-nav-active>span{
    color: #fff;
}




/*个人主页作品顶部导航*/
.navigation-container {
    width: 100%;
    background: #fff;
    margin-top: 10px;
}

/*.nav-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    margin-right: 12px;
}

.user-info {
    flex: 1;
}

.user-name {
    font-weight: 600;
    font-size: 16px;
    color: #333;
}

.user-desc {
    font-size: 13px;
    color: #888;
    margin-top: 2px;
}*/

/* 导航标签样式 */
.nav-tabs {
    display: flex;
    position: relative;
}

.nav-tab {
    width: 50%;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 500;
    color: #999;
    cursor: pointer;
    transition: color 0.3s ease;
    position: relative;
    white-space: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-tab.active {
    color: #000;
}

/*.nav-tab.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #000;
    border-radius: 3px 3px 0 0;
}*/

/*.nav-tab.has-dropdown::after {
    content: "⌄";
    margin-left: 4px;
    font-size: 14px;
}*/

.nav-indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: #000;
    transition: all 0.3s ease;
    border-radius: 360px;
}

/* 内容区域 */
.content-area {
    /*margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    min-height: 200px;*/
    display: none;
}

.content-area.active {
    display: grid;
}
.content-title {
    /*font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #333;*/
}

.content-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #888;
    padding: 1px 0 0 0;
}

/*.placeholder-icon {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
}*/

.placeholder-text {
    font-size: 14px;
    margin: 40px 0;
}
.placeholder-text-tis{
    font-size: 14px;
    margin: 40px 0 40px 0;
    color: #666;
}

.content-placeholder-itme{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
}






/*作品和喜欢列表样式*/
.content-placeholder-itme-lis{
    /*width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;*/
    position: relative;
    width: 100%;
    padding-top: 100%;
    /* background: var(--imgbgy); */
    overflow: hidden;
}
.placeholder-itme-lis-background{
    /*grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;*/
    position: absolute;
    top: 0;
    left: 0;
    /* width: 100%; */
    /* min-width: 50%; */
    max-width: 100%;
    background: var(--imgbgy);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    cursor: zoom-in;
}
.placeholder-itme-lis-modal-center{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.placeholder-itme-lis-modal-center-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px;
}
.placeholder-itme-lis-modal-center-top>i{
    font-size: 18px;
    color: #fff;
    filter: drop-shadow(0 0 0.75px rgba(0,0,0,.42)) drop-shadow(0 1px 0.5px rgba(0,0,0,.18)) drop-shadow(0 2px 3px rgba(0,0,0,.2));
}
.placeholder-itme-lis-modal-center-top>i>svg{
    width: 18px;
    height: 18px;
}
.placeholder-itme-lis-modal-center-top-left{
    display: flex;
    align-items: center;
}
.placeholder-itme-lis-modal-center-top-left>span{
    color: #000;
    background: gold;
    padding: 2px 4px;
    font-size: 12px;
    border-radius: 2px;
}
.placeholder-itme-lis-modal-center-bot{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 8px;
}
.placeholder-itme-lis-modal-center-bot>i{
    font-size: 14px;
    color: #fff;
    margin: 0 4px 0 0;
    filter: drop-shadow(0 0 0.75px rgba(0,0,0,.42)) drop-shadow(0 1px 0.5px rgba(0,0,0,.18)) drop-shadow(0 2px 3px rgba(0,0,0,.2));
}
.placeholder-itme-lis-modal-center-bot-like>i{
    color: #ff5858;
}
.placeholder-itme-lis-modal-center-bot>span{
    color: #fff;
    font-size: 14px;
    filter: drop-shadow(0 0 0.75px rgba(0,0,0,.42)) drop-shadow(0 1px 0.5px rgba(0,0,0,.18)) drop-shadow(0 2px 3px rgba(0,0,0,.2));
}




/*滑动页面*/
.user-swiper-container{
    width: 100%;
    min-height: 0;
    flex: 1;
    position: relative;
    overflow: hidden;
    transition: height 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background: #363741;*/
}
.user-swiper-slide{
    height: 100% !important;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: center !important;
    margin-top: 1px;
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
    overscroll-behavior: none;
    
}
 
/* 隐藏滚动条（可选） */
.user-swiper-slide::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}


























/*view详情页面*/
.sh-content-view{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    margin: 0 0 0 0;
}

/*要虚幻背景用这个↓*/
.view-swiper-slide{
    max-height: 550px;
    min-height: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.view-swiper-lazy{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 0;
    filter: blur(60px);
    pointer-events: none;
}
.view-swiper-lazy2{
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /*object-position: top;*/
    object-position: 50% 20%; /* 自定义位置（水平 50%，垂直 20%） */
    z-index: 1;
}
/*要虚幻背景用这个↑*/

/*.view-swiper-container {
    width: 100%;
}
.view-swiper-slide{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: red;
}
.view-swiper-lazy{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 0;
    filter: blur(20px) brightness(0.9);
    transform: scale(1.5);
}
.view-swiper-lazy2{
    width: 100%;
    height: fit-content;
    max-height: 450px;
    z-index: 1;
    object-fit: cover;
}*/
.sh-view-avatarwk{
    width: fit-content;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.sh-view-avatar{
    width: 35px;
    height: 35px;
    border-radius: 360px;
    /* border: 3px solid white; */
    margin-right: 10px;
    object-fit: cover;
}
.view-swiper-video{
    max-width: 100%;
    max-height: 100%;
    z-index: 1;
    max-height: 550px;
}








/* Swiper容器 - 关键样式 */
.view-swiper-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    transition: height 0.2s ease; /* 高度变化过渡效果 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #363741;
}

/*不要虚幻背景用这个↓*/
/***.view-swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

.view-swiper-lazy {
    width: 100%;
    max-height: 520px;
    /*min-height: 280px;*/
    /***max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.view-swiper-lazy2 {
    /*display: none;*/ /* 隐藏重复图片 */
/***}***/
/*不要虚幻背景用这个↑*/

.swiper-pagination {
    display: flex;
    width: 95% !important;
    white-space: nowrap;
    top: auto !important;
    left: auto !important;
    bottom: 5px !important;
    z-index: 1;
    gap: 4px;
    
}
/* 自定义圆点样式 */
.swiper-pagination-bullet {
    flex: 1;
    height: 3px;
    opacity: 1;
    border-radius: 4px;
    margin: 0 !important;
}


/*.swiper-pagination-view{
    top: auto !important;
}*/
.swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.6);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: #fff;
}

.code-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 25px;
    margin-top: 40px;
    backdrop-filter: blur(5px);
}

.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.code-header h3 {
    color: #64ffda;
}

.copy-btn {
    background: #4a4a6d;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.copy-btn:hover {
    background: #5a5a8d;
}

pre {
    color: #f8f8f2;
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border-radius: 8px;
    font-family: 'Fira Code', monospace;
}





.view-swiper-container-ts{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}
.view-swiper-container-ts-top{
    display: flex;
    justify-content: flex-end;
}
.view-swiper-container-ts-top>span{
    min-width: 25px;
    font-size: 13px;
    color: #fff;
    padding: 2px 5px;
    border-radius: 4px;
    margin: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    background: rgb(0,0,0,0.28);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.view-swiper-container-ts-bot{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}
.view-swiper-container-ts-bot>span{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 15px 10px 0;
    cursor: pointer;
    pointer-events: all;
}
.view-swiper-container-ts-bot>span>svg{
    background: rgb(91 91 91 / 65%);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    color: #fff;
    padding: 8px;
    border-radius: 360px;
    pointer-events: none;
}



.swiper-progress-container {
    width: 100%;
    height: 3px;
    background-color: #e0e0e0;
    position: absolute;
    bottom: 0px;
    margin-top: 10px;
    z-index: 1;
}

.swiper-progress-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: rgb(54 102 250);
    width: 0%;
    transition: width 0.3s ease;
}







.sh-view-container {
    background-color: #ffffff;
    /* padding: 30px; */
    /* border-radius: 8px; */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
    /* max-width: 500px; */
    /* width: 100%; */
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 15px 15px 15px;
    border-bottom: 1px solid #eeeeee;
}

.sh-view-declaration-text {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 10px;
    line-height: 1.4;
}
.sh-view-declaration-text-nr{
    font-size: 15px;
    color: #000;
    margin-bottom: 5px;
}
.sh-view-declaration-text-nr>img{
    width: 20px;
    height: 20px;
    margin-left: 2px;
    margin-right: 2px;
    vertical-align: middle;
}
.sh-view-hashtags{
    display: flex;
    flex-wrap: wrap;
    /*gap: 2px 5px;*/
    justify-content: flex-start;
    margin-bottom: 10px;
}


.sh-view-hashtag,.sh-view-hashtags>span>a {
    color: #2060af;
    font-size: 15px;
    margin-right: 2px;
}

.sh-view-date {
    color: #999999;
    font-size: 12px;
    text-align: center;
}
.sh-view-date-pl{
    display: flex;
    padding: 15px 15px 15px 15px;
    font-size: 13px;
    color: #000;
    font-weight: bold;
}



/*.sh-view-shuju-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

.sh-view-shuju-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sh-view-shuju-grid-item i {
    font-size: 20px;
    margin-bottom: 2px;
    color: #000;
}

.sh-view-shuju-grid-item span {
    font-size: 14px;
    color: #000;
}*/
.sh-view-shuju-grid-container {
    display: flex;
    gap: 15px;
    padding: 15px 15px 15px 15px;
}

.sh-view-shuju-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
}

.sh-view-shuju-grid-item i {
    font-size: 18px;
    color: #000;
    font-weight: bold;
}
.sh-view-shuju-grid-item-i-active{
    color: #ff2d2d !important;
}

.sh-view-shuju-grid-item span {
    font-size: 13px;
    color: #000;
    font-weight: bold;
}
.sh-view-shuju-grid-item-span-active{
    color: #ff2d2d !important;
}




/*评论列表样式*/
.sh-view-comm-social-comment-nav{
    margin: 15px 15px 0px 15px;
}
.sh-view-comm-social-comment {
    width: 100%;
}
.sh-view-comm-user-info {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}
.sh-view-comm-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 360px;
    /* background: linear-gradient(45deg, #3498db, #9b59b6); */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    /* font-weight: bold; */
    margin-right: 10px;
    object-fit: cover;
    cursor: pointer;
}
.sh-view-comm-user-details {
    flex: 1;
}
.sh-view-comm-username {
    width: fit-content;
    color: #6b6b6b;
    font-size: 12px;
    cursor: pointer;
}
.sh-view-comm-username>span{
    color: #ffffff;
    background: #fa506d;
    padding: 1px 4px;
    font-size: 12px;
    border-radius: 4px;
    margin-left: 4px;
}
.sh-view-comm-date {
    width: 100%;
    color: #999;
    font-size: 12px;
    margin-top: 5px;
}
.sh-view-comm-date-span{
    color: #757575;
    font-size: 13px;
    margin-left: 10px;
    cursor: pointer;
}
.sh-view-comm-game-screenshot {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 4px 0 0 0;
}
.sh-view-comm-leve-img-a{
    display: flex;
    max-width: 80%;
    margin-top: 5px;
}
.sh-view-comm-leve-img{
    max-width: 100%;
    height: fit-content;
    max-height: 200px;
    object-fit: cover;
    border-radius: 4px;
    cursor: zoom-in;
}
.sh-view-comm-game-commwk{
    display: flex;
    margin: 0 0 0 50px;
}
.sh-view-comm-game-comm{
    font-size: 14px;
    color: #000;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    -webkit-user-select: text;
    -moz-user-focus: text;
    -moz-user-select: text;
}
.sh-view-comm-game-comm>img{
    width: 20px;
    height: 20px;
    margin-left: 2px;
    margin-right: 2px;
    vertical-align: middle;
}
.sh-view-comm-game-comm>a{
    color: #2060af;
    font-size: 14px;
    margin-right:2px;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
}

.sh-view-placeholder-text-tis{
    display: flex;
    justify-content: center;
    margin: 0px 15px 25px 15px;
}
.sh-view-placeholder-text-tis>span{
    font-size: 14px;
    color: #999;
}





/*评论框样式*/
.sh-comminput-wk{
    width: 100%;
    display: flex;
    justify-content: center;
}
.sh-comminput-wk .sh-comminput {
    width: 95%;
}
.sh-comminput{
    display: flex;
    gap: 5px;
    flex-direction: column;
    align-items: center;
    border-radius: 4px;
    padding: 8px 0;
    margin: 8px 0;
    transition: all 0.25s;
}
.sh-comminput-tourist{
    width: 96%;
    display: flex;
}
.sh-comminput-tourist-1{
    width: 100%;
    height: 35px;
    border: 0;
    outline: none;
    background: rgb(245 245 245);
    padding: 0px 8px;
    font-size: 12px;
    border-radius: 4px;
}
.sh-comminput-tourist-2{
    width: 100%;
    height: 35px;
    border: 0;
    outline: none;
    background: rgb(245 245 245);
    padding: 0px 8px;
    font-size: 12px;
    margin: 0 8px;
    border-radius: 4px;
}
.sh-comminput-tourist-3{
    width: 100%;
    height: 35px;
    border: 0;
    outline: none;
    background: rgb(245 245 245);
    padding: 0px 8px;
    font-size: 12px;
    border-radius: 4px;
}

.sh-comminput-textinput{
    width: 96%;
    display: flex;
}
.sh-comminput-controll{
    width: 100%;
    height: 40px;
    outline: none;
    resize: none;
    border: 0px solid #ced4da;
    font-family: inherit;
    font-size: 14px;
    background: #fff;
    /* margin-top: 8px; */
    max-height: 150px;
    min-height: 40px;
    color: #000;
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior-y: contain;
    display: flex;
}
.sh-comminput-controll::selection {
  background: rgb(54,102,250); /* 选中背景色 - 蓝色 */
  color: #fff;        /* 选中文字颜色 - 白色 */
}
/*设置滚动条宽度*/
.sh-comminput-controll::-webkit-scrollbar {
        width: 4px;
    }
/*设置外层滑动槽的颜色*/
.sh-comminput-controll::-webkit-scrollbar-track {
    background-color: rgb(0,0,0,0);
}
/*设置滑动条的颜色*/
.sh-comminput-controll::-webkit-scrollbar-thumb {
    background-color: rgb(195 195 195);
    border-radius: 4px;
}


.sh-comminput-expression-lib{
    width: 100%;
    margin: 0 0 0 0;
    max-height: 120px;
    justify-content: space-between;
    /* grid-template-columns: repeat(auto-fill, 1.625em); */
    grid-template-columns: repeat(auto-fill, 3.3em);
    row-gap: 0.625em;
    column-gap: 0.18em;
    justify-items: center;
    overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior-y: contain;
    /* height: 95px; */
    -webkit-animation: move_1 0.25s;
}

/*设置滚动条宽度*/
.sh-comminput-expression-lib::-webkit-scrollbar {
    width:4px;
}
/*设置外层滑动槽的颜色*/
.sh-comminput-expression-lib::-webkit-scrollbar-track {
background-color: rgb(0,0,0,0);
}
/*设置滑动条的颜色*/
.sh-comminput-expression-lib::-webkit-scrollbar-thumb {
background-color: rgb(195 195 195);
border-radius: 4px;
}

.sh-comminput-expression-lib>img{
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: all 0.25s;
}
.sh-comminput-expression-lib>img:hover{
    transform: scale(1.1);
}





/* 评论框板块附带的图片选择面板UI */
/* 基础样式 */
.comminput-textimg-container {
  width: 100%;
  max-width: 500px;
  background: #fff;
  /*border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 15px;*/
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.comminput-textimg-image-selector-container{
    width: fit-content;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 8px;
}
/* 选项卡样式 */
.comminput-textimg-selection-tabs {
  display: flex;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 15px;
}

.comminput-textimg-tab-btn {
  flex: 1;
  padding: 10px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.comminput-textimg-tab-btn.active {
  color: #1890ff;
  border-bottom-color: #1890ff;
  font-weight: 500;
}

/* 内容区域 */
.comminput-textimg-tab-content {
  display: none;
  /*padding: 10px 0;*/
}

.comminput-textimg-tab-content.active {
  display: block;
}
/* 新增隐藏选项卡的样式 */
.comminput-textimg-selection-tabs.comminput-textimg-hide-tabs {
  display: none;
}

/* 上传区域 */
.comminput-textimg-upload-area {
  text-align: center;
  padding: 20px;
  border: 2px dashed #eaeaea;
  border-radius: 6px;
  transition: all 0.3s;
}

.comminput-textimg-upload-area:hover {
  border-color: #1890ff;
}

.comminput-textimg-upload-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #f5f5f5;
  border-radius: 4px;
  color: #1890ff;
  cursor: pointer;
  transition: all 0.3s;
}

.comminput-textimg-upload-btn:hover {
  background: #e6f7ff;
}

.comminput-textimg-upload-btn i {
  margin-right: 8px;
  font-size: 18px;
}

.comminput-textimg-upload-hint {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
}

/* 链接输入区域 */
.comminput-textimg-url-input-area {
  display: flex;
  gap: 10px;
}

#comminput-textimg-image-url {
  flex: 1;
  padding: 10px;
  border: 1px solid #eaeaea;
  border-radius: 4px;
  font-size: 14px;
}

#comminput-textimg-image-url:focus {
  outline: none;
  border-color: #1890ff;
}

.comminput-textimg-fetch-btn {
  padding: 0 15px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.comminput-textimg-fetch-btn:hover {
  background: #40a9ff;
}

/* 预览区域 */
.comminput-textimg-preview-area {
  /*margin-top: 20px;
  min-height: 150px;*/
  position: relative;
}

.comminput-textimg-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*height: 150px;*/
  color: #ccc;
}

.comminput-textimg-preview-placeholder i {
  font-size: 40px;
  margin-bottom: 10px;
}

.comminput-textimg-preview-image {
  position: relative;
  max-width: 100%;
  max-height: 300px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comminput-textimg-preview-image img {
  display: block;
  /*max-width: 100%;
  max-height: 300px;*/
  /*max-width: 100px;
  max-height: 100px;*/
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 auto;
}

.comminput-textimg-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}

.comminput-textimg-close-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}
/* 新增隐藏上传区域的样式 */
.comminput-textimg-upload-area.comminput-textimg-hide-upload {
  display: none;
}

.comminput-textimg-url-input-area.comminput-textimg-hide-url {
  display: none;
}
/* 响应式设计 */
@media (max-width: 480px) {
  .comminput-textimg-url-input-area {
    flex-direction: column;
  }
  
  .comminput-textimg-fetch-btn {
    padding: 10px;
  }
}









/* 基础布局样式 */
.sh-comminput-container {
    width: 96%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 左侧图标区域 */
.sh-comminput-left-icons {
  display: flex;
}

.sh-comminput-icon {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  color: #555;
  cursor: pointer;
  transition: all 0.3s;
}

.sh-comminput-icon:hover {
  color: rgb(54,102,250);
  transform: scale(1.1);
}

/* 右侧按钮区域 */
.sh-comminput-right-buttons {
  display: flex;
  gap: 8px;
}

.sh-comminput-cancel-btn,
.sh-comminput-confirm-btn {
  padding: 5px 15px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.sh-comminput-cancel-btn {
  display: none;
  background: #fff;
  border: 1px solid #d9d9d9;
  color: #555;
}

.sh-comminput-cancel-btn:hover {
  border-color: rgb(54,102,250);
  color: rgb(54,102,250);
}

.sh-comminput-confirm-btn {
  background: rgb(54,102,250,0.9);
  border: 1px solid rgb(54,102,250,0.9);
  color: white;
}

.sh-comminput-confirm-btn:hover {
  background: rgb(54,102,250);
  /*border-color: rgb(54,102,250);*/
  border: 1px solid rgb(54,102,250);
}












/*登录与注册弹窗样式*/
/*.sh-logreg-container {
    width: 100%;
    max-width: 400px;
    text-align: center;
}*/

/*.sh-logreg-open-btn {
    background-color: #ff4a7d;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 74, 125, 0.3);
    transition: all 0.3s;
}

.sh-logreg-open-btn:hover {
    background-color: #ff2d6a;
    transform: translateY(-2px);
}*/

/* 弹窗背景遮罩 */
.sh-logreg-overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: 550px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s;
}

.sh-logreg-overlay.sh-logreg-active {
    visibility: visible;
    opacity: 1;
}

/* 弹窗主体 */
.sh-logreg-modal {
    width: 100%;
    height: 65%;
    max-width: 550px;
    background: white;
    display: flex;
    flex-direction: column;
    padding: 15px 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    
    transform: translateY(100%);
    /*transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);*/
    transition: all 0.2s;
    /*transition: transform 0.3s cubic-bezier(0.1, 0.7, 0.1, 1);*/

    filter: blur(0); /* 重置模糊滤镜 */
}

.sh-logreg-overlay.sh-logreg-active .sh-logreg-modal {
    transform: translateY(0);
}

.sh-logreg-overlay.sh-logreg-closing .sh-logreg-modal {
    transform: translateY(100%);
}

/* 弹窗头部 */
.sh-logreg-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 15px;
}

.sh-logreg-back-arrow {
    width: 24px;
    height: 24px;
    cursor: pointer;
    position: relative;
}

.sh-logreg-back-arrow::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-left: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);
    left: 6px;
    top: 5px;
}

.sh-logreg-title {
    font-size: 18px;
    font-weight: bold;
    margin-left: 15px;
    flex: 1;
    text-align: left;
}

.sh-logreg-subtitle {
    font-size: 12px;
    color: #999;
    text-align: left;
    margin: -15px 0 20px 54px;
}

/* 输入框样式 */
.sh-logreg-input-group {
    display: flex;
    margin-bottom: 15px;
    padding: 0 15px;
}

.sh-logreg-input-field {
    width: 100%;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    transition: border 0.3s;
}

.sh-logreg-input-field:focus {
    border-color: rgb(54 102 250);
}

.sh-logreg-input-field::placeholder {
    color: #ccc;
}

.sh-logreg-password-container {
    width: 100%;
    display: flex;
    position: relative;
}

.sh-logreg-toggle-password {
    position: absolute;
    right: 15px;
    top: 15px;
    cursor: pointer;
    color: #999;
    user-select: none;
}

/* 登录按钮 */
.sh-logreg-login-btn {
    height: 50px;
    max-height: 50px;
    background-color: rgb(54 102 250);
    color: white;
    border: none;
    padding: 15px;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    margin: 0 15px 15px 15px;
    flex: 1;
    transition: background-color 0.3s;
}

.sh-logreg-login-btn:hover {
    background-color: rgb(45 82 199);
}

/* 协议同意部分 */
.sh-logreg-agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
}

.sh-logreg-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #ddd;
    margin-right: 8px;
    cursor: pointer;
    position: relative;
}

.sh-logreg-checkbox.sh-logreg-checked::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: rgb(54 102 250);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sh-logreg-agreement-text {
    color: #666;
}

.sh-logreg-agreement-link {
    color: #1890ff;
    text-decoration: none;
}

.sh-logreg-agreement-link:hover {
    text-decoration: underline;
}
































/*文章发布界面UI*/
.external-container{
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 550px;
    height: 100%;
    background-color: rgb(0 0 0 / 0%);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
    
    /*opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.1s ease, transform 0.1s ease;
    will-change: transform, opacity;*/
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.external-container>iframe{
    width: 100%;
    height: 100%;
    max-width: 550px;
}
.external-container.enter {
    opacity: 1;
    transform: translateY(0);
}
.external-container.exit {
    opacity: 0;
    transform: translateY(20px);
}

.sh-publishui{
    /*position: fixed; */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 0%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #000;
    /*transform: translateY(100%);
    transition: transform 0.3s ease-out;
    z-index: 1000;*/
    /* visibility: hidden; */
    /* opacity: 0; */
    /* transition: all 0.3s;*/
}

/* 顶部导航栏 */
.editor-header {
    width: 100%;
    /*max-width: 550px;*/
    height: 80px;
    background-color: #000;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    /* padding: 0 15px; */
    /* border-bottom: 1px solid #333; */
    /* z-index: 1000; */
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
}

.header-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    padding: 8px;
}
.header-btn-x{
    position: absolute;
    top: 20px;
    left: 15px;
    padding: 0;
}
.header-btn>i{
    font-size: 18px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #fff;
}

.header-title {
    font-size: 16px;
    font-weight: 500;
}

/* 主内容区域 */
.editor-content {
    /********width: 100%;
    max-width: 550px;
    margin-top: 80px;
    margin-bottom: 80px;*******/
    /* margin-top: 50px; */
    /* margin-bottom: 80px; */
    /*height: calc(100vh - 130px);*/
    /********height: 100%;
    background: #000;
    position: fixed;
    top: 0;**********/
    width: 100%;
    /*max-width: 550px;*/
    /* margin-top: 80px; */
    /* margin-bottom: 80px; */
    /* margin-top: 50px; */
    /* margin-bottom: 80px; */
    /* height: calc(100vh - 130px); */
    /* height: 100%; */
    background: #000;
    position: fixed;
    top: 80px;
    bottom: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /*padding: 0 0 65px 0;*/
}

/* 主图片区域 - Swiper */
.main-swiper {
    width: 100%;
    height: 100%;
    /*min-height: 280px;*/
    /*max-height: 400px;*/

}

.swiper-slide {
    width: 100%;
    /*max-height: 400px;
    min-height: 250px;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-image {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: cover;
}


/* 预览图区域 */
.preview-container {
    width: 100%;
    /*height: 30%;*/
    /*padding: 10px;*/
    position: fixed;
    bottom: 135px;
    overflow-x: hidden; /* 隐藏水平溢出 */
    /*position: relative;*/
}
/*小预览图占位符样式*/
.preview-placeholder {
    /*width: 80px;
    height: 80px;
    margin-right: 10px;
    border: 2px dashed #ff3b30;
    border-radius: 8px;
    background-color: rgba(255, 59, 48, 0.2);*/
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border: 2px dashed #ff3b30;
    border-radius: 8px;
    background-color: rgba(255, 59, 48, 0.2);
    pointer-events: none; /* 防止干扰拖动操作 */
    position: relative; /* 确保正确显示 */
    z-index: 10; /* 确保显示在其他元素之上 */
}

.preview-scroll {
    height: 100%;
    display: flex;
    gap: 10px;
    margin: 0 10px;
    overflow-x: auto;        /* 启用水平滚动 */
    overflow-y: hidden;      /* 禁用垂直滚动 */
    white-space: nowrap;     /* 防止内容换行 */
    -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
    scrollbar-width: none;  /* Firefox隐藏滚动条 */
    -ms-overflow-style: none;
}

/* 隐藏滚动条（Chrome/Safari） */
.preview-scroll::-webkit-scrollbar {
    display: none;
}
.preview-item {
    scroll-snap-align: start; /* 可选：滚动对齐 */
}





.preview-item {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    background-color: #2a2a2a;
    border: 2px solid transparent;
    transition: border-color 0.2s;
    user-select: none;
}

.preview-item.active {
    border-color: #ff3b30;
}

.preview-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-item.add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
    border: 2px dashed #666;
    cursor: pointer;
}

.add-icon {
    font-size: 24px;
    color: #999;
}

/* 底部工具栏 */
.editor-footer {
    width: 100%;
    /*max-width: 550px;*/
    height: 65px;
    background-color: #000;
    display: flex;
    align-items: center;
    /* padding: 0 15px; */
    border-top: 1px solid #333;
    position: fixed;
    bottom: 0;
}

.effects-scroll {
    flex: 1;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 10px 0 10px;
    visibility: hidden;
}

.effects-scroll::-webkit-scrollbar {
    display: none;
}

.effect-btn {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    margin-right: 12px;
    background-color: #2a2a2a;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
}

.next-btn {
    width: 80px;
    height: 40px;
    background-color: #fa506d;
    border: none;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    margin-right: 10px;
}

/* 删除区域 */
.delete-area {
    position: fixed;
    bottom: 65px;
    /* left: 0; */
    /* right: 0; */
    width: 100%;
    /*max-width: 550px;*/
    height: 60px;
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    transition: background-color 0.3s;
    display: none;
}


.delete-area.active {
    background-color: #fa506d;
}

.delete-area i {
    margin-right: 8px;
    font-size: 20px;
    color: #fff;
}
.delete-area span{
    color: #fff;
    font-size: 16px;
}
/* 拖动时的预览图 */
.dragging-preview {
    position: fixed;
    width: 50px;
    height: 50px;
    z-index: 1002;
    pointer-events: none;
    border-radius: 8px;
    overflow: hidden;
    opacity: 0.8;
    transform: translate(-50%, -50%);
    display: none;
}

.dragging-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* 顶部音乐UI样式*/
.music-player {
    display: flex;
    align-items: center;
    /* background-color: #1e1e1e; */
    border-radius: 8px;
    padding: 0 10px;
    width: auto;
    max-width: 200px;
    background: #1a1a1a;
}
.music-player>i{
    font-size: 18px;
    color: #fff;
}
/*.music-player::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    pointer-events: none;
}*/

.icon-left {
    margin-right: 15px;
    color: white;
    font-size: 18px;
    flex-shrink: 0;
}

.text-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    overflow: hidden;
    margin: 0 10px;
    position: relative;
    height: 40px;
    min-width: 50px;
}

        
.scrolling-text {
    /*position: sticky;*/
    white-space: nowrap;
    color: white;
    font-size: 12px;
    animation: scrollText 8s linear infinite;
}

@keyframes scrollText {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.divider {
    width: 1px;
    height: 20px;
    background-color: #555;
    margin: 0 15px 0 0;
    flex-shrink: 0;
}

.icon-right {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.icon-right i {
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s;
}

.icon-right i:hover {
    color: #ff6b6b;
}

/*.rat-icon::before {
    content: '鼠';
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: bold;
    font-size: 16px;
}*/


/*发布界面音乐选择ui*/
/* 遮罩层 */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: flex-end;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

/* 主容器 */
.music-container {
    width: 100%;
   /*max-width: 400px;*/
    background: white;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease;
}

/* 搜索框 */
.search-box {
    display: flex;
    padding: 15px 15px 0 15px;
    /*border-bottom: 1px solid #f0f0f0;*/
}

.search-input {
    width: 100%;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    font-size: 16px;
    outline: none;
    transition: all 0.3s;
    padding-left: 45px;
}

.search-input:focus {
    border-color: #ff3a52;
    box-shadow: 0 0 0 2px rgba(255, 58, 82, 0.2);
}

.search-icon {
    position: absolute;
    left: 30px;
    /* top: 60%; */
    transform: translateY(-50%);
    color: #999;
    margin-top: 22px;
}

/* 分类标签 */
.categories {
    display: flex;
    padding: 0;
    border-bottom: 1px solid #f0f0f0;
}

.category {
    padding: 15px;
    font-size: 16px;
    color: #666;
    cursor: pointer;
    position: relative;
    transition: all 0.3s;
}

.category.active {
    color: #ff3a52;
    font-weight: 500;
}

.category.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background: #ff3a52;
    border-radius: 3px;
}

/* 音乐列表 */
.music-list {
    height: 300px;
    overflow-y: auto;
    padding: 8px 0;
}

.music-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    transition: all 0.3s;
    border-bottom: 1px solid #f8f8f8;
}

.music-item:hover {
    background: #f9f9f9;
}

.music-item.selected {
    background: #fff5f6;
}

.music-cover {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    margin-right: 12px;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.music-item.selected .music-cover {
    border-color: #ff3a52;
}

.music-info {
    flex: 1;
}

.music-name {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}
.music-name>span{
    font-size: 15px;
    color: #333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.music-item.selected .music-name>span {
    color: #ff3a52;
}

.music-meta {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    color: #888;
    font-size: 12px;
}

.music-actions {
    display: flex;
    align-items: center;
}

.action-btn {
    margin-left: 12px;
    color: #000;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s;
}

.action-btn:hover {
    color: #ff3a52;
}

/* 底部按钮 */
.bottom-buttons {
    display: flex;
    justify-content: space-around;
    padding: 5px 15px;
    border-top: 1px solid #f0f0f0;
}

.bottom-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.bottom-btn i {
    font-size: 20px;
    margin-bottom: 4px;
}

.bottom-btn.active {
    color: #ff3a52;
}

/* 音波动画 */
.sound-bars {
    display: flex;
    align-items: flex-end;
    height: 18px;
    margin-left: 8px;
}

.bar {
    width: 3px;
    background: #ff3a52;
    margin: 0 2px;
    border-radius: 2px;
}

.bar:nth-child(1) {
    animation: soundBar 1s ease-in-out infinite alternate;
    height: 8px;
}

.bar:nth-child(2) {
    animation: soundBar 1s ease-in-out infinite alternate 0.2s;
    height: 12px;
}

.bar:nth-child(3) {
    animation: soundBar 1s ease-in-out infinite alternate 0.4s;
    height: 10px;
}

/* 动画效果 */
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes soundBar {
    from {
        height: 6px;
    }
    to {
        height: 14px;
    }
}

.slide-down {
    animation: slideDown 0.5s ease forwards;
}

.fade-out {
    animation: fadeOut 0.3s ease forwards;
}










/*发布界面信息编辑ui*/
.sh-fb-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sh-fb-mask.show {
    opacity: 1;
}
.sh-fb-publish-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: none;
    background: white;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}
/*.sh-fb-publish-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80%;
    background: white;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
}*/

.sh-fb-publish-container.show {
    transform: translateY(0);
}

/*.sh-fb-publish-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: none;
    background: white;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}*/

.sh-fb-header {
    padding: 15px 15px 15px 15px;
    /*border-bottom: 1px solid #eee;*/
}

.sh-fb-title-input, .sh-fb-description-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 15px;
    padding: 5px 0;
    color: #333;
    resize: none;
    font-family: inherit;
}

.sh-fb-title-input {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    display: none;
}

.sh-fb-title-input::placeholder {
    color: #aaa;
    font-weight: normal;
}

.sh-fb-description-input {
    resize: none;
    min-height: 100px;
    line-height: 1.5;
}

.sh-fb-description-input::placeholder {
    color: #aaa;
}

.sh-fb-tags-section {
    padding: 0 15px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.sh-fb-tag-btn {
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: white;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.sh-fb-tag-btn:hover {
    background: #f8f9fa;
    border-color: #ccc;
}

.sh-fb-tag-btn.active {
    background: #4263eb;
    color: white;
    border-color: #4263eb;
}

.sh-fb-tag-btn i {
    font-size: 18px;
}

.sh-fb-divider {
    height: 1px;
    background: #eee;
    margin: 10px 15px 0 15px;
}

.sh-fb-options-list {
    padding: 5px 15px;
}

.sh-fb-option-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;
}

.sh-fb-option-item:last-child {
    border-bottom: none;
}

.sh-fb-option-icon {
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
    color: #666;
    background: #f5f5f5;
    border-radius: 6px;
}

.sh-fb-option-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    color: #333;
    padding: 5px 0;
}

.sh-fb-option-input::placeholder {
    color: #aaa;
}


/* 自定义标签输入框样式 */
.sh-fb-custom-tag-container {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 5px;
}

.sh-fb-custom-tag-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
}

.sh-fb-add-tag-btn {
    margin-left: 10px;
    padding: 8px 15px;
    background-color: #3666fa;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.sh-fb-add-tag-btn:hover {
    background-color: #2a56e0;
}



.sh-fb-dropdown-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #f9f9f9;
    border-radius: 8px;
    margin: 0 15px;
    /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);*/
}

.sh-fb-dropdown-list.show {
    max-height: 150px;
    overflow-y: auto;
}

.sh-fb-friend-item, .sh-fb-tag-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s;
}

.sh-fb-friend-item:hover, .sh-fb-tag-item:hover {
    background: #f0f4ff;
}

.sh-fb-friend-item:last-child, .sh-fb-tag-item:last-child {
    border-bottom: none;
}

.sh-fb-friend-avatar {
    border-radius: 50%;
    background: linear-gradient(135deg, #74ebd5 0%, #9face6 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 14px;
    color: white;
    font-size: 18px;
}
.sh-fb-friend-avatar>img{
    width: 40px;
    height: 40px;
    border-radius: 360px;
    /* background: linear-gradient(45deg, #3498db, #9b59b6); */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    /* font-weight: bold; */
    margin-right: 0px;
    object-fit: cover;
}

.sh-fb-friend-name {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.sh-fb-tag-name {
    flex: 1;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.sh-fb-tag-plays {
    font-size: 14px;
    color: #888;
}

.sh-fb-footer {
    padding: 24px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #eee;
    background: #fafafa;
}

.sh-fb-publish-btn-fb {
    width: 100%;
    padding: 12px 10px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff2449 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    /*box-shadow: 0 4px 12px rgba(255, 36, 73, 0.3);*/
}

.sh-fb-publish-btn-fb:hover {
    transform: translateY(-2px);
    /*box-shadow: 0 6px 16px rgba(255, 36, 73, 0.4);*/
}

.sh-fb-publish-btn-fb:active {
    transform: translateY(0);
}

.sh-fb-selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /*padding: 0 24px 16px;*/
}

.sh-fb-selected-tag {
    padding: 5px 8px;
    background: #f0f4ff;
    border-radius: 360px;
    font-size: 12px;
    color: #4263eb;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sh-fb-selected-tag i {
    cursor: pointer;
    font-size: 12px;
    opacity: 0.7;
}

.sh-fb-selected-tag i:hover {
    opacity: 1;
}

.sh-fb-additional-options {
    padding: 0 15px 15px 15px;
}

.sh-fb-option-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
}

.sh-fb-option-row:last-child {
    border-bottom: none;
}

.sh-fb-option-label {
    flex: 1;
    font-size: 15px;
    color: #333;
}

.sh-fb-option-value {
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sh-fb-option-value i {
    font-size: 12px;
}

.sh-fb-publish-buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 15px;
    /*border-top: 1px solid #eee;*/
}

.sh-fb-daily-btn {
    width: 100%;
    padding: 12px 10px;
    background: white;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.sh-fb-daily-btn:hover {
    background: #f8f9fa;
}



















/*消息界面 新增粉丝弹窗*/
/* 遮罩层 */
.sh-addafollow-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sh-addafollow-mask.active {
    visibility: visible;
    opacity: 1;
}

/* 弹窗容器 */
.sh-addafollow-container {
    width: 100%;
    /*height: 60%;*/
    /*max-height: 500px;*/
    max-width: 500px;
    margin: 0 15px;
    background-color: white;
    /*border-top-left-radius: 16px;
    border-top-right-radius: 16px;*/
    border-radius: 4px;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    /*box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);*/
}

.sh-addafollow-mask.active .sh-addafollow-container {
    transform: translateY(0);
}

/* 顶部标题栏 */
.sh-addafollow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 15px;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

.sh-addafollow-title {
    display: flex;
    align-items: center;
}
.sh-addafollow-title-nav{
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.sh-addafollow-title-nav>i{
    font-size: 17px;
    font-weight: bold;
    color: #000;
}
.sh-addafollow-title-nav>span{
    font-size: 17px;
    font-weight: bold;
    color: #000;
}
.sh-addafollow-close {
    position: absolute;
    right: 20px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #000;
}
.sh-addafollow-close:hover{
    color: #fa506d;
}

/*.sh-addafollow-close::before, 
.sh-addafollow-close::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: #999;
    border-radius: 1px;
}

.sh-addafollow-close::before {
    transform: rotate(45deg);
}

.sh-addafollow-close::after {
    transform: rotate(-45deg);
}

.sh-addafollow-close:hover::before, 
.sh-addafollow-close:hover::after {
    background-color: #ff3b30;
}*/

/* 用户列表 */
.sh-addafollow-list {
    height: 500px;
    max-height: 500px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sh-addafollow-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}
.sh-addafollow-item:hover{
    background: #fafafa;
}
.sh-addafollow-link{
    flex: 1;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.sh-addafollow-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /*background-color: #e6f7ff;*/
    margin-right: 12px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ff3b30;
    font-weight: bold;
    font-size: 20px;
    flex-shrink: 0;
}

.sh-addafollow-info {
    flex: 1;
    min-width: 0;
}

.sh-addafollow-name {
    font-size: 15px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    color: #333;
    /*display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;*/
}
.sh-sh-addafollow-name-nav{
    font-size: 15px;
    /* margin-bottom: 6px; */
    display: flex;
    align-items: center;
    color: #333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-weight: bold;
}

.sh-addafollow-mutual {
    font-size: 12px;
    /*color: #ff3b30;*/
    margin-left: 8px;
    padding: 3px 4px;
    /*border: 1px solid #ff3b30;*/
    border-radius: 4px;
    background: #f0f0f0;
    color: #8a8a8a;
    flex-shrink: 0;
}

.sh-addafollow-date {
    font-size: 12px;
    color: #999;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.sh-addafollow-action {
    width: 60px;
    height: 30px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    cursor: pointer;
}

.sh-addafollow-action.follow {
    background-color: #ff3b30;
    color: white;
}

/*.sh-addafollow-action.follow-back {
    border: 1px solid #ff3b30;
    color: #ff3b30;
}*/

.sh-addafollow-action.greet {
    /*border: 1px solid #ccc;
    color: #666;*/
    color: #000;
    background: #f0f0f0;
}
        
        
        
        
        
        
        
        

/*聊天页面弹窗*/
.sh-chat-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sh-chat-mask.active {
    visibility: visible;
    opacity: 1;
}
.sh-chat-mask>iframe{
    width: 100%;
    height: 80%;
    /* max-height: 500px; */
    max-width: 500px;
    margin: 0 15px;
    background-color: white;
    border-radius: 4px;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

/*.sh-view-comm-gold-chain {
    position: absolute;
    width: 180%;
    height: 40px;
    background: linear-gradient(to right, #f1c40f, #e67e22, #f1c40f);
    border-radius: 20px;
    top: 50%;
    left: -40%;
    transform: translateY(-50%) rotate(-20deg);
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.7);
}*/
/*.sh-view-comm-game-title {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}
.sh-view-comm-level-badge {
    position: absolute;
    top: 42px;
    right: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #f1c40f;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
}
.sh-view-comm-detail-button {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: #e74c3c;
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}*/
/*.sh-view-comm-comment-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
.sh-view-comm-reply-button {
    color: #666;
    font-size: 14px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.sh-view-comm-reply-button i {
    margin-right: 4px;
}
.sh-view-comm-reply-button:hover {
    color: #3498db;
}
*/










/*首页单列排版UI*/
.sh-single-post {
    width: 100%;
    max-width: 550px;
    background-color: white;
    /* border-radius: 12px; */
    overflow: hidden;
}

/* 顶部区域 */
.sh-single-header {
    display: flex;
    align-items: flex-start;
    padding: 15px 15px 4px 15px;
    /*border-bottom: 1px solid #f0f0f0;*/
}

.sh-single-avatar {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 10px;
    flex-shrink: 0;
}

.sh-single-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sh-single-user-info {
    flex-grow: 1;
}

.sh-single-username {
    /*font-size: 14px;
    margin-bottom: 2px;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;*/
    font-size: 15px;
    color: var(--thetitle);
    font-weight: bold;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-single-time {
    font-size: 12px;
    color: #999;
}

.sh-single-menu {
    color: #65676b;
    font-size: 20px;
    cursor: pointer;
}

/* 内容区域 */
.sh-single-content-title{
    margin: 0 15px 8px 15px;
    color: #000;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}
.sh-single-content {
    /*margin: 0 15px 8px 15px;
    color: #333;
    cursor: pointer;
    font-size: 14px;*/
    cursor: pointer;
    font-size: 14px;
    color: var(--textqh);
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    -webkit-user-select: text;
    -moz-user-focus: text;
    -moz-user-select: text;
}
.sh-single-content>img{
    width: 20px;
    height: 20px;
    margin-left: 2px;
    margin-right: 2px;
    vertical-align: middle;
}
/* 媒体区域 */
.sh-single-media {
    /*display: flex;
    justify-content: center;
    align-items: center;*/
    padding-left: 75px;
    position: relative;
}

.sh-single-video {
    /*width: 100%;*/
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: rgb(62 62 62);
    /*margin: 0 15px;*/
    max-width: 85%;
    border-radius: 4px;
}
.sh-videokid-sh-mhbg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 0;
    filter: blur(60px);
}
.sh-single-video video {
    /*width: 100%;*/
    max-width: 100%;
    max-height: 280px;
    display: block;
    z-index: 1;
    border-radius: 4px;
    cursor: pointer;
}

.sh-single-video-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    pointer-events: none;
    /*background: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;*/
}
.sh-single-video-icon>i{
    /*position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;*/
    /*background: rgb(64 64 64 / 25%);*/
    font-size: 14px;
    padding: 5px;
    border-radius: 360px;
    /*backdrop-filter: blur(10px);
    width: 15px;
    height: 15px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    filter: drop-shadow(0 0 0.75px rgba(0,0,0,.42)) drop-shadow(0 1px 0.5px rgba(0,0,0,.18)) drop-shadow(0 2px 3px rgba(0,0,0,.2));
}
.sh-single-video-icon>i>svg{
    width: 18px;
    height: 18px;
}
.sh-single-images {
    display: grid;
    gap: 5px;
    /*padding: 0 15px;*/
    width: 85%;
}



/* 图片布局 - 默认3列 */
.sh-single-images.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 1张图片 - 单列 */
.sh-single-images.grid-1 {
    grid-template-columns: 1fr;
}

/* 2张图片 - 每行4个，共2行 */
.sh-single-images.grid-2 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

/* 4张图片 - 每行3个位置 只占用每行的前2个位置(每行2个)，共2行 */
.sh-single-images.grid-4 {
    grid-template-columns: repeat(3, 1fr);
}
.sh-single-images.grid-4>.sh-single-image-link:nth-child(1){
    grid-column: 1;
}
.sh-single-images.grid-4>.sh-single-image-link:nth-child(2) {
  grid-column: 2;
}
.sh-single-images.grid-4>.sh-single-image-link:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
}
.sh-single-images.grid-4>.sh-single-image-link:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}

.sh-single-image-link {
    display: block;
    position: relative;
    overflow: hidden;
    padding-top: 100%; /* 保持正方形比例 */
}

.sh-single-image-link img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    border-radius: 4px;
    background: rgb(245 245 245 / 60%);
    cursor: zoom-in;
}

/* 2张图片时的特殊布局 */
.sh-single-images.grid-2 .sh-single-image-link:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.sh-single-images.grid-2 .sh-single-image-link:nth-child(2) {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
}

/* 超过9张图片时的样式 */
.sh-single-image-link.more::after {
    content: attr(data-more);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    border-radius: 4px;
}

/* 底部信息栏 */
.sh-single-footer {
    display: flex;
    justify-content: space-between;
    padding: 0 15px 15px 75px;
    color: #65676b;
    font-size: 14px;
}

.sh-single-stats {
    display: flex;
    gap: 15px;
}

.sh-single-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sh-single-stat i {
    font-size: 18px;
    color: #787878;
}
.sh-single-stat span {
    font-size: 13px;
    color: #787878;
}

/* 控制按钮 */
.sh-single-controls {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.sh-single-control {
    background: none;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}

.sh-single-control:hover {
    background: #f0f2f5;
}

.sh-single-control.active {
    color: #1877f2;
}

.sh-single-control.active i {
    color: #1877f2;
}



/* 时间与点赞 */
.sh-content-right-time{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-top: 8px; */
    height: 38px;
}

.sh-content-right-time-left{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sh-content-right-time-left>span{
    font-size: 12px;
    color: var(--texths);
}
.sh-content-right-time-left>i{
    font-size: 15px;
    color: var(--thetitle);
    cursor: pointer;
    margin-left: 10px;
}
.sh-content-right-time-left-del{
    font-size: 12px;
    color: var(--thetitle);
    margin-left: 5px;
    cursor: pointer;
}
.sh-content-right-time-left-det{
    font-size: 12px;
    color: var(--thetitle);
    margin-left: 5px;
    /*margin-right: 5px;*/
    cursor: pointer;
}
.sh-content-right-time-right{
    display: flex;
    align-items: center;
    flex-shrink: 0;
    /* background: var(--thetitle); */
}


.sh-content-right-time-right-right{
    width: 30px;
    height: 20px;
    background: var(--backbg);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    cursor: pointer;

    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-user-select:none;
	-moz-user-focus: none;
    -moz-user-select: none;
}

.sh-content-right-time-right-right>p{
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background: var(--thetitle);
    pointer-events: none;
}
.zp1{
    margin-right: 5px;
    pointer-events: none;
}


/* 左侧点赞 */
.sh-content-right-time-right-left{
    height: 38px;
    background: var(--bganh);
    /* display: flex; */
    display: none;
    align-items: center;
    border-radius: 4px;
    margin-right: 5px;
    position: relative;
    animation:myfirsjs 0.3s;
    -webkit-animation:myfirsjs 0.3s; /* Safari and Chrome */
}
@keyframes myfirsjs
{
    0%  {opacity:0;right:-10px;}
    50% {right:0px;}
    100% {right:0px;}
}
.sh-content-right-time-right-left>p{
    width: 1px;
    height: 50%;
    background: var(--dzplcdfg);
}
.sh-content-right-time-right-left-z{
    /*width: 100%;*/
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-left: 20px;
    margin-right: 20px; */
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
}
.sh-content-right-time-right-left-y{
    /*width: 100%;*/
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-left: 20px;
    margin-right: 20px; */
    padding-left: 20px;
    padding-right: 20px;
    cursor: pointer;
}
.sh-content-right-time-right-left-z>span{
    display: flex;
    font-size: 14px;
    color: var(--iconbs);
    margin-left: 5px;
}
.sh-content-right-time-right-left-z>img{
    width: 18px;
    height: 18px;
}
.sh-content-right-time-right-left-y>span{
    display: flex;
    font-size: 14px;
    color: var(--iconbs);
    margin-left: 5px;
    pointer-events: none;
    flex-shrink: 0;
}
.sh-content-right-time-right-left-y>img{
    width: 18px;
    height: 18px;
    pointer-events: none;
}






/* 点赞列表与评论 */
.sh-zanp{
    width: 100%;
    background: var(--fgxys);
    margin-top: 5px;
    border-radius: 4px;
}
.sh-zanp-zan{
    display: flex;
    background: var(--backbg);
    border-radius: 4px;
    /* align-items: center; */
}
.sh-zanp-zan-left{
    display: flex;
    /* align-items: center; */
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.sh-zanp-zan-left>img{
    width: 18px;
    height: 18px;
}


.sh-zanp-zan-right{
    /* list-style:none; */
    display: flex;
    align-items: center;
    margin-top: 5px;
    margin-right: 10px;
    margin-bottom: 5px;
    flex-wrap: wrap;
    
    /*display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    overflow: hidden;*/
}
.sh-zanp-zan-right>li{
    display: inline-block;
    font-size: 14px;
    color: var(--thetitle);
    /*margin-right: 5px;*/
    /*flex-shrink: 0;*/
}

/*.sh-zanp-zan-right li:not(n)::after {
  content: '，';
}
.sh-zanp-zan-right li:last-child:nth-last-child(1):not(.more)::after {
  content: none;
}*/


/*.sh-zanp-zan-right li:nth-child(n+2)::before {
  content: ", ";
}

.sh-zanp-zan-rightr li:last-child::before {
  content: "";
}*/

/* 添加逗号到具有2个或以上数量的li元素 */
.sh-zanp-zan-right li:not(:last-child)::after {
  content: "，";
}

/* 可选：对于自动生成的逗号，可以添加空格以增加可读性 */
/*.sh-zanp-zan-right li:not(:last-child)::after {
  content: "， ";
}*/

/* 清除详情页的点赞头像分割符 */
.sh-zanp-zan-right2 li:not(:last-child)::after {
  content: "";
}

/* 评论列表 */
.sh-zanp-pl{
    width: 100%;
    font-size: 14px;
    /*border-top: 1px solid var(--fgxys);*/
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 4px;
    background: var(--backbg);
    margin-top: 1px;
}
.sh-zanp-pl>li{
    display: flex;
    justify-content: space-between;
    margin-left: 10px;
    margin-right: 10px;
    line-height: 25px;
    -webkit-user-select:text;
	-moz-user-focus: text;
    -moz-user-select: text;
}
/* .sh-zanp-pl-n{
    padding-top: 5px;
    padding-bottom: 5px;
} */
.sh-zanp-pl-n{
    width: 100%;
    pointer-events:none;
    color: var(--thetitle);
}

.sh-zanp-pl-n-nc{
    color: var(--thetitle);
}
.sh-zanp-pl-n-nr{
    pointer-events: none;
    color: var(--textqh);
    word-wrap:break-word;  
    word-break:break-all;  
    overflow: hidden;
    -webkit-user-select:text;
	-moz-user-focus: text;
    -moz-user-select: text;
}
/*.sh-zanp-pl-n-nr>img{
    width: 25px;
    height: 25px;
    vertical-align: middle;
}*/
.sh-zanp-pl-del{
    height: fit-content;
    color: var(--thetitle);
    flex-shrink: 0;
    font-size: 14px;
    pointer-events: all;
    margin-left: 5px;
}




.sh-zanp-pl-ku{
    background: var(--backbg);
    border-radius: 4px;
}
.sh-zanp-pl-gd{
    width: 30px;
    height: 20px;
    background: var(--backbg);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    margin-left: 6px;
}
.sh-zanp-pl-gd>p{
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background: var(--thetitle);
    pointer-events: none;
}
.zp1{
    margin-right: 4px;
    pointer-events: none;
}
.sh-content-right-time-right-left-z:hover{
    background: #474c4d;
    border-radius: 4px 0px 0px 4px;
}

.sh-content-right-time-right-left-y:hover{
    background: #474c4d;
    border-radius: 0px 4px 4px 0px;
}

.sh-content-right-gps {
    padding: 5px 15px 0 75px;
}
.sh-content-right-gps>a {
    font-size: 13px;
    color: var(--thetitle);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.ri-sxdzlike {
    font-size: 18px;
    color: var(--iconbs);
    pointer-events: none;
}
.ri-sxdzcomm {
    font-size: 18px;
    color: var(--iconbs);
    pointer-events: none;
}















/*详情页面更多操作弹窗*/
/* 遮罩层 */
.sh-view-gd-modal-overlay {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 550px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: flex-end;
    z-index: 1000;
}

/* 弹窗容器 */
.sh-view-gd-share-modal {
    width: 100%;
    max-width: 550px;
    background-color: #fff;
    border-radius: 12px 12px 0 0;
    padding: 15px;
    transform: translateY(100%);
    transition: transform 0.2s ease-out;
}

/* 弹窗头部 */
.sh-view-gd-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.sh-view-gd-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.sh-view-gd-close-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sh-view-gd-close-btn:hover {
    color: #666;
}

/* 水平滚动区域 */
.sh-view-gd-scroll-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.sh-view-gd-scroll-container::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
}

.sh-view-gd-options-list {
    display: flex;
    width: max-content;
    padding: 5px 0;
}

.sh-view-gd-option-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 25px;
    min-width: 60px;
    cursor: pointer;
    transition: transform 0.1s;
}

.sh-view-gd-option-item:hover {
    transform: translateY(-3px);
}

.sh-view-gd-option-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    
    color: #666;
}

.sh-view-gd-option-icon i {
    font-size: 22px;
}
.sh-view-gd-option-text {
    font-size: 12px;
    color: #666;
    text-align: center;
}

/* 动画类 */
.sh-view-gd-modal-open .sh-view-gd-share-modal {
    transform: translateY(0);
}













/*搜索页面ui*/
.sh-top-search-container {
    width: 100%;
    max-width: 550px;
    background: white;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); */
    position: sticky;
    top: 0;
    z-index: 1;
}

.sh-top-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 8px;
    padding: 0 12px;
    margin: 15px 15px 8px 15px;
    height: 44px;
    transition: all 0.3s ease;
}

.sh-top-search-wrapper:focus-within {
    background-color: #e8e8e8;
}

.sh-top-search-icon {
    color: #8e8e93;
    margin-right: 8px;
    font-size: 16px;
}
.sh-top-search-icon>i{
    font-size: 18px;
}
.sh-top-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    color: #333;
    padding: 0;
}

.sh-top-search-input::placeholder {
    color: #8e8e93;
}

.sh-top-search-cancel {
    color: #000;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    display: none;
    transform: translateX(10px);
    transition: all 0.3s ease;
    padding: 5px 0 5px 10px;
    user-select: none;
}

.sh-top-search-cancel.active {
    opacity: 1;
    display: flex;
    transform: translateX(0);
}

/*.sh-top-search-cancel:hover {
    opacity: 0.7;
}*/





















/*加载更多文章中提示动画*/
@keyframes colorChange {
  0% {
    opacity:1;
  }
  50% {
      opacity:0.4;
  }
  100% {
      opacity:1;
  }
}



@-webkit-keyframes move_1{
    0%{ -webkit-transform:translateY(15px); opacity:0;}
}



/* 响应式设计 */
@media (max-width: 480px) {
    /*.content-wrapper {
        grid-template-columns: 1fr; /* 小屏幕时改为单列 */
        /*gap: 15px;
    }*/
    
    /*.stats-grid {
        grid-template-columns: repeat(2, 1fr); /* 小屏幕时两列 */
        /*gap: 20px;
    }*/
    
    /*.edit-button {
        justify-self: start; /* 按钮左对齐 */
    /*}*/
}

/*@media (max-width: 320px) {
    .stats-grid {
        grid-template-columns: 1fr; /* 超小屏幕时单列 */
    /*}
}*/





/* 滑动模块 */
/*.swiper-container {
    width: 100%;
    height: 100%;
    flex: 1;
    
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #f9f9f9;*/

    /* Center slide text vertically */
    /**display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    align-items: flex-start;
}
.swiper-container-v {
    background: #eee;
}*/










/*隐藏主页滚动条*/
.sh-main{
    /* overflow: scroll;
    overflow-x: hidden; */
    /**overflow: scroll;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    /**scrollbar-width: none; */    /* Firefox */
    
    
    
}

/*完全隐藏滚动条*/
.sh-main::-webkit-scrollbar { 
    /*display: none; */           /* Safari and Chrome */
}



/*隐藏swiper 每页的默认滚动条 只有当前显示的页面才会出现滚动条*/
.swiper-container {
  /*width: 100%;*/
  /*height: 100vh;*/ /* 根据实际需求调整 */
}




.swiper-slide{
    /*overflow-x: hidden;
    overflow-y: scroll;
    overscroll-behavior-y: contain;*/
}

/*设置滚动条宽度*/
/*.swiper-slide::-webkit-scrollbar {
        width: 0px;
    }*/
/*设置外层滑动槽的颜色*/
/*.swiper-slide::-webkit-scrollbar-track {
    background-color: rgb(0,0,0,0);
}*/
/*设置滑动条的颜色*/
/*.swiper-slide::-webkit-scrollbar-thumb {
    background-color: #b82a2a;
    border-radius: 4px;
}*/





/*au*/
.sh-lan-auth{
    position: fixed;
    left: 0px;
    bottom: 120px;
    height: 40px;
    background: #2997f7;
    display: flex;
    align-items: center;
    z-index: 999;
    color: #09c362;
    /*background: rgb(7,193,96,0.1);*/
    border-radius: 0px 4px 4px 0px;
    background: rgb(7,193,96,0.1);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px)
}
.sh-lan-auth>p{
    font-size: 14px;
    margin-left: 10px;
    margin-right: 10px;
}


/* 达到一定分辨率隐藏右边部分 */
@media screen and (max-width:600px) {
    .sh-content{
        width:98%;
    }

}



@media screen and (max-width:300px) {
    .sh-view-comm-leve-img-a{
        max-width: 100%;
    }

}