/* 示例：强制容器不换行 + 固定模块宽度 */
.mb10.charge-box {
  display: flex;
  flex-wrap: nowrap; /* 禁止换行 */
}
.mb10.charge-box {
  flex: 0 0 50%; /* 每个模块固定占50%宽度 */
}
.header-slider-search .line-form{
  border-radius:5px;
}
.header-slider-search .line-form .abs-right button{
    background: #0088ff;
    color: rgb(255, 255, 255);
    border-radius: 5px;
    margin-right: -28px;
    height: 51.28px;
      padding: 10px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}
@media(max-width: 767px) {
    .header-slider-search .line-form .abs-right button {
        height: 38px; /* 手机时的高度 */
    }
}
.header-slider-search .line-form .abs-right .icon{
  color:#fff;
}

.index-tab ul>li  {
    padding: 0.25rem 1.5rem;
    line-height: 1.5;
    background-image: linear-gradient(345deg, #ffffff 0%, #e4e4e4 100%);
    border-radius: 3rem;
    box-shadow: 6px 6px 12px 0 rgb(169 169 169 / 10%);
    border: 2px solid #fff;
 
}
.pagenav.ajax-pag{text-align:center; !important}
.widget-tab-post.style-card.index-tab.relative-h .relative.mb20{text-align:center;}
/* 强制手机端也显示双列布局 */
@media (max-width: 768px) {
  .widget-ajaxpager  .posts-item.card {
        width: 48% !important;
        float: left !important;
        margin: 1% !important;
    }
    
    .widget-ajaxpager {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }
}


.posts-item .item-thumbnail {
    position: relative;
    overflow: visible; 
}

.posts-item .item-thumbnail::before {
    content: "NEW";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
     display: none; /* 默认隐藏 */
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    background-color: #eef6ff;
    color: #556af1;
    font-family: 'Segoe UI', Roboto, sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 1px 9.2px 1px 15px;
    border: 0.5px solid rgba(59, 130, 246, 0.15);
    pointer-events: none;
    white-space: nowrap;
    box-sizing: border-box;
}

/* 关键：给带 new-post 类的文章显示 NEW 标签 */
.posts-item .item-thumbnail ::before {
    display: inline-flex;
}
@media (max-width: 768px) {
.float-right-radius.round.position-bottom{
   
    display: none !important;

  }

  
}



/*
.header-slider-search .line-form{
  border-radius:5px;
}
.header-slider-search .line-form .abs-right button{
    background: #0088ff;
    color: rgb(255, 255, 255);
    border-radius: 5px;
    margin-right: -28px;
    height: 51.28px;
      padding: 10px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
}
@media(max-width: 767px) {
    .header-slider-search .line-form .abs-right button {
        height: 38px; /* 手机时的高度 */
    }
}/*
.header-slider-search .line-form .abs-right .icon{
  color:#fff;
}


.header-slider-search.abs-center{
    margin: -90px auto;
}



/* 导航 */
.sc-card {
   border-radius: 10px;
  display: flex;
  justify-content: center;
     width: 960px; /* 设置宽度为700px */
    height: 90px; /* 设置高度为100px */
  position: relative;
  min-width: 120px; /* 设置容器的最小宽度为图标的宽度 */
  margin: 100px auto;
  background: rgba(255, 255, 255, 0.5);
}



.icon-cover-icons {
  margin: 0 6px; /* 调整图标之间的间距 */
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.13, 1.34), margin-top 0.3s cubic-bezier(0.25, 0.1, 0.13, 1.34); /* 添加放大效果的过渡 */
  z-index: 1; /* 确保图标位于最上层 */
  max-width: 100%; /* 限制图标的最大宽度 */
  max-height: 100%; /* 限制图标的最大高度 */
}

.icon-cover-icons:hover {
  transform: scale(1.2) translateY(-5px); /* 放大悬停的图标并向上移动10px */
  z-index: 2; /* 将悬停图标置于最上层 */
  margin-top: -2px; /* 为了保持布局稳定，调整上边距 */
}

/* 媒体查询，当屏幕宽度小于768px（可根据实际需求调整此值）时，隐藏相关元素 */
@media (max-width: 768px) {
  .sc-card,
  .icon-cover-icons {
    display: none;
  }
}


.parallax{
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color)) !important;
    border: 2px solid var(--main-bg-color) !important;
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color) !important;
    transition: all 0.2s !important;
}

.tengfei-modern-card{
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color)) !important;
    border: 2px solid var(--main-bg-color) !important;
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color) !important;
    transition: all 0.2s !important;
}

.wniui-card-info{
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color)) !important;
    border: 2px solid var(--main-bg-color) !important;
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color) !important;
    transition: all 0.2s !important;
}
.zibtf-posts-card{
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color)) !important;
    border: 2px solid var(--main-bg-color) !important;
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color) !important;
    transition: all 0.2s !important;
}
.category-widget{
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color)) !important;
    border: 2px solid var(--main-bg-color) !important;
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color) !important;
    transition: all 0.2s !important;
}


.posts-item.list.ajax-item.flex{
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color)) !important;
    border: 2px solid var(--main-bg-color) !important;
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color) !important;
    transition: all 0.2s !important;
}

.navbar-top .sub-menu,.theme-popover{
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color)) !important;
    border: 2px solid var(--main-bg-color) !important;
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color) !important;
    transition: all 0.2s !important;
}
.sub-menu{
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color)) !important;
    border: 2px solid var(--main-bg-color) !important;
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color) !important;
    transition: all 0.2s !important;
}
.header-content{
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color)) !important;
    border: 2px solid var(--main-bg-color) !important;
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color) !important;
    transition: all 0.2s !important;
}
.recommend-header{
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color)) !important;
    border: 2px solid var(--main-bg-color) !important;
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color) !important;
    transition: all 0.2s !important;
}
.macg-card{
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color)) !important;
    border: 2px solid var(--main-bg-color) !important;
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color) !important;
    transition: all 0.2s !important;
}

.recommend-container{
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color)) !important;
    border: 2px solid var(--main-bg-color) !important;
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color) !important;
    transition: all 0.2s !important;
}
.app-download-btn{
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color)) !important;
    border: 2px solid var(--main-bg-color) !important;
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color) !important;
    transition: all 0.2s !important;
}
.app-card {
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color)) !important;
    border: 2px solid var(--main-bg-color) !important;
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color) !important;
    transition: all 0.2s !important;
}

