@charset "UTF-8";
/*
 * emlog-bridge.css
 * emlog 结构与主题版式之间的桥接样式：
 * 分页、评论表单、文章正文、回复楼层、导航条、后台 widgets 等
 */

/* ---------- 文章列表行（threadlist） ---------- */
.threadlist .thread {
    border-bottom: 1px solid rgba(178, 186, 194, .15);
}

.threadItem {
    cursor: pointer;
    position: relative;
    border-left: 2px solid transparent;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.threadItem:hover {
    background-color: #f1f1f1;
    border-left: 2px solid #0084ff;
}

.vote_tip {
    color: #8590a6;
    font-size: 12px;
}

/* ---------- 分页（emlog pagination 输出裸 a/span） ---------- */
.pagination-wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.pagination-wrap a,
.pagination-wrap span,
.zpage a,
.zpage span {
    display: inline-block;
    padding: .3rem .7rem;
    margin: 3px;
    border-radius: 3px;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #0084ff;
    font-size: 14px;
    line-height: 1.5;
}

.pagination-wrap span,
.zpage span {
    background-color: #0084ff;
    border-color: #0084ff;
    color: #fff;
}

.pagination-wrap a:hover,
.zpage a:hover {
    background-color: #e9ecef;
    color: #0084ff;
}

.pagination-wrap em,
.zpage em {
    font-style: normal;
    color: #8590a6;
    margin: 3px;
    display: inline-block;
    padding: .3rem 0;
}

/* ---------- 正文排版：标题 / 表格 / 图片 / 列表 / 引用 / 代码 ---------- */
.message {
    word-wrap: break-word;
    font-size: 15px;
    line-height: 1.8;
    color: #2a2a2a;
}

.message p {
    margin: .6rem 0;
    line-height: 1.8;
}

.message a {
    color: #175199;
    text-decoration: underline;
    text-decoration-color: rgba(23, 81, 153, .35);
    text-underline-offset: 2px;
}

.message a:hover {
    color: #0084ff;
}

.message img,
.markdown img {
    max-width: 100%;
    height: auto !important;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin: .6rem 0;
    cursor: zoom-in;
}

.message ul,
.message ol {
    padding-left: 1.8rem;
    margin: .6rem 0;
}

.message ul li {
    list-style: disc;
}

.message ol li {
    list-style: decimal;
}

.message li {
    margin: .25rem 0;
    line-height: 1.8;
}

/* 标题：原主题带彩色竖条，这里补充间距与字号层级 */
.message h1, .message h2, .message h3,
.message h4, .message h5, .message h6 {
    margin: 1.4rem 0 .7rem;
    line-height: 1.5;
}

.message h1 { font-size: 1.5rem; }
.message h2 { font-size: 1.3rem; }
.message h3 { font-size: 1.15rem; }
.message h4, .message h5, .message h6 { font-size: 1.05rem; }

.message blockquote {
    background-color: #DFECFE;
    border-left: 5px solid #0084ff;
    border-radius: 0 4px 4px 0;
    padding: .6rem 1rem;
    margin: .8rem 0;
    color: #444;
}

.message blockquote p {
    margin: .2rem 0;
}

/* 行内代码 */
.message code {
    background: #f1f3f5;
    color: #e83e8c;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 90%;
    font-family: Consolas, Monaco, "Courier New", monospace;
}

/* 代码块（配合 highlight.js atom-one-dark） */
.message pre {
    background: #282c34;
    border-radius: 6px;
    padding: 0;
    margin: .8rem 0;
    overflow: hidden;
}

.message pre code {
    display: block;
    overflow-x: auto;
    padding: 1em;
    background: #282c34;
    color: #abb2bf;
    font-size: 13.5px;
    line-height: 1.65;
    font-family: Consolas, Monaco, "Courier New", monospace;
}

.message pre code.hljs {
    padding: 1em;
    background: #282c34;
}

/* 表格：横向滚动容器由 JS 包裹 */
.table-scroll {
    overflow-x: auto;
    margin: .8rem 0;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.message table {
    border-collapse: collapse;
    margin: 0;
    font-size: 14px;
    width: 100%;
}

.message table th,
.message table td {
    border: 1px solid #dee2e6;
    padding: .45rem .7rem;
    text-align: left;
    line-height: 1.6;
}

.message table th {
    background: #f8f9fa;
    font-weight: 600;
    white-space: nowrap;
}

.message table tr:nth-child(even) td {
    background: #fbfcfd;
}

.message hr {
    border: 0;
    border-top: 1px solid #dee2e6;
    margin: 1.2rem 0;
}

.message table img {
    margin: 0;
}

/* ---------- 图片灯箱（正文图片点击预览） ---------- */
#zlightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0, 0, 0, .78);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

#zlightbox.show {
    display: flex;
}

#zlightbox img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
    background: #fff;
}

#zlightbox .zlightbox-tip {
    position: fixed;
    bottom: 24px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
}

/* ---------- 侧栏：站点数据（重设计） ---------- */
.zstats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
}

.zstat-item {
    background: #f7f9fa;
    border-radius: 8px;
    text-align: center;
    padding: 12px 6px 10px;
    transition: background-color .2s ease;
}

.zstat-item:hover {
    background: #eaf4ff;
}

.zstat-item img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    margin-bottom: 4px;
}

.zstat-item b {
    display: block;
    font-size: 18px;
    line-height: 1.3;
    color: var(--dark);
}

.zstat-item span {
    font-size: 12px;
    color: #8590a6;
}

/* ---------- 侧栏：最新文章 / 热门文章（排行美化） ---------- */
.zrank {
    list-style: none;
    padding: 6px 10px 10px;
    margin: 0;
}

.zrank li {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 9px 8px;
    border-radius: 8px;
    transition: background-color .2s ease;
}

/* 分隔线用伪元素画，悬停时随行一起淡出，避免高亮块被线切断 */
.zrank li+li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8px;
    right: 8px;
    border-top: 1px dashed rgba(178, 186, 194, .35);
}

.zrank li:hover {
    background: #f3f8ff;
}

.zrank li:hover::before,
.zrank li:hover+li::before {
    border-color: transparent;
}

.zrank-no {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #eef1f4;
    color: #99a3ad;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 22px;
    margin-right: 10px;
    margin-top: 1px;
    font-family: Consolas, monospace;
    transition: transform .2s ease;
}

.zrank li:hover .zrank-no {
    transform: scale(1.06);
}

