/* =====================================================================
 * Juzi 站内信样式（100% 移植 zibll 子比主题）
 * 结构：① CSS 变量映射（zibll 变量 → Juzi 明/暗主题） ② Juzi 适配层
 *       ③ 下方为自 zibll css/main.css 按选择器提取的原生样式（保持原版视觉）
 * ===================================================================== */

/* ---------- ① zibll CSS 变量（浅色） ---------- */
body {
    --jz-theme-color: #3e8ef7;
    --jz-focus-shadow: rgba(62, 142, 247, 0.4);
    --zib-theme-color: var(--jz-theme-color);
    --zib-focus-shadow-color: var(--jz-focus-shadow);
}
/* ---------- ① zibll CSS 变量（浅色） ---------- */
:root,
body {
    --theme-color: #3e8ef7;
    --focus-color: var(--theme-color);
    --focus-shadow-color: rgba(62, 142, 247, 0.4);
    --key-color: #333;
    --main-color: #4e5358;
    --main-shadow: rgba(116, 116, 116, 0.08);
    --muted-color: #777;
    --muted-2-color: #999;
    --muted-3-color: #b1b1b1;
    --muted-4-color: #d2d2d2;
    --body-bg-color: #f5f6f7;
    --main-bg-color: #fff;
    --muted-bg-color: #eee;
    --muted-bg-2-color: #f6f7f8;
    --main-border-color: rgba(50, 50, 50, 0.06);
    --muted-border-color: rgba(0, 0, 0, 0.03);
    --main-radius: 8px;
    --mini-radius: calc(var(--main-radius) / 1.4);
}
/* ---------- ① zibll CSS 变量（暗色：Juzi data-night） ---------- */
html[data-night='night'] body,
body.dark-theme {
    --key-color: #f8fafc;
    --main-color: #e5eef7;
    --main-shadow: rgba(24, 24, 24, 0.1);
    --muted-color: #b4b6bb;
    --muted-2-color: #888a8f;
    --muted-3-color: #636469;
    --muted-4-color: #43454a;
    --body-bg-color: #292a2d;
    --main-bg-color: #323335;
    --muted-bg-color: #2d2e31;
    --muted-bg-2-color: #37383a;
    --main-border-color: rgba(114, 114, 114, 0.1);
    --muted-border-color: rgba(184, 184, 184, 0.02);
}

/* ---------- ② Juzi 适配层 ---------- */
/* 顶部铃铛（joe_header 内） */
.jzmsg-header-bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 14px; /* 铃铛位于个人中心头像右侧，与头像隔开 14px */
    margin-right: 0;
    position: relative;
    z-index: 5;
    float: none !important; /* 修复 pull-right 浮动导致与个人中心头像重叠 */
}
.jzmsg-header-bell .toggle-radius {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(136, 136, 136, 0.1);
    color: var(--key-color, #333);
    cursor: pointer;
    transition: all 0.3s;
}
html[data-night='night'] .jzmsg-header-bell .toggle-radius {
    color: #e5eef7;
    background: rgba(255, 255, 255, 0.12);
}
.jzmsg-header-bell .toggle-radius:hover {
    background: var(--theme-color, #3e8ef7);
    color: #fff;
}
.jzmsg-header-bell .msg-news-dropdown {
    position: static;
}
.jzmsg-header-bell .hover-show-con {
    left: auto;
    right: 0; /* 铃铛已是最右侧元素，下拉对齐铃铛右边缘，避免溢出屏幕 */
    width: 240px;
    max-width: calc(100vw - 40px);
}
.jzmsg-header-bell .hover-show-con li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 14px;
    gap: 8px;
}
.jzmsg-header-bell .hover-show-con li img {
    width: 22px;
    height: 22px;
    object-fit: cover;
    border-radius: 4px;
}
.jzmsg-header-bell .hover-show-con li a:hover {
    background: rgba(62, 142, 247, 0.08);
}

/* 私信内容里的行内图片 */
.jzmsg-inline-img {
    max-width: min(260px, 100%);
    border-radius: 8px;
    display: block;
    margin: 4px 0;
    cursor: zoom-in;
}

/* 消息中心页面（zibll 容器等价：块级 + 最大宽 1200 居中，禁用 flex 避免布局错位） */
.jzmsg-page {
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 15px 30px;
    min-height: 60vh;
    box-sizing: border-box;
}
.jzmsg-page .zib-widget {
    padding: 0;
    overflow: hidden;
}
.jzmsg-page .msg-center-nav .item {
    cursor: pointer;
}
.jzmsg-page .private-window-content {
    min-height: 300px;
    max-height: 420px;
    overflow-y: auto;
}
.jzmsg-page .tab-pane {
    display: none;
}
.jzmsg-page .tab-pane.in,
.jzmsg-page .tab-pane.active {
    display: block;
}
/* 栅格（zibll 依赖 bootstrap，Juzi 无 bootstrap，此处等价实现） */
.jzmsg-page .row,
.msg-private.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -5px;
    margin-right: -5px;
}
.jzmsg-page .row > *,
.msg-private.row > * {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
}
@media (min-width: 768px) {
    .jzmsg-page .col-sm-3,
    .msg-private.row .col-sm-3 { width: 25%; }
    .jzmsg-page .col-sm-4,
    .msg-private.row .col-sm-4 { width: 33.33333333%; }
    .jzmsg-page .col-sm-8,
    .msg-private.row .col-sm-8 { width: 66.66666666%; }
    .jzmsg-page .col-sm-9,
    .msg-private.row .col-sm-9 { width: 75%; }
}
@media (max-width: 767.9px) {
    .jzmsg-page .col-sm-3,
    .jzmsg-page .col-sm-4,
    .jzmsg-page .col-sm-8,
    .jzmsg-page .col-sm-9,
    .msg-private.row .col-sm-3,
    .msg-private.row .col-sm-4,
    .msg-private.row .col-sm-8,
    .msg-private.row .col-sm-9 { width: 100%; }
}

