@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: var(--zl-surface-soft);
    border-left: 2px solid #0084ff;
}

.vote_tip {
    color: var(--zl-text-muted);
    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 var(--zl-border);
    background: var(--zl-surface);
    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: var(--zl-hover);
    color: #0084ff;
}

.pagination-wrap em,
.zpage em {
    font-style: normal;
    color: var(--zl-text-muted);
    margin: 3px;
    display: inline-block;
    padding: .3rem 0;
}

/* ---------- 正文排版：标题 / 表格 / 图片 / 列表 / 引用 / 代码 ---------- */
.zpost-body,
.message {
    word-wrap: break-word;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--zl-text);
    letter-spacing: 0.015em;
}

.zpost-body p,
.message p {
    margin: 0.85rem 0;
    line-height: 1.85;
    text-align: justify;
}

.zpost-body a,
.message a {
    color: #0070f3;
    text-decoration: none;
    border-bottom: 1px dashed rgba(0, 112, 243, 0.4);
    padding-bottom: 1px;
    transition: all 0.2s ease;
}

.zpost-body a:hover,
.message a:hover {
    color: #0084ff;
    border-bottom-color: #0084ff;
    border-bottom-style: solid;
    background-color: var(--zl-primary-soft-2);
    border-radius: 2px;
}

.zpost-body img,
.message img,
.markdown img {
    max-width: 100%;
    height: auto !important;
    border: 1px solid var(--zl-border);
    border-radius: 8px;
    margin: 0.8rem 0;
    cursor: zoom-in;
    box-shadow: 0 3px 12px rgba(18, 18, 18, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.zpost-body img:hover,
.message img:hover,
.markdown img:hover {
    box-shadow: 0 6px 18px rgba(18, 18, 18, 0.09);
}

.zpost-body figure,
.message figure {
    margin: 1.2rem 0;
    text-align: center;
}

.zpost-body figcaption,
.message figcaption {
    font-size: 13px;
    color: var(--zl-text-muted);
    margin-top: 6px;
    font-style: italic;
}

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

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

.zpost-body ul li::marker,
.message ul li::marker {
    color: #0084ff;
}

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

.zpost-body ol li::marker,
.message ol li::marker {
    color: #0084ff;
    font-weight: 600;
}

.zpost-body li,
.message li {
    margin: 0.35rem 0;
    line-height: 1.8;
}

/* 嵌套列表 */
.zpost-body ul ul,
.zpost-body ol ol,
.zpost-body ul ol,
.zpost-body ol ul,
.message ul ul,
.message ol ol,
.message ul ol,
.message ol ul {
    margin: 0.25rem 0;
    padding-left: 1.4rem;
}

.zpost-body ul ul li,
.message ul ul li {
    list-style: circle;
}

.zpost-body ul ul ul li,
.message ul ul ul li {
    list-style: square;
}

/* Markdown 任务列表（Task list） */
.zpost-body li input[type="checkbox"],
.message li input[type="checkbox"] {
    margin-right: 0.45rem;
    vertical-align: middle;
    accent-color: #0084ff;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* ---------- 正文标题 H1~H6 ---------- */
.zpost-body h1, .zpost-body h2, .zpost-body h3,
.zpost-body h4, .zpost-body h5, .zpost-body h6,
.message h1, .message h2, .message h3,
.message h4, .message h5, .message h6 {
    position: relative;
    padding-left: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--zl-text);
    scroll-margin-top: 90px;
    letter-spacing: 0.01em;
}

.zpost-body h1::before, .zpost-body h2::before, .zpost-body h3::before,
.zpost-body h4::before, .zpost-body h5::before, .zpost-body h6::before,
.message h1::before, .message h2::before, .message h3::before,
.message h4::before, .message h5::before, .message h6::before {
    content: "";
    position: absolute;
    left: 0;
    border-radius: 3px;
    background: #0084ff;
}

.zpost-body h1,
.message h1 {
    font-size: 1.55rem;
    margin: 2.2rem 0 1rem;
    padding-left: 16px;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--zl-border-soft);
}

.zpost-body h1::before,
.message h1::before {
    top: 0.16em;
    bottom: 0.55em;
    width: 5px;
}

.zpost-body h2,
.message h2 {
    font-size: 1.35rem;
    margin: 1.9rem 0 0.85rem;
    padding-left: 15px;
    padding-bottom: 0.35rem;
    border-bottom: 1px dashed var(--zl-border-soft);
}

.zpost-body h2::before,
.message h2::before {
    top: 0.18em;
    bottom: 0.45em;
    width: 4px;
}

.zpost-body h3,
.message h3 {
    font-size: 1.18rem;
    margin: 1.6rem 0 0.7rem;
}

.zpost-body h3::before,
.message h3::before {
    top: 0.2em;
    bottom: 0.2em;
    width: 4px;
    background: #3d9bff;
}

.zpost-body h4,
.message h4 {
    font-size: 1.06rem;
    margin: 1.35rem 0 0.55rem;
}

.zpost-body h4::before,
.message h4::before {
    top: 0.22em;
    bottom: 0.22em;
    width: 3px;
    background: var(--zl-primary-soft-4);
}

.zpost-body h5,
.message h5 {
    font-size: 1rem;
    margin: 1.2rem 0 0.4rem;
    padding-left: 0;
    color: var(--zl-text-sub);
}

.zpost-body h6,
.message h6 {
    font-size: 0.95rem;
    margin: 1.1rem 0 0.4rem;
    padding-left: 0;
    color: var(--zl-text-muted);
}

.zpost-body h5::before,
.zpost-body h6::before,
.message h5::before,
.message h6::before {
    content: none;
}

/* 正文首个标题顶距消除 */
.zpost-body > h1:first-child,
.zpost-body > h2:first-child,
.zpost-body > h3:first-child,
.zpost-body > h4:first-child,
.zpost-body > h5:first-child,
.zpost-body > h6:first-child,
.message > h1:first-child,
.message > h2:first-child,
.message > h3:first-child,
.message > h4:first-child,
.message > h5:first-child,
.message > h6:first-child {
    margin-top: 0;
}

/* 引用块 Blockquote */
.zpost-body blockquote,
.message blockquote {
    position: relative;
    background-color: var(--zl-surface-soft);
    border-left: 4px solid #0084ff;
    border-radius: 0 8px 8px 0;
    padding: 0.85rem 1.25rem;
    margin: 1.2rem 0;
    color: var(--zl-text-sub);
    box-shadow: 0 1px 4px rgba(18, 18, 18, 0.02);
}

.zpost-body blockquote p,
.message blockquote p {
    margin: 0.35rem 0;
    line-height: 1.75;
}

.zpost-body blockquote p:first-child,
.message blockquote p:first-child {
    margin-top: 0;
}

.zpost-body blockquote p:last-child,
.message blockquote p:last-child {
    margin-bottom: 0;
}

/* 行内代码 Code */
.zpost-body code,
.message code {
    background: var(--zl-primary-soft);
    color: #0070f3;
    padding: 2.5px 6.5px;
    border-radius: 4px;
    font-size: 88%;
    font-family: Consolas, Monaco, "Courier New", monospace;
    border: 1px solid rgba(0, 112, 243, 0.12);
    margin: 0 2px;
    word-break: break-word;
}

/* 代码块容器与 Mac 窗口样式 */
.zcode-block {
    position: relative;
    margin: 1.3rem 0;
    background: #282c34;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.zcode-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.85rem;
    background: rgba(0, 0, 0, 0.22);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    user-select: none;
    -webkit-user-select: none;
}

.zcode-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.zcode-dot {
    width: 10.5px;
    height: 10.5px;
    border-radius: 50%;
    display: inline-block;
}

.zcode-dot-red {
    background: #ff5f56;
}

.zcode-dot-yellow {
    background: #ffbd2e;
}

.zcode-dot-green {
    background: #27c93f;
}

.zcode-lang {
    font-size: 11px;
    font-weight: 600;
    font-family: Consolas, Monaco, "Courier New", monospace;
    color: #858d98;
    letter-spacing: 0.06em;
    margin-left: 10px;
    margin-right: auto;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zcode-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2.5px 8px;
    font-size: 11.5px;
    line-height: 1.4;
    color: #abb2bf;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.zcode-copy-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.22);
}

.zcode-copy-btn .zcode-icon {
    flex-shrink: 0;
}

.zcode-copy-btn .zcode-icon-check {
    display: none;
}

.zcode-copy-btn.is-copied {
    color: #27c93f;
    background: rgba(39, 201, 63, 0.15);
    border-color: rgba(39, 201, 63, 0.35);
}

.zcode-copy-btn.is-copied .zcode-icon-copy {
    display: none;
}

.zcode-copy-btn.is-copied .zcode-icon-check {
    display: inline-block;
}

/* 代码块 Pre */
.zpost-body pre,
.message pre {
    background: #282c34;
    border-radius: 8px;
    padding: 0;
    margin: 1.2rem 0;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* 嵌套在 zcode-block 内的 pre 样式重置 */
.zcode-block pre,
.zcode-block .message pre,
.zcode-block .zpost-body pre {
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.zpost-body pre code,
.message pre code {
    display: block;
    overflow-x: auto;
    padding: 1.1rem 1.25rem;
    background: transparent;
    color: #abb2bf;
    border: none;
    border-radius: 0;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    font-family: Consolas, Monaco, "Courier New", monospace;
}

.zpost-body pre code.hljs,
.message pre code.hljs {
    padding: 1.1rem 1.25rem;
    background: transparent;
}

/* 代码块细滚动条 */
.zpost-body pre code::-webkit-scrollbar,
.message pre code::-webkit-scrollbar {
    height: 6px;
    background: transparent;
}
.zpost-body pre code::-webkit-scrollbar-thumb,
.message pre code::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
}
.zpost-body pre code::-webkit-scrollbar-thumb:hover,
.message pre code::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* 键盘按键 Kbd */
.zpost-body kbd,
.message kbd {
    display: inline-block;
    padding: 2px 6px;
    font-size: 12px;
    font-family: Consolas, Monaco, monospace;
    line-height: 1.4;
    color: var(--zl-text);
    background-color: var(--zl-surface-soft);
    border: 1px solid var(--zl-border);
    border-bottom: 2px solid var(--zl-text-faint);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    margin: 0 2px;
    vertical-align: baseline;
}

/* 荧光高亮 Mark */
.zpost-body mark,
.message mark {
    background: #fff3c4;
    color: #7a4f01;
    padding: 2px 5px;
    border-radius: 3px;
}

/* 折叠面板 Details & Summary */
.zpost-body details,
.message details {
    margin: 1rem 0;
    border: 1px solid var(--zl-border);
    border-radius: 8px;
    background: var(--zl-surface);
    overflow: hidden;
    transition: all 0.2s ease;
}

.zpost-body details summary,
.message details summary {
    padding: 0.75rem 1rem;
    background: var(--zl-surface-soft);
    font-weight: 600;
    color: var(--zl-text);
    cursor: pointer;
    user-select: none;
    outline: none;
    transition: background-color 0.2s ease;
}

.zpost-body details summary:hover,
.message details summary:hover {
    background: var(--zl-primary-soft-2);
    color: #0084ff;
}

.zpost-body details[open] summary,
.message details[open] summary {
    border-bottom: 1px solid var(--zl-border-soft);
}

.zpost-body details > *:not(summary),
.message details > *:not(summary) {
    padding: 0.85rem 1rem;
}

/* 分割线 HR */
.zpost-body hr,
.message hr {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--zl-border), transparent);
    margin: 2rem 0;
}

/* 嵌入多媒体（视频/音频/iframe） */
.zpost-body iframe,
.message iframe,
.zpost-body video,
.message video {
    max-width: 100%;
    border-radius: 8px;
    margin: 1rem 0;
    box-shadow: 0 3px 12px rgba(18, 18, 18, 0.06);
}

.zpost-body audio,
.message audio {
    max-width: 100%;
    margin: 0.8rem 0;
}