.zrank-no.no1 {
    background-image: linear-gradient(135deg, #ff7a59, #ff3b30);
    color: #fff;
    box-shadow: 0 2px 6px rgba(255, 59, 48, .32);
}

.zrank-no.no2 {
    background-image: linear-gradient(135deg, #ffb04d, #ff7a45);
    color: #fff;
    box-shadow: 0 2px 6px rgba(255, 122, 69, .3);
}

.zrank-no.no3 {
    background-image: linear-gradient(135deg, #ffd75e, #f7b500);
    color: #fff;
    box-shadow: 0 2px 6px rgba(247, 181, 0, .3);
}

.zrank-body {
    min-width: 0;
    flex: 1;
}

.zrank-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: var(--dark);
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    transition: color .2s ease;
}

.zrank li:hover .zrank-title,
.zrank-title:hover {
    color: #0084ff;
}

.zrank-meta {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.2;
    color: #a2aab3;
}

.zrank-meta .icon-eye {
    margin-right: 2px;
}

/* ---------- 侧栏：热门文章（封面图文列表） ---------- */
.zhot {
    list-style: none;
    padding: 8px 10px 10px;
    margin: 0;
}

.zhot-item+.zhot-item {
    margin-top: 6px;
}

.zhot-link {
    display: flex;
    align-items: stretch;
    padding: 6px;
    border-radius: 8px;
    transition: background-color .2s ease;
}

.zhot-link:hover {
    background: #f3f8ff;
}

.zhot-cover {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 54px;
    margin-right: 10px;
    border-radius: 6px;
    overflow: hidden;
    background-image: linear-gradient(135deg, #dfeaf7, #eff5fb);
    color: #b3c2d4;
    font-size: 20px;
}

.zhot-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.zhot-link:hover .zhot-cover img {
    transform: scale(1.06);
}

/* 名次角标压在封面左上角，切角与封面圆角对齐 */
.zhot-no {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 6px 0 6px 0;
    background: rgba(31, 35, 41, .55);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.zhot-no.no1 { background-color: transparent; background-image: linear-gradient(135deg, #ff7a59, #ff3b30); }
.zhot-no.no2 { background-color: transparent; background-image: linear-gradient(135deg, #ffb04d, #ff7a45); }
.zhot-no.no3 { background-color: transparent; background-image: linear-gradient(135deg, #ffd75e, #f7b500); }

.zhot-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    flex: 1;
}

.zhot-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.45;
    color: var(--dark);
    word-break: break-word;
    transition: color .2s ease;
}

.zhot-link:hover .zhot-title {
    color: #0084ff;
}

/* 侧栏最窄时（约 210px）阅读/评论数仍要排在一行 */
.zhot-meta {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    margin-top: 6px;
    font-size: 11.5px;
    color: #a2aab3;
}

.zhot-meta span+span {
    margin-left: 10px;
}

.zhot-meta .icon-eye,
.zhot-meta .icon-comment-o {
    margin-right: 3px;
}

.zhot-empty {
    padding: 18px 0;
    text-align: center;
    font-size: 13px;
    color: #a2aab3;
}

.log-topflg {
    color: #f75751;
    font-size: .875rem;
    font-style: normal;
    padding: .125rem .25rem;
    border-radius: .25rem;
    background: #ffe1c0;
    vertical-align: text-bottom;
    margin-right: .35rem;
}

.loglist-sort {
    display: inline-block;
    vertical-align: middle;
    margin-left: .4rem;
    line-height: 1;
}

.loglist-sort a {
    display: inline-block;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.4;
    color: #0084ff;
    background: #e8f3ff;
    border: 1px solid #cce3ff;
    border-radius: 10px;
    text-decoration: none;
    transition: color .2s, background .2s, border-color .2s;
}

.loglist-sort a:hover {
    color: #fff;
    background: #0084ff;
    border-color: #0084ff;
}

@media (max-width: 576px) {
    .loglist-sort {
        display: none;
    }
}

.loglist-cover img {
    width: 100%;
    height: auto;
    border-radius: 6px 6px 0 0;
}

.zcard-pad {
    padding: 1.25rem;
}

.zcard-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 .5rem;
}

.zcard-title a {
    color: var(--dark);
}

.zcard-title a:hover {
    color: #0084ff;
}

.zmeta {
    font-size: 13px;
    color: #8590a6;
}

.zmeta .iconfont,
.zmeta i {
    margin-right: .2rem;
}

.zmeta .zmeta-r {
    float: right;
}

.log-con .log-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
}

/* ---------- 评论（对应 post_list.inc.htm） ---------- */
.postlist .media-body {
    width: 1%;
}

.zpl-avatar {
    text-align: center;
    padding: 0;
    margin: 0;
    width: 40px;
    margin-right: 10px;
}

.zpl-avatar a {
    margin: 0 !important;
}

.reply-tip {
    background: #e8f3ff;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 13px;
    color: #0084ff;
}

.comment-children {
    margin-left: 50px;
}

.captcha-container img {
    height: 38px;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 3px;
}

.captcha-container input {
    height: 38px;
    vertical-align: middle;
    border: 1px solid #ced4da;
    border-radius: 3px;
    padding: 0 8px;
}

/* ---------- 导航条 ---------- */
.logo-text {
    display: inline-block;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 3.5rem;
    vertical-align: middle;
}

#nav_pc_2 {
    flex: 0 0 auto; /* body 是 bootstrap-bbs 的纵向 flex 容器，防止本条被压缩 */
    overflow-x: auto;
}

/* 桌面端用户区靠右（折叠菜单在桌面端隐藏，无法靠 mr-auto 推右） */
@media (min-width: 992px) {
    #nav .znav-user {
        margin-left: auto;
        flex-direction: row;
        align-items: center;
    }

    #nav .znav-user .nav-link {
        padding: 0.7rem 1rem;
    }

    /* 桌面端用户区下拉：以下拉框右边缘对齐头像并向下展开，避免向右溢出导致错位 */
    #nav .znav-user .header-dropdown {
        margin-top: 6px;
    }
}

#nav_pc_2 .znav-cats {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

#nav_pc_2 .znav-cats .nav-link {
    white-space: nowrap;
}

#nav_pc_2 .znav-cats img {
    width: 20px;
    padding-bottom: 3.5px;
    margin-right: 3px;
}

#nav_pc_2 .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#nav_pc_2 .znav-right {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

#nav_pc_2 .top-search {
    width: 190px;
    margin-right: 10px;
}

#nav_pc_2 .top-search .form-control {
    height: 36px;
}

#nav_pc_2 .znav-post {
    color: #ffffff;
    padding: 7px 10px;
    width: 86px;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 992px) {
    #nav_pc_2 .top-search {
        display: none;
    }
}

/* 用户下拉 */
/* 定位基准必须是 #nav（.navbar-collapse）：
   #myDropdown 与 .znav-user 是「兄弟」关系（都直接挂在 #nav 下），
   把 position:relative 加在 .znav-user 上对它毫无作用 —— absolute 的
   包含块只沿祖先链向上找，兄弟不算。之前它一路退到 <header>（.navbar
   自带 position:relative），于是 top:100% 以「整个页头高度」计算，
   下拉被推到页头下方老远，看起来就是错位。
   这里同时清掉 x_lanwan.css 里写死的 margin-top:45px。 */
#nav {
    position: relative;
}

.header-dropdown {
    margin-top: 0;
}

/* 相对 #nav 定位：紧贴其底边向下展开 */
#nav > .header-dropdown {
    top: 100%;
    left: auto;
    right: 15px;
}

/* 窄屏：折叠菜单里 #nav 为整行宽度，改为通栏下拉，
   避免 250px 固定宽在手机上被视口裁切 */
@media (max-width: 991px) {
    #nav > .header-dropdown {
        left: 0;
        right: 0;
        width: auto;
    }
}

/* 用直接子选择器限定头像：.znav-user 里还嵌套着下拉卡，
   写成后代选择器会连带命中下拉卡内的头像元素 */
.znav-user > .nav-item > .avatar-2 {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
}

/* 顶部消息铃铛：未读时在铃铛右上角显示角标 */
.znav-msg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    font-size: 1.15rem;
    line-height: 1;
}

.znav-msg:hover {
    color: #0084ff;
}

/* 角标挂在这个 <i> 内部（见 module.php），因为 absolute 的定位基准
   只会沿 DOM 祖先链向上找，不会去找兄弟节点；若把角标写成 <i> 的兄弟，
   offsetParent 会一路退到 BODY，left:100% 便以视口宽度计算而飞到别处 */
.znav-msg > i {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.znav-msg-dot {
    position: absolute;
    top: -6px;
    left: 100%;
    margin-left: -9px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #f1403c;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    font-style: normal;
    white-space: nowrap;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
}

.header-dropdown .my_option ul {
    display: block;
}

.header-dropdown .my_option ul li {
    width: 100%;
    float: none;
    padding: 0;
}

.header-dropdown .my_option ul li a {
    display: block;
    padding: 10px 15px;
    color: var(--dark);
    text-align: center;
}

.header-dropdown .my_option ul li a:hover {
    background: #f1f3f5;
    color: #0084ff;
}

/* ---------- 侧栏卡片 ---------- */
/* bootstrap-bbs 把 .aside 的左内边距清零，导致侧栏与主栏网格错位，这里恢复栅格间距 */
#body > .container > .row > .aside {
    padding-left: 15px;
}