/* Juzi 弹窗（私信窗口模态框） */
.jzmsg-modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}
.jzmsg-modal-mask.in {
    opacity: 1;
}
.jzmsg-modal-box {
    background: var(--main-bg-color, #fff);
    border-radius: 12px;
    width: 520px;
    max-width: calc(100vw - 30px);
    max-height: 82vh;
    padding: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(10px);
    transition: transform 0.2s;
    color: var(--main-color, #4e5358);
}
.jzmsg-modal-mask.in .jzmsg-modal-box {
    transform: translateY(0);
}
.jzmsg-modal-box .close {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 26px;
    line-height: 1;
    color: var(--muted-2-color, #999);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2;
}
.jzmsg-modal-box .private-window-content {
    max-height: 46vh;
    min-height: 260px;
}

/* 加载/占位动画兜底 */
@keyframes jzmsg-flash {
    0% { opacity: 0.45; }
    50% { opacity: 1; }
    100% { opacity: 0.45; }
}
.jzmsg-page .placeholder,
.jzmsg-modal-box .placeholder {
    animation: jzmsg-flash 1.6s infinite;
}

/* 已读按钮/更多按钮通用微调 */
.jzmsg-page .ajax-readed,
.jzmsg-page .msg-next,
.jzmsg-page .chat-next {
    cursor: pointer;
}

/* 小工具兜底（zibll 提取块缺失时补齐） */
.jzmsg-page .text-center,
.jzmsg-modal-box .text-center { text-align: center; }
.jzmsg-page .pull-right { float: right; }
.jzmsg-page .relative { position: relative; }
.jzmsg-page .abs-left { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
.jzmsg-page .abs-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.jzmsg-page .hide { display: none; }
.jzmsg-page .flex { display: flex; }
.jzmsg-page .ac { align-items: center; }
.jzmsg-page .jc { justify-content: center; }
.jzmsg-page .shrink0 { flex-shrink: 0; }
.jzmsg-page .flex1 { flex: 1 1 0%; min-width: 0; }
/* Juzi 站内信样式 —— 自 zibll 子比主题 css/main.css 按选择器提取，保持 100% 原版视觉 */

body:has(.modal.in),
body.modal-open{
    --blur-bg: #ffffff;
}

body.dark-theme:has(.modal.in),
body.dark-theme.modal-open{
    --blur-bg: #37383a;
}

.but:focus,
.but:hover,
.progress,
.navbar-nav > li:before{
    transition: 0.3s;
}

.navbar-top .sub-menu,
.theme-popover,
.hover-show .hover-show-con{
    opacity: 0;
    transform: translateY(6px);
    transition: 0.4s;
}

.navbar-top li:hover > .sub-menu,
.hover-show:hover .hover-show-con,
.hover-show:hover ~ .hover-show-con,
.hover-show:hover ~ .sub-menu{
    opacity: 1;
    transform: translateY(0);
}

.hover-show{
    position: relative;
    cursor: pointer;
    z-index: 10;
}

.hover-show .hover-show-con{
    position: absolute;
    visibility: hidden;
}

.hover-show:hover .hover-show-con,
.hover-show:hover ~ .hover-show-con,
.hover-show:hover ~ .sub-menu{
    visibility: unset;
}

.social_loginbar a,
.item-thumbnail img,
.dosc-nav .fa{
    transition: 0.2s ease-out;
}

.hover-zoom-sm:hover,
.hover-zoom-img-sm:hover img,
.posts-mini:hover img,
.posts-item:hover .item-thumbnail img,
.posts-item.mult-thumb .thumb-items > span > img:hover{
    transform: scale(1.02);
}

.muted-color{
    color: var(--muted-color);
}

.muted-2-color{
    color: var(--muted-2-color);
}

.muted-3-color{
    color: var(--muted-3-color);
}

.main-bg{
    background: var(--main-bg-color);
}

.placeholder{
    background: linear-gradient(118deg, rgba(121, 121, 121, 0.1) 25%, rgba(121, 121, 121, 0.2) 37%, rgba(121, 121, 121, 0.1) 63%);
    opacity: 1;
    border-radius: 4px;
    -webkit-animation: placeholder 1.5s ease infinite !important;
    animation: placeholder 1.5s ease infinite !important;
    background-size: 400% 100% !important;
}

.placeholder.img{
    height: 119px;
}

.placeholder.t1{
    height: 24px;
    width: 80%;
}

.placeholder.k1{
    height: 20px;
    width: 60%;
}

.placeholder.k2{
    height: 20px;
}

.placeholder.k3{
    height: 15px;
}

.placeholder.s1{
    width: 70px;
    height: 15px;
    display: inline-block;
}

.obs-animate.in-view{
    opacity: 1 !important;
    transform: unset !important;
    transition-delay: var(--delay);
}

.widget-container,
.container{
    position: relative;
}

.px12{
    font-size: 12px;
}

.em12{
    font-size: 1.2em;
}

.em09{
    font-size: 0.9em;
}

.opacity5,
.but[disabled],
.but[disabled]:hover{
    opacity: 0.5;
}

.fade{
    transition: opacity 0.3s linear;
}

botton,
.passw,
[href],
.box-img,
.pointer,
.drop-btn,
a.but{
    cursor: pointer;
}

.border-bottom{
    border-bottom: 1px solid var(--main-border-color);
}

.zib-widget{
    clear: both;
    background-color: var(--main-bg-color);
    padding: 15px;
    box-shadow: 0 0 10px var(--main-shadow);
    border-radius: var(--main-radius);
    margin-bottom: 20px;
}

.muted-box{
    background-color: var(--this-bg, var(--muted-border-color));
    border-radius: var(--main-radius);
    padding: 15px;
}

.zib-widget.mini-radius,
.muted-box.mini-radius{
    border-radius: var(--mini-radius);
}

.zib-widget.radius4,
.muted-box.radius4{
    border-radius: 4px;
}

.muted-box.active{
    background: var(--focus-color-opacity1);
}

.zib-widget-sm,
.zib-widget-sm,
.noshadow{
    box-shadow: none !important;
}

.box-body,
.box-header{
    padding: 15px;
}

.pagenav.notop,
.zib-widget.notop,
.box-body.notop{
    padding-top: 0;
}

.pagenav.nobottom,
.zib-widget.nobottom,
.box-body.nobottom{
    padding-bottom: 0;
}

.box-header + .box-body{
    padding-top: 0;
}

.wp-posts-content > h1:not([class]),
.wp-posts-content > h2:not([class]),
.wp-posts-content > h3:not([class]),
.wp-posts-content > h4:not([class]),
.wp-posts-content > h1.wp-block-heading,
.wp-posts-content > h2.wp-block-heading,
.wp-posts-content > h3.wp-block-heading,
.wp-posts-content > h4.wp-block-heading,
.zib-widget > h3,
.title-h-left,
.tab-nav-theme li,
.title-h-center{
    position: relative;
    padding-bottom: 8px;
}

.wp-posts-content > h1:not([class]):before,
.wp-posts-content > h2:not([class]):before,
.wp-posts-content > h3:not([class]):before,
.wp-posts-content > h4:not([class]):before,
.wp-posts-content > h1.wp-block-heading:before,
.wp-posts-content > h2.wp-block-heading:before,
.wp-posts-content > h3.wp-block-heading:before,
.wp-posts-content > h4.wp-block-heading:before,
.zib-widget > h3:before,
.title-h-left:before,
.tab-nav-theme li:before,
.title-h-center:before{
    transition: 0.4s;
    transform-origin: left;
    position: absolute;
    content: '';
    width: 40px;
    height: 3px;
    background: var(--theme-color);
    left: 0;
    bottom: 3px;
    border-radius: 5px;
    box-shadow: 1px 1px 3px -1px var(--theme-color);
}

.tab-nav-theme li.swiper-slide-thumb-active::before,
.tab-nav-theme li.active::before{
    opacity: 1;
}

.tab-nav-theme li.active a{
    color: var(--focus-color);
}

.tab-nav-theme.swiper-wrapper > li,
.tab-nav-theme.mini-scrollbar > li{
    padding-left: 5px;
    margin: 0;
    padding-right: 5px;
    line-height: 1.4;
}

.tab-nav-but.list-inline{
    margin: 0 -3px 10px -3px;
}

.tab-nav-but li.active .but{
    --this-bg: var(--focus-color);
    --this-color: #fff;
}

.index-tab ul > li{
    display: inline-block;
    padding: 2px 11px;
    font-weight: 500;
    border-radius: 20px;
    margin: 0 1px;
}

.index-tab ul > li.active{
    background: var(--focus-color);
    --main-color: #fff;
}

.index-tab ul > li.active a{
    color: #fff !important;
}

.index-tab.rectangular ul > li{
    padding: 4px 12px;
    border-radius: var(--main-radius);
    margin: 0 4px;
}

.index-tab.rectangular ul > li:first-of-type{
    margin-left: 0px;
}

.index-tab.rectangular ul > li:last-of-type{
    margin-right: 0px;
}

.index-tab.rectangular ul > li:not(.active){
    background: var(--main-bg-color);
    --main-color: var(--muted-color);
}

.loading,
.notyf.load::before,
.swiper-lazy-preloader{
    content: '';
    width: 0.7em;
    height: 0.7em;
    display: inline-block;
    border: 0.08em solid transparent;
    border-width: calc(1px + 0.03em);
    border-radius: 50%;
    border-top-color: var(--this-color);
    border-bottom-color: var(--this-color);
    -webkit-animation: huan-rotate 1s cubic-bezier(0.7, 0.1, 0.31, 0.9) infinite;
    animation: huan-rotate 1s cubic-bezier(0.7, 0.1, 0.31, 0.9) infinite;
}

.loading-spot{
    height: 1em;
    --this-bg: var(--muted-2-color);
}

.loading-spot.zts{
    height: 1em;
    --this-bg: var(--focus-color);
}

.loading-spot > *,
.loading-spot::before,
.loading-spot::after{
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-radius: 5px;
    margin: 1.5px;
    -webkit-animation: ball-pulse-sync 0.8s infinite ease-in-out;
    animation: ball-pulse-sync 0.8s infinite ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    border: 2px solid;
}

.loading-spot > *{
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;
}

.loading-spot::after{
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

svg.loading-circle{
    animation: huan-rotate 2s linear infinite;
    fill: none;
}

svg.loading-circle circle{
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-width: 3;
    stroke: var(--this-color, var(--main-color));
    stroke-linecap: round;
}

.loading-backdrop{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-backdrop svg.loading-circle{
    width: 43px;
    height: 43px;
    --this-color: #fff;
}

svg.loading-circle.zts circle,
.loading.zts{
    --this-color: var(--theme-color);
}

.line-form,
.relative{
    position: relative;
}

.relative-h{
    overflow: hidden;
    position: relative;
}

.radius-cover,
.fit-cover,
.avatar{
    width: 100%;
    height: 100%;
    transition: all 0.2s;
    overflow: hidden;
    -o-object-fit: cover;
    object-fit: cover;
}

.square-box,
.avatar-lg,
.avatar-mini,
.avatar-img{
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    --this-size: 38px;
    width: var(--this-size);

    height: var(--this-size);
}

badge.badge-bw{
    min-width: 1.5em;
}

badge.px12{
    font-size: 12px;
}

badge.badge-essence,
badge.badge-topping{
    min-width: 1.4em;
    padding: 0 2px;
    line-height: 1.4em;
    border-radius: 0.45em 2px;
}

.img-badge.left{
    left: 0;
    border-radius: 0 50px 50px 0;
    right: auto;
}

.img-badge.badge-status{
    width: 60px;
    box-shadow: none;
    margin: 10px 15px;
    opacity: 0.8;
    z-index: 0;
}

.post-password-form [name='Submit'],
.post-page-numbers,
.but,
.badg{
    border-radius: 4px;
    display: inline-block;
    border-radius: 4px;
    transition: 0.15s;
    border: 1px solid var(--this-border);
    vertical-align: middle;
    padding: 0.3em 0.6em;
    text-align: center;
    font-weight: normal;
    box-shadow: var(--this-shadow);
    background: var(--this-bg);
    color: var(--this-color);
    --main-color: var(--this-color);
    --this-bg: rgba(136, 136, 136, 0.1);
    --this-border: transparent;
    --this-shadow: none;
    --this-color: #888;
    text-shadow: 0 0 0;
    line-height: 1.44;
}

.but a{
    color: inherit;
}

.but.pw-1em{
    padding-right: 1em;
    padding-left: 1em;
}

.but .icon,
.but > .fa:not(.fa-angle-right){
    margin-right: 0.25em;
}

.but.radius,
.badg.radius,
.radius > .but{
    border-radius: 50px;
    padding: 0.3em 1em;
}

.badg.p2-10,
badge.p2-10,
.but.p2-10{
    padding: 2px 10px;
}

.but.hollow,
.badg.hollow{
    background: transparent;
    --this-border: var(--this-color);
}

.badg.hollow[class*='b-'],
.but.hollow[class*='b-']{
    background: 0 0;
    --this-border: var(--this-bg);
    --this-color: var(--this-bg);
}

.but:focus,
.but:hover{
    opacity: 0.8;
    color: var(--this-color);
}

.but:active{
    --this-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.08);
}

.but.hollow:hover{
    background: var(--this-bg);
}

.but.hollow[class*='b-']:hover{
    color: #fff;
}

.but.hollow.c-white:hover{
    background: 0 0;
    --this-color: var(--focus-color);
    color: var(--focus-color);
}

.badg.main-radius,
.but.main-radius{
    border-radius: var(--main-radius);
}

.badg.mini-radius,
.but.mini-radius{
    border-radius: var(--mini-radius);
}

.hollow-radio{
    padding: 10px;
    border: 1px solid var(--main-border-color);
    border-radius: var(--mini-radius);
    text-align: center;
}

.hollow-radio.active{
    border-color: var(--focus-color);
    background: var(--focus-color-opacity05);
}

.circular,
.badg.cir,
.but.cir{
    padding: 0;
    border-radius: 5em;
    --this-size: 1.8em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: var(--this-size);
    min-width: var(--this-size);
}

.circular.radius4,
.badg.cir.radius4,
.but.cir.radius4{
    border-radius: 4px;
}

.but.cir svg.icon,
.but.cir > .fa{
    margin: 0;
}

.but-group{
    display: inline-flex;
}

.but-group > .but{
    border-radius: 0;
    margin: 0;
}

.but-group > .but:last-of-type{
    border-radius: 0 4px 4px 0;
}

.but-group > .but:first-of-type{
    border-radius: 4px 0 0 4px;
}

.but-average{
    display: flex;
    border-radius: 4px;
    overflow: hidden;
}

.but-average.main-radius{
    border-radius: var(--main-radius);
}

.but-average.mini-radius{
    border-radius: var(--mini-radius);
}

.but-average.inline{
    display: inline-flex;
}

.but-average.radius{
    border-radius: 100px;
}

.but-average > .but{
    margin: 0 !important;
    border-radius: 0;
    flex: auto;
}

.but-average > .but.active{
    --this-bg: var(--focus-color-opacity1);
    --this-color: var(--focus-color);
}

.modal .but-average > .but{
    flex: 1;
}

.zib-widget .but-average{
    border-radius: var(--mini-radius);
}

.but.badg-sm,
.badg.badg-sm{
    font-size: 0.8em;
    padding: 0 0.2em;
    vertical-align: 0.1em;
    min-width: 1.6em;
}

.but.but-sm{
    font-size: 0.9em;
    padding: 0.1em 0.4em;
    vertical-align: 0.05em;
}

.active.badg,
.active > .badg:not(.vip-tag){
    --this-bg: var(--focus-color);
    --this-color: #fff;
}

.active.badg.hollow,
.active > .hollow:not(.vip-tag){
    --this-color: var(--focus-color);
}

.padding-6{
    padding: 6px;
}

.padding-h10{
    padding-top: 10px;
    padding-bottom: 10px;
}

.padding-lg,
.badg.badg-lg,
.but.padding-lg{
    padding: 0.5em 2em;
}

.toggle-radius{
    background: var(--this-bg);
    width: 29px;
    height: 29px;
    display: inline-block;
    text-align: center;
    border-radius: 100%;
    position: relative;
    vertical-align: text-top;
    --this-bg: var(--main-border-color);
}

.toggle-radius .fa,
.toggle-radius .icon{
    right: 0 !important;
    left: 0 !important;
    margin: auto;
}

.b-gray,
.b-theme,
.b-red,
.b-yellow,
.b-blue,
.b-blue-2,
.b-black,
.b-cyan,
.b-green,
.b-purple,
.jb-red,
.jb-pink,
.jb-yellow,
.jb-yellow-2,
.jb-blue,
.jb-cyan,
.jb-green,
.jb-purple,
.jb-vip1,
.jb-vip2{
    color: var(--this-color);
    background: var(--this-bg);
    --this-color: #fff;
}

.jb-red,
.jb-pink,
.jb-yellow,
.jb-yellow-2,
.jb-blue,
.jb-cyan,
.jb-green,
.jb-purple,
.jb-vip1,
.jb-vip2{
    border: none;
}

.c-theme,
.c-gray,
.c-white,
.c-red,
.c-red-2,
.c-yellow,
.c-yellow-2,
.c-blue,
.c-blue-2,
.c-green,
.c-cyan,
.c-green-2,
.c-purple,
.c-purple-2{
    color: var(--this-color);
}

.c-blue{
    --this-color: #2997f7;
    --this-bg: rgba(41, 151, 247, 0.1);
}

.c-blue-2{
    --this-color: #5c7cff;
    --this-bg: rgba(77, 130, 249, 0.1);
}

.order-type-7 .pay-tag,
.jb-blue{
    --this-bg-b: #59c3fb;
    --this-bg: linear-gradient(135deg, #59c3fb 10%, #268df7 100%);
}

.change-show,
.hide,
.enlighter-raw,
.enlighter-origin{
    display: none;
}

.popover.right > .arrow::after{
    border-right-color: var(--main-bg-color) !important;
}

.popover.left > .arrow::after{
    border-left-color: var(--main-bg-color) !important;
}

.scroll-x,
.scroll-y{
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    overflow-x: auto;
}

.scroll-y{
    overflow-x: hidden;
    overflow-y: auto;
}

.no-scrollbar,
.mini-scrollbar,
.enlighter{
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}

@supports (-moz-transform: inherit){.no-scrollbar,
    .mini-scrollbar,
    .enlighter{
        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
        scrollbar-color: rgba(146, 146, 146, 0.3) rgba(146, 146, 146, 0);
        scrollbar-width: thin;
    }}

.mini-scrollbar::-webkit-scrollbar,
.enlighter::-webkit-scrollbar{
    width: 3px;
    height: 3px;
}

.mini-scrollbar::-webkit-scrollbar-track{
    border-radius: 10px;
}

.mini-scrollbar::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background: rgba(0, 0, 0, 0);
}

.mini-scrollbar:hover::-webkit-scrollbar-thumb{
    background: rgba(146, 146, 146, 0.3);
}

.mini-scrollbar::-webkit-scrollbar-thumb:hover{
    background: rgba(145, 145, 145, 0.7);
}

.mini-scrollbar::-webkit-scrollbar-thumb:window-inactive{
    background: rgba(146, 146, 146, 0.1);
}

.from-private .form-control,
.jzmsg-page .form-control,
.jzmsg-modal-box .form-control{
    border-color: transparent;
    background: var(--body-bg-color);
    color: var(--main-color);
    box-shadow: none;
    transition: border-color ease-in-out 0.15s, background ease-in-out 0.15s, box-shadow ease-in-out 0.15s, opacity ease-in-out 0.3s;
}

.input-group-addon{
    background: var(--main-border-color);
    color: var(--muted-2-color);
    box-shadow: none;
    border-color: transparent;
}

select.form-control{
    cursor: pointer;
    padding-left: 2px;
    padding-right: 20px;
}

.post-password-form [name='post_password']:focus,
.badg-form:focus,
.from-private .form-control:focus,
.jzmsg-page .form-control:focus,
.jzmsg-modal-box .form-control:focus{
    border-color: var(--focus-color);
    box-shadow: 0 0 2px 3px var(--focus-shadow-color);
}

.badg-form:hover,
.from-private .form-control:hover,
.jzmsg-page .form-control:hover,
.jzmsg-modal-box .form-control:hover{
    border-color: var(--focus-color);
    opacity: 0.8;
}

.from-private .form-control[disabled],
.jzmsg-page .form-control[disabled],
.jzmsg-modal-box .form-control[disabled]{
    background: var(--body-bg-color);
    opacity: 0.5;
}

.form-right-icon .form-control{
    padding-right: 2em;
}

.form-but-radio input:checked + .but-radio{
    --this-bg: var(--focus-color);
    --this-color: #fff;
}

.dropdown-menu{
    border-color: transparent;
    background: var(--main-bg-color);
    --this-color: var(--main-color);
    color: var(--this-color);
    box-shadow: 0 0 10px 8px var(--main-shadow);
    min-width: 100px;
    opacity: 0;
    transform: translateY(6px);
    transition: 0.3s;
    display: block;
    margin-top: 6px;
    visibility: hidden;
    list-style: none !important;
    z-index: 992;
    border-radius: var(--main-radius);
}

.dropdown-menu.column-2{
    width: 269px;
}

.dropdown-menu.column-2 > li{
    display: inline-block;
    width: 50%;
}

.dropdown-menu.fluid{
    right: 0;
}

.dropdown-menu a{
    border-radius: var(--mini-radius);
}

.drop-select .dropdown-menu{
    box-shadow: 0 0 0 8000px rgba(0, 0, 0, 0.1);
}

.dropup .dropdown-menu{
    bottom: 100%;
    margin-bottom: 6px;
    transform: translateY(-6px);
}

.focus-show:focus ~ .dropdown-menu,
.open > .dropdown-menu{
    visibility: unset;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-menu > li > a{
    color: var(--this-color);
    padding: 6px 20px;
    text-shadow: none;
}

.dropdown-menu > li > a > .fa,
.dropdown-menu > li > a > svg{
    width: 1.28571429em;
    text-align: center;
}

.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus{
    color: var(--focus-color);
    background: var(--muted-border-color);
}

.dropdown-menu > .active > a:hover{
    opacity: 0.7;
}

.dropdown-menu .divider{
    background-color: var(--muted-border-color);
}

.dropdown-menu .plate-select-tab .tab-content,
.dropdown-menu .select-drop-box{
    overflow-y: auto;
    max-height: 350px;
}

.dropdown-smilie{
    width: 260px;
    height: 300px;
    padding: 8px 10px;
    white-space: inherit;
    text-align: center;
}

.dropdown-smilie .smilie-icon{
    display: inline-block;
    padding: 3px;
    width: 38px !important;
}

.dropdown-quick-often{
    width: 260px;
}

.dropdown-quick-often .scroll-y{
    max-height: 280px;
}

.dropdown-quick-often .list-inline{
    padding: 0 10px !important;
}

.quick-reply-action .modal-buts.but-average{
    margin: 0 !important;
}

.quick-reply-action .modal-buts.but-average > .but{
    padding: 5px;
}

.dropdown-link,
.dropdown-code,
.dropdown-image{
    width: 250px;
    padding: 8px 10px;
}

span.dropup,
span.dropdown{
    display: inline-block;
}

.dropdown-menu.right{
    right: 0;
    left: auto;
}

.dropdown-menu.right::before{
    left: auto;
    right: 12px;
}

.list-inline{
    margin-left: 0;
}

.list-inline > li{
    vertical-align: middle;
}

body:has(.modal.in){
    overflow: hidden;
}

body:has(.modal.in) .header,
body:has(.modal.in) .float-btn,
.modal-open .header,
.modal-open .float-btn{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.modal.fade .modal-dialog{
    transform: scale(0.9);
    transition: transform 0.5s cubic-bezier(0.32, 0.85, 0.45, 1.18), width 0.3s;
}

.modal.in .modal-dialog{
    transform: scale(1);
}

.modal.in ~ .modal{
    background: transparent;
    transition: 0.3s;
}

.modal.in ~ .modal.in{
    background: rgba(0, 0, 0, 0.2);
}

.modal.in.modal-parent .modal-dialog{
    transform: scale(0.98);
    transition: 0.2s ease-in-out;
}

.modal-dialog .loading-mask{
    z-index: 1;
}

.modal-footer .but,
.modal-buts .but{
    padding: 0.3em 1em;
}

.modal-buts .but + .but,
.modal-footer .but + .but,
.modal-dialog .pull-right .but{
    margin-left: 0.5em;
    margin-right: unset;
}

.modal.flex .modal-dialog{
    max-width: calc(100% - 20px);
    margin: 0;
}

.modal.flex .modal-content{
    max-height: calc(100vh - 20px);
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal.bottom.flex{
    align-items: flex-end;
    overflow: hidden;
    height: 100%;
    opacity: 1;
}

.modal.bottom.in .modal-dialog{
    transform: translateY(0);
    transition: 0.6s cubic-bezier(0.28, 0.9, 0.34, 0.99);
}

.modal-buts.but-average{
    border-top: 1px solid var(--main-border-color);
    border-radius: 0 0 var(--main-radius) var(--main-radius);
}

.modal-buts.but-average > .but{
    background: transparent;
    padding: 0.8em;
}

.modal-buts.but-average > .but + .but{
    border-left: 1px solid var(--main-border-color);
}

.modal-buts.but-average > .but:hover{
    background: var(--this-bg);
}

.modal-body .modal-full-footer,
.modal-body .modal-buts.but-average{
    margin: 0 -15px -15px;
}

.modal-body .modal-buts.but-average .miniupload-ing *{
    --this-color: var(--key-color);
}

.modal-body .modal-buts.but-average .progress-bar{
    opacity: 0.5;
}

.gutters-10{
    margin: -10px;
}

.gutters-10 > *{
    padding: 10px;
}

.mi-col-2.mr6{
    width: calc(50% - 6px);
}

.flex{
    display: flex;
}

.inflex{
    display: inline-flex;
}

.flex.hh{
    flex-wrap: wrap;
}

.inflex.xx,
.flex.xx{
    flex-direction: column;
}

.inflex.ac,
.flex.ac{
    align-items: center;
}

.inflex.ab,
.flex.ab{
    align-items: flex-end;
}

.inflex.abl,
.flex.abl{
    align-items: baseline;
}

.inflex.at,
.flex.at{
    align-items: flex-start;
}

.inflex.jc,
.flex.jc{
    align-items: center;
    justify-content: center;
}

.inflex.jsb,
.flex.jsb{
    justify-content: space-between;
}

.flex.jse{
    justify-content: space-evenly;
}

.flex.jsa{
    justify-content: space-around;
}

.flex .grow1{
    flex-grow: 1;
}

.flex .shrink0{
    flex-shrink: 0;
}

.flex .flex0{
    flex: none;
}

.flex .flex1{
    flex: 1;
    overflow: hidden;
}

.flex .flex-auto{
    flex: auto;
}

.flex .flex-auto-h{
    flex: auto;
    overflow: hidden;
}

.flex .flex2{
    flex: 2;
}

.flex .flex3{
    flex: 3;
}

.flex .flex4{
    flex: 4;
}

.flex .flex5{
    flex: 5;
}

.flex .ellipsis-box{
    overflow: hidden;
    max-width: 100%;
}

.flex > span.text-ellipsis,
.flex > a.text-ellipsis{
    display: inline-block;
}

.inflex.gap10,
.flex.gap10{
    gap: 10px;
}

.inflex.gap20,
.flex.gap20{
    gap: 20px;
}

.inflex.gap30,
.flex.gap30{
    gap: 30px;
}

.inflex.gap40,
.flex.gap40{
    gap: 30px;
}

.inflex.gap6,
.flex.gap6{
    gap: 6px;
}

.inflex.gap3,
.flex.gap3{
    gap: 3px;
}

.inline-block{
    display: inline-block;
}

.mr3{
    margin-right: 3px;
}

.mr6{
    margin-right: 6px;
}

.mr10{
    margin-right: 10px;
}

.ml10{
    margin-left: 10px;
}

.ml20{
    margin-left: 20px;
}

.mt6{
    margin-top: 6px;
}

.mt10{
    margin-top: 10px;
}

.mb6{
    margin-bottom: 6px;
}

.mb10{
    margin-bottom: 10px;
}

.text-ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.text-ellipsis-2,
.text-ellipsis-3,
.text-ellipsis-5{
    line-height: 1.4em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
}

.text-ellipsis-5 img{
    max-width: 1.5em;
    max-height: 1.5em;
}

.text-ellipsis-2{
    height: 2.8em;
    -webkit-line-clamp: 2;
}

.text-ellipsis-3{
    height: 4.2em;
    -webkit-line-clamp: 3;
}

.text-ellipsis-5{
    max-height: 7em;
    -webkit-line-clamp: 5;
}

.separator{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.separator::after,
.separator::before{
    content: '';
    background: var(--main-border-color);
    max-width: 20%;
    height: 1px;
    margin: 0 1em;
    flex: 1;
}

.steps-box .step.active{
    color: var(--muted-2-color);
}

.steps-box .step.active::before{
    background: transparent;
    box-shadow: 0 0 0 3px var(--focus-color);
}

.widget-customizer-highlighted-widget{
    box-shadow: inset 0 0 10px 2px rgba(58, 199, 242, 0.4), 0 0 10px 2px rgba(58, 199, 242, 0.2);
}

.widget-layout-gap{
    height: var(--pc-gap, 0);
}

.big-title-wrap .but{
    padding: 10px 24px;
    min-width: 120px;
    margin-top: 5px;
}

.zib-widget-wrap{
    background: var(--bg-color-white, transparent);
    padding-top: var(--pt-pc, 0);
    padding-bottom: var(--pb-pc, 0);
    background-image: var(--bg-img-white, none);
    background-size: var(--bg-img-white-size, cover);
    background-position: var(--bg-img-white-position, center);
    background-repeat: var(--bg-img-white-repeat, no-repeat);
    background-attachment: var(--bg-img-white-attachment, scroll);
    background-origin: var(--bg-img-white-origin, border-box);
}

.dark-theme .zib-widget-wrap{
    background: var(--bg-color-dark, var(--bg-color-white, transparent));
    background-image: var(--bg-img-dark, var(--bg-img-white, none));
    background-size: var(--bg-img-dark-size, var(--bg-img-white-size, cover));
    background-position: var(--bg-img-dark-position, var(--bg-img-white-position, center));
    background-repeat: var(--bg-img-dark-repeat, var(--bg-img-white-repeat, no-repeat));
    background-attachment: var(--bg-img-dark-attachment, var(--bg-img-white-attachment, scroll));
    background-origin: var(--bg-img-dark-origin, var(--bg-img-white-origin, border-box));
}

@media (max-width: 767px){.zib-widget-wrap{
        padding-top: var(--pt-m, 0);
        padding-bottom: var(--pb-m, 0);
    }.widget-layout-gap{
        height: var(--m-gap, 0);
    }.big-title-wrap .but{
        padding: 8px 16px;
        min-width: 100px;
    }}

.sidebar .big-title-wrap .but{
    padding: 8px 16px;
    min-width: 100px;
}

.zib-widget > h3{
    margin: 0;
    margin-bottom: 10px;
    font-size: 15px;
}

.zib-widget.widget_media_video,
.zib-widget.widget_media_image{
    padding: 0;
    overflow: hidden;
}

.zib-widget.widget_media_image img{
    width: 100%;
}

.widget-tag-cloud.author-tag .but{
    font-size: 13px;
}

.widget-tag-cloud.fixed-width .but{
    width: 89px;
}

.zib-widget.widget_custom_html{
    padding: unset;
    background: unset;
    box-shadow: unset;
    border-radius: unset;
}

.page-cover .dropdown-menu{
    --this-color: var(--muted-color);
}

.graphic > .fit-cover{
    position: absolute;
    width: 100%;
    height: 100%;
}

.fixed-wrap .fixed-wrap-nav.zib-widget{
    padding: 8px 15px;
}

.produck-plan-card.accent-blue{
    --t-jb: linear-gradient(99deg, #55c8be 0%, #3a87fb 100%);
    --t-c: #3a87fb;
    --t-c2: rgba(58, 135, 251, 0.5);
}

.produck-plan-card.accent-purple{
    --t-jb: linear-gradient(99deg, #d68bf8 0%, #7658e2 100%);
    --t-c: #7658e2;
    --t-c2: rgba(118, 88, 226, 0.5);
}

.zib-widget .zib-partners-scroll.zps-card-bg .zps-item{
    background: var(--muted-border-color);
}

.zib-widget .zps-end-fade{
    --zps-end-fade-color: var(--main-bg-color);
}

.widget-text-title .text-desc span,
.widget-text-title .text-title span{
    display: inline-block;
}

.widget-text-title .text-desc,
.widget-text-title .text-title{
    font-size: var(--pc-font_size);
    font-weight: var(--pc-font_weight);
    margin-top: var(--pc-margin_top);
    margin-bottom: var(--pc-margin_bottom);
}

.widget-text-title .text-title-icon .fa,
.widget-text-title .text-title-icon svg{
    width: var(--icon-width, 1em);
}

@media (max-width: 767px){.widget-text-title .text-desc,
    .widget-text-title .text-title{
        font-size: var(--m-font_size);
        font-weight: var(--m-font_weight);
        margin-top: var(--m-margin_top);
        margin-bottom: var(--m-margin_bottom);
    }}

.widget-buttons-wrap{
    margin: calc(0px - var(--pc-gap, 10px));
}

.widget-buttons-wrap > div{
    margin: var(--pc-gap, 10px);
}

.widget-buttons-wrap .but{
    width: var(--pc-width, auto);
}

.widget-buttons-wrap.align-center{
    justify-content: center;
}

.widget-buttons-wrap.align-right{
    justify-content: flex-end;
}

.widget-buttons-wrap.align-left{
    justify-content: flex-start;
}

.widget-buttons.pc-size-small .but{
    padding: 0.3em 0.6em;
}

.widget-buttons.pc-size-medium .but{
    padding: 8px 16px;
}

.widget-buttons.pc-size-large .but{
    padding: 12px 24px;
}

@media (max-width: 767px){.widget-buttons-wrap{
        margin: calc(0px - var(--m-gap, 5px));
    }.widget-buttons-wrap > div{
        margin: var(--m-gap, 5px);
    }.widget-buttons-wrap .but{
        width: var(--m-width, auto);
    }.widget-buttons.m-size-small .but{
        padding: 0.3em 0.6em;
    }.widget-buttons.m-size-medium .but{
        padding: 8px 16px;
    }.widget-buttons.m-size-large .but{
        padding: 12px 24px;
    }}

.author-minicard,
.author-minicard .avatar-img{
    display: inline-block;
}

.author-minicard .list-inline > li + li{
    width: calc(100% - 58px);
}

.links-box:not(.zib-widget):not(.links-style-simple):not(.links-style-image){
    margin: -5px;
}

.links-style-bigcard.text-center{
    justify-content: center;
}

.links-box:not(.zib-widget) .links-card{
    background: var(--main-bg-color);
}

.links-style-image:not(.zib-widget){
    margin: calc(0px - var(--this-margin));
    margin-bottom: calc(20px - var(--this-margin));
}

.links-style-image.zib-widget{
    padding: calc(15px - var(--this-margin));
}

.link-page-search-cover .tab-nav-theme li a:hover,
.link-page-search-cover .tab-nav-theme li.active a{
    color: var(--main-color);
    opacity: 1;
}

.user-ranking-box .img-badge.left{
    left: -15px;
    padding: 2px 3px;
    top: -5px;
    transform: scale(0.8);
    transform-origin: left;
}

.posts-nav-lists li.yc:not(.active){
    display: none;
}

.posts-nav-lists li a:hover,
.posts-nav-lists li.active a,
.nav .active a,
.dosc-nav li a:hover,
.dosc-nav li a:focus,
.nav > li > a:hover,
.nav > li > a:focus{
    background: var(--main-shadow);
    color: var(--focus-color);
}

.posts-nav-lists li.active::before,
.posts-nav-lists li:hover::before{
    opacity: 1;
    border-width: 2px;
    background: var(--focus-color);
}

.dosc-article-meta item .action{
    display: inline;
    vertical-align: unset;
    padding: 0;
}

.dosc-article-meta item .action .icon{
    font-size: 1em;
    width: 1em;
    margin: 0;
}

.article-content .article-docs-footer .action .icon{
    width: auto;
    margin: 0;
}

.article-content .article-docs-footer .action text{
    font-size: 14px;
}

.document-nav .loading{
    overflow: hidden;
    width: 0;
    opacity: 0;
    transition: 0.3s;
}

.document-nav .is-loading .loading{
    width: 0.7em;
    opacity: 1;
    margin-right: 6px;
}

.document-nav .cat-load.active{
    background: var(--main-border-color);
    color: var(--focus-color);
    border-radius: 4px;
}

.poster-loading .loading{
    margin: 1em 0;
    font-size: 40px;
}

.poster-share .but.cir{
    width: 36px;
    height: 36px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.list-item.active{
    box-shadow: 0 0 0 2px var(--focus-color);
}

.list-item .active-index{
    color: #fff;
    position: absolute;
    right: -1px;
    top: -1px;
    z-index: 1;
    background: var(--focus-color);
    border-radius: 0 1px 0 4px;
    padding: 2px 3px;
    font-size: 12px;
    line-height: 12px;
    min-width: 16px;
    text-align: center;
}

.sign .but{
    margin: 0;
}

.match-ok.show{
    opacity: 1;
}

.social-login-item.button-lg{
    padding: 0 14px;
    width: auto !important;
}

.social-login-item.button-lg .fa,
.social-login-item.button-lg .icon{
    margin-right: 6px;
    font-size: 1.2em;
}

.social-login-item.douyin .icon,
.social-login-item.button-lg.baidu .icon{
    font-size: 1.2em;
}

.social-login-item.github.button-lg .fa,
.social-login-item.google.button-lg svg{
    font-size: 1.6em;
    margin-left: -6px;
}

.social-login-item.toggle-radius{
    font-size: 16px;
}

.social-login-item.toggle-radius.baidu,
.social-login-item.toggle-radius.alipay,
.social-login-item.toggle-radius.github{
    font-size: 20px;
}

.social-login-item.toggle-radius.weibo{
    font-size: 18px;
}

.pay-widget .vip-price-buts,
.pay-widget .pay-button .dropup,
.pay-widget .initiate-pay,
.pay-widget .cashier-link,
.pay-widget .vip-price,
.pay-widget .signin-loader{
    width: 100%;
}

.pay-widget .but-group > .vip-price,
.pay-widget .but-group > .but{
    width: 50%;
}

.pay-widget .cashier-link,
.pay-widget .initiate-pay{
    padding: 0.5em;
}

.pay-widget .vip-price > .em12{
    font-size: 2em;
    display: block;
}

.pay-widget .price-box > .text-center{
    width: 100%;
}

.paid-info-box.flex{
    display: flex;
}

.pay-box ul.list-inline{
    margin: 0 !important;
    padding: 0 !important;
}

.pay-box ul.list-inline li{
    width: 90px;
    margin: 0;
}

.pay-box ul.list-inline li + li{
    width: calc(100% - 95px);
}

.but.initiate-pay{
    padding: 0.6em 1em;
}

.pay-box .but-download{
    padding: 10px 10px 5px 10px;
    min-width: 50%;
}

.pay-box .but-download .but{
    min-width: 130px;
}

.pay-box .but-download .but + .but{
    min-width: auto;
}

.pay-box .but-download .but > .fa,
.pay-box .but-download .but svg.icon{
    margin-right: 1em;
}

.pay-box .but.baidu{
    background: #1578f8;
}

.pay-box .but.lanzou{
    background: #f37526;
}

.pay-box .but.alipan{
    background: #6666ff;
}

.pay-box .but.weiyun{
    background: #33b0fa;
}

.pay-box .but.onedrive{
    background: #1254c6;
}

.pay-box .but.tianyi{
    background: #fe9c0a;
}

.pay-box .but.ctfile{
    background: #08be9f;
}

.vip-product.active,
.vip-product-input:checked ~ .vip-product{
    border-color: var(--focus-color);
    background: var(--focus-color-opacity05);
}

.vip-product.active::before,
.exchange-card-box > .vip-card.active::before,
.vip-product-input:checked ~ .vip-product::before{
    content: '\f058';
    font: normal normal normal 16px/1 FontAwesome;
    color: var(--focus-color);
    position: absolute;
    left: 3px;
    top: 3px;
    font-size: 18px;
}

.active-icon.abs-right{
    color: #ffffff;
    top: 20px;
    right: 13px;
    font-size: 20px;
    opacity: 0;
    transition: 0.15s;
}

.payvip-modal .active .vip-card{
    transform: translateY(-1px);
}

.active .active-icon{
    opacity: 1;
}

.vip-baicon.abs-center{
    font-size: 15em;
    top: 80%;
    left: -22%;
    opacity: 0.2;
    z-index: 0;
}

.vip-cardmini .vip-baicon.abs-center{
    left: auto;
    right: -10%;
    width: auto;
    font-size: 7em;
}

.exchange-card-box > .vip-card.active{
    box-shadow: 0 0 0 2px var(--focus-color);
}

.exchange-card-box > .vip-card.active::before{
    left: auto;
    right: 4px;
    top: 4px;
    color: #fff;
    font-size: 18px;
}

.ajax-option .option-dropdown .dropdown-menu{
    max-height: 400px;
    overflow-y: auto;
}

.notyf.info{
    background: linear-gradient(90deg, rgba(58, 162, 54, 0.8), rgba(89, 247, 131, 0.8));
}

.notyf.info:before{
    content: '\f0a1';
}

.action-like.action-animation .icon,
.action-comment-like.action-animation .icon{
    -webkit-animation: lovestar 0.6s 0s 1 ease normal none;
    animation: lovestar 0.6s 0s 1 ease normal none;
}

.abs-left,
.abs-right,
.form-select::before,
.payvip-icon:before,
.abs-center,
.line-form-label,
.toggle-radius .fa,
.toggle-radius .icon{
    position: absolute;
    top: 50%;
    right: 0.7em;
    transform: translateY(-50%);
    z-index: 1;
}

.abs-center{
    left: 0;
    width: 100%;
}

.abs-left{
    right: auto;
    left: 0.7em;
}

.abs-center.left-top,
.abs-center.right-top{
    transform: unset;
    top: 0;
}

.abs-center.right-top{
    left: auto;
    width: auto;
}

.abs-center.left-top{
    text-align: left;
}

.abs-center.conter-bottom,
.abs-center.conter-conter{
    text-align: center;
}

.abs-center.right-top,
.abs-center.right-bottom,
.abs-center.right-conter{
    text-align: right;
}

.abs-center.conter-bottom,
.abs-center.right-bottom,
.abs-center.left-bottom{
    top: auto;
    transform: unset;
    bottom: 0;
}

.abs.left-top{
    left: 0;
    top: 0;
}

.abs.right-top{
    right: 0;
    top: 0;
}

.abs.left-bottom{
    left: 0;
    bottom: 0;
}

.abs.right-bottom{
    right: 0;
    bottom: 0;
}

.step-simple .active{
    color: var(--focus-color);
}

.fluid-widget-wrap .widget-container{
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 1240px){.fluid-widget-wrap .widget-container,
    .container{
        max-width: var(--mian-max-width);
        width: auto;
    }}

@media (max-width: 1200px){.fluid-widget-wrap .widget-container{
        width: 95%;
    }}

@media (max-width: 767px){.fluid-widget-wrap .widget-container{
        width: 100%;
        padding-right: 10px;
        padding-left: 10px;
    }}

.header a:not(.but),
.header svg{
    color: var(--header-color);
}

.header .sub-menu a,
.header .dropdown-menu a,
.header .sub-menu svg{
    color: var(--main-color);
}

[data-language].active,
.header [data-language].active{
    color: var(--focus-color);
}

.header .language-dropdown .dropdown-menu{
    right: -20px;
}

.header .language-dropdown.pull-right.dropdown .dropdown-menu::before{
    right: 30px;
}

.language-dropdown .loading-backdrop{
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.1);
}

body.nav-fixed:not(.body-scroll):not(.mobile-navbar-show) .header.show-slide{
    --header-bg: linear-gradient(0, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.1) 80%);
    --header-color: #fff;
    -webkit-backdrop-filter: unset;
    backdrop-filter: unset;
}

body:not(.nav-fixed) .header.show-slide{
    margin-bottom: 0;
}

.header-slider-search .search_keywords,
.header-slider-search .search-type-but-average .but{
    --this-bg: rgba(255, 255, 255, 0.8);
    --this-color: #888;
}

.filter-blur .header-slider-search .search_keywords,
.filter-blur .header-slider-search .search-type-but-average .but{
    -webkit-backdrop-filter: saturate(5) blur(20px);
    backdrop-filter: saturate(5) blur(20px);
}

.header-slider-search .search-type-but-average .but.active{
    --this-bg: var(--focus-color);
    --this-color: #fff;
}

.header-slider-search .line-form .dropdown > a a,
.header-slider-search .line-form .dropdown > a,
.header-slider-search .line-form .icon{
    color: #555;
}

.header-slider-card .zib-widget{
    margin-bottom: 0;
}

.filter-blur .header-slider-search .line-form,
.filter-blur .header-slider-card .zib-widget{
    -webkit-backdrop-filter: saturate(5) blur(20px);
    backdrop-filter: saturate(5) blur(20px);
}

.filter-blur .header-slider-card .zib-widget{
    background: var(--blur-bg);
}

.navbar-top .navbar-but .but{
    font-size: 0.8em;
    padding: 0.3em 1em !important;
    margin: 0.4em;
}

.navbar-top .navbar-but .but.hover-show{
    z-index: 99;
}

.menu-item > a > .but{
    transform: translateY(-2px);
    margin: -0.3em;
}

.navbar-collapse .search-input ~ .dropdown-menu{
    margin-top: 15px;
}

.navbar-collapse .dropdown-menu .search-input{
    background: transparent;
    padding: 10px;
    width: 460px;
}

.navbar-search.show{
    visibility: unset;
    transform: translateY(0);
}

.menu-graphic-card-item .title.text-ellipsis{
    width: var(--img-size);
    text-align: center;
}

.sub-user-box .list-inline > li + li{
    width: calc(100% - 48px);
}

.sub-user-box .social-login-item.button-lg{
    min-width: 100px !important;
    font-size: 13px;
}

.sub-vip-card .vip-baicon.abs-center{
    font-size: 10em;
    left: 55%;
}

.header-user-href .toggle-radius{
    width: 36px;
    height: 36px;
}

.dplayer-poster .play-icon .toggle-radius{
    width: 80px;
    height: 80px;
    font-size: 30px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
}

.posts-item .item-thumbnail{
    width: 190px;
    height: 0;
    padding-bottom: var(--posts-list-scale);
    position: relative;
    overflow: hidden;
    border-radius: var(--main-radius);
}

.new-swiper.item-thumbnail.contain img:not(.img-icon):not(.smilie-icon):not(.avatar-badge):not(.avatar),
.item-thumbnail.contain img{
    object-fit: contain;
}

.item-thumbnail .swiper-wrapper{
    height: 100% !important;
}

.list .item-thumbnail .zib-slider,
.list .item-thumbnail.new-swiper{
    margin: 0 !important;
    position: absolute;
    height: 100%;
}

.item-thumbnail .dplayer.dplayer-thumb{
    padding-bottom: var(--posts-list-scale);
    transition: opacity 0.3s;
}

.card .item-thumbnail .dplayer.dplayer-thumb{
    padding-bottom: var(--posts-card-scale);
}

.item-thumbnail .dplayer-thumb .dplayer-bezel .dplayer-bezel-icon{
    opacity: 0 !important;
}

.item-thumbnail .dplayer-video-wrap,
.item-thumbnail .swiper-wrapper,
.item-thumbnail img{
    position: absolute;
}

.item-thumbnail .dplayer-video-wrap{
    z-index: 1;
}

.thumb-dplayer-playing .abs-center .fa-play-circle{
    opacity: 0;
}

.forum-lists-cover .swiper-pagination,
.item-thumbnail .swiper-pagination{
    text-align: center !important;
    bottom: 0 !important;
    padding: 0 2px !important;
    left: 0 !important;
    right: 0 !important;
}

.posts-item .item-heading{
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 18px;
    line-height: 1.4em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    max-height: 2.8em;
}

.list.style2 .item-thumbnail{
    width: 130px;
}

.list.style2 .item-heading{
    text-overflow: ellipsis;
    white-space: nowrap;
    display: unset;
    max-height: 1.4em;
}

.posts-item .item-heading > a{
    color: var(--key-color);
}

.posts-item .item-heading > a:hover{
    color: var(--focus-color);
}

.posts-item .item-meta item{
    margin-right: 8px;
    font-size: 13px;
}

.item-meta .avatar-mini{
    transform: translateY(-1px);
}

.item-meta .meta-pay{
    padding: 0 4px;
}

.posts-item .item-meta a,
.posts-mini .item-meta a{
    color: inherit;
}

.posts-item .item-tags a{
    font-size: 11px;
    padding: 2px 5px;
    margin-right: 5px;
}

.posts-item .item-tags a .fa{
    font-size: 1em;
}

.posts-item.card .item-body{
    width: 100%;
    margin: 10px 0 0 0;
    padding: 0;
}

.posts-item.card .item-meta item{
    font-size: 12px;
}

.posts-mini-con .item-heading,
.posts-item.card .item-heading{
    font-size: 14px;
}

.posts-item.card .item-heading{
    min-height: 2.8em;
}

.posts-item.card .item-tags{
    min-height: 23px;
}

.posts-item.card .item-thumbnail{
    width: 100%;
    padding-bottom: var(--posts-card-scale);
}

.posts-item.card.style3 .item-thumbnail,
.posts-item.card.style3 .item-thumbnail img{
    border-radius: var(--main-radius) var(--main-radius) 0 0;
}

.posts-item.card.style3 .item-body{
    padding: 10px;
    margin: 0;
}

.posts-item.no-thumb .item-excerpt{
    height: auto;
}

.waterfall-box .card .item-thumbnail{
    padding-bottom: 0;
    height: auto;
}

.waterfall-box .card .item-thumbnail img{
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-navbar.right .posts-mini .meta-author > span,
.mobile-navbar.left .posts-mini .meta-author > span{
    display: none;
}

.posts-mini .item-thumbnail{
    width: 96px;
    height: 0;
    padding-bottom: var(--posts-list-scale);
    position: relative;
    overflow: hidden;
    border-radius: var(--main-radius);
}

.posts-mini .item-heading{
    margin: 0;
}

.posts-mini .item-heading.icon-circle{
    margin-left: -5px;
}

.posts-mini .item-meta{
    font-size: 12px;
}

.zib-widget.posts-mini-lists .relative > .tab-nav-theme ~ .scroll-x-prev,
.zib-widget.posts-mini-lists .relative > .tab-nav-theme ~ .scroll-x-next{
    top: 10px;
}

.widget-main-post.style-list .widget-ajaxpager,
.widget-main-post.style-card .widget-ajaxpager,
.widget-tab-post.index-tab .tab-content > .tab-pane{
    margin: -8px;
    margin-bottom: 15px;
}

.widget-tab-post.style-list .tab-content > .tab-pane{
    margin-bottom: 25px;
}

.widget-main-post.style-list .posts-item,
.widget-tab-post.style-list .posts-item{
    margin-left: 8px;
    margin-right: 8px;
}

.widget-tab-post.index-tab .list-inline{
    margin-bottom: 15px;
}

.widget-tab-post.style-list .list-inline{
    margin-bottom: 25px;
}

.footer a:not(.but):not(.focus-color){
    color: var(--footer-color);
}

.footer .list-inline > li{
    flex: 1;
    margin: 5px 15px;
}

.footer .list-inline > li + li + li{
    float: right;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 10px;
}

.ontop.tabbar-item.show{
    display: flex !important;
}

.ontop.tabbar-item.show + a{
    transform: translateY(-55px);
}

.tabbar-item.actived,
.tabbar-item.active{
    color: var(--focus-color);
}

.footer-tabbar .virtual-input .but,
.footer-tabbar .single-action-tabbar text{
    display: none;
}

.footer-tabbar .but-group{
    padding: 6px;
    margin: 0 8px;
}

body:has(.modal.in) .float-right,
.modal-open .float-right,
.imgbox-show .float-right,
.scroll-down .scroll-down-hide.float-right,
.scroll-ing .scrolling-hide.float-right{
    transform: translateX(200%);
}

body:has(.modal.in) .float-right.position-center,
.modal-open .float-right.position-center,
.imgbox-show .float-right.position-center,
.scroll-down .scroll-down-hide.float-right.position-center,
.scroll-ing .scrolling-hide.float-right.position-center{
    transform: translate(200%, -50%);
}

.tabbar-item.active{
    color: var(--focus-color);
}

.float-btn.wait-pay-btn .hover-show-con{
    animation: float-wait-pay 2s;
    animation-delay: 0.3s;
}

body.modal-open .float-btn.wait-pay-btn .hover-show-con{
    opacity: 0 !important;
}

.ontop.show{
    opacity: 1;
    transform: translateY(0);
    visibility: unset;
    display: flex !important;
}

.float-btn .hover-show-con{
    right: 35px;
    left: auto;
    width: 200px;
    margin-right: 15px;
    top: 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--main-color);
    padding: 10px;
    margin-top: 0;
    border-radius: var(--main-radius);
    cursor: auto;
}

.float-btn .dropdown-menu::before{
    left: auto;
    top: 15px;
    right: -5px;
}

.float-btn.service-wechat .hover-show-con{
    width: 120px;
    top: -40px;
    padding: 0;
}

.float-btn.service-wechat .dropdown-menu::before{
    top: 53px;
}

.float-btn.qrcode-btn .hover-show-con{
    width: 150px;
    top: -60px;
    padding: 16px 5px 12px;
    text-align: center;
}

.float-btn.qrcode-btn .dropdown-menu::before{
    top: 73px;
}

.search-close-box > .but{
    float: right;
}

.page-cover .article-meta,
.item-thumbnail .abs-right{
    top: 20px;
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 8px;
}

.article-header .article-avatar .list-inline > li{
    padding-left: unset;
}

.article-header .article-avatar .relative{
    margin-top: 20px;
}

.single-metabox .pull-right.dropdown .dropdown-menu::before{
    right: 7px;
}

.single-metabox .dropdown-menu > li > a{
    --this-color: var(--muted-color);
}

.switch-iframe.active .episode-active-icon,
.switch-video.active .episode-active-icon{
    /* clean-css ignore:start */
    background-image: url(../img/playing.svg);
    /* clean-css ignore:end */
    width: 1em;
    margin-right: 6px;
}

.switch-iframe.active,
.switch-video.active{
    color: var(--focus-color);
}

.switch-iframe.active .badg,
.switch-video.active .badg{
    background: var(--focus-color);
    color: #fff;
}

.article-content .article-postsbox .item-meta a{
    color: inherit;
}

.article-postsbox .item-thumbnail img{
    border-radius: 4px;
}

.msg-content a:not([class]),
.private-content a:not([class]),
.comment-content a:not([class]),
.wp-posts-content a:not([class]){
    color: var(--focus-color);
}

.wp-posts-content .but a{
    color: inherit;
}

.wp-posts-content img.fit-cover{
    height: 100%;
}

.post-tab .tab-content{
    padding: 5px;
}

.post-tab.nav-left .tab-content{
    flex: 1;
}

.single-posts-lists .posts-mini .item-heading a{
    color: var(--main-color);
}

.single-posts-lists .posts-mini .item-heading a:hover{
    color: var(--focus-color);
}

.article .action{
    width: 80px;
    padding: 10px 0;
    display: inline-block;
    opacity: 0.7;
    vertical-align: top;
}

.article .action:hover{
    color: inherit;
    opacity: 1;
}

.article .action .icon{
    font-size: 24px;
    width: 100%;
    margin: 5px 0;
}

.article .action text,
.article .action count{
    opacity: 0.7;
    font-size: 0.9em;
}

.action.actived{
    color: var(--focus-color);
}

.article .action.actived{
    opacity: 0.9;
}

.article .action count{
    margin-left: 2px;
}

.action-share{
    position: relative;
    cursor: pointer;
    transition: 0.3s;
    z-index: 90;
}

.action-share.show-share{
    opacity: 1;
}

.dropup .share-button.dropdown-menu::before{
    left: 74px;
}

.author-tag .but,
.author-tag .badg{
    margin-right: 5px;
    margin: 2px;
    padding: 0.15em 0.4em;
    font-size: 12px;
    font-weight: normal;
}

.author-tag > span .icon,
.author-tag > span .fa,
.author-tag a .icon,
.author-tag a .fa,
.item-meta item .icon{
    margin-right: 2px;
}

.mini-scrollbar > li{
    padding-left: 0;
    padding-right: 8px;
}

.article-nav .box-body{
    width: calc(50% - 7px);
    margin: 0;
    display: inline-block;
}

.article-nav .box-body + .box-body{
    margin-right: 0;
    float: right;
    text-align: right;
}

#comments .comment-box .comments-closed,
#comments .action-text,
#comments #cancel-comment-reply-link{
    display: none;
}

#comments #postcomments .action-text,
#comments #postcomments #cancel-comment-reply-link{
    display: inline-block;
}

#comments #postcomments .comt-ctrl .but{
    margin-bottom: 2px;
}

#comments .list-inline{
    padding: 15px;
}

#postcomments .avatar-img{
    --this-size: 45px;
    margin-right: 20px;
}

#postcomments .children .avatar-img{
    --this-size: 26px;
    vertical-align: 2px;
    margin-right: 6px;
}

#postcomments .commentlist > .comment > .list-inline .author-box{
    align-items: start;
}

#postcomments .commentlist > .comment > .list-inline .comment-footer{
    margin-left: 65px;
    margin-top: -25px;
}

#postcomments .comment .list-inline > .comt-main{
    width: 100%;
}

#postcomments .comment .list-inline > li{
    padding: 10px;
    vertical-align: top;
}