/* 表格：横向滚动外层容器（由 JS 包裹） */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.25rem 0;
    border-radius: 8px;
    border: 1px solid var(--zl-border);
    background-color: var(--zl-surface);
    box-shadow: 0 2px 8px rgba(18, 18, 18, 0.04);
}

/* 优雅平滑的细滚动条 */
.table-scroll::-webkit-scrollbar {
    height: 6px;
    background: transparent;
}
.table-scroll::-webkit-scrollbar-track {
    background: var(--zl-surface-soft);
    border-radius: 6px;
}
.table-scroll::-webkit-scrollbar-thumb {
    background: var(--zl-border);
    border-radius: 6px;
}
.table-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--zl-text-muted-2);
}

/* 正文表格本体 */
.zpost-body table,
.message table {
    width: 100%;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-size: 14px;
    color: var(--zl-text);
    line-height: 1.6;
    background-color: var(--zl-surface);
}

/* 表头 th */
.zpost-body table th,
.message table th {
    background-color: var(--zl-surface-soft);
    color: var(--zl-text);
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    white-space: nowrap;
    border-bottom: 2px solid var(--zl-border);
    border-right: 1px solid var(--zl-border-soft);
    letter-spacing: 0.02em;
}

/* 单元格 td */
.zpost-body table td,
.message table td {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--zl-border-soft);
    border-right: 1px solid var(--zl-border-soft);
    vertical-align: middle;
    transition: background-color 0.15s ease;
}

/* 首列与尾列边框处理 */
.zpost-body table th:last-child,
.zpost-body table td:last-child,
.message table th:last-child,
.message table td:last-child {
    border-right: none;
}

/* 最后一行消除底边框（由外层 .table-scroll 边框托底） */
.zpost-body table tr:last-child td,
.message table tr:last-child td {
    border-bottom: none;
}

/* 斑马纹交替底色（增强多行表格易读性） */
.zpost-body table tbody tr:nth-child(even) td,
.message table tbody tr:nth-child(even) td,
.zpost-body table tr:nth-child(even) td,
.message table tr:nth-child(even) td {
    background-color: rgba(0, 0, 0, 0.015);
}

/* 鼠标悬停行高亮动画 */
.zpost-body table tbody tr:hover td,
.message table tbody tr:hover td,
.zpost-body table tr:hover td,
.message table tr:hover td {
    background-color: var(--zl-primary-soft-2) !important;
}

/* 表格内图片适配 */
.zpost-body table img,
.message table img {
    max-width: 100%;
    height: auto;
    margin: 0;
    border-radius: 4px;
    vertical-align: middle;
}

/* 表格内行内代码与链接适配 */
.zpost-body table code,
.message table code {
    background: var(--zl-primary-soft);
    color: #0084ff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    border: 1px solid rgba(0, 132, 255, 0.15);
}

.zpost-body table a,
.message table a {
    color: #0084ff;
    font-weight: 500;
    text-decoration: none;
}
.zpost-body table a:hover,
.message table a:hover {
    text-decoration: underline;
}

.message hr {
    border: 0;
    border-top: 1px solid var(--zl-border);
    margin: 1.2rem 0;
}

/* ---------- 图片灯箱（正文与微语图片点击放大预览） ---------- */
body.zlightbox-open {
    overflow: hidden !important;
}

#zlightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    opacity: 0;
    transition: opacity .2s ease;
    user-select: none;
    -webkit-user-select: none;
}

#zlightbox.show {
    display: flex;
    opacity: 1;
}

#zlightbox .zlightbox-wrap {
    position: relative;
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#zlightbox img,
#zlightbox .zlightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .65);
    background: #111;
    object-fit: contain;
    cursor: default;
    transition: transform .2s ease;
}

#zlightbox .zlightbox-close {
    position: fixed;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    border: none;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    z-index: 10002;
    padding: 0;
}

#zlightbox .zlightbox-close:hover {
    background: rgba(255, 255, 255, .32);
    transform: scale(1.08);
}

#zlightbox .zlightbox-prev,
#zlightbox .zlightbox-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    border: none;
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
    z-index: 10002;
    padding: 0;
}

#zlightbox .zlightbox-prev { left: 24px; }
#zlightbox .zlightbox-next { right: 24px; }

#zlightbox .zlightbox-prev:hover,
#zlightbox .zlightbox-next:hover {
    background: rgba(255, 255, 255, .32);
    transform: translateY(-50%) scale(1.08);
}

#zlightbox .zlightbox-count {
    position: fixed;
    top: 24px;
    left: 28px;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    color: rgba(255, 255, 255, .9);
    font-size: 13px;
    letter-spacing: .5px;
    z-index: 10002;
    pointer-events: none;
}

#zlightbox .zlightbox-tip {
    position: fixed;
    bottom: 22px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, .72);
    font-size: 12.5px;
    pointer-events: none;
    z-index: 10002;
}

@media (max-width: 575px) {
    #zlightbox .zlightbox-prev { left: 10px; width: 40px; height: 40px; font-size: 20px; }
    #zlightbox .zlightbox-next { right: 10px; width: 40px; height: 40px; font-size: 20px; }
    #zlightbox .zlightbox-close { top: 14px; right: 14px; width: 38px; height: 38px; font-size: 24px; }
    #zlightbox .zlightbox-count { top: 18px; left: 16px; font-size: 12px; padding: 2px 10px; }
    #zlightbox .zlightbox-tip { font-size: 11.5px; bottom: 16px; }
}

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

.zstat-item {
    background: var(--zl-surface-soft);
    border-radius: 8px;
    text-align: center;
    padding: 12px 6px 10px;
    transition: background-color .2s ease;
}

.zstat-item:hover {
    background: var(--zl-primary-soft);
}

.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: var(--zl-text-muted);
}

/* ---------- 侧栏：最新文章 / 热门文章（排行美化） ---------- */
.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: var(--zl-primary-soft-2);
}

.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: var(--zl-surface-soft);
    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: var(--zl-text-muted-3);
}

.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: var(--zl-primary-soft-2);
}

.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: var(--zl-text-muted-3);
}

.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: var(--zl-text-muted-3);
}

.log-topflg {
    color: #f75751;
    font-size: .875rem;
    font-style: normal;
    padding: .125rem .25rem;
    border-radius: .25rem;
    background: var(--zl-top-flag-bg);
    /* 原来用 text-bottom 对齐底部，实测在系统字体下比标题文字高 1.25px。
       改成 .08em（与新徽章同一套实测方法：主题默认的 HarmonyOS 字体和
       关闭该字体后的系统字体分别实测、取最坏情况最小），偏差收到 0.16px 内。
       这个标与新徽章同排显示，两者不齐会很明显。 */
    vertical-align: .08em;
    margin-right: .35rem;
}

/* ---------- 文章列表标题前的「新」「热」徽章 ---------- */
/* 与置顶标志同排，都放在标题链接之前。用 vertical-align: .13em 让徽章
   内部的汉字墨迹中心与标题文字齐平：徽章字号比标题小（.75rem 对 1.04rem），
   用 text-bottom 对齐底部会整体偏低 1.8px，看着像掉下去一截。

   .13em 是在主题默认的 HarmonyOS 字体和关闭该字体后的系统字体下
   分别实测墨迹中心、取最坏情况最小的结果（两种模式偏差都在 0.15px 内）。 */
.log-badge {
    display: inline-block;
    font-size: .75rem;
    font-style: normal;
    line-height: 1.4;
    padding: 0 .3rem;
    border-radius: .2rem;
    vertical-align: .13em;
    margin-right: .3rem;
    font-weight: 500;
    white-space: nowrap;
}

.log-badge-new {
    color: #16a34a;
    background: var(--zl-new-badge-bg);
}

.log-badge-hot {
    color: #ea580c;
    background: var(--zl-hot-badge-bg);
}

/* 前台投稿设置的自定义标题前缀，列表与正文共用 */
.ztitle-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: .4rem;
    padding: .08em .45em;
    border-radius: .25rem;
    font-size: .68em;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
    color: var(--zprefix-text-color, #fff);
    background: var(--zprefix-color, #0084ff);
    vertical-align: .08em;
    white-space: nowrap;
}

.loglist-sort {
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 auto;
    margin-left: 0;
    line-height: 1;
}

.loglist-sort a {
    display: inline-block;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.4;
    color: #0084ff;
    background: var(--zl-primary-soft);
    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: var(--zl-text-muted);
}

.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: var(--zl-primary-soft);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 13px;
    color: #0084ff;
}

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

/* 游客填写区：昵称与邮箱同一行，窄屏再折行，避免两个整宽输入框上下紧贴 */
.comment-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.comment-info .com_control {
    flex: 1 1 180px;
    min-width: 0;
    height: 38px;
}

/* 评论表单的验证码由核心生成（img + input 裸结构），这里补成一行。
   输入框排在图片左侧，与登录弹窗、投稿页的验证码方向保持一致。 */
.captcha-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.captcha-container input {
    order: 1;
    flex: 0 1 150px;
    min-width: 0;
    height: 38px;
    border: 1px solid #ced4da;
    border-radius: 3px;
    padding: 0 8px;
}

.captcha-container img {
    order: 2;
    flex: 0 0 auto;
    height: 38px;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 3px;
    border: 1px solid var(--zl-border);
}

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

/* ---------- LOGO 亮 / 暗双图 ----------
   顶部与页脚都会输出两张 <img>（各带 data-zlogo="light|dark"），
   这里按 html[data-zl-theme] 控制显隐：切换主题只改属性、无需刷新，
   也不会出现「先空一下再出图」。未配置暗色 LOGO 时只输出一张亮色图，
   下列规则都不命中，两种模式共用它。

   注意优先级：页脚已有 `footer .left img { display:block }`（权重 0,1,2），
   会盖住 `img[data-zlogo="dark"]`（0,1,1），因此页脚那条需单独写足权重。 */
img[data-zlogo="dark"],
footer .left img[data-zlogo="dark"] {
    display: none;
}

/* 暗色下隐藏亮色图。这条权重（0,2,2）已高于页脚那条，无需再针对性覆盖 */
html[data-zl-theme="dark"] img[data-zlogo="light"] {
    display: none;
}

/* 暗色下显示暗色图 */
html[data-zl-theme="dark"] img[data-zlogo="dark"] {
    display: inline;
}

/* 页脚 LOGO 在暗色下仍需保持块级（原本由 footer .left img 提供） */
html[data-zl-theme="dark"] footer .left img[data-zlogo="dark"] {
    display: block;
}

#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: var(--zl-surface-soft);
    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: var(--zl-text-muted);
    background: var(--zl-surface-soft);
}

.zauthor-role.is-admin {
    color: #0084ff;
    background: var(--zl-primary-soft);
}

.zauthor-desc {
    position: relative;
    z-index: 1;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--zl-text-muted);
}

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

.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 var(--zl-border-soft);
}

.zauthor-stat:hover {
    background: var(--zl-primary-soft-2);
}

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

.zauthor-stat span {
    font-size: 12px;
    color: var(--zl-text-muted);
}

.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;
}

/* ---------- 侧栏：链接卡片 ---------- */
.card-site-info.card-links {
    overflow: hidden;
}

.card-site-info.card-links > .card-header {
    border-bottom-color: var(--zl-primary-soft-3);
    background-image: linear-gradient(135deg, var(--zl-primary-soft-2), var(--zl-surface) 72%);
}

.zlink-body {
    padding: 8px 10px 10px;
}

.zlink-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zlink-item {
    margin: 0;
    padding: 0;
}

.zlink-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--zl-text);
    background: transparent;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.zlink-row:hover {
    color: var(--zl-text);
    background: var(--zl-primary-soft-2);
    border-color: var(--zl-primary-soft-3);
    transform: translateX(2px);
}

.zlink-row:focus-visible {
    outline: 2px solid rgba(0, 132, 255, .35);
    outline-offset: 1px;
}

.zlink-icon {
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border: 1px solid var(--zl-border-soft);
    border-radius: 9px;
    color: #0084ff;
    background: linear-gradient(145deg, var(--zl-primary-soft), var(--zl-primary-soft-2));
    transition: background-color .2s ease, border-color .2s ease;
}