/* 站点数据等卡片内部用了浮动 li，清除浮动防止卡片塌陷错位 */
.wzxx:after,
.wzxx ul:after,
.my_tzxx:after {
    content: '';
    display: block;
    clear: both;
}

.wzxx li {
    line-height: 2;
}

.wzxxsj {
    float: right;
}

/* ---------- 文章页侧栏：关于作者 ---------- */
/* 外层 .card 已有圆角/白底/阴影，这里只裁剪头图渐变，避免溢出圆角 */
.zauthor-card {
    overflow: hidden;
}

/* 头图：浅蓝渐变打底 + 右上角光晕，与 .blogger-hero 同一套视觉语言 */
.zauthor-hero {
    position: relative;
    overflow: hidden;
    padding: 18px 16px 4px;
    text-align: center;
    background-image: linear-gradient(165deg, #e9f3ff 0%, #f6fbff 55%, #fff 100%);
}

.zauthor-hero::after {
    content: "";
    position: absolute;
    top: -46px;
    right: -34px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-image: radial-gradient(circle at 32% 32%, rgba(0, 132, 255, .18), rgba(0, 132, 255, 0) 70%);
    pointer-events: none;
}

.zauthor-avatar {
    position: relative;
    z-index: 1;
    display: inline-block;
}

.zauthor-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 6px 16px rgba(0, 132, 255, .22);
    transition: transform .25s ease, box-shadow .25s ease;
}

.zauthor-avatar:hover img {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 132, 255, .3);
}

.zauthor-name {
    position: relative;
    z-index: 1;
    margin-top: 9px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.zauthor-name a {
    color: var(--dark);
}

.zauthor-name a:hover {
    color: #0084ff;
}

/* 身份标签：默认浅灰，管理员用高亮色区分 */
.zauthor-role {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.7;
    color: #8590a6;
    background: #eef1f5;
}

.zauthor-role.is-admin {
    color: #0084ff;
    background: #e4f1ff;
}

.zauthor-desc {
    position: relative;
    z-index: 1;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #8590a6;
}

/* 数据条：两栏等分，中间竖线分隔，去掉按钮感 */
.zauthor-stats {
    display: flex;
    align-items: center;
    padding: 12px 8px;
    margin: 0 12px;
    border-bottom: 1px solid #f0f2f5;
}

.zauthor-stat {
    flex: 1;
    text-align: center;
    padding: 2px 0;
    border-radius: 8px;
    transition: background-color .2s ease;
}

.zauthor-stat+.zauthor-stat {
    border-left: 1px solid #f0f2f5;
}

.zauthor-stat:hover {
    background: #f3f8ff;
}

.zauthor-stat b {
    display: block;
    font-size: 18px;
    line-height: 1.3;
    color: var(--dark);
}

.zauthor-stat span {
    font-size: 12px;
    color: #8590a6;
}

.zauthor-btn {
    display: block;
    margin: 12px;
    padding: 6px 0;
    border-radius: 999px;
    font-size: 13px;
    text-align: center;
    color: #fff;
    background-image: linear-gradient(150deg, #006eff, #13adff);
    box-shadow: 0 4px 12px rgba(0, 132, 255, .26);
    transition: box-shadow .25s ease, transform .25s ease;
}

.zauthor-btn:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 132, 255, .34);
}

.zauthor-btn i {
    margin-right: 4px;
}

.wzxxsj {
    float: right;
}

.card-site-info .m-3 ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-site-info .m-3 ul li a {
    color: var(--dark);
}

.card-site-info .m-3 ul li a:hover {
    color: #0084ff;
}

/* ---------- 侧栏：最新评论 / 最新微语 ---------- */
.zcomm {
    list-style: none;
    padding: 6px 10px 10px;
    margin: 0;
}

.zcomm-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 9px 8px;
    border-radius: 8px;
    transition: background-color .2s ease;
}

.zcomm-item+.zcomm-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8px;
    right: 8px;
    border-top: 1px dashed rgba(178, 186, 194, .35);
}

.zcomm-item:hover {
    background: #f3f8ff;
}

.zcomm-item:hover::before,
.zcomm-item:hover+.zcomm-item::before {
    border-color: transparent;
}

.zcomm-avatar {
    flex: 0 0 auto;
    margin-right: 9px;
}

.zcomm-avatar img {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(178, 186, 194, .35);
}

.zcomm-body {
    min-width: 0;
    flex: 1;
}

.zcomm-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.zcomm-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--dark);
}

.zcomm-name:hover {
    color: #0084ff;
}

.zcomm-time {
    flex: 0 0 auto;
    margin-left: 8px;
    font-size: 12px;
    color: #a2aab3;
}

.zcomm-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.55;
    color: #646464;
    word-break: break-word;
    transition: color .2s ease;
}

.zcomm-item:hover .zcomm-text,
.zcomm-text:hover {
    color: #0084ff;
}

.zcomm-empty {
    display: block;
    padding: 18px 0;
    text-align: center;
    font-size: 13px;
    color: #a2aab3;
}

/* ---------- 侧栏：个人资料 ---------- */
/* 由卡片自身裁切圆角，带/不带标题时角落都不会露出方块 */
.card-blogger {
    overflow: hidden;
}

.blogger-hero {
    position: relative;
    overflow: hidden;
    padding: 22px 16px 18px;
    text-align: center;
    background-image: linear-gradient(165deg, #e9f3ff 0%, #f6fbff 55%, #fff 100%);
}

/* 右上角淡蓝光晕，避免大面积纯色的单调感 */
.blogger-hero::after {
    content: "";
    position: absolute;
    top: -46px;
    right: -34px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-image: radial-gradient(circle at 32% 32%, rgba(0, 132, 255, .18), rgba(0, 132, 255, 0) 70%);
    pointer-events: none;
}

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

.blogger-avatar img {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 6px 16px rgba(0, 132, 255, .22);
    transition: transform .25s ease, box-shadow .25s ease;
}

.blogger-avatar:hover img {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 132, 255, .3);
}

.blogger-name {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--dark);
}

.blogger-desc {
    margin-top: 5px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #8590a6;
}

.blogger-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 4px 20px;
    border-radius: 999px;
    font-size: 13px;
    color: #fff;
    background-image: linear-gradient(150deg, #006eff, #13adff);
    box-shadow: 0 4px 12px rgba(0, 132, 255, .26);
    transition: box-shadow .25s ease, transform .25s ease;
}

.blogger-btn:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 132, 255, .34);
}

.tag-container .tags-side {
    display: inline-block;
    background: #f1f3f5;
    border-radius: 3px;
    padding: 1px 8px;
    margin: 0 6px 8px 0;
    color: #5890c1;
}

.tag-container .tags-side:hover {
    background: #dfefff;
    color: #0084ff;
}