.footer{
  
   background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color));
    border: 2px solid var(--main-bg-color);
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color);
    transition: all 0.2s;
}

.zib-widget {
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color));
    border: 2px solid var(--main-bg-color);
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color);
    transition: all 0.2s;
}
.user-card.zib-widget.author {
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color));
    border: 2px solid var(--main-bg-color);
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color);
    transition: all 0.2s;
}
.no_webshot.main-bg.theme-box.box-body.radius8.main-shadow {
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color));
    border: 2px solid var(--main-bg-color);
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color);
    transition: all 0.2s;
}

.breadcrumb{
    display: none !important;
}

#likelike.content-footer {
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color));
    border: 2px solid var(--main-bg-color);
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color);
    transition: all 0.2s;
}




/* 针对多栏目文章小工具的分页 */
.widget-tab-post .pagenav.ajax-pag {
    margin-top: -20px !important;
    margin-bottom: 20px !important;
}

/* 针对文章列表小工具的分页 */
.widget-main-post .pagenav.ajax-pag {
    margin-top: -20px !important;
    margin-bottom: 20px !important;
}







/*头像呼吸光环和鼠标悬停旋转放大开始*/
.avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 2.5s;}.avatar:hover{ transform:rotate(720deg);}}
/*头像呼吸光环和鼠标悬停旋转放大结束*/







.widget_app_cards_widget .ove_prefix, .ove_prefix1 {
    display: none !important;
}







span.tengfei-title-badge {
      border: 0.15em solid rgb(204, 204, 204);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    padding: 2px 3px;
    height: 18px;
    font-size: 13px;
    margin-right: 2px;
}

span.tengfei-title-badge::before {
    position: absolute;
    content: " ";
    display: block;
    left: -100%;
    top: -5px;
    width: 15px; 
    height: 145%;
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0)
    );
    animation: shine 3s ease-in-out infinite;
    transform: rotate(28deg); 
}

@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 200%;  
    }
}


.user-online-status {
    display: grid !important;
    grid-template-columns: repeat(4,1fr);
    gap: calc(1.938rem - 5px);
    
}
.user-online-status .btn{
    transition: .15s;
    cursor: pointer !important;
    vertical-align: middle;
    text-align: center;
    font-weight: 400;
    text-shadow: 0 0 0;
    line-height: 1.44;
}

.user-online-status > div {
    position: relative;
     
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 6px;
    min-width: 50px;
    min-height: 50px;
    border-radius: var(--main-radius);
    border: 2px dashed transparent;
}

.user-online-status .but:not(.but.no-border).active,.ete-check.active,.ete-select.active {
    border: 2px solid var(--theme-color) !important;
}

.user-online-status .but:not(.but.no-border).active:before,.ete-check.active:before,.ete-select.active:before {
    position: absolute;
    top: -1px;
    text-align: center;
    font-size: 0.725rem;
    content: "\EB7B";
    font-family: 'remixicon' !important;
    width: 16px;
    height: 16px;
    line-height: 14px;
    opacity: 0.9;
    color: #fff;
    right: -1px;
    left: auto;
    font-weight: 600;
    background-color: var(--theme-color);
    border-radius: 0 var(--main-radius) 0 5px;
    transition: all .2s;
    z-index: 1;
}


.wd-k-all {
    word-break: keep-all;
}

..but.hover {
    position: relative;
    border: 2px dashed transparent;
    transition: all .2s;
}

.but.hover:hover {
    border-color: var(--theme-color);
}


@media (min-width: 1024px) {
    .header-user .user-online-status > div {
        border:1px solid rgba(0,0,0,0.03);
    }
}

@media (max-width: 991px) {
    .user-online-status > div {
        min-width:auto;
        min-height: auto;
    }
}

.avatar-img-diy {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    --this-size: 30px;
    width: var(--this-size);
    height: var(--this-size);
}

.user-online-status > div.active {
    border-color: var(--theme-color);
}

.user-online-status > div span:first-child,.online-spot {
    width: 13px;
    height: 13px;
    border-radius: 100%;
    box-shadow: 0 0 0 2px #fff;
}

.user-online-status > div span:last-child {
    font-size: 0.95rem;
    color: var(--muted-color);
}

.online-status {
    position: relative;
    display: inline-block;
    z-index: 1;
}

/* 状态指示点 */
.online-status-dot {
    content: "";
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    box-shadow: 0 0 0 2px #fff;
    background-color: #72e128;
    z-index: 1;
}

[data-sta="online"] span:first-child,.online-status .online {
    background-color: #36c76c;
}

[data-sta="away"] span:first-child,.online-status .away {
    background-color: #ffd648;
}

[data-sta="busy"] span:first-child,.online-status .busy {
    background-color: #ff6692;
}

[data-sta="offline"] span:first-child,  .avatar-status-box .offline {
    background-color: #526b7a;
}

[data-sta="online"] span:first-child,.avatar-status-box .online {
    background-color: #36c76c;
}

[data-sta="away"] span:first-child,.avatar-status-box .away {
    background-color: #ffd648;
}

[data-sta="busy"] span:first-child,.avatar-status-box .busy {
    background-color: #ff6692;
}

[data-sta="offline"] span:first-child,.avatar-status-box .offline {
    background-color: #526b7a;
}


/* 用户在线状态结束 */




/* 头像容器 - 用于定位状态圆点 */
.avatar-with-status {
    position: relative;
    display: inline-block;
}

.navbar .online-status-dot {
    position: absolute;
    bottom: 1.5px;  /* 距离底部2px */
    left: 0.5px;    /* 距离左侧2px */
    width: 8px;  /* 圆点大小 */
    height: 8px;
    border-radius: 50%;  /* 圆形 */
    box-shadow: 0 0 0 2px #fff;  /* 白色边框，突出显示 */
    z-index: 10;  /* 确保在头像上方 */
    transition: background-color 0.3s ease;
}
/* 在线状态圆点 - 左下角定位 */
.online-status-dot {
    position: absolute;
    bottom: 2px;  /* 距离底部2px */
    left: 2px;    /* 距离左侧2px */
    width: 8px;  /* 圆点大小 */
    height: 8px;
    border-radius: 50%;  /* 圆形 */
    box-shadow: 0 0 0 2px #fff;  /* 白色边框，突出显示 */
    z-index: 10;  /* 确保在头像上方 */
    transition: background-color 0.3s ease;
}