.zlink-row:hover .zlink-icon {
    border-color: var(--zl-primary-soft-3);
    background: var(--zl-primary-soft-3);
}

.zlink-icon img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
    object-fit: contain;
}

.zlink-icon.is-text span {
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.zlink-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.zlink-name,
.zlink-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zlink-name {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
}

.zlink-meta {
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--zl-text-muted-2);
}

.zlink-arrow {
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--zl-text-faint);
    opacity: .65;
    transition: color .2s ease, opacity .2s ease, transform .2s ease;
}

.zlink-row:hover .zlink-arrow {
    color: #0084ff;
    opacity: 1;
    transform: translate(1px, -1px);
}

/* ---------- 侧栏：最新评论 / 最新微语 ---------- */
.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: var(--zl-primary-soft-2);
}

.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: var(--zl-text-muted-3);
}

.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: var(--zl-text-sub-3);
    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: var(--zl-text-muted-3);
}

/* ---------- 侧栏：个人资料 ---------- */
/* 由卡片自身裁切圆角，带/不带标题时角落都不会露出方块 */
.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: var(--zl-text-muted);
}

.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);
}

/* ---------- 侧栏标签云：彩色胶囊 ----------
   原来所有标签共用同一种灰蓝，一整片看过去没有层次。这里给标签按位置
   循环上 8 种色相：底色用主题「等级铭牌」那套淡彩（--zl-level-N-bg），
   前景色用配套的 --zl-tag-N-fg（定义见 z-dark.css，亮/暗两套都按
   WCAG 4.5:1 调过），因此两种模式都清晰，也不必另造色值。

   色相按位置循环，相邻标签必然不同色，长列表每 8 个一轮。
   注意：emlog 在标签外面还套了一层 <span>（用它设置字号来体现热门程度），
   .tags-side 并不是 .tag-container 的直接子元素，所以 :nth-child 必须
   打在 span 上，直接打在 a 上选不中。 */
.tag-container > span:nth-child(8n+1) .tags-side { --ztag-fg: var(--zl-tag-1-fg); --ztag-bg: var(--zl-level-1-bg); }
.tag-container > span:nth-child(8n+2) .tags-side { --ztag-fg: var(--zl-tag-2-fg); --ztag-bg: var(--zl-level-2-bg); }
.tag-container > span:nth-child(8n+3) .tags-side { --ztag-fg: var(--zl-tag-3-fg); --ztag-bg: var(--zl-level-3-bg); }
.tag-container > span:nth-child(8n+4) .tags-side { --ztag-fg: var(--zl-tag-4-fg); --ztag-bg: var(--zl-level-4-bg); }
.tag-container > span:nth-child(8n+5) .tags-side { --ztag-fg: var(--zl-tag-5-fg); --ztag-bg: var(--zl-level-5-bg); }
.tag-container > span:nth-child(8n+6) .tags-side { --ztag-fg: var(--zl-tag-6-fg); --ztag-bg: var(--zl-level-6-bg); }
.tag-container > span:nth-child(8n+7) .tags-side { --ztag-fg: var(--zl-tag-7-fg); --ztag-bg: var(--zl-level-7-bg); }
.tag-container > span:nth-child(8n+8) .tags-side { --ztag-fg: var(--zl-tag-8-fg); --ztag-bg: var(--zl-level-8-bg); }

.tag-container .tags-side {
    display: inline-block;
    background: var(--ztag-bg, var(--zl-surface-soft));
    border-radius: 999px;
    padding: 1px 9px;
    margin: 0 6px 8px 0;
    color: var(--ztag-fg, #5890c1);
    transition: box-shadow .18s ease, transform .18s ease;
}

/* 悬停：用 currentColor 描一圈同色内边，再轻轻上浮。
   这里不用 filter 去提亮/压暗 —— 亮色模式下该压暗、暗色模式下该提亮，
   方向相反，一条规则满足不了；描边在两种模式下都成立，色相也自动跟随标签。

   必须把 color 再声明一次：暗色下有一条通用的
   `html[data-zl-theme="dark"] a:hover { color: #0084ff }`（权重 0,2,2），
   高于标签基础规则的 (0,2,0)，悬停时会把标签染成品牌蓝 ——
   色相全丢，描边（currentColor）也跟着变蓝。本选择器是 (0,3,0)，
   在这里重申一次即可压过它。 */
.tag-container .tags-side:hover {
    color: var(--ztag-fg, #5890c1);
    box-shadow: inset 0 0 0 1px currentColor;
    transform: translateY(-1px);
}

/* ---------- 首页卡片列表（可选摘要模式） ---------- */
.zexcerpt {
    font-size: 14px;
    color: var(--zl-text-sub-3);
    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: var(--zl-surface-soft);
}

.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;
    }
}

/* 列表配图组（list_thumb_pos = bottom）：摘要下方平铺正文前 N 张图。
   与行尾缩略图是两种可切换的版式，由设置项二选一，不会同时出现。
   用 flex + 等分 + max-width 而非 grid：1 张时不会孤零零缩在 1/3 栏里，
   2~3 张时等宽铺满；超过上限的图在服务端就已截断，这里只管排版。 */
.zlist-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: .5rem;
}

.zlist-thumb {
    flex: 1 1 0;
    /* 允许收缩到比内容更窄，否则 flex 项会被图片撑破、把整行顶出容器 */
    min-width: 0;
    max-width: 148px;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    background: var(--zl-surface-soft);
}

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

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

/* 窄屏：三张仍并排，靠 gap 与 max-width 自适应收窄，不折行 */
@media (max-width: 575px) {
    .zlist-thumbs {
        gap: 6px;
    }
}

/* ---------- 底部 ---------- */
footer {
    width: 100%;
    padding: 19px 0;
    background: var(--zl-surface);
    z-index: 100;
}

footer a:hover {
    color: var(--zl-text-muted) !important
}

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

footer .left {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--zl-text-sub-3);
}

footer .right {
    flex: 0 0 auto;
    max-width: 300px;
    color: var(--zl-text-sub-3);
}

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: var(--zl-text-sub-3);
    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: var(--zl-text);
}

.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: var(--zl-text-sub-3);
    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;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.side-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--zl-surface);
    box-shadow: var(--zl-shadow-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--zl-text-muted);
    cursor: pointer;
    transition: color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.side-btn:hover {
    color: #0084ff;
    box-shadow: 0 2px 12px rgba(0, 132, 255, .22);
}

.side-btn:active {
    transform: scale(.94);
}

/* 暗色切换按钮：聚焦轮廓只在键盘操作时出现，鼠标点击不显示 */
.side-btn:focus-visible {
    outline: 2px solid #0084ff;
    outline-offset: 2px;
}

.side-btn svg {
    display: block;
}

/* 移动端缩一点，避免遮挡内容 */
@media (max-width: 575px) {
    .side-toolbar {
        right: 10px;
        bottom: 24px;
        gap: 8px;
    }

    .side-btn {
        width: 40px;
        height: 40px;
    }
}

/* ---------- 弹窗 ---------- */
.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;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 1rem 0;
}

/* 两边等宽；只有一边有相邻文章时它会占满整行，靠向自己那一侧 */
.neighbor-log .prev-log,
.neighbor-log .next-log {
    flex: 1 1 260px;
    min-width: 0;
}

.neighbor-link {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 8px 10px;
    border: 1px solid var(--zl-border);
    border-radius: 6px;
    background: var(--zl-surface);
    color: var(--dark);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.neighbor-link:hover {
    color: #0084ff;
    border-color: #b9d8ff;
    box-shadow: 0 2px 8px rgba(0, 132, 255, .12);
}

/* 下一篇整块靠右：文字右对齐，缩略图随之排到最右侧 */
.neighbor-log .next-log .neighbor-link {
    flex-direction: row-reverse;
    text-align: right;
}

.neighbor-thumb {
    flex: 0 0 auto;
    display: block;
    width: 76px;
    height: 54px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--zl-surface-soft);
}

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

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

.neighbor-dir {
    font-size: 12px;
    color: var(--zl-text-muted);
    display: block;
}

.neighbor-dir i {
    margin: 0 2px;
}

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

/* 窄屏：缩略图收窄，给标题留出可读宽度 */
@media (max-width: 575px) {
    .neighbor-thumb {
        width: 60px;
        height: 44px;
    }

    .neighbor-link {
        gap: 8px;
        padding: 8px;
    }
}

/* ---------- 相关推荐（正文页）：封面在上、标题在下，宽屏一行四个 ---------- */
.card-related {
    margin-top: 1rem;
}

/* 宽屏（lg 及以上）：一行四个 */
.zrel {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 12px;
}

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

.zrel-link {
    display: block;
    color: var(--dark);
    transition: color .2s ease;
}

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

.zrel-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* 固定比例，保证每张卡片封面高度一致、标题起始线对齐 */
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    overflow: hidden;
    background: var(--zl-surface-soft);
}

/* 无图条目：用淡渐变加图标占位，保持卡片高度一致 */
.zrel-cover.is-empty {
    background-image: linear-gradient(135deg, #eef3f9, #f7fafd);
    color: #bcc9d8;
    font-size: 20px;
}

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

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

.zrel-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.5;
    word-break: break-word;
}

/* 移动端（768px 以下）：一行两个。
   只保留 4 列 / 2 列两档，中间不插 3 列，
   否则 4 条数据会排成「3+1」这种参差的版式。
   注：768~991px 区间侧栏已隐藏、正文占满，四列仍放得下，故不降档。 */
@media (max-width: 767px) {
    .zrel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 12px;
    }
}

@media (max-width: 575px) {
    .zrel {
        gap: 12px 10px;
    }

    .zrel-title {
        font-size: 13px;
        margin-top: 6px;
    }
}

/* ---------- 正文底部标签（按投稿页「话题」胶囊样式统一） ---------- */
.zpost-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: .9rem 0 .4rem;
}

.tags,
.message .tags {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.6;
    color: #0084ff;
    background: var(--zl-primary-soft);
    /* 正文里的链接有下划线（见 .message a），标签是胶囊块，不需要 */
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

/* .message a 的优先级高于 .tags，这里显式提到同等以上，否则颜色与下划线会被正文链接样式盖掉 */
.message .tags:hover,
.tags:hover {
    color: #fff;
    background: #0084ff;
    text-decoration: none;
}

/* 话题前缀符号：与投稿页输入框里的观感呼应 */
.tags::before {
    content: "#";
    margin-right: 2px;
    opacity: .65;
}

.tags:hover::before {
    opacity: .85;
}

/* ---------- 列表页信息头（搜索 / 分类 / 标签 / 作者 / 归档） ---------- */
.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: var(--zl-text-sub-3);
}

.zhint-meta {
    margin-top: 4px;
    font-size: 13px;
    color: var(--zl-text-muted);
}

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

.zhint-action {
    flex: 0 0 auto;
    margin-left: 14px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--zl-surface-soft);
    color: var(--zl-text-sub-3);
    font-size: 13px;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}

.zhint-action:hover {
    background: var(--zl-primary-soft);
    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: var(--zl-danger-bg);
}

.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: var(--zl-text-sub-3);
    transition: background-color .2s ease, color .2s ease;
}

.zquick-item>a:hover {
    background: var(--zl-primary-soft-2);
    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: var(--zl-primary-soft-2);
    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: var(--zl-danger-bg);
}

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

.znotice-text {
    display: inline-block;
    font-size: 13px;
    color: var(--zl-text-sub-3);
    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: var(--zl-surface);
    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: var(--zl-text-sub-3);
    transition: color .15s ease, background-color .15s ease;
}

.zuc-topnav-link i {
    font-size: 14px;
    color: var(--zl-text-muted-2);
}

.zuc-topnav-link:hover {
    color: #0084ff;
    background: var(--zl-primary-soft-2);
}

.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: var(--zl-surface);
}

/* 通用胶囊按钮，用于用户中心所有主/次操作 */
.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 var(--zl-border-soft);
}

.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: var(--zl-text-muted);
}