/* ---------- 首页卡片列表（可选摘要模式） ---------- */
.zexcerpt {
    font-size: 14px;
    color: #646464;
    margin-top: .4rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.zcover-thumb {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    object-fit: cover;
    flex: 0 0 auto;
}

/* 列表行右侧缩略图：封面优先，无封面时用正文首图。
   作为 .media 的最后一个弹性项排在正文之后，垂直居中；
   有无摘要都成立——无摘要时行高变矮，缩略图随之居中收拢 */
.zthread-thumb {
    flex: 0 0 auto;
    align-self: center;
    display: block;
    width: 132px;
    height: 84px;
    margin-left: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: #f2f5f9;
}

.zthread-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.threadItem:hover .zthread-thumb img {
    transform: scale(1.05);
}

/* 窄屏收窄缩略图，给标题与摘要留出可读宽度 */
@media (max-width: 767px) {
    .zthread-thumb {
        width: 96px;
        height: 68px;
        margin-left: 10px;
    }
}

@media (max-width: 575px) {
    .zthread-thumb {
        width: 78px;
        height: 60px;
        margin-left: 8px;
    }
}

/* ---------- 底部 ---------- */
footer {
    width: 100%;
    padding: 19px 0;
    background: #fff;
    z-index: 100;
}

footer a:hover {
    color: #827f7f !important
}

/* 左右两栏：左侧站点说明占满剩余空间，右侧联系方式按内容宽度自适应 */
.zfooter {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

footer .left {
    flex: 1 1 auto;
    min-width: 0;
    color: #606060;
}

footer .right {
    flex: 0 0 auto;
    max-width: 300px;
    color: #606060;
}

footer .left img {
    margin-bottom: 15px;
    display: block;
}

footer .left p {
    line-height: 26px;
    font-size: 14px !important;
    margin-bottom: 8px;
}

footer .left ul {
    border-top: 1px solid #c1bfbf;
    padding-top: 8px;
    width: 100%;
}

footer .left ul li {
    float: left;
    margin-right: 21px
}

footer .left ul li a {
    display: block;
    color: #606060;
    font-size: 14px;
    height: 32px;
    line-height: 32px
}

/* 底部链接行浮动后需清浮动，否则会溢出撑破页脚 */
footer .left ul::after {
    content: '';
    display: block;
    clear: both;
}

/* 右栏：联系方式 */
.zfooter-title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: #303030;
}

.zfooter-contacts {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}

.zfooter-contacts li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    font-size: 13px;
    line-height: 1.5;
}

.zfooter-contacts li i {
    flex: 0 0 auto;
    font-size: 14px;
    color: #0084ff;
}

.zfooter-contacts li a,
.zfooter-contacts li span {
    min-width: 0;
    color: #606060;
    word-break: break-all;
}

.zfooter-contacts li a:hover {
    color: #0084ff !important;
}

/* 版权投诉按钮：与「联系我们」列表区分开，用红色弱底强调 */
.zfooter-takedown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 6px;
    background: rgba(214, 6, 76, .08);
    color: #d6064c;
    font-size: 13px;
}

.zfooter-takedown:hover {
    background: rgba(214, 6, 76, .14);
    color: #d6064c !important;
}

@media(max-width:768px) {
    .zfooter {
        flex-direction: column;
        gap: 20px;
    }

    footer .right {
        max-width: none;
        width: 100%;
    }
}

@media(max-width:576px) {
    footer .left ul {
        width: 100%;
    }

    footer .left img {
        display: none !important;
    }

    footer {
        text-align: center;
        padding-bottom: 40px;
        padding-top: 5px;
    }

    /* 居中时图标与文字并排会左偏，改为两端对齐的窄条居中 */
    .zfooter-contacts li {
        justify-content: center;
    }
}

/* ---------- 返回顶部 ---------- */
.side-toolbar {
    position: fixed;
    right: 16px;
    bottom: 40px;
    z-index: 1080;
}

.side-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px rgba(26, 26, 26, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8590a6;
    cursor: pointer;
}

.side-btn:hover {
    color: #0084ff;
}

/* ---------- 弹窗 ---------- */
.modal-content {
    border: none;
}

.modal-header {
    border-bottom: none;
}

.modal-footer {
    border-top: none;
}

#zauth-alert.alert-danger,
#zauth-alert.alert-success {
    display: block !important;
}

/* ---------- 邻近文章 / 标签 ---------- */
.neighbor-log {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 1rem 0;
}

.neighbor-link {
    display: block;
    color: var(--dark);
    max-width: 45%;
}

.neighbor-link:hover {
    color: #0084ff;
}

.neighbor-dir {
    font-size: 12px;
    color: #8590a6;
    display: block;
}

.neighbor-title {
    font-size: 14px;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tags {
    display: inline-block;
    background: #f1f3f5;
    border-radius: 3px;
    padding: 1px 8px;
    margin-right: 6px;
    font-size: 13px;
    color: #5890c1;
}

/* ---------- 列表页信息头（搜索 / 分类 / 标签 / 作者 / 归档） ---------- */
.card-listhint {
    margin-bottom: 1rem;
}

.card-listhint>.card-body {
    display: flex;
    align-items: center;
    padding: 16px 18px;
}

.zhint-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: 14px;
    border-radius: 50%;
    font-size: 18px;
    color: #0084ff;
    background-image: linear-gradient(150deg, #e6f2ff, #f6fbff);
}

.zhint-avatar {
    overflow: hidden;
    background-image: none;
}

.zhint-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zhint-body {
    min-width: 0;
    flex: 1;
}

.zhint-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--dark);
    word-break: break-word;
}

.zhint-title em {
    font-style: normal;
    color: #0084ff;
}

.zhint-desc {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.6;
    color: #646464;
}

.zhint-meta {
    margin-top: 4px;
    font-size: 13px;
    color: #8590a6;
}

.zhint-meta b {
    color: #0084ff;
}

.zhint-action {
    flex: 0 0 auto;
    margin-left: 14px;
    padding: 5px 14px;
    border-radius: 999px;
    background: #f1f3f5;
    color: #646464;
    font-size: 13px;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}

.zhint-action:hover {
    background: #e8f3ff;
    color: #0084ff;
}

@media (max-width: 576px) {
    .zhint-icon {
        width: 38px;
        height: 38px;
        margin-right: 11px;
        font-size: 16px;
    }

    .zhint-action {
        display: none;
    }
}

/* ---------- 首页快捷入口 + 公告栏 ---------- */
.card-quicknav {
    margin-bottom: 1rem;
    overflow: hidden;
}

/* 上排：左侧竖排小标签 + 右侧图标按钮 */
.zquick {
    display: flex;
    align-items: stretch;
    padding: 14px 16px;
}

.zquick-label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    letter-spacing: 2px;
    padding: 6px 3px;
    margin-right: 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #ff6b81;
    background: #fff5f6;
}

.zquick-list {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 10px 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.zquick-item {
    min-width: 0;
}

.zquick-item>a,
.zquick-item>span {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 6px;
    border-radius: 8px;
    color: #646464;
    transition: background-color .2s ease, color .2s ease;
}

.zquick-item>a:hover {
    background: #f1f8ff;
    color: #0084ff;
}

.zquick-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 20px;
    color: #0084ff;
    background-image: linear-gradient(150deg, #e6f2ff, #f6fbff);
    transition: transform .2s ease;
}

/* 图片图标：与 .zquick-icon 同尺寸，圆角与底色保持一致 */
.zquick-img {
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    object-fit: cover;
    background: #f6fbff;
    transition: transform .2s ease;
}

.zquick-item>a:hover .zquick-img {
    transform: translateY(-2px);
}

.zquick-item>a:hover .zquick-icon {
    transform: translateY(-2px);
}

.zquick-item em {
    margin-top: 6px;
    font-size: 12px;
    font-style: normal;
    line-height: 1.4;
    white-space: nowrap;
}

/* 下排：公告栏 */
.znotice {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px dashed #eceff3;
}

.znotice-label {
    flex: 0 0 auto;
    padding: 2px 8px;
    margin-right: 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #ff6b81;
    background: #fff5f6;
}

.znotice-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.znotice-text {
    display: inline-block;
    font-size: 13px;
    color: #646464;
    white-space: nowrap;
    animation: znotice-scroll 18s linear infinite;
}

a.znotice-text:hover {
    color: #0084ff;
}

/* 悬停暂停，方便阅读和点击 */
.znotice-body:hover .znotice-text {
    animation-play-state: paused;
}

/* 内容不长时不滚动：由 JS 判断是否溢出后再决定是否加动画 */
.znotice-text.znotice-static {
    animation: none;
    white-space: normal;
}

@keyframes znotice-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 576px) {
    .zquick {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
    }

    /* 窄屏改为顶部横排标签：竖排文字在列表换行后会被 stretch 拉成细长色块 */
    .zquick-label {
        align-self: flex-start;
        writing-mode: horizontal-tb;
        letter-spacing: 1px;
        margin: 0 0 12px;
        padding: 3px 10px;
        font-size: 12px;
    }

    /* 等宽网格：每行 4 个，图标纵向对齐，超出自动换行 */
    .zquick-list {
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px 4px;
    }

    .zquick-item>a,
    .zquick-item>span {
        padding: 4px 2px;
    }

    .zquick-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .zquick-img {
        width: 40px;
        height: 40px;
    }

    /* 名称统一占满列宽并居中，过长时省略号截断，避免撑破单元格 */
    .zquick-item em {
        width: 100%;
        font-size: 11px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 与 .zquick 左右内边距对齐，避免上下两排起始位置错位 */
    .znotice {
        padding: 10px 12px;
    }

    .znotice-text {
        font-size: 12px;
    }
}

/* ---------- 前台用户中心 ---------- */
/* 布局：内容区满宽，导航条位于内容上方（不再占用左侧一列宽度） */
.zuc-page {
    max-width: 100%;
}

/* 去掉主体区顶部留白
   bootstrap-bbs.css 给 #body 加了 padding-top（大屏 1rem / 小屏 .5rem），
   首页首屏是卡片，这点间距看不出问题；而用户中心首屏本身就是一条白色导航条，
   于是二级导航与它之间会出现一段"凭空多出来的白"。
   这里仅对用户中心去掉，其它页面维持原样。 */
.zuc-body > #body {
    padding-top: 0;
}