.comment-header .badge-status{
    margin-top: 0;
    width: 68px;
    z-index: 0;
}

#postcomments .action count{
    margin-left: 4px;
}

#postcomments .comt-meta > span .but{
    padding: 0.2em 0.8em;
}

.comment-mini-lists.zib-widget{
    padding: 5px;
}

.comment-widget-item.style-2 > .flex{
    align-items: center;
    gap: 0;
}

.comment-widget-item.style-2 .avatar-img{
    --this-size: 28px;
    margin-bottom: 6px;
}

.comment-widget-item.style-2 .muted-box{
    --this-bg: var(--muted-bg-2-color);
    border-radius: var(--mini-radius);
}

.comment-widget-item.style-2 .text-ellipsis-5{
    max-height: 6.6em;
}

.hot-posts .flex .graphic{
    padding-bottom: 70% !important;
    width: 93px;
}

.icon-card .card-icon.toggle-radius{
    width: 2.2em;
    height: 2.2em;
}

.icon-card .toggle-radius .fa{
    font-size: 0.9em;
}

.page-cover > .fit-cover{
    position: absolute;
}

.author-header .avatar-img{
    --this-size: 140px;
}

.author-header .avatar-img + .avatar-set-link{
    color: #fff;
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.author-header .user-identity > .but,
.author-header .user-identity > .badg{
    font-size: 12px;
    padding: 2px 6px;
    margin: 5px 6px 0 0;
    line-height: 1.4;
}

.author-header .avatar-img .avatar{
    border-radius: 6px;
    border: 4px solid var(--main-bg-color);
}

.author-header .cover-btns .item{
    opacity: 0.8;
}

.author-header .cover-btns .dropup .dropdown-menu{
    bottom: calc(100% + 2px);
}

.author-tab .tab-nav-theme .active,
.author-tab .tab-nav-theme .swiper-slide-thumb-active{
    font-weight: bold;
}

.lists-nav{
    padding-top: 0;
    padding-bottom: 0;
}

.lists-nav .tab-nav-theme{
    all: unset;
}

.lists-nav .tab-nav-theme > li{
    display: block;
    padding: 4px;
}

.lists-nav .tab-nav-theme li::before{
    display: none;
}

.lists-nav .tab-nav-theme > li > a{
    display: flex;
    padding: 10px 6px;
    align-items: center;
    border-radius: 6px;
}

.lists-nav .tab-nav-theme > li + li{
    border-top: 1px solid var(--muted-border-color);
}

.dropdown-menu .preview img,
.modal-upload .preview img{
    max-height: 300px;
    border-radius: 6px;
    -o-object-fit: contain;
    object-fit: contain;
}

.progress.integral-progress{
    z-index: 1;
    position: relative;
    height: 3px;
    border-radius: 4px;
    margin: 0;
    background: #dbbd8e;
}

.progress.integral-progress .progress-bar{
    border-radius: 4px;
    background: #9b6b4e;
}

.pillar-item.active ~ .pillar-item{
    opacity: 0.5;
}

.pillar-item.active{
    color: #b97030;
}

.pillar-item.active .pillar{
    background: linear-gradient(0deg, #c1764a 10%, #e8c48e 100%);
}

.user-card.widget .user-cover + .card-content{
    margin-top: -55px;
}

.user-card.widget .user-info,
.user-card.widget .user-avatar{
    text-align: center;
}

.user-card.widget .user-name name{
    justify-content: center;
}

.user-card.widget .more-posts-mini{
    margin: 20px -5px 0 -5px;
}

.user-card.widget .more-posts{
    margin-top: 20px;
}

.msg-center-nav li > a > img{
    width: 22px;
    height: 22px;
    border-radius: 100px;
    margin-right: 10px;
}

.msg-center-nav li > a > badge{
    transform: none;
    right: 10px;
    position: absolute;
    top: 15px;
    margin: 0;
}

.msg-center .ajaxpager .no-more{
    margin-top: 30px;
}

.sub-user-box .msg-news-icon{
    top: 0.4em;
    right: 0;
}

.nav-radius-icon badge.top,
.msg-news-icon badge.top{
    transform: none;
    margin-right: 0;
}

/* 未读徽章：鲜亮红底白字 + 去 scale 模糊（铃铛/列表图/消息中心 tab 统一） */
.msg-news-icon,
.nav-radius-icon{
    position: relative;
}
.nav-radius-icon badge.top,
.msg-news-icon badge.top{
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    line-height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: #ff4d4f;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.3px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.95);
    z-index: 3;
}
.msg-img badge.top{
    transform: none;
    position: absolute;
    top: -2px;
    right: -4px;
    margin: 0;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #ff4d4f;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.5px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.95);
    z-index: 3;
}
html[data-night='night'] .nav-radius-icon badge.top,
html[data-night='night'] .msg-news-icon badge.top,
html[data-night='night'] .msg-img badge.top{
    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.55), 0 0 0 2px rgba(42, 46, 54, 0.95);
}
/* 消息中心左侧 tab 角标同样鲜亮 */
.msg-center-nav li > a > badge{
    background: #ff4d4f;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 1px 6px rgba(255, 77, 79, 0.45);
}

.nav-radius-icon .toggle-radius,
.msg-news-icon .toggle-radius{
    margin: 0 !important;
}

.border-bottom:last-of-type,
.msg-center .border-bottom:last-of-type{
    border: none;
}

.pull-right.msg-news-dropdown.dropdown .dropdown-menu::before{
    right: 20px;
}

.msg-news-dropdown .dropdown-menu.right{
    right: -5px;
}

.msg-news-dropdown li > a{
    padding: 12px 14px;
    min-width: 150px;
    position: relative;
    display: flex;
    align-items: center;
}

.msg-img{
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-right: 5px;
    vertical-align: middle;
    position: relative;
    overflow: inherit;
}

.msg-img img{
    border-radius: 100px;
    background: var(--muted-bg-color);
}

.msg-list > li + li{
    width: calc(100% - 66px);
}

.msg-list badge{
    position: absolute;
    transform: translate(-24px, -7px) scale(0.8);
}

.chat-lists badge{
    transform: translate(-7px, -7px);
}

.private-item .avatar,
.chat-lists .avatar{
    border-radius: 4px;
}

.msg-content .msg-img{
    width: 20px;
    height: 20px;
    margin-top: -2px;
}

.chat-lists .msg-list > li + li{
    width: calc(100% - 47px);
}

.private-window-header .avatar-img{
    --this-size: 20px;
    vertical-align: 1px;
}

.private-window-content{
    height: 400px;
    background: var(--muted-bg-color);
    box-shadow: none;
    border-radius: 4px;
    padding: 15px 10px;
}

.private-list{
    margin: 10px 0;
}

.private-list .avatar-img{
    width: 32px;
    height: 32px;
}

.private-list.right{
    text-align: right;
}

.private-list.left .avatar-img{
    float: left;
}

.private-list.right .avatar-img{
    float: right;
}

.private-content{
    max-width: calc(80% - 60px);
    display: inline-block;
    word-wrap: break-word;
    white-space: pre-wrap;
    padding: 6px 10px;
    border-radius: 4px;
    margin: 0 8px;
    position: relative;
    text-align: left;
    min-height: 32px;
    min-width: 32px;
}

.private-content::before,
.dropdown-menu::before{
    content: ' ';
    display: inline-block;
    width: 9px;
    height: 9px;
    background: var(--main-bg-color);
    position: absolute;
    top: 12px;
    transform: rotate(45deg);
    left: -4px;
    border-radius: 2px;
}

.private-content .readed-badge{
    position: absolute;
    font-size: 12px;
    right: 100%;
    top: 8px;
    width: 2.5em;
    transform: scale(0.9);
    color: #2997f7;
}

.private-list.right .private-content::before{
    left: auto;
    right: -4px;
}

.dropdown .dropdown-menu::before{
    top: -4px;
    left: 12px;
}

.pull-right.dropup .dropdown-menu::before,
.pull-right.dropdown .dropdown-menu::before{
    left: auto;
    right: 12px;
}

.dropup .dropdown-menu::before{
    top: auto;
    bottom: -4px;
    left: 11px;
}

.dropdown-menu.fluid::before{
    left: 50%;
}

.comment-content pre,
.private-content pre{
    padding: 0;
}

.private-content > pre:last-of-type{
    margin-bottom: 0 !important;
}

.private-content .enlighter-default{
    margin: 0;
    min-width: 150px;
}

.modal-body .private-window .visible-xs-block{
    display: none !important;
}

.file-download-icon img.fit-cover{
    height: 100%;
    position: absolute;
}

.hidden-box.show{
    padding-top: 35px;
}

.hidden-box.show .hidden-text{
    padding: 3px 10px;
    font-size: 13px;
    top: 0;
    border-radius: 0 0 8px 0;
    line-height: 1.4;
    z-index: 1;
    left: 0;
    position: absolute;
    border-bottom: 1px dashed var(--focus-color);
    border-right: 1px dashed var(--focus-color);
}

.wp-block-zibllblock-buttons .but{
    margin: 0.4em;
    display: inline-block;
    padding: 6px 18px;
}

.alert.jb-blue:before{
    content: '\f00c';
}

.sidebar .px12-sm,
.mobile-nav-widget .px12-sm,
.mobile-nav-widget .px12-m-s,
.sidebar .px12-m-s{
    font-size: 12px;
}

.sidebar .em09-sm,
.mobile-nav-widget .em09-sm{
    font-size: 0.9em;
}

.mobile-nav-widget .hide-sm,
.sidebar .hide-sm,
.mobile-nav-widget .hide-m-s,
.sidebar .hide-m-s{
    display: none;
}

.mobile-nav-widget .nopw-sm,
.sidebar .nopw-sm{
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.mobile-nav-widget .zib-widget{
    padding: 0 0 10px 0;
    box-shadow: none;
}

.sidebar .widget-ajaxpager .pagenav{
    padding: 10px 5px;
}

.sidebar .widget-ajaxpager .theme-pagination{
    margin: 10px;
}

@media (min-width: 992px){.zib-widget-wrap .swiper-scroll .card,
    .site-layout-1 .swiper-scroll .card,
    .fluid-widget-wrap .swiper-scroll .card{
        width: calc(25% - 12px) !important;
    }.site-layout-1.fluid-widget-wrap .widget-tab-post.style-list .list-inline,
    .fluid-widget-wrap .widget-tab-post.style-list .list-inline{
        margin-bottom: 15px;
    }.lists-nav .tab-nav-theme > li > a:hover{
        background: var(--muted-border-color);
    }}

@media (min-width: 768px){.fixed-wrap .tab-nav-theme.swiper-scroll .swiper-wrapper,
    .fixed-wrap .tab-nav-theme.mini-scrollbar{
        display: flex;
        overflow: hidden;
        text-align: center;
        flex-direction: column;
        border-bottom: none;
        padding: 0;
        margin: 0;
    }.fixed-wrap .tab-nav-theme.swiper-scroll .swiper-wrapper > li,
    .fixed-wrap .tab-nav-theme.mini-scrollbar > li{
        padding: 0;
        margin: 0;
    }.fixed-wrap .tab-nav-theme.swiper-scroll .swiper-wrapper > li > a,
    .fixed-wrap .tab-nav-theme.mini-scrollbar > li > a{
        padding: 6px;
        margin: 1px 0;
        display: block;
        font-size: 16px;
        color: var(--muted-2-color);
        overflow: hidden;
    }.fixed-wrap .tab-nav-theme.swiper-scroll .swiper-wrapper > li > a:hover,
    .fixed-wrap .tab-nav-theme.mini-scrollbar > li > a:hover{
        color: var(--main-color);
    }.fixed-wrap .tab-nav-theme.swiper-scroll .swiper-wrapper > li.swiper-slide-thumb-active > a,
    .fixed-wrap .tab-nav-theme.mini-scrollbar > li.active > a{
        color: var(--focus-color);
        font-weight: 500;
        background: var(--focus-color-opacity05);
        border-radius: var(--mini-radius);
    }.fixed-wrap .tab-nav-theme.swiper-scroll .swiper-wrapper > li::before,
    .fixed-wrap .tab-nav-theme.mini-scrollbar > li::before{
        display: none;
    }}

@media (max-width: 991px){.nav.navbar-nav.show{
        opacity: 1;
        z-index: 998;
        visibility: unset;
        transform: translateY(68px);
    }.footer .list-inline .hidden-xs{
        display: none;
    }.show-nav-but.hide{
        display: unset !important;
    }body .sidebar.show-sidebar{
        display: unset;
        width: 100%;
        margin-left: 0;
    }}

@media (max-width: 767px){.container.full-sm{
        padding: 0;
    }.flex.flex-row.flex-col-sm-2{
        flex-wrap: wrap;
    }.flex.flex-row.flex-col-sm-2 > *{
        flex-basis: 50%;
    }.inflex.gap10-sm,
    .flex.gap10-sm{
        gap: 10px;
    }.inflex.gap6-sm,
    .flex.gap6-sm{
        gap: 6px;
    }.index-tab.affix-header-sm.affix-bottom,
    .index-tab.affix-header-sm.affix{
        padding: 8px 10px;
    }.drawer-sm.show{
        transition: 0.6s cubic-bezier(0.28, 0.9, 0.34, 0.99);
        visibility: unset;
        transform: unset;
    }.mini-scrollbar{
        scrollbar-width: none;
    }.navbar-collapse.collapse,
    .mini-scrollbar::-webkit-scrollbar{
        display: none;
    }.author-cover .avatar-img{
        --this-size: 46px;
        margin-left: -8px;
    }.zib-widget .zib-widget-sm{
        background: 0 0;
        box-shadow: none;
        padding: 0;
    }.header-slider-card .icon-cover-card.zib-widget{
        padding: 10px;
    }.mobile-navbar.right{
        right: -2px;
        transform: translateX(110%);
    }.mobile-navbar.left{
        left: -2px;
        transform: translateX(-110%);
    }.mobile-navbar.left > .toggle-radius{
        float: right;
    }.mobile-navbar .toggle-radius{
        margin: 0 2px;
    }.mobile-navbar .box-body.notop{
        padding-left: 0;
        padding-right: 0;
    }.mobile-navbar .posts-nav-box .zib-widget{
        background: var(--muted-border-color);
        box-shadow: none;
    }.posts-item .item-thumbnail{
        width: 138px;
    }.posts-mini .item-thumbnail,
    .list.style2 .item-thumbnail{
        width: 90px;
    }.posts-item .item-heading{
        font-size: 15px;
    }.drop-modal-sm .dropdown-menu,
    .drop-fixed-sm .dropdown-menu::before,
    .posts-item:not(.no-thumb) .item-excerpt{
        display: none;
    }.widget-main-post.style-list .widget-ajaxpager,
    .widget-main-post.style-card .widget-ajaxpager,
    .widget-tab-post.index-tab .tab-content > .tab-pane{
        margin: -5px;
        margin-bottom: 20px;
    }.widget-tab-post.style-list .tab-content > .tab-pane,
    .widget-main-post.style-list .widget-ajaxpager{
        margin-top: -15px;
    }.widget-tab-post.style-list .posts-item{
        margin-left: 5px;
        margin-right: 5px;
    }.widget-tab-post.style-list .list-inline{
        margin-bottom: 30px;
    }.placeholder.t1,
    .placeholder.k2{
        height: 16px;
        margin-bottom: 5px;
    }.virtual-input .but,
    .virtual-input img{
        width: 28px;
        height: 28px;
        border-radius: 120px;
        margin: 0 4px;
        flex-shrink: 0;
    }.virtual-input .but{
        width: auto;
        padding: 3px 10px;
    }.drop-fixed-sm .dropdown-menu,
    .mobile-fixed{
        position: fixed;
        transform: translateY(220%);
        transition: 0.6s;
        opacity: 1;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 22px 16px;
        background: var(--main-bg-color);
        z-index: 1080;
        border-radius: 10px 10px 0 0;
        margin: 0;
    }.drop-fixed-sm.open .dropdown-menu,
    .mobile-fixed.show{
        box-shadow: 0 -50px 50px rgba(0, 0, 0, 0.2);
        transition: 0.6s cubic-bezier(0.28, 0.9, 0.34, 0.99);
        transform: unset;
    }.mobile-fixed.show .fixed-body{
        visibility: unset;
        z-index: -1;
    }.drop-fixed-sm .dropdown-menu{
        z-index: 1045;
        padding: 10px;
        top: auto !important;
        right: 0 !important;
        left: 0 !important;
        max-height: 50vh;
        overflow: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }.drop-modal-menu > li > a,
    .drop-fixed-sm .dropdown-menu > li > a{
        font-size: 16px !important;
        padding: 10px 20px;
    }.drop-modal-menu > li > a > .fa,
    .drop-fixed-sm .dropdown-menu > li > a > .fa,
    .drop-modal-menu > li > a > svg,
    .drop-fixed-sm .dropdown-menu > li > a > svg{
        font-size: 1.2em !important;
        width: 1.4em;
        text-align: center;
        margin-right: 20px;
        vertical-align: -0.15em;
    }.drop-modal-menu > li > a > .loading,
    .drop-fixed-sm .dropdown-menu > li > a > .loading{
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        margin-right: 26px;
        margin-left: 5px;
    }.modal-open .drop-fixed-sm.open .dropdown-menu{
        opacity: 0;
    }.footer .list-inline{
        gap: 10px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }.footer .list-inline > li + li + li{
        float: unset;
        align-items: center;
    }.article-header .article-avatar .list-inline{
        text-align: right;
    }.article-header .article-avatar .list-inline li,
    .article-header .article-avatar .list-inline li + li{
        float: left;
        text-align: left;
    }.author-header .avatar-img{
        --this-size: 100px;
    }.author-header .header-info name,
    .author-header .header-info > .flex1{
        flex-basis: 100%;
    }.author-header .avatar-img .avatar{
        border-radius: 100px;
        border-width: 3px;
    }.full-sm .author-header{
        margin-top: -20px;
        border-radius: 0;
    }.full-sm .author-header .page-cover{
        border-radius: 0;
    }.msg-center-nav.lists-nav{
        all: unset;
    }.msg-center-nav.lists-nav .tab-nav-theme{
        all: unset;
        display: flex;
        justify-content: space-evenly;
    }.msg-center-nav .tab-nav-theme li{
        border: none !important;
    }.msg-center-nav .tab-nav-theme li > a{
        display: block;
        text-align: center;
        font-size: 12px;
        padding: 0;
    }.msg-center-nav li > a > img{
        width: 44px;
        height: 44px;
        display: block;
        margin: auto;
        margin-bottom: 6px;
    }.msg-center-nav li > a > badge{
        right: 5px;
        top: 5px;
    }.float-btn .hover-show-con{
        max-width: 240px;
    }.link-nav-box > .zib-widget{
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        margin: 0;
    }.link-nav-box .nav > li > a:hover,
    .link-nav-box .nav > .active > a{
        background: 0;
    }}

@media (min-width: 641px){.show-sm{
        display: none !important;
    }}

@media (max-width: 640px){.modal .modal-dialog.full-sm{
        max-width: 100%;
        width: 100%;
        margin: 0;
    }.modal.bottom .modal-dialog.full-sm{
        margin-bottom: -1px;
    }.modal.bottom .modal-dialog.full-sm .modal-content{
        border-radius: 16px 16px 0 0;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }.modal.bottom.in.modal-parent{
        perspective: 1000px;
    }.modal.bottom.in.modal-parent .modal-dialog{
        transform: rotateX(11deg) scale(0.95);
        padding-bottom: 0;
    }.hide-sm{
        display: none !important;
    }.nopw-sm{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }.zib-widget .posts-item.no_margin{
        padding: 10px 0px;
    }.em09-sm{
        font-size: 0.9em;
    }.px12-sm,
    .icon-card,
    .breadcrumb{
        font-size: 12px;
    }.em12-sm{
        font-size: 1.2em;
    }.mb10-sm{
        margin-bottom: 10px;
    }.article .action{
        width: 68px;
    }#comments .list-inline{
        padding: 15px 0;
        margin: 0;
    }.comt-tips-left .but svg,
    .from-private .but svg,
    .comt-tips-left .but .fa,
    .from-private .but .fa{
        margin: 0;
    }#postcomments .comment .list-inline > li{
        padding: 0;
    }#postcomments .comment .list-inline > li + li{
        padding-left: 10px;
    }#postcomments .avatar-img{
        --this-size: 36px;
        margin-right: 10px;
    }#postcomments .commentlist > .comment > .list-inline .comment-footer{
        margin-left: 45px;
        margin-top: -15px;
    }#postcomments .children .list-inline{
        padding: 15px;
    }#postcomments .post_ajax_loader .ml20{
        margin-left: 5px;
    }#author-tab-securityset .zib-widget{
        all: unset;
    }.modal-pay-body .row-5 + .row-5{
        margin: auto;
        width: 265px;
        display: block;
    }.pay-box .but-group > .but{
        width: 50%;
    }.cashier-link,
    .initiate-pay{
        width: 100%;
    }.payvip-modal .vip-cardmini .vip-baicon.abs-center{
        font-size: 5em;
    }.dropup + .dropup .dropdown-menu{
        left: -30px;
    }.dropup + .dropup .dropdown-menu::before{
        left: 41px;
    }.dropup + .dropup + .dropup .dropdown-menu{
        left: -60px;
    }.dropup + .dropup + .dropup .dropdown-menu::before{
        left: 71px;
    }.dropup + .dropup + .dropup + .dropup .dropdown-menu{
        left: -90px;
    }.dropup + .dropup + .dropup + .dropup .dropdown-menu::before{
        left: 101px;
    }.hidden-box.flex{
        align-items: center;
        line-height: 1.4;
    }}