.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: var(--zl-text-sub);
    transition: background-color .15s ease, color .15s ease;
}

.zuc-nav-link i {
    width: 16px;
    text-align: center;
    color: var(--zl-text-muted-2);
    transition: color .15s ease;
}

.zuc-nav-link:hover {
    background: var(--zl-surface-soft);
    color: #0084ff;
}

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

/* 选中项：左侧蓝色竖条 + 浅蓝底 */
.zuc-nav-link.active {
    background: var(--zl-primary-soft);
    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: var(--zl-text-sub-3);
    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: var(--zl-surface);
    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: var(--zl-text-muted);
}

.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 var(--zl-border-soft);
}

.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: var(--zl-text-muted);
}

.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: var(--zl-text-muted);
}

.zuc-empty i {
    display: block;
    margin-bottom: 8px;
    font-size: 30px;
    color: var(--zl-text-faint-2);
}

.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 var(--zl-border-soft);
}

.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: var(--zl-text-muted);
}

.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: var(--zl-success-bg-2);
}

.zst-pending {
    color: #d97706;
    background: var(--zl-warning-bg);
}

.zst-draft {
    color: var(--zl-text-muted);
    background: var(--zl-surface-soft);
}

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

.zuc-pager-info {
    font-size: 13px;
    color: var(--zl-text-muted);
}

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

.zuc-label {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--zl-text-sub);
}

.zuc-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--zl-text-muted-2);
}

.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 var(--zl-border-soft);
}

.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: var(--zl-text-muted);
}

.zuc-profile-more {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 13px;
    color: var(--zl-text-muted);
}

.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: var(--zl-text-faint-2);
}

.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: var(--zl-text-muted);
}

.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: var(--zl-text-sub);
}

.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: var(--zl-surface-soft);
    box-shadow: none;
    transition: background-color .2s ease, border-color .2s ease;
}

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

.zwrite-title:hover {
    background: var(--zl-primary-soft-2);
}

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

/* 标题下方的 adm_writelog_bar 插件挂载区
   与后台「写文章」位置一致：点击展开或弹窗，钩子无输出时不渲染。

   这里同时承载两类内容：
     · 主题自带按钮 —— .zwrite-bar-btn（隐藏内容、悬赏积分）；
     · 插件注入链接 —— 核心开发规范约定此处「仅支持文字链接」，
       插件直接 echo 的 <a> 就是 .zwrite-bar 的直接子元素。
   两者形态统一成胶囊，整条工具栏看起来才是一组整齐的入口，
   不会出现「主题按钮是卡片、插件链接是裸文字」的割裂感。

   用 flex + gap 统一间距：原先靠 margin-right 撑开，最后一个元素会多出一段
   尾距、换行后行距也不齐；gap 只作用于元素之间，且自动处理换行。 */
.zwrite-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 8px 0 2px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--zl-text-muted);
}

/* 胶囊标签：主题按钮 + 插件直接挂载的 <a>。
   插件的直接子级链接和主题按钮穿同一套外观，整条工具栏才像一组整齐的
   入口；否则会出现「主题按钮是卡片、插件链接是裸文字」的割裂感。

   这里刻意用「直接子元素」而非 `.zwrite-bar a`：插件面板 / 弹窗内部的
   链接是内容链接，走下面的普通链接样式。两组选择器因此完全不重叠，
   不依赖源码顺序决胜负，也就不会出现某个状态被另一组规则意外改掉。

   权重取到两个类（0,2,x）而不是单类：暗色主题里有一条
   `html[data-zl-theme="dark"] a` 的全局链接色，权重 (0,1,2)，
   单类选择器（0,1,x）压不过它，会让深色下的文字色悄悄偏离预期。 */
.zwrite-bar > a:not(.zwrite-bar-btn),
.zwrite-bar .zwrite-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 12px;
    border: 1px solid var(--zl-border);
    border-radius: 999px;
    line-height: 1.7;
    color: var(--zl-text-sub);
    background: var(--zl-surface-soft);
    text-decoration: none;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.zwrite-bar > a:not(.zwrite-bar-btn):hover,
.zwrite-bar .zwrite-bar-btn:hover {
    color: #0084ff;
    border-color: var(--zl-primary-soft-4);
    background: var(--zl-primary-soft);
    text-decoration: none;
}

/* 键盘聚焦才显示描边，鼠标点击不显示，与主题其它按钮一致 */
.zwrite-bar > a:not(.zwrite-bar-btn):focus-visible,
.zwrite-bar .zwrite-bar-btn:focus-visible {
    outline: 2px solid #0084ff;
    outline-offset: 2px;
}

/* 插件面板 / 弹窗内部的链接：保持内容链接形态，不套胶囊。
   与上面的胶囊规则对象互斥（一个在面板里、一个是直接子级），
   因此不必和胶囊规则争权重。 */
.zwrite-bar > div:not(.modal) a:not(.zwrite-bar-btn),
.zwrite-bar > form:not(.modal) a:not(.zwrite-bar-btn) {
    color: #0084ff;
    text-decoration: none;
}

.zwrite-bar > div:not(.modal) a:not(.zwrite-bar-btn):hover,
.zwrite-bar > form:not(.modal) a:not(.zwrite-bar-btn):hover {
    color: #0068cc;
    text-decoration: underline;
}

.zwrite-bar > div:not(.modal) a:not(.zwrite-bar-btn):focus-visible,
.zwrite-bar > form:not(.modal) a:not(.zwrite-bar-btn):focus-visible {
    outline: 2px solid #0084ff;
    outline-offset: 2px;
    border-radius: 3px;
}

/* icon 尺寸与胶囊内的图标对齐 */
.zwrite-bar i,
.zwrite-bar [class^="icon-"],
.zwrite-bar [class*=" icon-"] {
    font-size: 13px;
}

/* 文字链接里的图标靠右距与文字分开；插件面板内的图标同理 */
.zwrite-bar > div:not(.modal) a:not(.zwrite-bar-btn) i,
.zwrite-bar > div:not(.modal) a:not(.zwrite-bar-btn) [class^="icon-"],
.zwrite-bar > div:not(.modal) a:not(.zwrite-bar-btn) [class*=" icon-"],
.zwrite-bar > div:not(.modal) i {
    margin-right: 3px;
    vertical-align: -1px;
}

/* 胶囊内的图标由 flex gap 分隔，清掉右距与基线偏移，避免双重间距，
   也避免与 flex 居中打架 */
.zwrite-bar > a:not(.zwrite-bar-btn) i,
.zwrite-bar > a:not(.zwrite-bar-btn) [class^="icon-"],
.zwrite-bar > a:not(.zwrite-bar-btn) [class*=" icon-"],
.zwrite-bar .zwrite-bar-btn i,
.zwrite-bar .zwrite-bar-btn [class^="icon-"],
.zwrite-bar .zwrite-bar-btn [class*=" icon-"] {
    margin-right: 0;
    vertical-align: baseline;
}

/* 插件若输出块级内容（面板、表单等），让它独占一行，
   不被 flex 挤到与按钮同一行。
   排除 .modal：主题的「隐藏内容」弹窗就挂在本容器内，它是 position:fixed，
   本就不参与 flex 布局，这里显式排除以免日后改动时误伤。 */
.zwrite-bar > div:not(.modal),
.zwrite-bar > form:not(.modal) {
    flex: 1 0 100%;
    margin: 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: var(--zl-text-muted-2);
}

/* 摘要：已从右侧参数栏移到正文编辑器下方（见 user_write.php）。
   与字数统计之间用一条细分隔线断开，避免和正文末尾视觉粘连；
   边框/圆角/聚焦态沿用编辑区 .form-control 的默认样式，不另起一套。 */
.zwrite-excerpt-field {
    margin: 12px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--zl-border-soft);
}

.zwrite-excerpt-field .zuc-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.zwrite-excerpt-field textarea.form-control {
    border-color: var(--zl-border);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.7;
    resize: vertical;
}

/* 右侧参数栏：紧随主编辑区，窄屏堆叠时保持间距 */
.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: var(--zl-text-sub);
}

/* “选填”小标签，弱化非必填项 */
.zuc-optional {
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.7;
    color: var(--zl-text-muted-2);
    background: var(--zl-surface-soft);
}

.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: var(--zl-surface);
    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: var(--zl-switch-track);
    transition: background-color .2s ease;
}

.zswitch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--zl-surface);
    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: var(--zl-text-sub-2);
    line-height: 1.4;
}

.zswitch:hover .zswitch-track {
    background: var(--zl-switch-track-3);
}

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

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

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

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

/* 参数栏整体吸顶：正文很长时，分类/封面等设置项仍可随时调整。
   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: var(--zl-warning-bg);
}

.zwrite-cancel {
    color: var(--zl-text-muted);
    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: var(--zl-surface);
    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: var(--zl-primary-soft);
}

.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: var(--zl-surface);
    box-shadow: 0 6px 16px rgba(18, 18, 18, .08);
}

.ztag-sug-item {
    display: block;
    padding: 7px 12px;
    font-size: 13px;
    color: var(--zl-text-sub);
}

.ztag-sug-item:hover {
    color: #0084ff;
    background: var(--zl-primary-soft-2);
}

/* ---------- 封面图上传 ---------- */
.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: var(--zl-surface-soft);
}

.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: var(--zl-text-muted);
    background: var(--zl-surface-soft);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

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

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

/* 地址输入框：紧跟在预览 / 上传按钮下方 */
.zcover-url {
    margin-top: 8px;
}

/* 地址取不到图时，预览区给个可见的提示，而不是留一片空白 */
.zcover-preview.is-broken img {
    opacity: .35;
}

.zcover-preview.is-broken::after {
    content: '图片地址无法访问，请检查是否填写正确';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px 8px;
    border-radius: 0 0 6px 6px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background: rgba(228, 87, 79, .9);
}

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

.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: var(--zl-surface);
}

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

/* =========================================================
 * 单行头部（主题设置「头部设置 - 单行头部」开启后生效）
 *
 * 桌面端把 LOGO / 导航 / 搜索 / 写文章 / 消息 / 头像收进页头同一行，
 * 并隐藏页头下方的分类导航条。窄屏（<992px）不启用，仍走折叠菜单 ——
 * 一行塞不下这么多入口，硬挤会把导航文案压成竖排。
 *
 * 隐藏第二条导航条的标记挂在 <body> 上（.zheader-single-mode），
 * 因为 #nav_pc_2 在 <header> 之外，挂在 #header 的类选不到它。
 * ========================================================= */