/* 顶部横向导航：与首页列表筛选标签风格一致
   用户中心去掉了 #body 的顶部留白，这里自己补回上边距，
   否则导航条会紧贴二级导航；四周恢复圆角 */
.zuc-topnav {
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 6px 10px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(18, 18, 18, .06);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.zuc-topnav-list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.zuc-topnav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 14px;
    color: #646464;
    transition: color .15s ease, background-color .15s ease;
}

.zuc-topnav-link i {
    font-size: 14px;
    color: #99a5b5;
}

.zuc-topnav-link:hover {
    color: #0084ff;
    background: #f4f9ff;
}

.zuc-topnav-link:hover i {
    color: #0084ff;
}

.zuc-topnav-link.active {
    color: #fff;
    background: #0084ff;
}

.zuc-topnav-link.active i {
    color: #fff;
}

/* 未读数角标在选中态下反色，保证可读 */
.zuc-topnav-link.active .zuc-nav-dot {
    color: #0084ff;
    background: #fff;
}

/* 通用胶囊按钮，用于用户中心所有主/次操作 */
.zbtn-pill {
    border-radius: 999px;
    padding: 5px 18px;
    font-size: 14px;
}

.zbtn-pill.btn-block {
    padding: 9px 18px;
}

/* 左侧导航卡：整体收窄，因此内边距与字号同步压缩，避免换行 */
.zuc-nav {
    position: sticky;
    top: 15px;
    overflow: hidden;
}

.zuc-nav-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid #f2f4f6;
}

.zuc-nav-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.zuc-nav-info {
    min-width: 0;
}

.zuc-nav-nick {
    font-size: 14px;
    font-weight: 700;
    color: var(--dark);
    /* 窄卡片里昵称过长时省略，避免撑破布局 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zuc-nav-role {
    margin-top: 2px;
    font-size: 12px;
    color: #8590a6;
}

.zuc-nav-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.zuc-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 14px;
    color: #4a4a4a;
    transition: background-color .15s ease, color .15s ease;
}

.zuc-nav-link i {
    width: 16px;
    text-align: center;
    color: #99a5b5;
    transition: color .15s ease;
}

.zuc-nav-link:hover {
    background: #f6f9fc;
    color: #0084ff;
}

.zuc-nav-link:hover i {
    color: #0084ff;
}

/* 选中项：左侧蓝色竖条 + 浅蓝底 */
.zuc-nav-link.active {
    background: #ecf5ff;
    color: #0084ff;
    font-weight: 600;
}

.zuc-nav-link.active i {
    color: #0084ff;
}

.zuc-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: #0084ff;
}

/* 概览页头卡：头像 + 昵称简介 + 操作按钮 */
.zuc-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    margin-bottom: 12px;
}

.zuc-hero-avatar {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
}

.zuc-hero-info {
    flex: 1;
    min-width: 0;
}

.zuc-hero-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark);
    word-break: break-word;
}

.zuc-hero-desc {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.6;
    color: #646464;
    word-break: break-word;
}

/* 操作按钮：宽屏并排一行，窄屏由下方媒体查询放开换行 */
.zuc-hero-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

.zuc-hero-actions .btn {
    white-space: nowrap;
}

.zuc-muted {
    color: #b4bcc8;
}

/* 概览页四个统计块 */
.zuc-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.zuc-stat {
    display: block;
    padding: 16px 10px;
    text-align: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(18, 18, 18, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}

a.zuc-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 132, 255, .14);
}

.zuc-stat b {
    display: block;
    font-size: 1.45rem;
    line-height: 1.2;
    color: #0084ff;
}

.zuc-stat span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #8590a6;
}

.zuc-stat-static b {
    color: var(--dark);
}

/* 内容面板（最近文章 / 草稿 / 列表页共用） */
.zuc-panel {
    margin-bottom: 12px;
    overflow: hidden;
}

.zuc-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 18px;
    border-bottom: 1px solid #f2f4f6;
}

.zuc-panel-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--dark);
}

.zuc-panel-title i {
    color: #0084ff;
}

.zuc-panel-more {
    flex: 0 0 auto;
    font-size: 13px;
    color: #8590a6;
}

.zuc-panel-more:hover {
    color: #0084ff;
}

.zuc-panel-body {
    padding: 4px 18px;
}

.zuc-loading,
.zuc-empty {
    padding: 34px 0;
    text-align: center;
    font-size: 14px;
    color: #8590a6;
}

.zuc-empty i {
    display: block;
    margin-bottom: 8px;
    font-size: 30px;
    color: #d7dde5;
}

.zuc-empty p {
    margin-bottom: 10px;
}

/* 列表行 */
.zuc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zuc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #f2f4f6;
}

.zuc-item:last-child {
    border-bottom: 0;
}

.zuc-item-main {
    flex: 1;
    min-width: 0;
}

.zuc-item-title {
    display: inline-block;
    max-width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: var(--dark);
    vertical-align: middle;
    word-break: break-all;
}

a.zuc-item-title:hover {
    color: #0084ff;
}

.zuc-item-plain {
    cursor: default;
}

.zuc-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
    font-size: 12px;
    color: #8590a6;
}

.zuc-item-ops {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
}

/* 状态标签：已发布 / 待审核 / 草稿 */
.zst {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 400;
    vertical-align: middle;
}

.zst-publish {
    color: #16a34a;
    background: #eaf9f0;
}

.zst-pending {
    color: #d97706;
    background: #fff6e6;
}

.zst-draft {
    color: #8590a6;
    background: #f0f2f5;
}

/* 分页条 */
.zuc-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 6px 0 18px;
}

.zuc-pager-info {
    font-size: 13px;
    color: #8590a6;
}

/* 表单与提示 */
.zuc-form {
    max-width: 620px;
}

.zuc-label {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #4a4a4a;
}

.zuc-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #99a5b5;
}

.zuc-msg {
    margin-bottom: 12px;
}

.zuc-tip {
    margin-bottom: 12px;
}

/* 资料页头像 + 统计 */
.zuc-profile-head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f2f4f6;
}

.zuc-profile-avatar {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
}

/* 可点击更换的头像：整块作为按钮，悬停时盖一层相机蒙版提示可操作 */
.zuc-avatar-edit {
    position: relative;
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    cursor: pointer;
}

.zuc-avatar-edit .zuc-profile-avatar {
    display: block;
    width: 100%;
    height: 100%;
    transition: opacity .2s ease;
}

/* 文件输入框：视觉隐藏但保留在渲染树中。
   不能用 display:none / hidden —— 那样浏览器会忽略程序化 click()，
   点头像就没有反应。这里用 1px + opacity:0 的方式隐藏。 */