/* 不同状态的颜色 */
.online-status-dot.online {
    background-color: #36c76c;  /* 在线-绿色 */
}
.online-status-dot.away {
    background-color: #ffd648;  /* 离开-黄色 */
}
.online-status-dot.busy {
    background-color: #ff6692;  /* 忙碌-红色 */
}
.online-status-dot.offline {
    background-color: #526b7a;  /* 离线-灰色 */
}



/* 隐藏 posts-item 下的忙碌状态圆点 */
.posts-item  .online-status-dot.online  {
    display: none !important;
}
.posts-item  .online-status-dot.away {
    display: none !important;
}

.posts-item .online-status-dot.busy {
    display: none !important;
}

.posts-item .online-status-dot.offline{
    display: none !important;
}

.posts-mini-lists  .online-status-dot.online  {
    display: none !important;
}

.posts-mini-lists  .online-status-dot.away {
    display: none !important;
}

.posts-mini-lists .online-status-dot.busy {
    display: none !important;
}
.posts-mini-lists .online-status-dot.offline{
    display: none !important;
}
.modal-mini.modal-dialog .online-status-dot.offline{
    display: none !important;
}
.modal-mini.modal-dialog .online-status-dot.away{
    display: none !important;
}
.modal-mini.modal-dialog .online-status-dot.busy{
    display: none !important;
}
.modal-mini.modal-dialog .online-status-dot.online {
    display: none !important;
}



/*页码样式微调*/
.pagenav .current, .pagenav .page-numbers, .pagenav a {
    border: 0;
    padding: 8px 14px;
    background: linear-gradient(148deg, hsla(0, 0%, 100%, 0), var(--main-bg-color));
    -webkit-box-shadow: 0 0 8px 0 rgba(95, 95, 95, .15);
    box-shadow: 0 0 8px 0 rgba(95, 95, 95, .15);
    border-radius: 6px;
}


.expand-dock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 60px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
    position: absolute;
    left: 100%;
    
    transform: translateY(-50%);
    z-index: 1000;
}


.parallax {
  fill: var(--body-bg-color);
}
.parallax > use {
  animation: move-forever 30s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  opacity: 0.5;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  opacity: 0.6;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  opacity: 0.7;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  opacity: 1;
}
@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}


/*菜单文字下波浪*/
.navbar-top li.current-menu-item>a, .navbar-top li:hover>a {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    text-decoration: underline wavy;
    text-decoration-thickness: from-font;
    text-underline-offset: 3px;
}









/* 图片样式悬浮按钮 - 毛玻璃效果 */
.float-right-radius {
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 16px 12px;
    min-width: 60px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.float-btn-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* 返回顶部按钮 - 默认隐藏，下滑显示 */
.vela-btn.ontop {
    background: rgba(248, 248, 248, 0.8);
    margin-top: 6px;
    padding-top: 6px;
    position: relative;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 0;
    margin-top: 0;
    padding-top: 0;
    overflow: hidden;
}

/* 显示返回顶部按钮的类 */
.vela-btn.ontop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    height: 48px;
    margin-top: 6px;
    padding-top: 6px;
}