@media (min-width: 992px) {
    /* 开启单行头部后，第二条导航条整体让位 */
    .zheader-single-mode #nav_pc_2 {
        display: none;
    }

    /* 单行头部吸顶；滚动方向由 x_lanwan-emlog.js 判断。
       向下滚隐藏、向上滚显示，接近顶部时始终显示。 */
    #header.zheader-single {
        position: sticky;
        top: 0;
        z-index: 1040;
        will-change: transform;
        transition: transform .22s ease;
    }

    #header.zheader-single.zheader-scroll-hidden {
        transform: translateY(-100%);
    }

    /* 键盘操作进入页头时立即恢复，避免焦点落在屏幕外 */
    #header.zheader-single.zheader-scroll-hidden:focus-within {
        transform: translateY(0);
    }

    /* 页头内容不再换行，全部挤在一行内 */
    #header.zheader-single > .container {
        flex-wrap: nowrap;
    }

    /* 单行头部的品牌块：ICO 在左，文字 LOGO 与 LOGO旁文字上下排列。
       品牌块只在单行模式下生成，普通头部继续使用原有结构。 */
    #header.zheader-single .zsingle-brand {
        display: inline-flex;
        align-items: center;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 290px;
        margin-right: 4px;
        padding-top: 0;
        padding-bottom: 0;
    }

    #header.zheader-single .zsingle-brand-ico {
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        margin-right: 9px;
        object-fit: contain;
        border-radius: 7px;
    }

    #header.zheader-single .zsingle-brand-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        line-height: 1.2;
    }

    #header.zheader-single .zsingle-brand-copy .logo-2 {
        display: block;
        height: auto;
        max-width: 190px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #header.zheader-single .zsingle-brand-copy .logo-text {
        font-size: 1.15rem;
    }

    #header.zheader-single .zsingle-brand-copy img.logo-2 {
        max-width: 190px;
        max-height: 26px;
        width: auto;
        height: auto;
    }

    #header.zheader-single .zsingle-brand-sub {
        display: block;
        max-width: 190px;
        margin-top: 3px;
        overflow: hidden;
        color: var(--zl-text-muted);
        font-size: 10px;
        line-height: 1.25;
        letter-spacing: .1px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #header.zheader-single .zsingle-brand-sub b,
    #header.zheader-single .zsingle-brand-sub strong {
        color: var(--zl-text-sub-2);
    }

    #header.zheader-single .zsingle-brand-sub i,
    #header.zheader-single .zsingle-brand-sub em {
        color: #0084ff;
        font-style: normal;
    }

    #header.zheader-single .brand {
        display: none;
    }

    /* 单行导航：紧挨 LOGO 之后，占满中间弹性空间。
       横向排列、不换行，超出部分由导航自身横向滚动兜底。 */
    #header .znav-inline {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: center;
        min-width: 0;
        margin: 0 8px;
        overflow-x: auto;
        /* 隐藏横向滚动条但保留可滚动能力（触控板 / 竖屏窄桌面仍可用） */
        scrollbar-width: none;
    }

    #header .znav-inline::-webkit-scrollbar {
        display: none;
    }

    #header .znav-inline .nav-item {
        flex: 0 0 auto;
    }

    #header .znav-inline .nav-link {
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 14px;
        line-height: 1.6;
        white-space: nowrap;
    }

    #header .znav-inline .nav-link:hover {
        background: var(--zl-primary-soft);
        color: #0084ff;
    }

    #header .znav-inline .nav-item.active .nav-link {
        color: #0084ff;
        font-weight: 600;
        background: var(--zl-primary-soft);
    }

    /* 右侧图标区与用户区贴成一组，紧靠页头右端。
       两边都留 auto 会让 flex 把空白均分成两段（图标与用户区之间一段、
       导航与图标区之间一段），看起来就是「搜索/发文离消息头像很远」。
       这里把 auto 只给图标区、清掉用户区的 auto（1416 行那条），
       空白便全部落在导航与图标区之间，右侧两簇自然合并。 */
    #header.zheader-single .znav-actions {
        margin-left: auto;
    }

    #header.zheader-single #nav .znav-user {
        margin-left: 0;
    }
}

/* ---------- 单行头部：图标动作区（搜索 / 写文章） ---------- */
/* 图标按钮与用户区同处一行右侧，统一尺寸与悬停反馈 */
#header .znav-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
}

#header .znav-actions .nav-item {
    display: flex;
    align-items: center;
}

#header .znav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    font-size: 16px;
    color: var(--zl-text-muted);
    background: transparent;
    transition: color .15s ease, background-color .15s ease;
}

#header .znav-icon-btn:hover {
    color: #0084ff;
    background: var(--zl-primary-soft);
}

#header .znav-icon-btn:focus-visible {
    outline: 2px solid #0084ff;
    outline-offset: 2px;
}

/* ---------- 单行头部：搜索图标 → 向下弹出搜索框 ----------
   点图标后搜索框从图标下方弹出（而非把输入框挤在图标左侧同行展开）：
   同行展开会推挤右侧的消息与头像，弹层则完全不影响那一行的排布。
   用 visibility + opacity + translateY 过渡，配合 visibility 的延迟切换，
   收起后不可点、也不参与键盘 Tab 序列（display 切换会打断过渡动画）。 */
.znav-search-item {
    position: relative;
    display: flex;
    align-items: center;
}

/* 图标按钮右侧补一个「展开中」的高亮态，明确当前已打开 */
.znav-search-item.is-open .znav-search-open {
    color: #0084ff;
    background: var(--zl-primary-soft);
}

.znav-search-form {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    width: 300px;
    padding: 8px;
    border: 1px solid var(--zl-border);
    border-radius: 10px;
    background: var(--zl-surface);
    box-shadow: 0 8px 24px rgba(18, 18, 18, .12);
    flex-wrap: nowrap;

    /* 收起态 */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

.znav-search-item.is-open .znav-search-form {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    /* 展开时 visibility 立即生效，过渡结束才生效的延迟只用于收起 */
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}

.znav-search-form .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    border-radius: 8px 0 0 8px;
    font-size: 14px;
}

.znav-search-form .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 36px;
    padding: 0;
    border-radius: 0 8px 8px 0;
}

/* 窄屏：单行头部的这些部件都不渲染（PHP 端已带 d-lg-* 类兜底），
   这里再显式收掉，防止只改了 PHP 条件时残留 */
@media (max-width: 991px) {
    #header .znav-inline,
    #header .znav-actions {
        display: none !important;
    }
}

/* ---------- 文章详情：点赞 / 点踩 / 收藏 ---------- */
.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: var(--zl-text-sub-3);
    background: var(--zl-surface);
    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: var(--zl-primary-soft-2);
}

/* 已赞同：蓝底白字 */
.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: 991.98px) {
    #header.zheader-single .zsingle-brand {
        max-width: 220px;
    }

    #header.zheader-single .zsingle-brand-ico {
        width: 28px;
        height: 28px;
        margin-right: 7px;
    }

    #header.zheader-single .zsingle-brand-copy .logo-text {
        font-size: 1.05rem;
    }

    #header.zheader-single .zsingle-brand-copy img.logo-2 {
        max-width: 150px;
        max-height: 22px;
    }

    #header.zheader-single .zsingle-brand-sub {
        max-width: 150px;
        font-size: 9px;
    }
}

@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: var(--zl-text-muted);
}

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

.zmsg-readall {
    padding: 0;
    border: 0;
    font-size: 13px;
    color: var(--zl-text-muted);
    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 var(--zl-border-soft);
}

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

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

/* 已读：整体转为灰度，视觉上"退到后面" */
.zmsg-item.is-read {
    color: var(--zl-text-muted-2);
}

.zmsg-item.is-read .zmsg-title a,
.zmsg-item.is-read .zmsg-title {
    color: var(--zl-text-muted-2);
    font-weight: 400;
}

.zmsg-item.is-read .zmsg-icon {
    color: #c3ccd8;
    background: var(--zl-surface-soft);
}

.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: var(--zl-primary-soft);
}

.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: var(--zl-text-muted);
    background: var(--zl-surface-soft);
}

.zmsg-content {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--zl-text-sub-3);
    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: var(--zl-text-muted);
}

.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: var(--zl-text-muted);
    border-bottom: 1px dashed var(--zl-border-soft);
}

.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 var(--zl-border-soft);
}

.zsign-hint {
    margin: 10px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--zl-text-muted);
}

/* 最近签到 / 签到榜 列表 */
.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: var(--zl-text-muted-2);
}

.zsign-recent-time,
.zsign-rank-days {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--zl-text-muted);
}

.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;
}

/* ---------- 个人资料卡顶部签到条 ---------- */
/* 叠在渐变头部，不参与正文排版 */
#bgcolor {
    position: relative;
}

.zside-profile-sign {
    position: absolute;
    top: 10px;
    right: 10px;
    left: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.zside-profile-sign-text {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.zside-profile-sign-text i,
.zside-profile-sign-text b {
    color: #fff;
}

.zside-profile-sign-text b {
    font-size: 15px;
}

.zside-profile-sign-done {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    white-space: nowrap;
}

.zside-profile-sign .btn {
    flex: 0 0 auto;
    padding: 3px 12px;
    border: 0;
    color: #006eff;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    font-size: 12px;
}

.zside-profile-sign .btn:hover,
.zside-profile-sign .btn:focus {
    color: #0056cc;
    background: #fff;
}

/* 个人资料卡：昵称身份、经验等级、数据统计 */
.zside-profile-role {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    min-height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    color: var(--zl-text-muted);
    background: var(--zl-surface-soft);
    vertical-align: middle;
}

.zside-profile-role.is-admin {
    color: #0084ff;
    background: var(--zl-primary-soft);
}

.zside-profile-level {
    margin-top: 12px;
    padding: 10px 11px;
    border: 1px solid var(--zl-border-soft);
    border-radius: 8px;
    background: var(--zl-surface-soft);
}

.zside-profile-level-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.zside-profile-level-name {
    min-width: 0;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--zl-text-sub);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zside-profile-level-exp {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--zl-text-muted);
    white-space: nowrap;
}

.zside-profile-level-bar {
    height: 6px;
    margin: 8px 0 6px;
    border-radius: 999px;
    background: var(--zl-surface);
    overflow: hidden;
}

.zside-profile-level-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #006eff, #13adff);
}

.zside-profile-level-foot {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--zl-text-muted);
}

.zside-profile-level-foot span {
    margin: 0 2px;
    color: var(--zl-text-faint);
}

.zside-profile-level-foot b {
    color: #0084ff;
}

.zside-profile-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--zl-border-soft);
    text-align: center;
}

.zside-profile-stats>div {
    min-width: 0;
}

.zside-profile-stats span {
    display: block;
    font-size: 12px;
    color: var(--zl-text-muted);
}

.zside-profile-stats b {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    font-size: 15px;
    color: var(--zl-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 页签 */
.zside-tabs {
    display: flex;
    border-top: 1px solid var(--zl-border-soft);
    border-bottom: 1px solid var(--zl-border-soft);
    background: var(--zl-surface-soft);
}

.zside-tabs a {
    flex: 1;
    padding: 9px 0;
    text-align: center;
    font-size: 13px;
    color: var(--zl-text-muted);
}

.zside-tabs a.active {
    color: #0084ff;
    font-weight: 600;
    background: var(--zl-surface);
}

.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: var(--zl-text-sub);
    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: var(--zl-text-muted-2);
}

.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;
}

/* ---------- 侧栏会员榜卡 ----------
   使用侧栏统一的 .zside-tabs / .zside-pane / .zside-users 样式，
   这里只补卡片外框与多个可配置页签下的排布差异。 */
.zside-member {
    margin-bottom: 1rem;
    overflow: hidden;
}

/* 页签数量可配置，等分后每格更窄：
   收一点字号与左右内边距，保证三字标签不折行 */
.zside-member .zside-tabs a {
    padding: 9px 2px;
    font-size: 12.5px;
    white-space: nowrap;
}

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

.header-dropdown .my_option ul li a i {
    margin-right: 5px;
    color: var(--zl-text-muted-2);
}

.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;
}

/* ---------- 正文隐藏内容锁定框（短代码 [x_content]） ---------- */
.zhide {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 1.1rem 0;
    padding: 16px 18px;
    border: 1px dashed #c7dbf5;
    border-radius: 8px;
    background: linear-gradient(135deg, #f4f9ff, #fbfdff);
}

.zhide-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #0084ff;
    background: var(--zl-primary-soft);
}

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

.zhide-title {
    font-size: 14px;
    line-height: 1.6;
    color: var(--zl-text);
}

.zhide-meta {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--zl-text-muted);
}

.zhide-meta b {
    color: #0084ff;
    font-weight: 600;
}

.zhide-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--zl-text-muted-3);
}

.zhide-hint-warn {
    color: #e4574f;
}

.zhide-hint a {
    color: #0084ff;
    text-decoration: underline;
}

/* 正文容器内的按钮是 <a>，会被 .zpost-body a 命中：后者 (0,1,1) 高于单独的
   .zhide-btn (0,1,0)，会把按钮静止态的 padding-bottom 压成 1px 并叠上一条
   虚线底边。这里按 .tags 的做法（见上方 L2539 注释）补上 .zhide 前缀，
   把整条规则提到 (0,2,0) 压过正文链接样式。 */
.zhide .zhide-btn,
.zhide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 6px 18px;
    border: 0;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.6;
    color: #fff !important;
    background: #0084ff;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .2s ease;
}