.zuc-avatar-file {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.zuc-avatar-mask {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 20px;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.zuc-avatar-edit:hover .zuc-avatar-mask,
.zuc-avatar-edit:focus-within .zuc-avatar-mask {
    opacity: 1;
}

.zuc-avatar-edit:hover .zuc-profile-avatar {
    box-shadow: 0 3px 14px rgba(0, 132, 255, .35);
}

/* 触屏没有 hover，常显一个弱化的小角标，否则用户不知道能点 */
@media (hover: none) {
    .zuc-avatar-mask {
        top: auto;
        bottom: 0;
        left: auto;
        right: 0;
        width: 26px;
        height: 26px;
        font-size: 12px;
        opacity: 1;
        background: #0084ff;
        border: 2px solid #fff;
    }
}

.zuc-avatar-hint {
    margin: -8px 0 18px;
    line-height: 1.6;
}

.zuc-profile-stat {
    display: flex;
    gap: 28px;
}

.zuc-profile-stat b {
    display: block;
    font-size: 1.3rem;
    color: #0084ff;
}

.zuc-profile-stat span {
    font-size: 12px;
    color: #8590a6;
}

.zuc-profile-more {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 13px;
    color: #8590a6;
}

.zuc-profile-more:hover {
    color: #0084ff;
}

.zuc-req {
    color: #e4574f;
}

.zuc-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* 未登录 / 功能未开启提示块 */
.zuc-guest-body {
    padding: 56px 24px;
    text-align: center;
}

.zuc-guest-icon {
    display: block;
    margin-bottom: 14px;
    font-size: 46px;
    color: #cfd8e3;
}

.zuc-guest-title {
    margin-bottom: 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--dark);
}

.zuc-guest-text {
    margin-bottom: 20px;
    font-size: 14px;
    color: #8590a6;
}

.zuc-guest-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .zuc-hero {
        flex-wrap: wrap;
        padding: 16px 18px;
    }

    .zuc-hero-avatar {
        width: 58px;
        height: 58px;
    }

    /* 窄屏放开换行：按钮保持自身宽度，一行放不下时自动折到下一行 */
    .zuc-hero-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .zuc-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .zuc-panel-head,
    .zuc-panel-body {
        padding-left: 14px;
        padding-right: 14px;
    }

    .zuc-item {
        flex-wrap: wrap;
    }

    .zuc-item-ops {
        width: 100%;
        justify-content: flex-end;
    }

    .zuc-profile-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .zuc-guest-body {
        padding: 40px 18px;
    }
}

/* ---------- 前台发文页 ---------- */

/* 游客投稿：没有左侧用户中心导航，页面顶部给一个说明条替代。
   .zuc-body > #body 把主体区顶部留白清成了 0（用户中心首屏本就是导航条，
   不需要额外间距），而游客页首屏是这张说明卡，贴着页头会显得局促，
   所以这里自己补回一段上边距。 */
.zwrite-guest-head {
    margin-top: 16px;
    margin-bottom: 14px;
    padding: 16px 18px;
    border-radius: 8px;
    background: linear-gradient(135deg, #eef6ff, #f7fbff);
    border: 1px solid #dceafb;
}

.zwrite-guest-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #1f4977;
}

.zwrite-guest-title i {
    margin-right: 6px;
    color: #0084ff;
}

.zwrite-guest-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #5b6b7f;
}

.zwrite-guest-desc a {
    color: #0084ff;
    text-decoration: none;
}

.zwrite-guest-desc a:hover {
    text-decoration: underline;
}

/* 验证码输入组：图片高度与输入框对齐，去掉右侧默认内边距造成的错位 */
.zwrite-form-guest .input-group-append img {
    display: block;
    border-radius: 0 4px 4px 0;
}

.zwrite-form-guest #zwrite-imgcode {
    letter-spacing: 2px;
    text-transform: uppercase;
}

.zwrite-main,
.zwrite-side {
    padding-left: 15px;
    padding-right: 15px;
}

/* 容器已恢复默认宽度，这里用 8:4 的常规比例：
   编辑区足够宽，右侧参数栏也不会被挤得过窄 */