.vela-btn.ontop i {
    color: #666;
    transition: all 0.3s ease;
    /* 箭头向上移动8px */
    transform: translateY(-6px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* 隐藏返回按钮的文字 */
.vela-btn.ontop span {
    display: none !important;
}

/* 基础按钮样式 - 图片风格 */
.vela-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    color: #333;
}

/* 返回顶部按钮特殊样式 - 根据图片调整 */
.vela-btn.ontop {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    /* 确保按钮内容居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.vela-btn.ontop i {
    font-size: 20px;
    color: #333;
    /* 移除边距，完全居中 */
    margin: 0;
    /* 使用flex布局确保居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.vela-btn i {
    font-size: 18px;
    color: #333;
    transition: all 0.3s ease;
    /* 移除下边距，因为文字已隐藏 */
    margin-bottom: 0;
}

.vela-btn span {
    font-size: 10px;
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease;
    line-height: 1;
}

/* 二维码按钮特殊样式 - 图片中的蓝色区域 */
.vela-btn.qrcode-btn {
    background: linear-gradient(135deg, #4a90e2, #357ae8);
    box-shadow: 
        0 4px 16px rgba(74, 144, 226, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.vela-btn.qrcode-btn i,
.vela-btn.qrcode-btn span {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 会员按钮样式 */
.vela-btn.pay-vip {
    background: linear-gradient(135deg, #ff9500, #ff7300);
}

.vela-btn.pay-vip i,
.vela-btn.pay-vip span {
    color: #ffffff;
}

/* QQ按钮样式 */
.vela-btn.service-qq {
    background: linear-gradient(135deg, #12b7f5, #0084ff);
}

.vela-btn.service-qq i,
.vela-btn.service-qq span {
    color: #ffffff;
}

/* 微信按钮样式 */
.vela-btn.service-wechat {
    background: linear-gradient(135deg, #07c160, #09a952);
}

.vela-btn.service-wechat i,
.vela-btn.service-wechat span {
    color: #ffffff;
}

/* 投稿按钮样式 */
.vela-btn.add-btn {
    background: linear-gradient(135deg, #ff2d55, #ff375f);
}

.vela-btn.add-btn i,
.vela-btn.add-btn span {
    color: #ffffff;
}

/* 搜索按钮样式 */
.vela-btn.search-btn {
    background: linear-gradient(135deg, #ffd60a, #ffb800);
}

.vela-btn.search-btn i,
.vela-btn.search-btn span {
    color: #333;
}

/* 主题切换按钮样式 */
.vela-btn.toggle-theme {
    background: rgba(255, 255, 255, 0.6);
}

.vela-btn.toggle-theme i,
.vela-btn.toggle-theme span {
    color: #333;
}

/* 悬停效果 */
.vela-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.vela-btn.qrcode-btn:hover {
    background: linear-gradient(135deg, #357ae8, #2a65d0);
    box-shadow: 
        0 8px 24px rgba(74, 144, 226, 0.4);
}

.vela-btn.ontop:hover {
    background: rgba(240, 240, 240, 0.9);
}

.vela-btn.ontop.show:hover::before {
    width: 15px;
    background: rgba(0, 0, 0, 0.2);
}

/* 模块自适应 - 根据按钮数量调整容器高度 */
.float-btn-container:has(.vela-btn.ontop.show) {
    gap: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .float-right-radius {
        right: 16px;
        bottom: 100px;
        top: auto;
        transform: none;
        backdrop-filter: blur(30px) saturate(200%);
        -webkit-backdrop-filter: blur(30px) saturate(200%);
        background: rgba(255, 255, 255, 0.8);
        padding: 14px 10px;
    }
    
    .vela-btn {
        width: 44px;
        height: 44px;
    }
    
    .vela-btn.ontop.show {
        height: 44px;
    }
    
    .vela-btn i {
        font-size: 16px;
    }
    
    .vela-btn.ontop i {
        font-size: 18px;
        /* 移动端也保持向上移动8px */
        transform: translateY(-8px);
    }
    
    .vela-btn span {
        font-size: 9px;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    .float-right-radius {
        background: rgba(30, 30, 32, 0.75);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.3),
            0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    .vela-btn {
        background: rgba(60, 60, 62, 0.6);
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    
    .vela-btn i,
    .vela-btn span {
        color: #ffffff;
    }
    
    .vela-btn.ontop {
        background: rgba(80, 80, 82, 0.8);
    }
    
    .vela-btn.ontop i {
        color: #ffffff;
    }
    
    .vela-btn.ontop::before {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .vela-btn.ontop i,
    .vela-btn.ontop span {
        color: #ffffff;
    }
}

/* 微交互动画 */
.vela-btn:active {
    transform: scale(0.95);
}

/* 滚动隐藏效果 - 整个悬浮按钮 */
.float-right-radius.scrolling-hide {
    opacity: 0;
    transform: translateY(-50%) translateX(40px);
    transition: all 0.4s ease;
}

/* 调试样式 - 确保显示 */
.float-right-radius {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 电脑端隐藏（屏幕宽度 > 768px 时隐藏） */
@media (min-width: 769px) {
    .float-right.round.position-center.scrolling-hide {
        display: none !important;
    }
}

/* 主题切换按钮样式 */
.toggle-theme {
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
}

.toggle-theme i {
    font-size: 18px;
    color: #FFA500;
    transition: all 0.3s ease;
}

.toggle-theme .fa-moon-o {
    color: #4A90E2;
}

.toggle-theme span {
    color: #1d1d1f;
    font-size: 10px;
}

/* 悬停效果 */
.toggle-theme:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.9);
}

/* 平滑滚动动画 */
html {
    scroll-behavior: smooth;
}

.float-right-radius.scrolling-hide {
    opacity: 0;
    transform: translateY(-50%);
    transition: all 0.4s ease;
}








.title-theme::before{
display:none;
}



.DearLicy_prefix{
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    padding: 5px 4px;
    margin: 1px; /* 移除默认外边距 */
    height: 19px;
    font-size: 12px;
    top: -3px;
    clip-path: polygon(7% 0, 99% 0, 93% 100%, 0 100%);
}
.DearLicy_prefix:after {
    position: absolute;
    content: " ";
    display: block;
    left: -100%;
    top: -5px;
    width: 15px;
    height: 145%;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    animation: sweepTitle 3s ease-in-out infinite;
    transform: rotate(28deg);
}
@keyframes sweepTitle {
    0% { left: -100% }
 
  100% { left: 100% }
}








/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
        @font-face {
                font-family: 'iconfont';
                /* Project id 4690939 */
                src:
                        url('//at.alicdn.com/t/c/font_4690939_rb2ueo5ug8h.woff2?t=1735447133617') format('woff2');
        }
        .wniui-card-info {
                border-radius: 18px;
                padding: 0 0 20px;
                position: relative;
                overflow: hidden;
                will-change: transform;
                width: 100%;
                height: 380px;
                background-color: var(--main-bg-color);
        }
        .wniui-is-center {
                background: url(https://bu.dusays.com/2025/02/22/67b9029491543.jpg);
                background-position: top;
                text-align: center;
                background-size: 120%;
                background-repeat: no-repeat;
                padding-top: 30px;
        }
        .wniui-avatar-img {
                overflow: hidden;
                margin: 0 auto;
                width: 110px;
                height: 110px;
                border-radius: 25px;
                -webkit-border-radius: 25px;
                -moz-border-radius: 25px;
                -ms-border-radius: 25px;
                -o-border-radius: 25px;
                box-shadow: 2.2px 2.2px 2.2px rgba(10, 207, 233, .3);
        }
        .wniui-avatar-img img {
                width: 100%;
                height: 100%;
                object-fit: cover;
        }
        .wniui-card-info .wniui-is-center .wniui-author-info__name {
                font-weight: 800;
                font-size: 18px;
                box-sizing: border-box;
                margin-top: 10px;
        }
        .wniui-card-info .wniui-author-info__description {
                margin-top: 5px;
                font-size: 13.5px;
        }
        .wniui-card-info-data {
                padding: 0 24px;
                margin: 10px 0 4px;
                display: table;
                width: 100%;
                table-layout: fixed;
                text-align: center;
                box-sizing: border-box;
        }
        .wniui-card-info .wniui-card-info-data>.wniui-card-info-data-item {
                display: table-cell;
                position: relative;
        }
        .wniui-card-info-data-item:first-child {
                left: 1px;
        }
        .wniui-card-info .wniui-card-info-data>.wniui-card-info-data-item a .wniui-headline {
                color: var(--main-color);
                font-size: 1em;
                overflow: hidden;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-weight: 800;
        }
        .wniui-card-info .wniui-card-info-data>.wniui-card-info-data-item a .wniui-length-num {
                margin-top: 0px;
                color: var(--main-color);
                font-size: 1.4em;
        }
        .wniui-card-info-data-item:not(:last-child)::after {
                opacity: .3;
                position: absolute;
                top: 8px;
                right: 0;
                content: "";
                width: 1px;
                height: 35px;
                background: var(--main-color)
        }
        .wniui-card-info #wniui-card-info-btn {
                margin: 6px 30px 0 30px;
                border-radius: 20px;
                display: block;
                margin-top: 15px;
                background-color: #49b1f5;
                color: #fff;
                text-align: center;
                line-height: 2.4;
                -webkit-border-radius: 20px;
                -moz-border-radius: 20px;
                -ms-border-radius: 20px;
                -o-border-radius: 20px;
        }
        .wniui-card-info .wniui-card-info-social-icons {
                margin: 20px 0px;
                text-align: center;
        }
        .wniui-card-info .wniui-card-info-social-icons .wniui-social-icon {
                margin: 0 10px;
                font-size: 1.4em;
        }
        .icon-github::before {
                font-family: 'iconfont';
                content: '\ea0a';
        }
        .icon-gitee::before {
                font-family: 'iconfont';
                content: '\e601';
        }
        .icon-bilibili::before {
                font-family: 'iconfont';
                content: '\e609';
        }
        .icon-wangyi::before {
                font-family: 'iconfont';
                content: '\e600';
        }
        .icon-about::before {
                font-family: 'iconfont';
                content: '\e649';
        }
        .wniui-social-icon i {
                display: inline-block;
                font-style: normal;
                font-size: 23px;
                transition: 0.3;
        }
        .wniui-social-icon i:hover {
                transform: scale(1.2) !important;
                transition: 0.3;
        }
        
        
        
        
        
        
        
            /* 单行文章列表美化——开始 */
    .posts-item.card:last-child {
    margin-bottom: 8px!important;
}
    .training-camp__wrapper .header__title-wrapper{
            
    font-size: 16px;
    }
        .sec-wrapper {
            margin-bottom: 10px;
        }
.training-camp__wrapper .header__title-wrapper{
    color:#22ab80;
}
        .training-camp__wrapper {
     
            background-image: linear-gradient(150deg,#cff0fb 20%,#cbf4e4 40%);
            padding: 0 12px 12px;
            border-radius: 16px;
        }
        button.button---AUM5ZP.text---pn4pHz.medium---OGt5iw.header__btn {
            background: #ffffff00;
            border: 1px solid #fc3c2d00;
            border-radius: 0px;
        }
        .training-camp__wrapper .training-camp__header {
            padding: 24px 0 24px 12px;
            display: -webkit-flex;
            display: flex;
          
            background: url(/wp-content/themes/macg/img/kuangwenlu.png) 100% 0/433px 126px no-repeat;
        }
        .training-camp__wrapper .header__title-wrapper {
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            
        }
        .training-camp__wrapper .title__img-wrapper {
            height: 20px;
        }
        .training-camp__wrapper .header__btn-wrapper {
            margin-left: auto;
            display: -webkit-flex;
            display: flex;
        }
        .training-camp__wrapper .header__btn-wrapper button[class*=button---] {
            height: 20px;
            line-height: 20px;
            padding: 0 12px;
        }
        .training-camp__wrapper .header__btn {
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            font-size: 14px;
            color: #22ab80;
        }
        .medium---OGt5iw {
            height: 36px;
            padding: 8px 24px;
            font-size: 14px;
        }
        .outlined---BKvHAe, .text---pn4pHz {
            background-color: initial;
            color: #3e454d;
        }
        .button---AUM5ZP {
            position: relative;
            display: inline-block;
            height: 36px;
            padding: 8px 24px;
            border-radius: 22px;
            cursor: pointer;
            border: unset;
            font-size: 14px;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }
        .ke-icon---zeGrGg+i {
            display: inline-block;
            vertical-align: middle;
        }
        .training-camp__wrapper>div.sec-bd {
            background-color: var(--body-bg-color);
           
        }
        .sec-wrapper .sec-bd {
            position: relative;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
            
        }
        .training-camp__wrapper .sec-bd {
            padding: 12px;
            border-radius: 16px;
        }

        img.title-macyingyong {
            /* width: 120px; */
            height: 50px;
        }
















.qmsg.qmsg-wrapper {
    position: fixed;
    top: 20px;
    left: 0;
    z-index: 12012;
    width: 100%;
    pointer-events: none;
    color: rgba(0,0,0,.55);
    font-size: 1.375rem;
    font-weight: 500;
    font-variant: tabular-nums;
    font-feature-settings: "tnum"
}

.qmsg .qmsg-item {
    padding: 8px;
    text-align: center;
    animation-duration: .3s;
    will-change: transform
}

.qmsg .qmsg-item .qmsg-content {
    text-align: left;
    position: relative;
    display: inline-block;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    pointer-events: all;
    max-width: 80%;
    min-width: 80px
}

.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 12px;
    border-radius: 8px
}

.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal
}

.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon {
    display: flex;
    align-items: center;
    height: 16px
}

.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon:first-child {
    margin-right: 8px
}

.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon-close {
    cursor: pointer;
    color: rgba(0,0,0,.45);
    transition: color .3s;
    margin-left: 6px
}

.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-icon-close:hover>svg path {
    stroke: #555
}

.qmsg .qmsg-item .qmsg-content [class^=qmsg-content-] .qmsg-count {
    display: inline-block;
    position: absolute;
    left: -6px;
    top: -6px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    height: 16px;
    line-height: 16px;
    border-radius: 99px;
    min-width: 16px;
    animation-duration: .3s
}

.qmsg .qmsg-item .qmsg-content-info {
    color: #fff;
    background: linear-gradient(135deg,#635bff,#539bff)
}

.qmsg .qmsg-item .qmsg-content-info .qmsg-count {
    background-color: #539bff
}

.qmsg .qmsg-item .qmsg-content-warning {
    color: #fff;
    background: linear-gradient(135deg,#f57f32,#eeac27)
}

.qmsg .qmsg-item .qmsg-content-warning .qmsg-count {
    background-color: #eeac27
}

.qmsg .qmsg-item .qmsg-content-error {
    color: #fff;
    background: linear-gradient(135deg,#ff4d49,#f85071)
}

.qmsg .qmsg-item .qmsg-content-error .qmsg-count {
    background-color: #f85071
}

.qmsg .qmsg-item .qmsg-content-success {
    color: #fff;
    background: linear-gradient(135deg,#0cd20f,#6ad22e)
}

.qmsg .qmsg-item .qmsg-content-success .qmsg-count {
    background-color: #09bb07
}

.qmsg .qmsg-item .qmsg-content-loading {
    color: #fff;
    background: linear-gradient(135deg,#6c66cc,#66ccb9)
}

.qmsg .qmsg-item .qmsg-content-loading .qmsg-count {
    background-color: #66ccb9
}

.qmsg .animate-turn {
    animation: MessageTurn 1s linear infinite
}

@keyframes MessageTurn {
    0% {
        transform: rotate(0deg)
    }

    25% {
        transform: rotate(90deg)
    }

    50% {
        transform: rotate(180deg)
    }

    75% {
        transform: rotate(270deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes MessageMoveOut {
    0% {
        max-height: 150px;
        padding: 8px;
        opacity: 1
    }

    to {
        max-height: 0;
        padding: 0;
        opacity: 0
    }
}

@keyframes MessageMoveIn {
    0% {
        transform: translateY(-100%);
        transform-origin: 0 0;
        opacity: 0
    }

    to {
        transform: translateY(0);
        transform-origin: 0 0;
        opacity: 1
    }
}

@keyframes MessageShake {
    0%,100% {
        transform: translateX(0px);
        opacity: 1
    }

    25%,75% {
        transform: translateX(-4px);
        opacity: .75
    }

    50% {
        transform: translateX(4px);
        opacity: .25
    }
}




.hfw-custom-widget {
    background: none;
    padding: 0;
    box-shadow: none;
    margin: 0;
    margin-bottom: 25px;
}

.hfw-posts-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.hfw-post-list-item {
    overflow: hidden;
    border-radius: 8px;
    box-sizing: border-box;
    margin-bottom: 1px;
    position: relative;
    flex: 1 1 calc(25% - 16px); /* 调整为 25%，以便一行显示四个（考虑了 10px 的 gap） */
    width: auto;
    height: 380px; /* 设置固定高度 */
}

@media screen and (max-width: 768px) {
  .hfw-post-list-item {
        flex: 1 1 calc(50% - 10px);
        height: 215px; /* 手机端也保持固定高度 */
    }
}

.hfw-post-module-thumb img {
    width: 110%;
    height: 120%; /* 图片占据整个卡片高度 */
    object-fit: cover;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.hfw-post-module-thumb img:hover {
    transform: scale(1.1);
}

.hfw-post-info {
    position: absolute;
    bottom: 0;
    width: 100%;
     -webkit-backdrop-filter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
      border-radius: 0 0 auto auto;
    color: #fff;
    text-align: center;
    padding: 8px 0;
}

.hfw-post-info h2 {
    font-size: 1em;
    margin: 0;
    padding: 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hfw-post-info a {
    text-decoration: none;
    color: #fff;
}

.hfw-post-meta {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 5px;
    color: #fff;
}

.hfw-post-meta.hfw-post-views {
    padding: 2px 5px;
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hfw-post-module-thumb:hover.hfw-post-meta.hfw-post-views {
    opacity: 1;
}

.hfw-post-meta.hfw-post-images {
    padding: 2px 5px;
    border-radius: 3px;
}

.hfw-widget-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hfw-widget-title-wrapper h2 {
    background: url(https://bu.dusays.com/2025/08/15/689e397ddfeda.png) 0px -110px no-repeat;
    position: relative;
    margin-left: -10px;
    margin-right: 20px;
    height: 37px;
    padding-left: 45px;
    padding-top: 2px;
    font-size: 22px;
    margin-bottom: 10px;
}

.hfw-sort-link {
    font-size: 0.9em;
    color: #0073aa;
    text-decoration: none;
    margin-right: 10px;
}

.hfw-sort-link:hover {
    text-decoration: underline;
}

.hfw-more-link {
    text-decoration: none;
    margin-top: 15px;
}

.hfw-more-link:hover {
    text-decoration: none;
}





.article.main-bg.theme-box.box-body.radius8.main-shadow {
    width: 100%;
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color));
    border: 2px solid var(--main-bg-color);
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color);
    transition: all 0.2s;
    /* background: var(--main-bg-color); */
  
}
.hot-top {
     width: 100%;
    background: linear-gradient(180deg, #ecf2ff, var(--main-bg-color));
    border: 2px solid var(--main-bg-color);
    box-shadow: 6px 6px 15px 0 rgb(136 167 225 / 21%), -6px -6px 15px 0 var(--main-bg-color);
    transition: all 0.2s;
}





.widget-tab-post.mb20.style-card.index-tab.relative-h .posts-item::before {
    display: none;
}

.widget-tab-post.mb20.style-card.index-tab.relative-h .macgf_soft_time {
    display: none !important;

 
}

.widget-tab-post.mb20.style-card.index-tab.relative-h  {
   background: none !important;
    border: none !important;
}





.hot-top .right .top-ul li a h3 {white-space: nowrap;}.hot-top    .left{float:left;}.hot-top      .right{float:right;}img{border:none;}.hot-top{width:100%;background:var(--main-bg-color);margin-bottom:25px;padding:22px 20px;position:relative;height:140px;overflow:hidden;border-radius:var(--main-radius);}.hot-top .tg-ph{background-size:100% 100%;position:absolute;right:0;top:0;z-index:2;display:block;width:60px;height:60px;}.hot-top .left{height:100%;}.hot-top .left a{display:block;width:121px;height:45px;line-height:45px;background:#f6f6f6;text-align:center;font-size:15px;color:#989898;margin-bottom:13px;cursor:pointer;border-radius:10px;}.hot-top .left a:last-child{margin-bottom:0;}.hot-top .left .hover{background:var(--theme-color);color:#FFF;position:relative;}.hot-top .left .hover:after{content:"";width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:10px solid var(--theme-color);position:absolute;top:15.5px;right:-10px;z-index:1;}.hot-top .right-main{height:100%;overflow-y:auto;margin-bottom:25px;}.hot-top .right-main:last-child{margin-bottom:0px;}.hot-top .right-overflow{transition:0.4s all;transform:translateY(0);margin-bottom:25px;}.hot-top .right{float:left;width:calc( 100% - 147px);margin-left:26px;height:100%;}.hot-top .right .top-ul{height:130px;overflow:hidden;}.hot-top .right .top-ul li{width:78px;float:center;margin:0px 20px;display:inline-block;}.hot-top .right .top-ul li:nth-child(10n){margin-right:0;}.hot-top .right .top-ul li a{display:block;}.hot-top .right .top-ul li a .list-img{width:100%;height:78px;line-height:78px;text-align:center;border-radius:10px;}.hot-top .right .top-ul li a .list-img img{width:100%;}.hot-top .right .top-ul li a .list-img img:hover{opacity:0.8;}.hot-top .right .top-ul li a h3{margin-top:7px;font-size:13px;line-height:25px;height:25px;overflow:hidden;width:100%;text-align:center;}.new-position{height:780px;}.new-position .left{height:100%;width:calc( ( 100% - 13px ) * 0.36 );}.new-position .right{width:calc( ( 100% - 13px ) * 0.64 );height:100%;background:#FFF;padding:17px 28px;}.new-position .layui-carousel > [carousel-item] > *{background:#FFF;}.new-position #index-lb{height:300px;}.new-position #index-lb div div img{width:100%;min-height:100%;}.new-position .index-login{background:#FFF;margin-top:13px;height:calc( 767px - 300px);padding:25px 33px;position:relative;}span.note{position:absolute;top:10px;right:-50px;z-index:1;width:140px;height:20px;background:var(--theme-color);color:#fff;line-height:20px;-webkit-transform:rotate(45deg);transform:rotate(45deg);text-align:center;font-size:12px;}img.rela{position:absolute;left:52px;z-index:2;top:58px;height:25px;width:25px;}img.yuan{border-radius:50%;animation:light 4s ease-in-out infinite;transition:2s;}img.yuan:hover{transform:scale(1) rotate(720deg);}}

















/*角标css - 新版毛玻璃效果*/
.posts-item.card .item-thumbnail {
  background:#c4cffa26;
  width:100%;
  padding-bottom:var(--posts-card-scale);
}

/* 毛玻璃角标基础样式 */
.glass-badge {
  position:absolute;
  padding:6px 12px;
  color:#fff;
  font-size:12px;
  font-weight:500;
  z-index:10;
  background:var(--glass-bg-color, rgba(255, 255, 255, 0.1));
  -webkit-backdrop-filter: saturate(var(--glass-saturate, 180%)) blur(var(--glass-blur, 20px));
  backdrop-filter: saturate(var(--glass-saturate, 180%)) blur(var(--glass-blur, 20px));
  border:1px solid rgba(255, 255, 255, 0.2);
  text-shadow:0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow:0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 左上角毛玻璃角标 */
.glass-badge.top-left {
  top:10px;
  left:10px;
  border-radius:10px;
}

/* 右上角毛玻璃角标 */
.glass-badge.top-right {
  top:10px;
  right:10px;
  border-radius:10px;
}

/* 底部毛玻璃角标 */
.glass-badge.bottom {
   border-radius:auto;
  bottom:0;
  left:0;
  width:100%;
  border-radius:0;
  text-align:center;
  padding:8px 0;
  font-size:13px;
  border-left:none;
  border-right:none;
  border-bottom:none;
}

/* 兼容旧样式 - 更新为毛玻璃效果 */
a.item-category {
  position:absolute;
  left:10px;
  top:10px;
  padding:6px 12px;
  font-size:12px;
  line-height:1;
  color:#fff;
  background:rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border:1px solid rgba(255, 255, 255, 0.2);
  border-radius:10px;
  text-shadow:0 1px 2px rgba(0, 0, 0, 0.3);
}

.n-collect-item-bottom {
    border-radius:auto;
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:25px;

	background: 
rgba(0,0,0,.2);	
border-radius: 0 0 10px 10px;	
-webkit-backdrop-filter: saturate(180%) blur(20px);	
backdrop-filter: saturate(180%) blur(20px);
  border:1px solid rgba(255, 255, 255, 0.2);
 
  border-left:none;
  border-right:none;
  border-bottom:none;
  font-size:13px;
  color:#fff;
  text-shadow:0 2px 2px rgba(0,0,0,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
}

.jiaobiao2 {
     display: none !important;
  position:absolute;
  top:10px;
  right:-50px;
  z-index:1;
  width:140px;
  height:20px;
  background:rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border:1px solid rgba(255, 255, 255, 0.2);
  color:#fff;
  line-height:20px;
  transform:rotate(45deg);
  text-align:center;
  font-size:12px;
  left:auto;
  border-radius:0 50px 50px 0;
}

/* 毛玻璃配色方案 */
.glass-badge.glass-primary {
  --glass-bg-color: rgba(120, 119, 198, 0.3);
}

.glass-badge.glass-success {
  --glass-bg-color: rgba(99, 205, 118, 0.3);
}

.glass-badge.glass-warning {
  --glass-bg-color: rgba(255, 179, 71, 0.3);
}

.glass-badge.glass-danger {
  --glass-bg-color: rgba(255, 99, 99, 0.3);
}

.glass-badge.glass-purple {
  --glass-bg-color: rgba(168, 85, 247, 0.3);
}

.glass-badge.glass-pink {
  --glass-bg-color: rgba(236, 72, 153, 0.3);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .glass-badge {
    font-size:11px;
    padding:5px 10px;
  }
  
  .glass-badge.top-left,
  .glass-badge.top-right {
    top:8px;
  }
  
  .glass-badge.top-left {
    left:8px;
  }
  
  .glass-badge.top-right {
    right:8px;
  }
}
























@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');


.membership-plan-page {
    --primary-color: #4A90E2;
    --bg-color: #eef2f9;
    --text-color: #333;
    --light-text-color: #888;
    --white-color: #fff;
    --highlight-color: #F56C6C;
    --border-radius: 20px;
    --neumorphic-shadow: 12px 12px 24px rgba(163, 177, 198, 0.6), -12px -12px 24px rgba(255, 255, 255, 0.8);
    --neumorphic-shadow-inset: inset 6px 6px 12px rgba(163, 177, 198, 0.6), inset -6px -6px 12px rgba(255, 255, 255, 0.8);
}


.membership-plan-page {
    font-family: 'Noto Sans SC', sans-serif;
    color: var(--text-color);
    padding: 40px 20px;
    box-sizing: border-box;
    min-height: 100vh;
}


.membership-plan-page body {
    margin: 0;
    padding: 0;
    display: block;
    min-height: auto;
}

.membership-plan-page .main-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.membership-plan-page .plan-header {
    text-align: center;
    margin-bottom: 50px;
    padding: 40px 20px;
    background: var(--bg-color);
    border-radius: var(--border-radius);
    box-shadow: var(--neumorphic-shadow);
}

.membership-plan-page .plan-header h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px;
}

.membership-plan-page .plan-header p {
    font-size: 16px;
    color: var(--light-text-color);
}

.membership-plan-page .pricing-section {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.membership-plan-page .price-card {
    background-color: var(--bg-color);
    border-radius: var(--border-radius);
    box-shadow: var(--neumorphic-shadow);
    padding: 30px;
    text-align: center;
    flex: 1;
    min-width: 300px;
    max-width: 350px;
    position: relative;
    transition: box-shadow 0.3s ease;
    overflow: hidden;
}

.membership-plan-page .price-card:hover {
    box-shadow: 15px 15px 30px rgba(163, 177, 198, 0.7), -15px -15px 30px rgba(255, 255, 255, 0.9);
}

.membership-plan-page .price-card .badge {
    position: absolute;
    top: 18px;
    right: -30px;
    background-color: #ff9a2a;
    color: var(--white-color);
    width: 120px;
    padding: 4px 0;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    transform: rotate(45deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.membership-plan-page .card-header h3 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
}

.membership-plan-page .price {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
}

.membership-plan-page .price sup {
    font-size: 24px;
    font-weight: 500;
    top: -15px;
}

.membership-plan-page .price small {
    font-size: 14px;
    font-weight: 400;
    color: var(--light-text-color);
}

.membership-plan-page .btn {
    width: 100%;
    padding: 15px 0;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 30px;
    background-color: var(--bg-color);
    position: relative;
    overflow: hidden;
}


.membership-plan-page .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.membership-plan-page .btn:hover::before {
    left: 100%;
}

.membership-plan-page .btn-primary {
    background-color: var(--primary-color);
    color: var(--white-color);
    box-shadow: 7px 7px 14px rgba(163, 177, 198, 0.6), -7px -7px 14px rgba(255, 255, 255, 0.8);
}
.membership-plan-page .btn-primary:hover {
    background-color: #3a7bc8;
    transform: translateY(-2px);
    box-shadow: 9px 9px 18px rgba(163, 177, 198, 0.7), -9px -9px 18px rgba(255, 255, 255, 0.9);
}
.membership-plan-page .btn-primary:active {
    box-shadow: var(--neumorphic-shadow-inset);
    transform: translateY(0);
}

.membership-plan-page .btn-secondary {
    color: var(--light-text-color);
    box-shadow: var(--neumorphic-shadow-inset);
}
.membership-plan-page .btn-secondary:hover {
    color: var(--text-color);
    background-color: #f5f7fa;
    transform: translateY(-1px);
}
.membership-plan-page .btn-secondary:active {
    box-shadow: inset 2px 2px 4px rgba(163, 177, 198, 0.7), inset -2px -2px 4px rgba(255, 255, 255, 0.7);
    transform: translateY(0);
}

.membership-plan-page .btn-tertiary {
    background-color: #e9effc;
    color: #4a7bdc;
    box-shadow: 7px 7px 14px rgba(163, 177, 198, 0.6), -7px -7px 14px rgba(255, 255, 255, 0.8);
}
.membership-plan-page .btn-tertiary:hover {
    background-color: #d4e4f7;
    color: #3a6bc2;
    transform: translateY(-2px);
    box-shadow: 9px 9px 18px rgba(163, 177, 198, 0.7), -9px -9px 18px rgba(255, 255, 255, 0.9);
}
.membership-plan-page .btn-tertiary:active {
    box-shadow: var(--neumorphic-shadow-inset);
    transform: translateY(0);
}


.membership-plan-page .features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.membership-plan-page .features li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
}

.membership-plan-page .features li::before {
    content: '✔';
    color: #52c41a;
    font-weight: bold;
    margin-right: 10px;
    font-size: 16px;
}

.membership-plan-page .features li strong {
    color: var(--text-color);
    font-weight: 700;
    margin: 0 5px;
}

.membership-plan-page .features li .highlight,
.membership-plan-page .features .highlight {
    color: var(--highlight-color);
    font-weight: 700;
}

.membership-plan-page .faq-section {
    display: flex;
    gap: 40px;
    margin-top: 60px;
    background: var(--bg-color);
    padding: 50px;
    border-radius: var(--border-radius);
    box-shadow: var(--neumorphic-shadow);
}

.membership-plan-page .faq-intro {
    flex: 1;
}

.membership-plan-page .faq-intro .faq-icon {
    margin-bottom: 20px;
}

.membership-plan-page .faq-intro .faq-icon svg {
    width: 48px;
    height: 48px;
    color: var(--primary-color);
    background-color: #e9effc;
    padding: 10px;
    border-radius: 50%;
}

.membership-plan-page .faq-intro h2 {
    font-size: 24px;
    margin-bottom: 15px;
}

.membership-plan-page .faq-intro p {
    color: var(--light-text-color);
    line-height: 1.6;
}

.membership-plan-page .faq-list {
    flex: 2;
}

.membership-plan-page .faq-item {
    background-color: var(--bg-color);
    border-radius: 15px;
    box-shadow: var(--neumorphic-shadow);
    padding: 20px;
    margin-bottom: 20px;
    transition: box-shadow 0.3s ease;
}
.membership-plan-page .faq-item.open {
    box-shadow: var(--neumorphic-shadow-inset);
}

.membership-plan-page .faq-question {
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    padding-left: 30px;
}

.membership-plan-page .faq-question::before {
    content: '»';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--primary-color);
}

.membership-plan-page .faq-answer {
    padding-left: 30px;
    color: #666;
    line-height: 1.7;
    font-size: 14px;
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 0.4s ease-in-out, margin-top 0.4s ease-in-out;
}

.membership-plan-page .faq-item.open .faq-answer {

    margin-top: 15px;
}

.membership-plan-page .cta-section {
    width: 100%;
    max-width: 1200px;
    margin-top: 60px;
    padding: 60px 40px;
    background: linear-gradient(135deg, #4f46e5, #ac58f5 70%, #f59e0b);
    color: var(--white-color);
    text-align: center;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.membership-plan-page .cta-section h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
}

.membership-plan-page .cta-section p {
    max-width: 600px;
    margin: 0 auto 30px;
    opacity: 0.9;
    line-height: 1.6;
}

.membership-plan-page .cta-section .user-count {
    font-size: 64px;
    font-weight: 700;
}

@media (max-width: 992px) {
    .membership-plan-page .faq-section {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .membership-plan-page .pricing-section {
        flex-direction: column;
        align-items: center;
    }
}