/* 悬停加深底色。必须带上 .zhide 前缀把特异性提到 (0,3,0)：
   .zpost-body a:hover 是 (0,2,1)，而单独的 .zhide-btn:hover 只有 (0,2,0)，
   会被它压过 —— 按钮的蓝色底被换成正文链接的浅蓝底 (#f2f8ff)，圆角也被
   压成 2px 并补一条实线底边，配上这里的白字几乎看不见，表现就是
   「鼠标移上去按钮变形」。圆角与底边必须在这里再声明一次。 */
.zhide .zhide-btn:hover,
.zhide-btn:hover {
    background: #0068cc;
    color: #fff;
    border-radius: 999px;
    border-bottom: 0;
}

.zhide-btn:disabled {
    opacity: .65;
    cursor: default;
}

/* ---------- 投稿页：插入隐藏内容弹窗 ---------- */
.zhide-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zhide-opt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--zl-border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

.zhide-opt:hover {
    border-color: #b9d8ff;
    background: var(--zl-primary-soft-2);
}

.zhide-opt input {
    margin-top: 3px;
    flex: 0 0 auto;
}

.zhide-opt-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.zhide-opt-body b {
    font-size: 14px;
    color: var(--zl-text);
}

.zhide-opt-body em {
    font-style: normal;
    font-size: 12px;
    color: var(--zl-text-muted);
    margin-top: 2px;
}

/* 选中项整块高亮，避免只靠单选框的状态表达选中。
   用 JS 同步的 is-active 类而非 :has()，兼容旧浏览器。 */
.zhide-opt.is-active {
    border-color: #0084ff;
    background: var(--zl-primary-soft-2);
}

/* 等级门槛：两个下拉框成组，与上方的类型列表留出间距 */
#zhide-level-wrap {
    margin-top: 14px;
}

#zhide-level-wrap .form-group:last-child {
    margin-bottom: 0;
}

/* ---------- 正文外链提示框 ---------- */
.zext-tip {
    font-size: 14px;
    line-height: 1.7;
    color: var(--zl-text-sub-2);
}

.zext-url-wrap {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--zl-surface-soft);
}

.zext-url-label {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--zl-text-muted);
    line-height: 1.6;
}

/* 目标网址可能很长，允许换行并打断长串，避免撑破弹窗 */
.zext-url {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: #0084ff;
    word-break: break-all;
}

/* ---------- 评论工具栏：快捷回复 / 表情 ----------
   类名用 zcmt- 与 zqr- 前缀：zquick 这套已被首页「快捷入口」占用
   （那里的 .zquick-label 是竖排标签），复用会互相干扰。 */
.zcmt-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.zcmt-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    border: 1px solid var(--zl-border);
    border-radius: 999px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--zl-text-sub);
    background: var(--zl-surface);
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

.zcmt-btn:hover {
    color: #0084ff;
    border-color: #b9d8ff;
}

/* 展开时图标旋转，提示当前是展开态 */
.zcmt-btn.is-open i {
    transform: rotate(180deg);
}

.zcmt-btn i {
    transition: transform .2s ease;
}

/* 快捷回复短语面板 */
.zqr-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.zqr-item {
    display: inline-block;
    max-width: 100%;
    padding: 3px 12px;
    border: 1px solid var(--zl-border);
    border-radius: 999px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--zl-text-sub);
    background: var(--zl-surface);
    cursor: pointer;
    /* 短语过长时截断显示，避免按钮把评论框撑变形 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.zqr-item:hover {
    color: #0084ff;
    border-color: #b9d8ff;
    background: var(--zl-primary-soft-2);
}

/* ---------- 评论表情（Fluent Emoji） ---------- */
/* 评论正文里渲染出的表情图：与文字在同一基线上，不撑高行距。
   选择器必须写到 .message .zemoji 这个层级：正文样式里的
   `.message img`（第 98 行）优先级更高，会把 height 覆盖成 auto
   （原图 32×32 被 max-width 缩到 20px 宽后高度就错了），
   还会带上 1px 灰边框和 .6rem 的上下外边距 —— 那正是表情
   偏上、且和文字对不齐的原因。

   尺寸用 em 而不是 px：正文 15px 字号下 1.35em ≈ 20px，
   这样站长若调整正文字号，表情会跟着缩放、始终保持对齐。 */
.message .zemoji,
.markdown .zemoji,
.zemoji {
    display: inline-block;
    width: 1.35em;
    height: 1.35em !important;
    max-width: none;
    margin: 0 .1em;
    /* 让图标中心对齐汉字墨迹中心。汉字墨迹中心在基线之上约 0.35em
       （15px 下约 5.2px），图标高 1.35em，故盒底需落在基线上方约
       0.33em 处；用负值即把图标从基线往下压这么多。

       取值 -0.31em 是用 7 种常见中英字体（微软雅黑 / 宋体 / 黑体 /
       Arial / PingFang / Noto Sans CJK / 主题字体栈）实测墨迹中心后
       极小化最大偏差得到的：各字体残差都在 0.3px 内。之前写的
       -0.44em 方向过头，图标中心比汉字低 1.0~1.7px，即用户看到的
       表情偏下、和文字有高低差。 */
    vertical-align: -.31em;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
    cursor: text;
}

.zemoji-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 6px;
    padding: 8px;
    border: 1px solid var(--zl-border);
    border-radius: 8px;
    background: var(--zl-surface-soft);
}

.zemoji-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

.zemoji-item:hover {
    background: var(--zl-primary-soft);
    transform: translateY(-1px);
}

.zemoji-item img {
    width: 24px;
    height: 24px;
    display: block;
}

@media (max-width: 575px) {
    .zemoji-item {
        width: 30px;
        height: 30px;
    }

    .zemoji-item img {
        width: 22px;
        height: 22px;
    }
}


/* ---------- 用户中心：积分明细 ---------- */
.zcred-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--zl-border-soft);
}

.zcred-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-radius: 8px;
    background: var(--zl-surface-soft);
}

.zcred-label {
    font-size: 12px;
    color: var(--zl-text-muted);
}

.zcred-value {
    margin-top: 4px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.zcred-balance {
    color: #0084ff;
}

.zcred-in {
    color: #2ba471;
}

.zcred-out {
    color: #e4574f;
}

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

.zcred-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--zl-border-soft);
}

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

.zcred-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 14px;
}

/* 获得用绿、消耗用红，图标底色同步区分，不只靠符号表达 */
.zcred-icon.is-in {
    color: #2ba471;
    background: var(--zl-success-bg);
}

.zcred-icon.is-out {
    color: #e4574f;
    background: var(--zl-danger-bg-2);
}

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

.zcred-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.zcred-title {
    font-size: 14px;
    color: var(--zl-text);
    word-break: break-word;
}

.zcred-title a {
    color: var(--zl-text);
    text-decoration: none;
}

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

.zcred-delta {
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.zcred-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
    font-size: 12px;
    color: var(--zl-text-muted-3);
}

.zcred-type {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    color: #0084ff;
    background: var(--zl-primary-soft);
}

@media (max-width: 575px) {
    .zcred-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .zcred-cell {
        padding: 10px 4px;
    }

    .zcred-value {
        font-size: 17px;
    }

    .zcred-meta {
        gap: 8px;
    }
}

/* ---------- 微语页（page_twitter.php） ---------- */
/* 顶部发布框 + 下方时间轴列表。
   时间轴以「头像就是节点」表达：每条的头像固定在左侧一列，头像之间用竖线
   相连，右侧是内容卡。头像列宽度由 --ztl-gutter 统一控制，发布框的头像也
   对齐到同一列，上下视觉连成一条线。 */

.ztl-compose-card {
    /* 头像尺寸：与时间轴的头像列共用同一变量，保证发布框头像与下方节点对齐 */
    --ztl-avatar: 38px;
    margin-bottom: 1rem;
}

.ztl-guest {
    margin-bottom: 1rem;
}

/* ---------- 发布框 ---------- */
.ztl-compose {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* 与时间轴的头像列同宽同尺寸，形成对齐 */
.ztl-compose-avatar {
    flex: 0 0 var(--ztl-avatar);
    display: block;
    width: var(--ztl-avatar);
    height: var(--ztl-avatar);
    border-radius: 50%;
    overflow: hidden;
    background: var(--zl-surface-soft);
}

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

.ztl-compose-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* 输入区：无边框大字号，聚焦时用底色 + 描边提示，不用浏览器默认蓝框 */
.ztl-compose-input {
    display: block;
    width: 100%;
    min-height: 84px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--zl-text);
    background: var(--zl-surface-soft);
    resize: vertical;
    transition: border-color .15s ease, background-color .15s ease;
}

.ztl-compose-input::placeholder {
    color: var(--zl-text-muted-3);
}

.ztl-compose-input:focus {
    outline: none;
    border-color: #0084ff;
    background: var(--zl-surface);
}

/* 图片缩略预览 */
.ztl-compose-preview {
    margin-top: 10px;
}

.ztl-compose-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ztl-thumb {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--zl-surface-soft);
}

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

.ztl-thumb-del {
    position: absolute;
    top: 3px;
    right: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    cursor: pointer;
    transition: background-color .15s ease;
}

.ztl-thumb-del:hover {
    background: rgba(0, 0, 0, .78);
}

/* 底部工具条：左工具 + 计数，右状态提示 + 发布按钮 */
.ztl-compose-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

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

.ztl-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    font-size: 16px;
    color: #0084ff;
    background: var(--zl-primary-soft);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.ztl-tool:hover {
    background: var(--zl-primary-soft-3);
}

/* 展开态：表情面板打开时按钮保持高亮，明确「当前已展开」 */
.ztl-tool.is-open {
    color: #fff;
    background: #0084ff;
}

.ztl-tool:focus-visible {
    outline: 2px solid #0084ff;
    outline-offset: 2px;
}

.ztl-tool:disabled {
    opacity: .55;
    cursor: default;
}

.ztl-compose-count {
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--zl-text-muted-2);
}

.ztl-compose-count.is-over {
    color: #e64545;
}

.ztl-compose-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ztl-compose-msg {
    font-size: 12.5px;
    color: var(--zl-text-muted-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ztl-compose-msg.is-ok {
    color: #2fa84f;
}

.ztl-compose-msg.is-err {
    color: #e64545;
}

/* ---------- 未登录提示卡 ---------- */
.ztl-guest-body {
    display: flex;
    align-items: center;
    gap: 14px;
}

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

.ztl-guest-text {
    flex: 1 1 auto;
    min-width: 0;
}

.ztl-guest-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--dark);
}

.ztl-guest-desc {
    margin-top: 2px;
    font-size: 13px;
    color: var(--zl-text-muted);
}

/* ---------- 时间轴 ---------- */
.ztl {
    --ztl-gutter: 54px;
    --ztl-avatar: 38px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ztl-item {
    position: relative;
    padding-left: var(--ztl-gutter);
    margin-bottom: 14px;
}

.ztl-item:last-child {
    margin-bottom: 0;
}

/* 连接线：从本条第 38px（头像下沿）一直画到下一条的头像上沿。
   bottom 取负的 margin-bottom，正好补进条目间隙，形成连续的一条线；
   最后一条不画，线在末尾自然收住。 */
.ztl-item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: var(--ztl-avatar);
    bottom: -14px;
    left: calc(var(--ztl-avatar) / 2 - 1px);
    width: 2px;
    background: var(--zl-border);
}

/* 头像即节点：钉在左侧头像列 */
.ztl-node {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: var(--ztl-avatar);
    height: var(--ztl-avatar);
    border-radius: 50%;
    overflow: hidden;
    background: var(--zl-surface-soft);
}

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