@media (min-width: 992px) {
    .zwrite-grid {
        margin-left: -10px;
        margin-right: -10px;
    }

    .zwrite-grid > .zwrite-main {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .zwrite-grid > .zwrite-side {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/* 侧栏控件的聚焦态由下方 .zwrite-side-body 规则接管，
   这里排除掉它们，避免低优先级的选择器被覆盖 */
.zwrite .form-control:not(.zwrite-title):not(.zwrite-content):focus {
    border-color: #cce3ff;
    box-shadow: 0 0 0 .15rem rgba(0, 132, 255, .12);
}

.zwrite-main .zuc-panel-body {
    padding: 18px;
}

/* 标题输入框：
   卡片本身是白底，原先 border:0 + 透明背景让输入区完全“隐形”，
   这里改为浅灰底 + 左侧色条，既能看出可输入区域，又不抢正文的视觉重量 */
.zwrite-title {
    height: auto;
    padding: 12px 14px;
    border: 0;
    border-left: 3px solid #d8e6fb;
    border-radius: 6px;
    font-size: 19px;
    font-weight: 700;
    color: var(--dark);
    background: #f7f9fc;
    box-shadow: none;
    transition: background-color .2s ease, border-color .2s ease;
}

.zwrite-title::placeholder {
    font-weight: 400;
    color: #a8b3c2;
}

.zwrite-title:hover {
    background: #f2f6fc;
}

.zwrite-title:focus {
    border-color: #0084ff;
    background: #fff;
    box-shadow: 0 0 0 .15rem rgba(0, 132, 255, .1);
}

/* 标题下方的 adm_writelog_bar 插件挂载区
   与后台「写文章」位置一致：仅文字链接，点击展开或弹窗。
   钩子无输出时该元素不会被渲染 */
.zwrite-bar {
    margin: 8px 0 2px;
    font-size: 13px;
    line-height: 1.8;
    color: #8590a6;
}

.zwrite-bar a {
    display: inline-block;
    margin-right: 14px;
    color: #0084ff;
    text-decoration: none;
}

.zwrite-bar a:hover {
    color: #0068cc;
    text-decoration: underline;
}

.zwrite-bar i,
.zwrite-bar [class^="icon-"],
.zwrite-bar [class*=" icon-"] {
    margin-right: 3px;
    font-size: 13px;
    vertical-align: -1px;
}

/* 插件若输出块级内容（模态窗、面板等），不受行内链接的右间距影响 */
.zwrite-bar > div,
.zwrite-bar > form {
    margin-right: 0;
}

.zwrite-content {
    padding: 12px 0;
    border: 0;
    border-radius: 0;
    line-height: 1.85;
    resize: vertical;
    font-family: inherit;
    font-size: 15px;
}

.zwrite-content:focus {
    border-color: transparent;
    box-shadow: none;
}

.zwrite-counter {
    padding-top: 8px;
    text-align: right;
    font-size: 12px;
    color: #99a5b5;
}

/* 右侧参数栏：紧随主编辑区，窄屏堆叠时保持间距 */
.zwrite-side .zuc-panel-body {
    padding: 16px 18px;
}

/* 侧栏表单：统一控件高度与留白，让各项间距节奏一致 */
.zwrite-side-body .form-group {
    margin-bottom: 18px;
}

.zwrite-side-body .zuc-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #4a4a4a;
}

/* “选填”小标签，弱化非必填项 */
.zuc-optional {
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7;
    color: #99a5b5;
    background: #f2f4f7;
}

.zwrite-side-body .form-control {
    height: calc(2.4rem + 2px);
    font-size: 14px;
    border-color: #e2e8f0;
    border-radius: 6px;
}

.zwrite-side-body textarea.form-control {
    height: auto;
    line-height: 1.7;
    resize: vertical;
}

.zwrite-side-body .form-control:focus,
.zwrite-side-body select.form-control:focus,
.zwrite-side-body textarea.form-control:focus {
    border-color: #0084ff;
    box-shadow: 0 0 0 .15rem rgba(0, 132, 255, .1);
}

/* 话题输入框容器：补上边框，与其它控件视觉统一 */
.zwrite-side-body .ztag {
    min-height: calc(2.4rem + 2px);
    padding: 4px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.zwrite-side-body .ztag:focus-within {
    border-color: #0084ff;
    box-shadow: 0 0 0 .15rem rgba(0, 132, 255, .1);
}

.zwrite-side-body .zuc-hint {
    margin-top: 6px;
    line-height: 1.6;
}

.zwrite-side .form-group:last-of-type {
    margin-bottom: 8px;
}

/* ---------- 主题自绘开关（zswitch） ----------
   本主题内置的 bootstrap.css 是 4.0 版，没有 4.1 才加入的 .custom-switch，
   直接套用只会得到一个看不出状态的灰方块。这里自己实现一个：
   原生 checkbox 隐藏但保留键盘可达性，滑块与轨道用伪元素/内联元素绘制。 */
.zswitch {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 0;
    cursor: pointer;
    user-select: none;
}

/* 隐藏原生控件但不禁用：仍可用 Tab 聚焦、空格切换，只是不显示默认外观 */
.zswitch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.zswitch-track {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 22px;
    margin-right: 10px;
    border-radius: 999px;
    background: #ccd4de;
    transition: background-color .2s ease;
}

.zswitch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
    transition: transform .2s ease;
}

/* 选中态：轨道变主色、滑块右移，状态一眼可辨 */
.zswitch input:checked ~ .zswitch-track {
    background: #0084ff;
}

.zswitch input:checked ~ .zswitch-track .zswitch-knob {
    transform: translateX(18px);
}

/* 键盘聚焦时给轨道加焦点环（原生控件已隐藏，焦点环画在这里） */
.zswitch input:focus ~ .zswitch-track {
    box-shadow: 0 0 0 .15rem rgba(0, 132, 255, .25);
}

.zswitch input:checked:focus ~ .zswitch-track {
    box-shadow: 0 0 0 .15rem rgba(0, 132, 255, .35);
}

.zswitch-text {
    font-size: 14px;
    color: #4a5568;
    line-height: 1.4;
}

.zswitch:hover .zswitch-track {
    background: #bcc6d2;
}

.zswitch:hover input:checked ~ .zswitch-track {
    background: #0072e0;
}

/* 悬停态只用于鼠标，避免触屏上残留 */
@media (hover: none) {
    .zswitch:hover .zswitch-track {
        background: #ccd4de;
    }

    .zswitch:hover input:checked ~ .zswitch-track {
        background: #0084ff;
    }
}

/* 参数栏里的一行设置：与上方字段用细分隔线隔开 */
.zwrite-switch {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid #f2f4f6;
}

/* 参数栏整体吸顶：正文很长时，分类/封面等设置项仍可随时调整。
   top 值留出固定页头的高度，避免被页头遮挡 */
@media (min-width: 992px) {
    .zwrite-side {
        position: sticky;
        top: 15px;
        align-self: flex-start;
    }
}

/* 发布区：跟在参数栏下方，窄屏单列时自动恢复常规流 */
.zwrite-submit {
    position: static;
}

.zwrite-submit .zuc-panel-body {
    padding: 16px 18px;
}

.zwrite-submit .btn {
    margin-bottom: 8px;
}

.zwrite-submit .btn:last-child {
    margin-bottom: 0;
}

/* 主按钮强调：与主题按钮渐变保持一致 */
.zwrite-submit .btn-primary {
    border: 0;
    background-image: linear-gradient(150deg, #006eff, #13adff);
    box-shadow: 0 4px 12px rgba(0, 132, 255, .26);
    transition: box-shadow .25s ease, transform .25s ease;
}

.zwrite-submit .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 132, 255, .34);
}

.zwrite-audit {
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: #d97706;
    background: #fff6e6;
}

.zwrite-cancel {
    color: #8590a6;
    font-size: 13px;
}

.zwrite-cancel:hover {
    color: #0084ff;
}

@media (max-width: 991px) {
    .zwrite-side {
        margin-top: 12px;
    }
}

/* ---------- 话题输入（标签改造） ---------- */
.ztag {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 4px 6px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background: #fff;
    cursor: text;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ztag:focus-within {
    border-color: #cce3ff;
    box-shadow: 0 0 0 .15rem rgba(0, 132, 255, .12);
}

.ztag-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px 2px 10px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.6;
    color: #0084ff;
    background: #e8f3ff;
}

.ztag-del {
    padding: 0 4px;
    border: 0;
    background: transparent;
    font-size: 15px;
    line-height: 1;
    color: #7cb3e8;
    cursor: pointer;
}

.ztag-del:hover {
    color: #e4574f;
}

.ztag-input-wrap {
    flex: 1;
    min-width: 90px;
}

.ztag-input {
    width: 100%;
    height: 26px;
    border: 0;
    outline: none;
    font-size: 14px;
    background: transparent;
}

/* 联想下拉 */
.ztag-suggest {
    margin-top: 6px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #eceff3;
    border-radius: .25rem;
    background: #fff;
    box-shadow: 0 6px 16px rgba(18, 18, 18, .08);
}

.ztag-sug-item {
    display: block;
    padding: 7px 12px;
    font-size: 13px;
    color: #4a4a4a;
}

.ztag-sug-item:hover {
    color: #0084ff;
    background: #f1f8ff;
}

/* ---------- 封面图上传 ---------- */
.zcover {
    display: flex;
    align-items: center;
}

.zcover-preview {
    position: relative;
    width: 100%;
}

.zcover-preview img {
    display: block;
    width: 100%;
    max-height: 150px;
    border-radius: 6px;
    object-fit: cover;
    background: #f5f7fa;
}

.zcover-del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 16px;
    line-height: 22px;
    color: #fff;
    background: rgba(0, 0, 0, .45);
    cursor: pointer;
}

.zcover-del:hover {
    background: #e4574f;
}

.zcover-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 92px;
    border: 1px dashed #cfd8e3;
    border-radius: 6px;
    font-size: 13px;
    color: #8590a6;
    background: #fafbfc;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.zcover-pick:hover {
    border-color: #0084ff;
    color: #0084ff;
}

.zcover-pick i {
    font-size: 22px;
}

/* ---------- 编辑模式提示条 ---------- */
.zwrite-heading {
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    color: #0084ff;
    background: #e8f3ff;
}

.zwrite-heading i {
    margin-right: 4px;
}

/* ---------- TinyMCE 容器与页面风格对齐 ---------- */
.zwrite-main .tox-tinymce {
    border: 1px solid #eceff3;
    border-radius: 6px;
}

.zwrite-main .tox .tox-promotion,
.zwrite-main .tox-statusbar__branding {
    display: none;
}

.zwrite-main .tox .tox-toolbar__primary {
    background: #fbfcfd;
}

/* 页头容器修复两端对齐：
   x_lanwan.css 把 .navbar>.container 的右内边距清成 0，左内边距仍是 15px，
   左右不等宽会让页头内容与主体内容错开，这里补回对称内边距 */
#header > .container {
    padding-left: 15px;
    padding-right: 15px;
}

/* ---------- 文章详情：点赞 / 点踩 / 收藏 ---------- */
.zvote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.zvote-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid #e4e8ed;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1.2;
    color: #646464;
    background: #fff;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.zvote-btn i {
    font-size: 15px;
}

/* 悬停：淡蓝描边 */
.zvote-btn:hover {
    color: #0084ff;
    border-color: #b8dbff;
    background: #f6fbff;
}

/* 已赞同：蓝底白字 */
.zvote-btn.active {
    color: #fff;
    border-color: #0084ff;
    background: #0084ff;
}