@media (max-width: 480px){.pay-box .but-download{
        width: auto;
    }}

.produck-wid-pay-main .fluid-widget-wrap .zib-widget{
    border-radius: var(--main-radius);
}

.widget-tilt-cases.zib-widget,
.tilt-cases-mouse-container{
    overflow: hidden;
}

.tilt-cases-actions .but{
    padding: 10px 20px;
    min-width: 200px;
    font-weight: 600;
}

.tilt-cases-actions .but > icon{
    margin-right: 10px;
}

.tilt-cases-actions .but:hover{
    transform: translateY(-2px);
}

@media (min-width: 768px){.widget-tilt-cases.zib-widget{
        padding: 30px;
    }}

@media (max-width: 767px){.tilt-cases-actions .but{
        flex: 1 1 45%;
    }.tilt-cases-showcase .showcase-main{
        max-width: 96% !important;
        left: 2% !important;
        right: 2% !important;
        margin: 0 auto;
    }}

.produck-wid-stats.layout-split .intro-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 16px;
    border-radius: 999px;
    background: linear-gradient(178deg, #ff78aa00, #ff599a3d);
    color: #ff4d80;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0px 3px 5px 0px rgba(255, 90, 130, 0.2);
    border: 1px solid #ff649054;
}

.produck-wid-stats.layout-split .intro-badge i,
.produck-wid-stats.layout-split .intro-badge .icon{
    font-size: 12px;
}