/* 内容卡：淡描边取代重阴影，更贴近时间轴的「轻」气质 */
.ztl-card {
    padding: 13px 16px;
    border: 1px solid var(--zl-border-soft);
    border-radius: 10px;
    background: var(--zl-surface);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.ztl-card:hover {
    border-color: var(--zl-border);
    box-shadow: var(--zl-shadow);
}

/* 头部一行：昵称 · 置顶 · 时间（时间推到最右，靠点分隔） */
.ztl-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.ztl-name {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .15s ease;
}

.ztl-name:hover {
    color: #0084ff;
    text-decoration: none;
}

.ztl-time {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 12px;
    color: var(--zl-text-muted-2);
    white-space: nowrap;
}

.ztl-badge {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    color: #0084ff;
    background: var(--zl-primary-soft);
}

/* 正文：复用 .message 的排版，收掉首尾多余外边距 */
.ztl-body {
    font-size: 14.5px;
    word-break: break-word;
}

.ztl-body>*:first-child {
    margin-top: 0;
}

.ztl-body>*:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   微语相册 / 缩略图（微博/朋友圈式自适应九宫格，点击放大）
   ========================================================================== */
.ztl-thumbs {
    margin-top: 10px;
    margin-bottom: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 单张图片：比例缩略图，最大宽 260px、高 220px，绝不再撑满整行/全屏 */
.ztl-thumbs-1 {
    display: block;
}

.ztl-thumbs-1 .ztl-thumb {
    max-width: 260px;
    max-height: 220px;
    width: fit-content;
    height: auto;
}

.ztl-thumbs-1 .ztl-thumb img {
    max-width: 260px;
    max-height: 220px;
    width: auto;
    height: auto;
    object-fit: cover;
}

/* 两张图片：两列并排 */
.ztl-thumbs-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 140px));
}

.ztl-thumbs-2 .ztl-thumb {
    width: 140px;
    height: 140px;
}

/* 三张图片：三列并排 */
.ztl-thumbs-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 120px));
}

.ztl-thumbs-3 .ztl-thumb {
    width: 120px;
    height: 120px;
}

/* 四张图片：经典 2x2 宫格（田字格） */
.ztl-thumbs-4 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 130px));
}

.ztl-thumbs-4 .ztl-thumb {
    width: 130px;
    height: 130px;
}

/* 五张及以上（五至九宫格）：三列流式排布 */
.ztl-thumbs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 110px));
}

.ztl-thumbs-grid .ztl-thumb {
    width: 110px;
    height: 110px;
}

/* 缩略图项基础样式 */
.ztl-thumb {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--zl-surface-soft, #f4f5f7);
    border: 1px solid var(--zl-border);
    cursor: zoom-in;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform .2s ease, box-shadow .2s ease;
    user-select: none;
    -webkit-user-select: none;
}

.ztl-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: transform .3s ease;
}

/* 悬停微动效 */
.ztl-thumb:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

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

/* 放大镜角标指示器 */
.ztl-thumb-zoom {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.ztl-thumb:hover .ztl-thumb-zoom {
    opacity: 1;
    transform: scale(1);
}

/* 兜底：若微语正文中存在未转入相册的常规图片，强制限制为缩略图大小并支持点击放大 */
.ztl-body img:not(.zemoji) {
    max-width: 260px !important;
    max-height: 220px !important;
    width: auto !important;
    height: auto !important;
    object-fit: cover;
    display: inline-block !important;
    vertical-align: middle;
    border-radius: 8px;
    border: 1px solid var(--zl-border);
    margin: 6px 6px 6px 0 !important;
    cursor: zoom-in;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform .2s ease, box-shadow .2s ease;
}

.ztl-body img:not(.zemoji):hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* ---------- 移动端 ---------- */
@media (max-width: 575px) {

    .ztl-compose-card,
    .ztl {
        --ztl-gutter: 44px;
        --ztl-avatar: 30px;
    }

    .ztl-compose {
        gap: 12px;
    }

    .ztl-compose-input {
        min-height: 76px;
        font-size: 14.5px;
    }

    .ztl-card {
        padding: 12px 13px;
    }

    /* 工具条在窄屏折行：按钮与计数一行，发布按钮独占一行靠右 */
    .ztl-compose-bar {
        flex-wrap: wrap;
    }

    .ztl-compose-actions {
        flex: 1 1 100%;
        justify-content: flex-end;
    }

    .ztl-body img {
        max-height: 300px;
    }
}

/* 关闭动效偏好：去掉发布框与卡片的过渡 */
@media (prefers-reduced-motion: reduce) {

    .ztl-compose-input,
    .ztl-tool,
    .ztl-thumb-del,
    .ztl-card,
    .ztl-name {
        transition: none;
    }
}

/* ---------- 经验等级铭牌 ----------
   色阶共 8 档，由 --zl-level-{n}-fg / -bg 定义（见 z-dark.css 的变量组），
   等级超过 8 时取模循环取色。配色全部走变量，暗色模式自动适配。 */
.zl-level {
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.7;
    vertical-align: middle;
    white-space: nowrap;
}

.zl-level-1 { color: var(--zl-level-1-fg); background: var(--zl-level-1-bg); }
.zl-level-2 { color: var(--zl-level-2-fg); background: var(--zl-level-2-bg); }
.zl-level-3 { color: var(--zl-level-3-fg); background: var(--zl-level-3-bg); }
.zl-level-4 { color: var(--zl-level-4-fg); background: var(--zl-level-4-bg); }
.zl-level-5 { color: var(--zl-level-5-fg); background: var(--zl-level-5-bg); }
.zl-level-6 { color: var(--zl-level-6-fg); background: var(--zl-level-6-bg); }
.zl-level-7 { color: var(--zl-level-7-fg); background: var(--zl-level-7-bg); }
.zl-level-8 { color: var(--zl-level-8-fg); background: var(--zl-level-8-bg); }

/* 铭牌后附带经验数字（默认不开启，见 x_lanwan_level_badge 的 $showExp） */
.zl-level-exp {
    display: inline-block;
    margin-left: 5px;
    font-size: 11px;
    color: var(--zl-text-muted);
    vertical-align: middle;
}

/* 图片铭牌：与文字铭牌保持相同的垂直对齐与左边距，切换显示方式时位置不跳。
   只约束高度，宽度自适应（不同等级的图片宽高比可能不同）。 */
.zl-level-img {
    display: inline-block;
    height: 20px;
    max-width: 100%;
    margin-left: 6px;
    vertical-align: middle;
    object-fit: contain;
}

/* 用户中心：等级进度卡 */
.zl-level-card {
    margin-bottom: 12px;
    padding: 16px 18px;
    background: var(--zl-surface);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(18, 18, 18, .06);
}

.zl-level-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* 卡片里的铭牌是块首元素，不需要左边距（文字与图片两种形态都要处理） */
.zl-level-card-head .zl-level,
.zl-level-card-head .zl-level-img {
    margin-left: 0;
}

.zl-level-card-exp {
    font-size: 12.5px;
    color: var(--zl-text-muted);
    white-space: nowrap;
}

/* 当前经验数值高亮，「/ 下一级门槛」保持弱化，形成主次对比 */
.zl-level-card-exp b {
    font-size: 15px;
    color: #0084ff;
}

.zl-level-card-sep {
    margin: 0 2px;
    color: var(--zl-text-faint);
}

/* 当前等级 → 下一等级 */
.zl-level-card-route {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--zl-text-muted);
}

.zl-level-card-route i {
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--zl-text-faint);
}

.zl-level-card-route-current,
.zl-level-card-route-next {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zl-level-card-route-current {
    color: var(--zl-text-sub);
    font-weight: 600;
}

.zl-level-card-route-next {
    flex: 1 1 auto;
    color: #0084ff;
    font-weight: 600;
}

.zl-level-bar {
    height: 8px;
    margin: 12px 0 8px;
    border-radius: 999px;
    background: var(--zl-surface-soft);
    overflow: hidden;
}

.zl-level-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #006eff, #13adff);
    transition: width .4s ease;
}

.zl-level-card-foot {
    font-size: 12.5px;
    color: var(--zl-text-muted);
}

.zl-level-card-foot b {
    color: #0084ff;
}

/* 窄屏：进度卡收紧内边距，统计格从四列变两列时留白更协调 */
@media (max-width: 575px) {
    .zl-level-card {
        padding: 14px 14px;
    }
}

/* ---------- 悬赏问答 ----------
   设计语言：金币色（金 → 琥珀），与「积分」语义绑定，也和「新/热」徽章的
   橙红拉开区别 —— 悬赏是「有价值的东西挂在那」，用金更有份量。
   详情页的已采纳状态转为青绿，表示「已兑现 / 收尾」。
   颜色全部走变量，暗色模式自动适配。 */

/* 文章列表底部的悬赏标识 */
.zbounty-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: .75rem;
    font-style: normal;
    line-height: 1.4;
    padding: 0 .35rem;
    border-radius: .2rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--zl-gold-fg);
    background: var(--zl-gold-bg);
}

.zbounty-badge i {
    font-size: .8em;
    line-height: 1;
}

/* 文章详情页的悬赏信息条 */
.zbounty-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px 18px;
    border-radius: 10px;
    background: var(--zl-gold-bg);
    border: 1px solid var(--zl-gold-border);
}

.zbounty-bar.is-closed {
    background: var(--zl-bounty-done-bg);
    border-color: var(--zl-bounty-done-border);
}

/* 左侧金币图标：圆形金底，突出「这是一笔悬赏」 */
.zbounty-bar-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    box-shadow: 0 2px 6px rgba(245, 158, 11, .3);
}

.zbounty-bar.is-closed .zbounty-bar-icon {
    background: linear-gradient(135deg, #34d399, #10b981);
    box-shadow: 0 2px 6px rgba(16, 185, 129, .28);
}

.zbounty-bar-body {
    flex: 1 1 auto;
    min-width: 0;
}

.zbounty-bar-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--zl-text);
}

/* 金额用更大字号 + 金币色，作为整条信息的主角 */
.zbounty-bar-title b {
    color: var(--zl-gold-fg);
    font-size: 19px;
    font-weight: 700;
    margin: 0 2px;
}

.zbounty-bar-desc {
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--zl-text-muted);
}

/* 右侧状态标签：描边式，比实底更克制 */
.zbounty-bar-tag {
    flex: 0 0 auto;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--zl-gold-fg);
    border: 1px solid var(--zl-gold-border);
    background: var(--zl-surface);
}

.zbounty-bar.is-closed .zbounty-bar-tag {
    color: var(--zl-bounty-done-fg);
    border-color: var(--zl-bounty-done-border);
}

/* 评论里的「采纳」按钮：做成轻量描边按钮，不再是一行灰字 */
.zbounty-accept {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.6;
    cursor: pointer;
    color: var(--zl-gold-fg) !important;
    border: 1px solid var(--zl-gold-border);
    background: var(--zl-gold-bg);
    transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.zbounty-accept i {
    font-size: 11px;
}

.zbounty-accept:hover {
    color: #fff !important;
    border-color: transparent;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    transform: translateY(-1px);
}

/* 被采纳的评论：金底 + 左侧金色高亮条，与「答案」的珍贵感呼应 */
li.post.is-best {
    position: relative;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--zl-gold-bg);
}

li.post.is-best::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
}

/* 评论里的「最佳答案」徽章 */
.zbounty-best {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.8;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--zl-bounty-done-fg);
    background: var(--zl-bounty-done-bg);
}

/* ---------- 悬赏弹窗（投稿页） ---------- */
.zbounty-modal .modal-title i {
    color: var(--zl-gold-fg);
    margin-right: 2px;
}

.zbounty-modal .modal-header {
    border-bottom: 1px solid var(--zl-border-soft);
}

.zbounty-modal-tip {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--zl-text-sub);
    background: var(--zl-gold-bg);
    border-left: 3px solid #f59e0b;
}

.zbounty-modal-tip b {
    color: var(--zl-gold-fg);
}

.zbounty-modal-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--zl-text-sub);
}

/* 输入框：金币图标 + 输入区的组合 */
.zbounty-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--zl-border);
    border-radius: 8px;
    background: var(--zl-input-bg);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.zbounty-input-wrap:focus-within {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .14);
}

.zbounty-input-wrap i {
    flex: 0 0 auto;
    font-size: 15px;
    color: var(--zl-gold-fg);
}

.zbounty-input-wrap .zbounty-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 0;
    border: none;
    outline: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--zl-text);
    background: transparent;
}

.zbounty-modal-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--zl-text-muted);
}