.zvote-btn.active:hover {
    color: #fff;
    border-color: #0072e0;
    background: #0072e0;
}

/* 已反对：用中性灰而非红色，避免把「踩」渲染成负面情绪 */
.zvote-btn.zvote-down.active {
    border-color: #7a8797;
    background: #7a8797;
}

.zvote-btn.zvote-down.active:hover {
    border-color: #68747f;
    background: #68747f;
}

.zvote-btn[disabled] {
    opacity: .65;
    cursor: default;
}

/* 计数用等宽数字，加减时不会左右跳动 */
.zvote-num {
    font-variant-numeric: tabular-nums;
    min-width: 12px;
    text-align: center;
}

@media (max-width: 576px) {
    .zvote {
        gap: 8px;
    }

    .zvote-btn {
        padding: 6px 12px;
        font-size: 13px;
    }

    .zvote-btn i {
        font-size: 14px;
    }
}

/* ---------- 未读消息角标 ---------- */
.zuc-nav-dot,
.zud-dot {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: #f1403c;
    vertical-align: middle;
}

/* 侧栏/头部菜单里的角标不做左外边距（紧跟文字） */
.zud-dot {
    margin-left: 4px;
}

/* ---------- 消息中心 ---------- */
.zmsg-badge {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: #f1403c;
}

.zmsg-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.zmsg-tab {
    font-size: 13px;
    color: #8590a6;
}

.zmsg-tab.active {
    color: #0084ff;
    font-weight: 600;
}

.zmsg-readall {
    padding: 0;
    border: 0;
    font-size: 13px;
    color: #8590a6;
    background: transparent;
    cursor: pointer;
}

.zmsg-readall:hover {
    color: #0084ff;
}

.zmsg-readall[disabled] {
    opacity: .6;
    cursor: default;
}

.zmsg-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zmsg-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #f2f4f6;
}

.zmsg-item:last-child {
    border-bottom: 0;
}

/* 未读：左侧蓝条 + 淡蓝底，标题加粗 */
.zmsg-item.is-unread {
    border-left: 3px solid #0084ff;
    margin-left: -18px;
    padding-left: 15px;
    background: #f6fbff;
}

/* 已读：整体转为灰度，视觉上"退到后面" */
.zmsg-item.is-read {
    color: #99a5b5;
}

.zmsg-item.is-read .zmsg-title a,
.zmsg-item.is-read .zmsg-title {
    color: #99a5b5;
    font-weight: 400;
}

.zmsg-item.is-read .zmsg-icon {
    color: #c3ccd8;
    background: #f4f6f8;
}

.zmsg-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 14px;
    color: #0084ff;
    background: #e8f3ff;
}

.zmsg-body {
    flex: 1;
    min-width: 0;
}

.zmsg-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    word-break: break-word;
}

.zmsg-title a:hover {
    color: #0084ff;
}

.zmsg-type {
    display: inline-block;
    margin-left: 8px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 400;
    color: #8590a6;
    background: #f0f2f5;
}

.zmsg-content {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.6;
    color: #646464;
    word-break: break-word;
}

.zmsg-time {
    margin-top: 6px;
    font-size: 12px;
    color: #b4bcc8;
}

.zmsg-del {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 15px;
    line-height: 20px;
    color: #c3ccd8;
    background: transparent;
    cursor: pointer;
}

.zmsg-del:hover {
    color: #fff;
    background: #f1403c;
}

@media (max-width: 576px) {
    .zmsg-item {
        padding: 12px 0;
    }

    .zmsg-item.is-unread {
        margin-left: -14px;
        padding-left: 11px;
    }
}

/* ---------- 签到页 ---------- */
.zsign-hero {
    padding: 22px;
}

.zsign-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.zsign-days {
    text-align: center;
}

.zsign-days b {
    display: block;
    font-size: 3rem;
    line-height: 1;
    color: #0084ff;
}

.zsign-days span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #8590a6;
}

.zsign-side {
    flex: 1;
    min-width: 180px;
    max-width: 280px;
}

.zsign-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: #8590a6;
    border-bottom: 1px dashed #f0f2f5;
}

.zsign-row:last-child {
    border-bottom: 0;
}

.zsign-row b {
    color: var(--dark);
}

.zsign-action {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #f2f4f6;
}

.zsign-hint {
    margin: 10px 0 0;
    text-align: center;
    font-size: 13px;
    color: #8590a6;
}

/* 最近签到 / 签到榜 列表 */
.zsign-recent,
.zsign-rank {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zsign-recent li,
.zsign-rank li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f6f8fa;
}

.zsign-recent li:last-child,
.zsign-rank li:last-child {
    border-bottom: 0;
}

.zsign-recent img,
.zsign-rank img {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.zsign-recent-info,
.zsign-rank-info {
    flex: 1;
    min-width: 0;
}

.zsign-recent-info a,
.zsign-rank-info a {
    display: block;
    font-size: 13px;
    color: var(--dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zsign-recent-info a:hover,
.zsign-rank-info a:hover {
    color: #0084ff;
}

.zsign-recent-info span,
.zsign-rank-info span {
    font-size: 12px;
    color: #99a5b5;
}

.zsign-recent-time,
.zsign-rank-days {
    flex: 0 0 auto;
    font-size: 12px;
    color: #8590a6;
}

.zsign-rank-no {
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #b4bcc8;
}

.zsign-rank-no.top1 {
    color: #f0a020;
}

.zsign-rank-no.top2 {
    color: #9aa5b1;
}

.zsign-rank-no.top3 {
    color: #cd7f32;
}

/* ---------- 侧栏签到卡 ---------- */
.zside-sign {
    margin-bottom: 1rem;
    overflow: hidden;
}

.zside-sign-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 10px;
}

.zside-sign-days {
    color: #0084ff;
}

.zside-sign-days b {
    font-size: 1.9rem;
    line-height: 1;
}

.zside-sign-days span {
    margin-left: 3px;
    font-size: 13px;
}

.zside-sign-sub {
    margin-top: 4px;
    font-size: 12px;
    color: #8590a6;
}

/* 页签 */
.zside-tabs {
    display: flex;
    border-top: 1px solid #f2f4f6;
    border-bottom: 1px solid #f2f4f6;
    background: #fafbfc;
}

.zside-tabs a {
    flex: 1;
    padding: 9px 0;
    text-align: center;
    font-size: 13px;
    color: #8590a6;
}

.zside-tabs a.active {
    color: #0084ff;
    font-weight: 600;
    background: #fff;
}

.zside-pane {
    padding: 10px 16px 14px;
}

.zside-users {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zside-users li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.zside-users img {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

.zside-users a {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #4a4a4a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zside-users a:hover {
    color: #0084ff;
}

.zside-users>li>span {
    flex: 0 0 auto;
    font-size: 12px;
    color: #99a5b5;
}

.zside-rank {
    width: 18px;
    text-align: center;
    font-weight: 700;
    color: #b4bcc8 !important;
}

.zside-rank.top1 {
    color: #f0a020 !important;
}

.zside-rank.top2 {
    color: #9aa5b1 !important;
}

.zside-rank.top3 {
    color: #cd7f32 !important;
}

.zside-empty {
    padding: 16px 0;
    text-align: center;
    font-size: 13px;
    color: #b4bcc8;
}

/* ---------- 用户下拉菜单（头部） ---------- */
.zud-name {
    font-weight: 700;
    word-break: break-word;
}

.header-dropdown .my_option ul li a i {
    margin-right: 5px;
    color: #99a5b5;
}

.header-dropdown .my_option ul li a:hover i {
    color: #0084ff;
}

.header-dropdown .my_option ul li a.zud-logout {
    color: #e4574f;
}

.header-dropdown .my_option ul li a.zud-logout:hover {
    color: #fff;
    background: #e4574f;
}

/* ---------- emlog 语言切换/挂载点输出 ---------- */
.zpage:empty {
    display: none;
}