.produck-wid-stats.layout-split .intro-title{
    font-size: 28px;
    font-weight: 800;
    line-height: 1.35;
    margin: 16px 0 14px;
    color: var(--key-color, #1f2433);
}

.produck-wid-stats.layout-split .intro-title em{
    font-style: normal;
    background: linear-gradient(135deg, #ff1430 0%, #ff8aab 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    padding: 0 2px;
    font-size: 1.1em;
    letter-spacing: -0.02em;
}

.produck-wid-stats.layout-split .intro-subtitle{
    font-size: 13px;
    line-height: 1.85;
    margin: 0 0 22px;
}

.produck-wid-stats.layout-split .intro-trust-badges{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
}

@media (max-width: 1024px){.produck-wid-stats.layout-split .intro-title{
        font-size: 26px;
    }}

@media (max-width: 767px){.produck-wid-stats.layout-split .intro-badge{
        padding: 6px 14px;
        font-size: 12px;
    }.produck-wid-stats.layout-split .intro-badge i,
    .produck-wid-stats.layout-split .intro-badge .icon{
        font-size: 11px;
    }.produck-wid-stats.layout-split .intro-title{
        font-size: 22px;
        margin: 12px 0 10px;
        line-height: 1.4;
    }.produck-wid-stats.layout-split .intro-title em{
        padding: 0;
    }.produck-wid-stats.layout-split .intro-subtitle{
        font-size: 13px;
        line-height: 1.75;
        margin-bottom: 18px;
    }.produck-wid-stats.layout-split .intro-trust-badges{
        gap: 14px;
    }}

.fi-panels.imgbox-container img{
    cursor: zoom-in;
}

.widget-slider-graphic > *{
    flex: 1 1 auto;
}

.widget-slider-graphic .slider-col{
    flex-basis: var(--layout-ratio, 60%);
}

.widget-slider-graphic .cover-col{
    flex-basis: calc(100% - var(--layout-ratio, 60%));
}

.widget-slider-graphic{
    gap: 10px;
}

.widget-slider-graphic .cover-col .graphic{
    --cover-height-scale: var(--cover-ratio);
    margin: 0;
}

.widget-slider-graphic .slider-col .slide-text{
    padding: 1.1em 1.5em;
}

.widget-slider-graphic .graphic-text{
    text-align: left;
    top: auto;
    bottom: 0;
    transform: unset;
    padding: 10px 14px;
}

@media (max-width: 767px){.widget-slider-graphic.m-vertical{
        flex-direction: column;
        gap: 0;
    }.widget-slider-graphic.m-hide_cover .cover-col,
    .widget-slider-graphic.m-hide_slide .slider-col{
        display: none;
    }.widget-slider-graphic.m-hide_cover .slider-col,
    .widget-slider-graphic.m-hide_slide .cover-col{
        flex-basis: 100%;
    }.widget-slider-graphic:not(.m-default) .cover-col .graphic{
        --cover-height-scale: var(--m-cover-ratio);
    }}