/* 快捷档位 */
.zbounty-modal-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.zbounty-quick {
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    cursor: pointer;
    color: var(--zl-text-sub);
    border: 1px solid var(--zl-border);
    background: var(--zl-surface);
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.zbounty-quick:hover {
    color: var(--zl-gold-fg);
    border-color: var(--zl-gold-border);
    background: var(--zl-gold-bg);
}

/* 悬赏积分标签：胶囊基础样式已由上面的 .zwrite-bar-btn 提供，
   这里只叠加「金色」语义 —— 未设置时与其它按钮同为中性色，
   鼠标悬停与已设置状态下转金色，形成状态反馈。 */
.zwrite-bar .zbounty-bar-btn:hover,
.zwrite-bar .zbounty-bar-btn.is-set {
    color: var(--zl-gold-fg);
    border-color: var(--zl-gold-border);
    background: var(--zl-gold-bg);
}

/* 已设置金额时数额加重，未设置时不加粗，避免空白状态也显得「已生效」 */
.zwrite-bar .zbounty-bar-btn b {
    font-weight: 600;
}

/* 投稿页：已挂悬赏的只读提示 */
.zbounty-note {
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--zl-text-sub);
    background: var(--zl-gold-bg);
    border-left: 3px solid #f59e0b;
}

.zbounty-note b {
    color: var(--zl-gold-fg);
}

/* ---------- 标题前缀弹窗（投稿页） ---------- */
.zprefix-modal .modal-title i {
    color: #0084ff;
    margin-right: 2px;
}

.zprefix-modal .modal-header {
    border-bottom: 1px solid var(--zl-border-soft);
}

.zprefix-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--zl-border-soft);
    border-radius: 8px;
    background: var(--zl-surface-soft);
}

.zprefix-preview-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--zprefix-text-color, #fff);
    background: var(--zprefix-color, #0084ff);
}

.zprefix-preview-badge.is-empty {
    color: var(--zl-text-muted);
    background: var(--zl-surface);
    border: 1px dashed var(--zl-border);
}

.zprefix-preview-title {
    min-width: 0;
    overflow: hidden;
    color: var(--zl-text);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zprefix-modal-field+.zprefix-modal-field {
    margin-top: 16px;
}

.zprefix-modal-field>label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--zl-text-sub);
}

#zprefix-input {
    border-color: var(--zl-border);
    border-radius: 8px;
}

#zprefix-input:focus {
    border-color: #0084ff;
    box-shadow: 0 0 0 3px rgba(0, 132, 255, .12);
}

.zprefix-colors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.zprefix-swatch {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid var(--zl-surface);
    border-radius: 50%;
    background: var(--zprefix-color);
    box-shadow: 0 0 0 1px var(--zl-border);
    cursor: pointer;
    transition: box-shadow .18s ease, transform .18s ease;
}

.zprefix-swatch:hover {
    transform: translateY(-1px);
}

.zprefix-swatch.is-active {
    box-shadow: 0 0 0 2px var(--zl-surface), 0 0 0 4px var(--zprefix-color);
}

.zprefix-custom-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    border: 1px solid var(--zl-border);
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    background: var(--zl-surface);
}

.zprefix-custom-color input {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: transparent;
}

.zprefix-modal-footer .btn-link {
    margin-right: auto;
    padding-left: 0;
    color: var(--zl-text-muted);
}

/* 工具栏上的标题前缀按钮：设置后保留蓝色语义，颜色圆点反馈实际颜色 */
.zwrite-bar .zprefix-bar-btn.is-set {
    color: #0084ff;
    border-color: var(--zl-primary-soft-4);
    background: var(--zl-primary-soft);
}

.zprefix-dot {
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--zprefix-picked-color, #0084ff);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.zprefix-bar-btn.is-set .zprefix-dot {
    display: inline-block;
}

/* ---------- 统一提示弹窗（替代原生 alert / confirm） ---------- */
.zui-dialog .modal-content {
    padding: 26px 22px 18px;
    border: none;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .16);
}

.zui-dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    font-size: 24px;
}

/* 三种语义色：信息蓝 / 成功绿 / 警示红 */
.zui-dialog-icon.is-info {
    color: #0084ff;
    background: var(--zl-primary-soft);
}

.zui-dialog-icon.is-success {
    color: #16a34a;
    background: var(--zl-new-badge-bg);
}

.zui-dialog-icon.is-danger {
    color: #dc2626;
    background: var(--zl-danger-bg);
}

.zui-dialog-title {
    margin-bottom: 6px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--zl-text);
}

.zui-dialog-text {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--zl-text-muted);
    word-break: break-word;
}

.zui-dialog-text b {
    color: var(--zl-gold-fg);
    font-size: 15px;
}

.zui-dialog-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.zui-dialog-btn {
    flex: 1 1 0;
    padding: 9px 0;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity .18s ease, background-color .18s ease, color .18s ease;
}

.zui-dialog-btn.is-ghost {
    color: var(--zl-text-sub);
    background: var(--zl-surface-soft);
}

.zui-dialog-btn.is-ghost:hover {
    color: var(--zl-text);
    background: var(--zl-border);
}

.zui-dialog-btn.is-primary {
    color: #fff;
    background: linear-gradient(135deg, #006eff, #13adff);
}

.zui-dialog-btn.is-danger {
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.zui-dialog-btn.is-primary:hover,
.zui-dialog-btn.is-danger:hover {
    opacity: .88;
}

/* 窄屏：信息条与弹窗收紧留白，避免小屏过于拥挤 */
@media (max-width: 575px) {
    .zbounty-bar {
        gap: 10px;
        padding: 12px 14px;
    }

    .zbounty-bar-icon {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .zbounty-bar-title b {
        font-size: 17px;
    }

    /* 状态标签在窄屏折到下一行，避免挤压正文 */
    .zbounty-bar {
        flex-wrap: wrap;
    }
}

/* ---------- 悬赏问答归档页（page_bounty.php） ----------
   每条记录 = 问题（标题 + 悬赏额）+ 最佳答案（回答者 + 正文）+ 元信息。
   沿用金币色语言，与详情页信息条、列表徽章保持同一套视觉。 */

/* ---------- 悬赏问答精选（归档页 page_bounty.php） ---------- */
.zbq-hero {
    position: relative;
    margin-bottom: 20px;
    padding: 24px 28px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fffcf5 0%, #fef8eb 50%, #fdf2d8 100%);
    border: 1px solid var(--zl-gold-border);
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.08);
    overflow: hidden;
}

.zbq-hero::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.zbq-hero-body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.zbq-hero-main {
    flex: 1 1 320px;
}

.zbq-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--zl-gold-fg);
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 999px;
    margin-bottom: 8px;
}

.zbq-hero-title {
    margin: 0 0 6px;
    font-size: 1.38rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--zl-text);
}

.zbq-hero-desc {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--zl-text-sub);
}

.zbq-hero-stats {
    flex: 0 0 auto;
}

.zbq-hero-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
}

.zbq-hero-stat-num {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--zl-gold-fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.zbq-hero-stat-label {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--zl-text-muted);
}

/* 空状态卡片 */
.zbq-empty-card {
    border-radius: 12px;
    border: 1px solid var(--zl-border-soft);
    box-shadow: 0 2px 10px rgba(18, 18, 18, 0.04);
}

.zbq-empty-wrap {
    padding: 48px 20px;
    text-align: center;
}

.zbq-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--zl-gold-bg);
    border: 1px solid var(--zl-gold-border);
    color: var(--zl-gold-fg);
    font-size: 28px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12);
}

.zbq-empty-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--zl-text);
    margin-bottom: 6px;
}

.zbq-empty-desc {
    font-size: 13.5px;
    color: var(--zl-text-muted);
    margin-bottom: 20px;
}

/* 问答列表容器 */
.zbq-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zbq-item {
    margin-bottom: 16px;
    padding: 20px 22px;
    border-radius: 12px;
    background: var(--zl-surface);
    border: 1px solid var(--zl-border-soft);
    box-shadow: 0 2px 8px rgba(18, 18, 18, 0.04);
    transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.zbq-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
}

/* ---- 问题标题行 ---- */
.zbq-q {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--zl-border-soft);
}

.zbq-q-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.28);
}

.zbq-q-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--zl-text);
    text-decoration: none;
    transition: color 0.15s ease;
}

.zbq-q-title:hover {
    color: #f59e0b;
}

/* 悬赏额金币胶囊 */
.zbq-q-credit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--zl-gold-fg);
    background: var(--zl-gold-bg);
    border: 1px solid var(--zl-gold-border);
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08);
}

.zbq-q-credit i {
    color: #f59e0b;
}

.zbq-q-credit b {
    font-weight: 700;
}

/* ---- 最佳答案区 ---- */
.zbq-a {
    margin-top: 14px;
    padding: 14px 18px;
    border-radius: 10px;
    background: var(--zl-surface-soft);
    border-left: 4px solid #10b981;
    box-shadow: inset 0 0 0 1px var(--zl-border-soft);
}

.zbq-a-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.zbq-a-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--zl-bounty-done-fg);
    background: var(--zl-bounty-done-bg);
    border: 1px solid var(--zl-bounty-done-border);
}

.zbq-a-user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--zl-text);
    text-decoration: none;
    transition: color 0.15s ease;
}

.zbq-a-user img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--zl-border);
}

.zbq-a-user:hover {
    color: #0084ff;
}

.zbq-a-level {
    display: inline-flex;
    align-items: center;
}

.zbq-a-time {
    margin-left: auto;
    font-size: 12px;
    color: var(--zl-text-muted);
}

/* 答案正文 */
.zbq-a-body {
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--zl-text-sub);
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zbq-a-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.zbq-answer-empty {
    color: var(--zl-text-muted);
    font-style: italic;
}

/* ---- 底部元信息 ---- */
.zbq-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--zl-border-soft);
    font-size: 12.5px;
    color: var(--zl-text-muted);
}

.zbq-asker-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.zbq-asker-user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--zl-text-sub);
    text-decoration: none;
    transition: color 0.15s ease;
}

.zbq-asker-user:hover {
    color: var(--zl-primary);
}

.zbq-asker-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
}

.zbq-asker-label {
    color: var(--zl-text-muted);
    font-size: 12px;
}

.zbq-asker-name {
    font-weight: 500;
}

.zbq-asker-time {
    color: var(--zl-text-muted);
    font-size: 12px;
}

.zbq-dot {
    margin: 0 2px;
    opacity: 0.6;
}

.zbq-meta-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: #0084ff;
    background: var(--zl-primary-soft);
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.zbq-meta-link i {
    transition: transform 0.2s ease;
}

.zbq-meta-link:hover {
    color: #ffffff;
    background: #0084ff;
}

.zbq-meta-link:hover i {
    transform: translateX(3px);
}

/* ---- 响应式适配 ---- */
@media (max-width: 575px) {
    .zbq-hero {
        padding: 18px 16px;
    }
    .zbq-hero-title {
        font-size: 1.2rem;
    }
    .zbq-hero-stats {
        width: 100%;
    }
    .zbq-hero-stat-card {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding: 8px 14px;
    }
    .zbq-hero-stat-num {
        font-size: 1.35rem;
    }
    .zbq-item {
        padding: 14px 14px;
    }
    .zbq-q {
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .zbq-q-title {
        flex: 1 1 100%;
        order: -1;
        font-size: 14.5px;
    }
    .zbq-a {
        padding: 12px 12px;
    }
    .zbq-a-time {
        margin-left: 0;
        flex: 1 1 100%;
    }
    .zbq-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .zbq-meta-link {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- 图片懒加载 (LazyLoad) ---------- */
img.zlazy {
    transition: opacity 0.35s ease, filter 0.35s ease;
    background-color: var(--zl-surface-soft);
}

img.zlazy.zlazy-loading {
    opacity: 0.65;
    filter: blur(1.5px);
}

img.zlazy.zlazy-loaded {
    opacity: 1;
    filter: none;
}

img.zlazy.zlazy-error {
    opacity: 0.8;
    object-fit: contain;
    background-color: var(--zl-surface-soft);
}