/* 自动生成，切勿直接编辑；来源：main.css + home.css + post.css + comment.css + zm-ext.css + dark.css + about.css + archive.css + links.css + zouxin.css + memos.css + guestbook.css + subscribe.css + page-hero.css */
/* ===== main.css ===== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    scrollbar-width: thin;
}

:root {
    --bg-page: #F7F4EE;
    --bg-page-alt: #F2EEE8;
    --bg-card: #FBFAF7;
    --bg-soft: #F2EEE8;
    --bg-float: #FBFAF7;
    --text-primary: #3E3934;
    --text-body: #4B463F;
    --text-secondary: #8C857D;
    --text-muted: #A49D95;
    --line-primary: #DDD6CC;
    --line-secondary: #E7E1D8;
    --line-soft: #EEE9E2;
    --ink-decor: #B8B1A8;
    --accent-brown: #6E4F2F;
    --accent-gold: #A78C63;
    --accent-red: #9A5548;
    --control-bg: #FBFAF7;
    --control-text: #6F685F;
    --control-border: #DDD6CC;
    --control-shadow: 0 4px 12px rgba(62, 57, 52, 0.06);
    --control-hover-bg: #F2EEE8;
    --control-hover-text: #3E3934;
    --control-hover-border: #CFC7BC;
    --control-hover-shadow: 0 6px 16px rgba(62, 57, 52, 0.10);
    --control-active-bg: #3E3934;
    --control-active-text: #F7F4EE;
    --control-active-border: #3E3934;
    --control-active-shadow: 0 8px 18px rgba(62, 57, 52, 0.16);
    --control-disabled-bg: #F7F4EE;
    --control-disabled-text: #B8B1A8;
    --control-disabled-border: #E7E0D7;
    --control-disabled-shadow: none;
    --float-bg: rgba(251, 250, 247, 0.88);
    --float-icon: #6F685F;
    --float-border: rgba(221, 214, 204, 0.9);
    --float-shadow: 0 8px 20px rgba(62, 57, 52, 0.08);
    --float-hover-bg: #F2EEE8;
    --float-hover-icon: #3E3934;
    --float-hover-border: #D2CABE;
    --float-hover-shadow: 0 10px 24px rgba(62, 57, 52, 0.12);
    --float-active-bg: #EAE4DA;
    --float-active-icon: #2F2B27;
    --float-active-border: #C8BFB2;
    --float-active-shadow: 0 6px 16px rgba(62, 57, 52, 0.10);
    --page-width: 800px;
    --font-logo: "user_font", "汉仪尚巍手书", "HYShangWeiShouShuW", "STKaiti", "Kaiti SC", "Songti SC", serif;
    --font-main: "user_font", "LXGW WenKai Screen", "霞鹜文楷 屏幕阅读版", "Noto Serif SC", "Songti SC", "Microsoft YaHei", sans-serif;
    --tp-bg: url("../static/images/home-bg.jpg");
    --main: var(--text-primary);
    --margin: 1.25rem;
    --hover: var(--accent-brown);
    --radius: 10px;
    --bg-color: var(--accent-brown);
    font-size: 16px;
    background: var(--bg-page);
    color: var(--text-primary);
}

:root[data-theme="dark"] {
    --bg-page: #1E1E1E;
    --bg-page-alt: #252525;
    --bg-card: #2A2A2A;
    --bg-soft: #333333;
    --bg-float: #2A2A2A;
    --text-primary: #EAEAEA;
    --text-body: #CCCCCC;
    --text-secondary: #999999;
    --text-muted: #777777;
    --line-primary: #3A3A3A;
    --line-secondary: #444444;
    --line-soft: #555555;
    --ink-decor: #888888;
    --accent-brown: #D7A46B;
    --accent-gold: #FFC66B;
    --accent-red: #E57C6A;
    --control-bg: #2A2A2A;
    --control-text: #EAEAEA;
    --control-border: #444444;
    --control-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    --control-hover-bg: #333333;
    --control-hover-text: #FFFFFF;
    --control-hover-border: #666666;
    --control-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    --control-active-bg: #555555;
    --control-active-text: #FFFFFF;
    --control-active-border: #777777;
    --control-active-shadow: 0 8px 18px rgba(0, 0, 0, 0.7);
    --control-disabled-bg: #2A2A2A;
    --control-disabled-text: #555555;
    --control-disabled-border: #3A3A3A;
    --float-bg: rgba(42, 42, 42, 0.88);
    --float-icon: #CCCCCC;
    --float-border: rgba(60, 60, 60, 0.9);
    --float-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    --float-hover-bg: #333333;
    --float-hover-icon: #FFFFFF;
    --float-hover-border: #555555;
    --float-hover-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
    --float-active-bg: #555555;
    --float-active-icon: #FFFFFF;
    --float-active-border: #666666;
    --float-active-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    --tp-bg: linear-gradient(rgba(30, 30, 30, .88), rgba(30, 30, 30, .88)), url("../static/images/home-bg.jpg");
    --main: var(--text-primary);
    --hover: var(--accent-brown);
    --bg-color: var(--accent-brown);
    color-scheme: dark;
}

::placeholder {
    color: var(--text-muted);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
    background-color: var(--ink-decor);
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(62, 57, 52, .08);
    border-radius: 10px;
    background-color: var(--bg-soft);
    display: none;
}

::-webkit-scrollbar-track-piece {
    display: none;
}

#site-search-container {
    --ink-decor: #B8B1A8;
    --bg-soft: #F2EEE8;
    color-scheme: light;
    scrollbar-color: #B8B1A8 #F2EEE8;
}

::-moz-selection {
    color: #fff;
    background: var(--bg-color);
}

::selection {
    color: #fff;
    background: var(--bg-color);
}

body {
    font-family: var(--font-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-width: 0;
    background: var(--bg-page);
    color: var(--text-primary);
}

html,
body {
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: var(--main);
}

a:hover {
    color: var(--accent-brown);
    text-shadow: none;
    text-decoration: underline dotted;
    text-underline-offset: 0.3em;
}

.tp-post-article .post_content a:not([class]),
.ztj-about-page .ztj-story a:not([class]),
.ztj-about-page .mx_timeline_content a:not([class]) {
    color: var(--accent-brown);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: background-color .18s ease, color .18s ease;
}

.tp-post-article .post_content a:not([class]):hover,
.ztj-about-page .ztj-story a:not([class]):hover,
.ztj-about-page .mx_timeline_content a:not([class]):hover {
    background: color-mix(in srgb, var(--accent-brown) 16%, transparent);
    color: var(--text-primary);
}

a.card:hover {
    /* background-color: var(--bg-color);
    color: #e6dece!important; */
}

li {
    list-style: none;
}

input,
textarea,
select {
    font-family: var(--font-main);
    list-style: none;
    font-size: 16px;
    border: unset;
    padding: 0.5rem;
    height: auto;
    line-height: 1.25rem;
    color: var(--main);
    background: unset;
    width: 100%;
}

.title_block_title svg,
.cat_menu svg {
    width: 1.15rem;
}

.ztj-memos-title {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.ztj-leaf {
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    color: var(--accent-gold);
}

.ztj-rss-hero-main {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.ztj-rss-hero-icon {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    color: var(--accent-gold);
}

img {
    max-width: 100%;
    height: auto;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

video,
iframe,
embed,
object {
    max-width: 100%;
}

img.lazyloading {
    -webkit-filter: blur(2rem);
    filter: blur(2rem);
    opacity: 0;
}

img.lazyloaded {
    filter: blur(0);
    -webkit-filter: blur(0);
    opacity: 1;
    display: block;
}

h1 {
    font-size: 1.75rem;
    margin: 2rem 0;
}

.user {
    display: flex;
    align-items: center;
}

.avatar {
    width: 2.75rem;
    height: 2.75rem;
    vertical-align: middle;
    -o-object-fit: cover;
    object-fit: cover;
}

.cat_menu {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 10;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 2rem;
    margin-top: 1.75rem;
    box-shadow: 5px 5px 0 -2px var(--ink-decor), 5px 5px var(--ink-decor) !important;
    padding: 0.6em;
}

.cat_menu .left {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.cat_menu .left .description {
    font-size: 14px;
    line-height: 25px;
}

.cat_menu .right {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.1rem;
}

@media (min-width:768px) {
    .cat_menu {
        padding: 1.5em;
    }
}

#search {
    padding: 3rem 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: clamp(0.6rem, 2.4vw, 1rem);
    border-top: 1px solid var(--main);
    border-bottom: 1px solid var(--main);
    margin: 20px 0;
}

@media (max-width: 650px) {
    #search {
        padding: 1.5rem 0;
    }
    #search button {
        flex: 0 0 4.75rem;
        width: 4.75rem;
    }
}

#search input {
    font-size: 1.1rem;
}

#search button {
    width: 6rem;
    background: unset;
    cursor: pointer;
}

#search button:hover {
    background: var(--bg-color);
    color: #fff;
}

#search button svg {
    width: 1.5rem;
    color: black;
}

#search button:hover svg {
    fill: #fff;
}

.footer {
    width: 100%;
    text-align: center;
    padding-top: 20px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled) {
    cursor: pointer;
}

@media (max-width: 360px) {
    html {
        --margin: 0.875rem;
    }
}

*[cat_title]:hover {
    overflow: visible;
    cursor: pointer;
}

*[cat_title] {
    overflow: hidden;
    position: relative;
}

*[cat_title]:hover:before,
*[cat_title]:hover:after {
    opacity: 1;
    transform: translate3d(-50%, -3px, 0);
}

*[cat_title]:before,
*[cat_title]:after {
    position: absolute;
    z-index: 10;
    opacity: 0;
    transform: translate3d(-50%, 0, 0);
    transition: 300ms ease;
}

*[cat_title]:before {
    content: attr(cat_title);
    top: calc(-1.5em - 6px - 5px);
    left: 50%;
    padding: 3px 6px;
    line-height: 1.5;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 1rem;
    white-space: nowrap;
    box-sizing: content-box;
    pointer-events: none;
    letter-spacing: 0;
}

.float-right {
    position: fixed;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(22px, env(safe-area-inset-bottom));
    z-index: 1500;
    display: grid;
    gap: 10px;
}

.operator-button {
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--float-border);
    border-radius: 50%;
    background: var(--float-bg);
    box-shadow: var(--float-shadow);
    color: var(--float-icon);
    cursor: pointer;
    transition: opacity .22s ease, transform .22s ease, border-color .22s ease, background-color .22s ease, color .22s ease, box-shadow .22s ease;
}

.operator-button:hover {
    border-color: var(--float-hover-border);
    background: var(--float-hover-bg);
    box-shadow: var(--float-hover-shadow);
    color: var(--float-hover-icon);
    transform: translateY(-2px) scale(1);
}

#themeToggleBtn {
    display: inline-flex;
}

#themeToggleBtn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

#themeToggleBtn .tp-icon-moon {
    fill: currentColor;
    stroke: none;
}

#themeToggleBtn .tp-icon-sun {
    display: none;
}

:root[data-theme="dark"] #themeToggleBtn .tp-icon-moon {
    display: none;
}

:root[data-theme="dark"] #themeToggleBtn .tp-icon-sun {
    display: block;
}

#postTocBtn.is-active {
    border-color: var(--float-active-border);
    background: var(--float-active-bg);
    box-shadow: var(--float-active-shadow);
    color: var(--float-active-icon);
    transform: translateY(-2px) scale(1);
}

.post-toc-panel {
    position: fixed;
    right: max(76px, calc(env(safe-area-inset-right) + 76px));
    bottom: max(22px, env(safe-area-inset-bottom));
    z-index: 1400;
    width: min(250px, calc(100vw - 112px));
    max-height: min(320px, calc(100vh - 72px));
    overflow: hidden;
    border: 1px solid var(--line-primary);
    border-radius: 12px;
    background: var(--bg-card);
    box-shadow: 0 18px 42px rgba(62, 57, 52, .14);
    color: var(--text-body);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(.98);
    transform-origin: right bottom;
    transition: opacity .2s ease, transform .2s ease;
}

.post-toc-panel.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.post-toc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-secondary);
}

.post-toc-head strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}

.post-toc-title-icon {
    width: 17px;
    height: 17px;
    stroke-width: 1.9;
}

#postTocClose {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--text-secondary);
    cursor: pointer;
}

.post-toc-list {
    display: grid;
    gap: 1px;
    max-height: 268px;
    overflow-y: auto;
    padding: 7px;
}

.post-toc-link {
    position: relative;
    display: block;
    padding: 6px 9px;
    padding-left: 20px;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
    text-decoration: none;
}

.post-toc-link::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
    transform: translateY(-50%);
}

.post-toc-link:hover {
    background: var(--bg-soft);
    color: var(--accent-brown);
    text-decoration: none;
}

.post-toc-link.level-h2 {
    padding-left: 30px;
}

.post-toc-link.level-h2::before {
    left: 19px;
}

.post-toc-link.level-h3 {
    padding-left: 40px;
    color: #8a7d70;
}

.post-toc-link.level-h3::before {
    left: 29px;
}

@media (max-width: 640px) {
    .post-toc-panel {
        right: max(16px, env(safe-area-inset-right));
        bottom: max(184px, calc(env(safe-area-inset-bottom) + 184px));
        width: min(270px, calc(100vw - 32px));
        max-height: min(310px, calc(100vh - 120px));
    }
}

/* 正文/标题字体规则（原为每页内联 <style>，2026-10-17 外提到此处） */
html,body,.main_screen,.cat_menu,.title_block_title,.tp-post-article{font-family:"LXGW WenKai Screen","霞鹜文楷 屏幕阅读版","user_font","Noto Serif SC","Songti SC","Microsoft YaHei",sans-serif}pre,pre *,code,code *{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}

/* ===== home.css ===== */
/* tp-riven home */

body {
    box-sizing: border-box;
    min-height: 100vh;
    letter-spacing: 0;
    background-image: none;
    padding-top: 18px;
}

body::before {
    content: "";
    position: fixed;
    inset: -4px;
    z-index: 0;
    pointer-events: none;
    background-color: var(--bg-page);
    background-image: var(--tp-bg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--bg-soft) 50%, transparent);
    opacity: .18;
    background-size: auto, 28px 28px, 34px 34px;
}

.main_screen {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(var(--page-width), calc(100% - 64px));
    max-width: none;
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0 auto;
    padding-bottom: 30px;
}

main {
    width: 100%;
    margin: 0 auto;
    flex: 1 0 auto;
}

a {
    color: var(--text-primary);
    transition: color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}

a:hover {
    color: var(--accent-gold);
    text-shadow: none;
    text-decoration: none;
}

.cat_menu.tp-header {
    position: static;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 68px;
    margin: 0 auto;
    padding: 0 0 17px;
    border: 0;
    border-bottom: 1px solid var(--line-primary);
    border-radius: 0;
    box-shadow: none !important;
    background: transparent;
    overflow: visible;
}

.tp-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: fit-content;
    min-width: max-content;
    color: #1F1A17;
    white-space: nowrap;
}

.tp-brand:hover {
    color: #1F1A17;
}

.tp-brand-text {
    color: #1F1A17;
    font-family: var(--font-logo);
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
}

.tp-brand.has-sub {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    white-space: normal;
}

.tp-brand-sub {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .04em;
}

.tp-brand-logo {
    display: block;
    width: auto;
    height: 50px;
    max-width: 220px;
    object-fit: contain;
}

.tp-brand-logo.tp-brand-logo-dark {
    display: none;
}

:root[data-theme="dark"] .tp-brand-logo.tp-brand-logo-light.has-dark-logo {
    display: none;
}

:root[data-theme="dark"] .tp-brand-logo.tp-brand-logo-dark {
    display: block;
}

.tp-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    color: var(--text-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    white-space: nowrap;
}

.tp-nav-item {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.tp-nav-link {
    position: relative;
    color: var(--text-body);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 9px;
    transition: background-color .2s ease, color .2s ease;
}

.tp-nav-link.is-active {
    color: var(--accent-brown);
}

.tp-nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 1px;
    height: 2px;
    border-radius: 999px;
    background: var(--accent-brown);
}

.tp-nav-caret {
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform .22s ease;
}

.tp-subnav {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 30;
    min-width: 132px;
    padding: 8px 9px;
    border: 1px solid var(--line-secondary);
    border-radius: 8px;
    background: var(--bg-card);
    box-shadow: 0 14px 30px rgba(62, 57, 52, 0.1);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 6px);
    transition: opacity .18s ease, transform .18s ease;
}

.tp-subnav::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}

.tp-subnav-link {
    position: relative;
    display: block;
    margin: 2px 0;
    padding: 8px 13px;
    border-radius: 8px;
    color: var(--text-body);
    font-size: 13px;
    line-height: 20px;
    text-align: left;
}

.tp-subnav-link.is-active {
    color: var(--accent-brown);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-brown) 13%, var(--bg-card)), color-mix(in srgb, var(--accent-gold) 12%, var(--bg-soft)));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-brown) 8%, transparent);
}

.tp-nav-item.has-children:hover .tp-subnav,
.tp-nav-item.has-children:focus-within .tp-subnav,
.tp-nav-item.has-children.is-open .tp-subnav {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.tp-nav-item.has-children:hover .tp-nav-caret,
.tp-nav-item.has-children:focus-within .tp-nav-caret,
.tp-nav-item.has-children.is-open .tp-nav-caret {
    transform: rotate(225deg) translate(-2px, -2px);
}

.site-search {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-width: 32px;
    line-height: 1;
    margin-left: 0;
}

.search-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5F5750;
    border-radius: 50%;
    line-height: 1;
    cursor: pointer;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.search-toggle svg {
    display: block;
    width: 16px;
    height: 16px;
}

.tp-nav-link:hover,
.tp-nav-link.is-active:hover,
.search-toggle:hover {
    color: var(--accent-brown);
}

:root[data-theme="dark"] .search-toggle {
    color: var(--text-body);
}

:root[data-theme="dark"] .search-toggle:hover {
    color: var(--accent-brown);
    background: rgba(51, 51, 51, .78);
}

.tp-subnav-link:hover {
    background: var(--bg-soft);
    color: var(--accent-brown);
}

.tp-subnav-link.is-active:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-brown) 13%, var(--bg-card)), color-mix(in srgb, var(--accent-gold) 12%, var(--bg-soft)));
}

.tp-nav-more {
    display: inline-flex;
}

.tp-nav-more[hidden] {
    display: none !important;
}

.tp-nav-more-toggle {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.tp-nav-more.is-open .tp-subnav {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

/* ===== 移动端抽屉导航（桌面隐藏；窄屏在 home.css @media 里接管） ===== */
.tp-menu-toggle {
    display: none;
}
.tp-drawer-head {
    display: none;
}
.tp-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(28, 20, 12, .42);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.tp-nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.home-notice {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    height: 44px;
    margin: 20px 0;
    padding: 0 18px 0 16px;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    background: var(--bg-card);
    box-shadow: var(--control-shadow);
    color: var(--control-text);
    overflow: hidden;
}

.home-notice::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
}

.home-notice-icon {
    position: relative;
    z-index: 1;
    width: 17px;
    height: 17px;
    color: var(--accent-brown);
    fill: currentColor;
    opacity: .88;
}

.home-notice-arrow {
    position: relative;
    z-index: 1;
    width: 10px;
    height: 10px;
    border-top: 1px solid var(--control-text);
    border-right: 1px solid var(--control-text);
    opacity: .62;
    transform: rotate(45deg);
}

.home-notice-viewport {
    position: relative;
    z-index: 1;
    height: 22px;
    overflow: hidden;
}

.home-notice-track p {
    display: none;
    height: 22px;
    margin: 0;
    overflow: hidden;
    color: var(--control-text);
    font-size: 15px;
    line-height: 22px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-notice-track p.active {
    display: block;
}

.home-sticky-carousel {
    position: relative;
    margin: 0 0 20px;
}

.home-sticky-carousel.is-first-home-block {
    margin-top: 20px;
}

.home-sticky-viewport {
    position: relative;
    min-height: 146px;
    border: 1px solid var(--line-primary);
    border-radius: 8px;
    background: var(--bg-card);
    box-shadow: 0 10px 26px rgba(62, 57, 52, .035);
    overflow: hidden;
}

.home-sticky-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(150px, 34%) minmax(0, 1fr);
    align-items: center;
    gap: clamp(12px, 2.5vw, 20px);
    padding: clamp(12px, 2vw, 14px) clamp(12px, 3vw, 22px) clamp(14px, 2vw, 14px) clamp(12px, 2vw, 16px);
    opacity: 0;
    pointer-events: none;
    transform: translateX(12px);
    transition: opacity .42s ease, transform .42s ease;
}

.home-sticky-slide.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.home-sticky-cover {
    display: block;
    height: clamp(104px, 20vw, 150px);
    border-radius: 6px;
    border: 1px solid var(--line-secondary);
    background-color: var(--bg-soft);
    box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--bg-card) 18%, transparent);
    overflow: hidden;
}

.home-sticky-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.home-sticky-content {
    min-width: 0;
    align-self: center;
}

.home-sticky-badge {
    position: absolute;
    top: 16px;
    right: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--accent-brown) 18%, transparent);
    border-radius: 5px;
    background: var(--accent-brown);
    box-shadow: 0 6px 14px rgba(74, 48, 25, .16);
    color: #FFF8EC;
    font-size: 13px;
    font-weight: 600;
    line-height: 24px;
    text-shadow: 0 1px 1px rgba(50, 32, 16, .26);
    transition: background-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.home-sticky-slide:hover .home-sticky-badge {
    background: var(--accent-brown);
    box-shadow: 0 8px 18px rgba(74, 48, 25, .22);
    transform: translateY(-1px);
}

.home-sticky-content h2 {
    margin: 0;
    color: #332922;
    font-size: clamp(18px, 3.2vw, 24px);
    font-weight: 600;
    line-height: 1.32;
}

.home-sticky-content p {
    margin: 8px 0 0;
    overflow: hidden;
    color: #77695d;
    font-size: clamp(12px, 2.2vw, 14px);
    line-height: 1.75;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

:root[data-theme="dark"] .home-notice-track p,
:root[data-theme="dark"] .home-sticky-content h2,
:root[data-theme="dark"] .home-sticky-content h2 a,
:root[data-theme="dark"] .home-sticky-content p {
    color: var(--text-body);
}

:root[data-theme="dark"] .home-sticky-content h2 a:hover {
    color: var(--accent-brown);
}

:root[data-theme="dark"] .home-sticky-badge {
    border-color: rgba(215, 164, 107, .72);
    background: var(--accent-brown);
    color: #1E1E1E !important;
    text-shadow: none;
}

.home-sticky-dots {
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 2;
    display: flex;
    gap: 6px;
    transform: translateX(-50%);
}

.home-sticky-dots button {
    width: 18px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-brown) 22%, transparent);
    cursor: pointer;
    transition: width .22s ease, background-color .22s ease;
}

.home-sticky-dots button.is-active {
    width: 28px;
    background: color-mix(in srgb, var(--accent-brown) 76%, transparent);
}

.home-sticky-nav {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-brown) 82%, transparent);
    box-shadow: 0 8px 18px rgba(80, 64, 48, .16);
    cursor: pointer;
    opacity: .88;
    transform: translateY(-50%);
    transition: background-color .2s ease, box-shadow .2s ease, opacity .2s ease, transform .2s ease;
}

.home-sticky-nav::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--bg-card);
    border-left: 2px solid var(--bg-card);
}

.home-sticky-prev {
    left: 12px;
}

.home-sticky-next {
    right: 12px;
}

.home-sticky-prev::before {
    transform: translate(-35%, -50%) rotate(-45deg);
}

.home-sticky-next::before {
    transform: translate(-65%, -50%) rotate(135deg);
}

.home-sticky-nav:hover,
.home-sticky-nav:focus-visible {
    background: var(--accent-brown);
    box-shadow: 0 10px 22px rgba(80, 64, 48, .22);
    opacity: 1;
    transform: translateY(-50%) scale(1.06);
}

.home-sticky-nav:focus-visible {
    outline: 2px solid rgba(123, 91, 56, .3);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .home-sticky-nav {
        opacity: 0;
        pointer-events: none;
    }
    .home-sticky-carousel:hover .home-sticky-nav,
    .home-sticky-carousel:focus-within .home-sticky-nav {
        opacity: .88;
        pointer-events: auto;
    }
    .home-sticky-carousel:hover .home-sticky-nav:hover,
    .home-sticky-carousel:focus-within .home-sticky-nav:focus-visible {
        opacity: 1;
    }
}

.home-posts {
    position: relative;
    border: 1px solid var(--line-secondary);
    border-radius: 8px;
    background: var(--bg-card);
    box-shadow: 0 8px 22px rgba(62, 57, 52, 0.025);
    overflow: hidden;
    backdrop-filter: blur(1px);
}

.home-posts.is-first-home-block {
    margin-top: 20px;
}

.home-layout.has-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 14px;
    align-items: start;
}

.home-main {
    min-width: 0;
}

.content-layout.has-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
    align-items: start;
}

.content-main {
    min-width: 0;
}

.content-layout.sidebar-post .home-sidebar {
    margin-top: 20px;
}

.home-sidebar {
    min-width: 0;
    font-size: 14px;
}

.home-layout.is-first-home-layout .home-sidebar {
    margin-top: 20px;
}

.home-sidebar>section+section {
    margin-top: 14px;
}

.home-profile-card {
    overflow: hidden;
    border: 1px solid var(--line-primary);
    border-radius: 10px;
    background: var(--bg-card);
    box-shadow: 0 8px 22px rgba(62, 57, 52, .025);
}

.home-profile-cover {
    display: block;
    width: 100%;
    height: 118px;
    object-fit: cover;
}

.home-profile-body {
    padding: 0 16px 15px;
}

.home-profile-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: -38px;
    position: relative;
}

.home-profile-avatar {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    border: 3px solid var(--bg-card);
    border-radius: 50%;
    background: var(--bg-card);
    object-fit: cover;
}

.home-profile-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-soft);
    color: var(--accent-brown);
    font-size: 20px;
    font-weight: 600;
}

.home-profile-name-row {
    align-self: flex-end;
    align-items: center;
    display: inline-flex;
    gap: 7px;
    margin: 0 0 8px 2px;
    min-width: 0;
}

.home-profile-identity strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.35;
    white-space: nowrap;
}

.home-profile-status {
    align-items: center;
    color: var(--text-secondary);
    display: inline-flex;
    font-size: 12px;
    gap: 6px;
    line-height: 1.2;
    white-space: nowrap;
}

.home-profile-status i {
    background: #9da6a0;
    border-radius: 50%;
    display: block;
    height: 6px;
    width: 6px;
}

.home-profile-status.is-online {
    color: #3f946e;
}

.home-profile-status.is-online i {
    background: #3f946e;
}

.home-profile-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    left: 54px;
    position: absolute;
    top: 54px;
    width: 20px;
    z-index: 1;
}

.home-profile-verified svg {
    display: block;
    height: 100%;
    width: 100%;
}

.home-profile-bio {
    margin: 16px 0 14px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-profile-socials {
    align-items: center;
    border-top: 1px solid var(--line-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 2px;
    padding-top: 12px;
}

.home-profile-socials a {
    align-items: center;
    border-radius: 50%;
    color: var(--text-secondary);
    display: inline-flex;
    height: 28px;
    justify-content: center;
    transition: background-color .16s ease, color .16s ease;
    width: 28px;
}

.home-profile-socials a:hover {
    background: var(--bg-soft);
    color: var(--accent-brown);
}

.home-profile-socials svg {
    fill: none;
    height: 19px;
    max-width: 19px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 19px;
}

.home-profile-socials svg * {
    fill: none !important;
    stroke: currentColor !important;
}

.home-sidebar-card {
    padding: 14px;
    border: 1px solid var(--line-secondary);
    border-radius: 8px;
    background: var(--bg-card);
    box-shadow: 0 8px 22px rgba(62, 57, 52, .025);
}

.home-sidebar-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 11px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.4;
}

.home-sidebar-title svg {
    width: 16px;
    height: 16px;
    fill: var(--accent-brown);
}

.home-sidebar-empty {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.home-hot-posts,
.home-recent-comments {
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-hot-posts li {
    display: grid;
    grid-template-columns: 13px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-height: 27px;
}

.home-hot-posts li+li,
.home-recent-comments li+li {
    margin-top: 8px;
}

.home-hot-post-rank {
    align-items: center;
    background: var(--bg-soft);
    border-radius: 2px;
    color: var(--text-secondary);
    display: inline-flex;
    font-size: 9px;
    font-variant-numeric: tabular-nums;
    height: 12px;
    justify-content: center;
    line-height: 1;
    width: 12px;
}

.home-hot-posts li:first-child .home-hot-post-rank {
    background: var(--accent-brown);
    color: #fff;
    font-weight: 700;
}

.home-hot-posts li:nth-child(2) .home-hot-post-rank {
    background: color-mix(in srgb, var(--accent-brown) 76%, var(--bg-card));
    color: #fff;
}

.home-hot-posts li:nth-child(3) .home-hot-post-rank {
    background: color-mix(in srgb, var(--accent-brown) 55%, var(--bg-card));
    color: #fff;
}

.home-hot-posts a {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-hot-posts a:hover {
    color: var(--accent-brown);
}

.home-recent-comments li {
    display: grid;
    align-items: center;
    gap: 7px;
    grid-template-columns: 11px minmax(0, 1fr) auto;
    min-height: 27px;
}

.home-recent-comments img {
    border: 1px solid var(--bg-card);
    height: 11px;
    border-radius: 50%;
    object-fit: cover;
    width: 11px;
}

.home-recent-comments li + li {
    margin-top: 8px;
}

.home-recent-comment-text {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.45;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-recent-comment-text b {
    color: var(--text-primary);
    font-weight: 500;
}

.home-recent-comments time {
    color: var(--text-secondary);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.home-site-stats {
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-site-stats li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 31px;
    border-bottom: 1px dashed var(--line-secondary);
    color: var(--text-secondary);
    font-size: 14px;
}

.home-site-stats li:last-child {
    border-bottom: 0;
}

.home-site-stats b {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.home-site-stat-label {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.home-site-stat-label svg {
    fill: none;
    flex: 0 0 auto;
    height: 15px;
    stroke: var(--accent-brown);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 15px;
}

.home-posts::before {
    content: "";
    position: absolute;
    left: clamp(22px, 3.2vw, 28px);
    top: 22px;
    bottom: 22px;
    width: 1px;
    background: color-mix(in srgb, var(--text-secondary) 42%, transparent);
}

.home-post {
    position: relative;
    min-height: clamp(66px, 9vw, 72px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    align-items: center;
    padding: 0 clamp(10px, 2.8vw, 22px) 0 0;
    border-bottom: 0;
    transition: background-color .22s ease;
}

.home-post::after {
    content: "";
    position: absolute;
    left: clamp(94px, 14.5vw, 116px);
    right: clamp(10px, 2.8vw, 22px);
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--line-secondary), color-mix(in srgb, var(--line-secondary) 44%, transparent));
}

.home-post:last-child {
    border-bottom: 0;
}

.home-post:last-child::after {
    display: none;
}

.home-post:hover {
    background: color-mix(in srgb, var(--bg-card) 36%, transparent);
}

.home-post::before {
    content: "";
    position: absolute;
    left: clamp(15px, 2.4vw, 21px);
    top: 50%;
    z-index: 1;
    width: 10px;
    height: 10px;
    border: 3px solid var(--text-secondary);
    border-radius: 50%;
    background: var(--bg-card);
    transform: translateY(-50%);
    box-shadow: 0 0 0 2px var(--bg-page), inset 0 0 0 2px var(--bg-card);
}

.home-post-link {
    min-width: 0;
    display: grid;
    grid-template-columns: clamp(94px, 14.5vw, 116px) minmax(0, 1fr);
    align-items: center;
    color: var(--text-primary);
}

.home-post-date {
    display: grid;
    justify-items: start;
    padding-left: clamp(40px, 6vw, 50px);
    color: #6E6258;
    line-height: 1;
}

.home-post-date span {
    color: #332B25;
    font-size: clamp(21px, 3vw, 24px);
    line-height: 1;
    font-weight: 400;
}

.home-post-date small {
    margin-top: 4px;
    color: #8B7C6E;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.home-post-title {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: clamp(0px, 1vw, 6px);
    font-size: clamp(14px, 2.1vw, 16px);
    font-weight: 600;
    line-height: clamp(22px, 3.2vw, 26px);
}

.home-post-link:hover .home-post-title {
    color: #5D4630;
}

.home-post-comments {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    min-width: 42px;
    color: #87786a;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    line-height: 16px;
    transition: color .22s ease;
}

.home-post:hover .home-post-comments {
    color: var(--accent-brown);
}

:root[data-theme="dark"] .home-posts {
    border-color: rgba(58, 58, 58, .95);
    background: #242424;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

:root[data-theme="dark"] .home-posts::before {
    background: rgba(215, 164, 107, .34);
}

:root[data-theme="dark"] .home-post {
    background: #242424;
}

:root[data-theme="dark"] .home-post:hover {
    background: #2B2B2B;
}

:root[data-theme="dark"] .home-post::after {
    background: linear-gradient(90deg, rgba(68, 68, 68, .9), rgba(68, 68, 68, .28));
}

:root[data-theme="dark"] .home-post::before {
    border-color: rgba(215, 164, 107, .55);
    background: #2B2B2B;
    box-shadow: 0 0 0 2px #1E1E1E, inset 0 0 0 2px #242424;
}

:root[data-theme="dark"] .home-post-link {
    color: var(--text-body);
}

:root[data-theme="dark"] .home-post-title,
:root[data-theme="dark"] .home-post-date,
:root[data-theme="dark"] .home-post-date span,
:root[data-theme="dark"] .home-post-date small,
:root[data-theme="dark"] .home-post-comments {
    color: var(--text-body);
}

:root[data-theme="dark"] .home-post:hover .home-post-title,
:root[data-theme="dark"] .home-post-link:hover .home-post-title {
    color: var(--accent-brown);
}

:root[data-theme="dark"] .home-post:hover .home-post-comments {
    color: var(--accent-brown);
}

.home-comment-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    background-color: currentColor;
    -webkit-mask: url("../static/images/comment.svg") center / contain no-repeat;
    mask: url("../static/images/comment.svg") center / contain no-repeat;
    opacity: .82;
    transform: translateY(1px);
}

.home-comment-icon::after {
    display: none;
    content: none;
}

.home-posts-template2::before {
    display: none;
}

.home-post-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 158px;
    gap: 24px;
    align-items: center;
    padding: 24px 22px;
    border-bottom: 1px solid var(--line-secondary);
}

.home-post-card:not(.has-cover) {
    grid-template-columns: 1fr;
}

.home-post-card:last-child {
    border-bottom: 0;
}

.home-post-card-title {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
}

.home-post-card-title a {
    color: inherit;
}

.home-post-card-excerpt {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.8;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.home-post-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    color: #9B9187;
    font-size: 13px;
}

.home-post-card-meta time,
.home-post-card-cats,
.home-post-card-views,
.home-post-card-comments {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.home-post-card-comments {
    margin-left: auto;
    color: inherit;
    text-decoration: none;
}

.home-post-card-comments:hover {
    color: var(--accent-brown);
    text-decoration: none;
}

:root[data-theme="dark"] .home-post-card-meta,
:root[data-theme="dark"] .home-post-card-comments {
    color: var(--text-body);
}

.home-post-card-meta svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-post-card-cover {
    width: 158px;
    aspect-ratio: 1.55/1;
    border-radius: 6px;
    overflow: hidden;
}

.home-post-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .24s ease;
}

.home-post-card-cover:hover img {
    transform: scale(1.02);
}

.home-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 40px 0;
}

.home-pagination li a,
.home-pagination-jump {
    display: inline-flex;
    align-items: center;
    height: 35px;
    border: 1px solid rgba(161, 137, 108, .24);
    border-radius: 5px;
    background: rgba(251, 250, 247, .72);
    box-shadow: none;
}

.home-pagination li a {
    justify-content: center;
    min-width: 35px;
    padding: 0;
    color: var(--control-text);
    font-size: 13px;
    line-height: 1;
}

.home-pagination li.prev a,
.home-pagination li.next a {
    min-width: 64px;
    padding: 0 8px;
    background: rgba(251, 250, 247, .82);
    text-align: center;
}

.home-page-text {
    display: inline;
}

.home-page-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-pagination li a[href]:hover {
    border-color: rgba(130, 101, 70, .42);
    background: rgba(242, 238, 232, .9);
    color: #5D4934;
}

.home-pagination li.active a {
    border-color: #8A7054;
    background: linear-gradient(145deg, #8D7254, #6C543B);
    box-shadow: none;
    color: #FFF8EC;
}

.home-pagination li:not(.active) a:not([href]) {
    border-color: rgba(161, 137, 108, .16);
    background: rgba(251, 250, 247, .58);
    color: var(--control-text);
    cursor: not-allowed;
}

.home-pagination-jump {
    width: 60px;
    background: rgba(251, 250, 247, .82);
    overflow: hidden;
    transition: width .22s ease, background-color .18s ease;
}

.home-pagination-jump:hover,
.home-pagination-jump:focus-within {
    border-color: rgba(130, 101, 70, .42);
    background: rgba(242, 238, 232, .9);
}

.home-pagination-jump input {
    width: 0;
    min-width: 0;
    height: 15px;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    line-height: 20px;
    text-align: left;
    opacity: 0;
    transform: translateX(8px);
    transition: width .24s ease, padding .24s ease, opacity .18s ease, transform .24s ease;
}

.home-pagination-jump input::-webkit-outer-spin-button,
.home-pagination-jump input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.home-pagination-jump:hover input,
.home-pagination-jump:focus-within input {
    width: 34px;
    padding: 0 4px;
    opacity: 1;
    transform: translateX(0);
}

.home-pagination-jump button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 60px;
    flex: 0 0 60px;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--control-text);
    font-size: 12px;
    transition: background-color .18s ease, color .18s ease, opacity .18s ease;
}

.home-pagination-jump:hover button,
.home-pagination-jump:focus-within button {
    width: 26px;
    flex-basis: 26px;
}

.home-pagination-jump:hover button span,
.home-pagination-jump:focus-within button span {
    display: none;
}

.home-pagination-jump button:disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.home-pagination-jump button:not(:disabled):hover {
    color: #5D4934;
}

.home-pagination-jump button:not(:disabled):hover .home-page-icon {
    stroke-width: 3;
    transform: translateX(1px);
}

.home-pagination-jump button:not(:disabled):active {
    color: #5F4932;
}

:root[data-theme="dark"] .home-pagination li a,
:root[data-theme="dark"] .home-pagination-jump {
    border-color: rgba(85, 85, 85, .86);
    background: rgba(42, 42, 42, .88);
    color: var(--text-body);
}

:root[data-theme="dark"] .home-pagination li.prev a,
:root[data-theme="dark"] .home-pagination li.next a,
:root[data-theme="dark"] .home-pagination-jump {
    background: rgba(51, 51, 51, .9);
}

:root[data-theme="dark"] .home-pagination li a[href]:hover,
:root[data-theme="dark"] .home-pagination-jump:hover,
:root[data-theme="dark"] .home-pagination-jump:focus-within {
    border-color: rgba(215, 164, 107, .48);
    background: rgba(60, 60, 60, .92);
    color: var(--text-body);
}

:root[data-theme="dark"] .home-pagination li.active a {
    border-color: rgba(215, 164, 107, .72);
    background: linear-gradient(145deg, #8A6947, #5F4932);
    color: var(--text-body);
}

:root[data-theme="dark"] .home-pagination li:not(.active) a:not([href]) {
    border-color: rgba(85, 85, 85, .5);
    background: rgba(42, 42, 42, .62);
    color: var(--text-muted);
}

:root[data-theme="dark"] .home-pagination-jump input {
    color: var(--text-body);
}

:root[data-theme="dark"] .home-pagination-jump button {
    color: var(--text-body);
}

:root[data-theme="dark"] .home-pagination-jump button:not(:disabled):hover,
:root[data-theme="dark"] .home-pagination-jump button:not(:disabled):active {
    color: var(--text-body);
}

:root[data-theme="dark"] .home-pagination-jump:hover input,
:root[data-theme="dark"] .home-pagination-jump:focus-within input,
:root[data-theme="dark"] .home-pagination-jump:hover button,
:root[data-theme="dark"] .home-pagination-jump:focus-within button {
    color: var(--text-body);
}

:root[data-theme="dark"] .home-pagination-jump:hover .home-page-icon,
:root[data-theme="dark"] .home-pagination-jump:focus-within .home-page-icon {
    color: var(--text-body);
    stroke: currentColor;
}

.float-right {
    z-index: 1500;
    right: 28px;
    bottom: 72px;
    display: grid;
    gap: 10px;
}

.operator-button {
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--float-border);
    border-radius: 12px;
    background: var(--float-bg);
    box-shadow: var(--float-shadow);
    color: var(--float-icon);
    transition: all .22s ease;
}

.operator-button:hover {
    border-color: var(--float-hover-border);
    background: var(--float-hover-bg);
    box-shadow: var(--float-hover-shadow);
    color: var(--float-hover-icon);
}

#backToTopBtn,
#postTocBtn,
#goToCommentsBtn {
    display: none;
    border-radius: 50%;
    background: var(--float-bg);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(.96);
    transition: opacity .22s ease, transform .22s ease, border-color .22s ease, background-color .22s ease, color .22s ease;
}

#backToTopBtn.is-visible,
#postTocBtn.is-visible,
#goToCommentsBtn.is-visible {
    display: inline-flex;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

#backToTopBtn:hover,
#postTocBtn:hover,
#goToCommentsBtn:hover {
    transform: translateY(-2px) scale(1);
    cursor: pointer;
}

#postTocBtn.is-active {
    border-color: var(--float-active-border);
    background: var(--float-active-bg);
    box-shadow: var(--float-active-shadow);
    color: var(--float-active-icon);
    transform: translateY(-2px) scale(1);
}

.tp-icon {
    display: block;
    width: 20px;
    height: 20px;
    color: currentColor;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

.tp-icon-top::before {
    display: none;
    content: none;
}

.tp-icon-top::after {
    display: none;
    content: none;
}

.tp-icon-comment {
    width: 22px;
    height: 22px;
    background-color: currentColor;
    stroke: none;
    -webkit-mask: url("../static/images/comment.svg") center / contain no-repeat;
    mask: url("../static/images/comment.svg") center / contain no-repeat;
}

.footer.ink-footer {
    flex: 0 0 auto;
    padding: 0;
    color: #93887E;
    font-size: 13px;
    line-height: 22px;
}

.footer-content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}

.footer-content>span:not(:last-child)::after {
    content: "|";
    margin: 0 14px;
    color: #B8AEA2;
}

.footer-content>span:last-child {
    color: #8D8176;
    font-weight: 400;
}

.footer-content a {
    color: inherit;
}

.footer-rss-text::after {
    display: none;
    content: none;
}

.footer-rss a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #8D8176;
    line-height: 22px;
    text-decoration: none;
    transition: color .2s ease;
}

.footer-rss a:hover {
    color: #6D5641;
}

.footer-rss svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer-rss svg circle {
    fill: currentColor;
    stroke: none;
}

.footer-rss-text {
    font-size: 13px;
}

:root[data-theme="dark"] .footer.ink-footer,
:root[data-theme="dark"] .footer-content,
:root[data-theme="dark"] .footer-content>span,
:root[data-theme="dark"] .footer-content a,
:root[data-theme="dark"] .footer-rss a {
    color: var(--text-body);
}

:root[data-theme="dark"] .footer-content a:hover,
:root[data-theme="dark"] .footer-rss a:hover {
    color: var(--accent-brown);
}

:root[data-theme="dark"] .footer-rss svg {
    color: currentColor;
    stroke: currentColor;
}

:root[data-theme="dark"] .footer-rss svg circle {
    fill: currentColor;
}

@media (max-width: 960px) {
    .home-layout.has-sidebar {
        grid-template-columns: 1fr;
    }
    .content-layout.has-sidebar {
        grid-template-columns: 1fr;
    }
    .content-layout.sidebar-post .home-sidebar {
        margin-top: 0;
    }
    .home-sidebar {
        position: static;
    }
    .home-layout.is-first-home-layout .home-sidebar {
        margin-top: 0;
    }
}

@media (max-width: 800px) {
    body::before {
        inset: -8px;
        background-position: center top;
        background-size: cover;
        filter: blur(1.35px);
        opacity: 0.78;
    }
    body::after {
        background: color-mix(in srgb, var(--bg-page) 28%, transparent);
    }
    .cat_menu.tp-header {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 10px;
        min-height: auto;
        padding: 4px 0 16px;
        /* 解除头部的层叠上下文：.cat_menu 默认 z-index:10 且是 .main_screen 的 flex 子项，
           会把抽屉困在自身层叠上下文里 → 抽屉落罩之下，链接点不动。设为 auto 后
           抽屉/遮罩回归 .main_screen 的层叠上下文，才能真正压住页面内容。 */
        z-index: auto;
    }
    .tp-nav-backdrop {
        /* 高于右下浮动按钮（.float-right z-index:1500） */
        z-index: 1600;
    }
    /* 欢迎卡片（welcome 插件，直接挂在 <body> 下、z-index:1200）会盖在抽屉上，
       抽屉打开期间先隐藏，关掉即恢复。 */
    html.tp-nav-locked .zmbw {
        display: none !important;
    }
    .tp-brand {
        grid-column: 1;
        grid-row: 1;
    }
    .site-search {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }
    .tp-menu-toggle {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 1px solid var(--line-secondary);
        border-radius: 10px;
        background: var(--bg-card);
        color: var(--text-body);
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }
    .tp-menu-toggle:hover {
        color: var(--accent-brown);
        border-color: color-mix(in srgb, var(--accent-brown) 42%, var(--line-secondary));
    }
    .tp-menu-toggle svg {
        display: block;
        width: 20px;
        height: 20px;
    }
    .tp-menu-toggle .tp-menu-close {
        display: none;
    }
    .tp-menu-toggle.is-active .tp-menu-burger {
        display: none;
    }
    .tp-menu-toggle.is-active .tp-menu-close {
        display: block;
    }
    .tp-brand-text {
        font-size: 38px;
    }
    .tp-brand-logo {
        height: 40px;
        max-width: min(220px, 58vw);
    }
    /* 导航条改成右侧抽屉：默认收在屏幕外，点汉堡按钮滑出 */
    .tp-nav {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1601;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2px;
        width: min(80vw, 320px);
        height: 100vh;
        height: 100dvh;
        max-width: none;
        margin: 0;
        padding: max(14px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--bg-card);
        border-left: 1px solid var(--line-secondary);
        box-shadow: -18px 0 48px rgba(40, 30, 20, .22);
        white-space: normal;
        transform: translateX(105%);
        visibility: hidden;
        transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .3s;
    }
    .tp-nav.is-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
    }
    .tp-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
        padding: 2px 4px 12px;
        border-bottom: 1px solid var(--line-secondary);
    }
    .tp-drawer-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-body);
    }
    .tp-drawer-close {
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--text-muted);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
    }
    .tp-drawer-close:hover {
        background: var(--bg-soft);
        color: var(--accent-brown);
    }
    .tp-nav .tp-nav-item {
        display: block;
        width: 100%;
    }
    .tp-nav .tp-nav-link {
        display: flex;
        width: 100%;
        border-radius: 10px;
        padding: 12px;
        font-size: 15px;
        line-height: 1.4;
    }
    .tp-nav .tp-nav-link:hover {
        background: var(--bg-soft);
    }
    .tp-nav .tp-nav-link.is-active {
        background: color-mix(in srgb, var(--accent-brown) 10%, transparent);
    }
    .tp-nav .tp-nav-link.is-active::after {
        display: none;
    }
    .tp-nav-more {
        display: none !important;
    }
    html.tp-nav-locked {
        overflow: hidden;
    }
    .tp-subnav {
        position: fixed;
        left: var(--tp-subnav-left, 16px);
        top: var(--tp-subnav-top, 120px);
        right: auto;
        min-width: 140px;
        max-width: calc(100vw - 32px);
        z-index: 100;
        transform: translateY(6px);
    }
    .tp-nav-item.has-children:hover .tp-subnav,
    .tp-nav-item.has-children:focus-within .tp-subnav {
        opacity: 0;
        pointer-events: none;
        transform: translateY(6px);
    }
    .tp-nav-item.has-children.is-open .tp-subnav,
    .tp-subnav.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }
    .tp-nav-item.has-children.is-closing .tp-subnav {
        opacity: 0;
        pointer-events: none;
        transform: translateY(6px);
    }
    .home-posts::before {
        top: 20px;
        bottom: 20px;
    }
    .float-right {
        right: 16px;
        bottom: 32px;
    }
}

@media (max-width: 480px) {
    body {
        padding-bottom: 0;
        background-position: center top;
    }
    .tp-nav {
        gap: 2px;
        font-size: 14px;
    }
    .home-notice {
        height: 44px;
        padding: 0 14px;
    }
    .home-sticky-viewport {
        min-height: 214px;
    }
    .home-sticky-slide {
        grid-template-columns: 1fr;
        grid-template-areas: "cover" "content";
        gap: 10px 12px;
        min-height: 214px;
        padding: 12px 12px 30px;
    }
    .home-sticky-cover {
        grid-area: cover;
        height: 150px;
    }
    .home-sticky-content {
        grid-area: content;
    }
    .home-sticky-badge {
        top: 18px;
        right: 18px;
        height: 22px;
        border-color: color-mix(in srgb, var(--accent-brown) 24%, transparent);
        background: var(--accent-brown);
        box-shadow: 0 5px 12px rgba(60, 38, 18, .22);
        padding: 0 8px;
        font-size: 12px;
        line-height: 22px;
    }
    .home-sticky-content p {
        margin-top: 6px;
        line-height: 1.6;
        -webkit-line-clamp: 2;
    }
    .home-sticky-dots {
        bottom: 9px;
    }
    .home-posts::before {
        top: 20px;
        bottom: 20px;
    }
    .home-post-date small {
        margin-top: 4px;
    }
    .home-comment-icon {
        width: 12px;
        height: 12px;
    }
    .home-post-comments {
        justify-content: flex-end;
        gap: 3px;
        font-size: 12px;
        line-height: 14px;
    }
    .home-post-card {
        grid-template-columns: 1fr;
        padding: 18px 14px;
    }
    .home-post-card-cover {
        display: none;
    }
    .home-post-card-title {
        font-size: 17px;
    }
    .home-post-card-excerpt {
        font-size: 13px;
    }
    .home-pagination li.prev a,
    .home-pagination li.next a {
        min-width: 35px;
        width: 35px;
        padding: 0;
    }
    .home-pagination li.prev .home-page-text,
    .home-pagination li.next .home-page-text {
        display: none;
    }
    .footer-content {
        display: grid;
        gap: 4px;
    }
    .footer-content>span::after,
    .footer-rss-text::after {
        content: "" !important;
        margin: 0 !important;
    }
}

/* ==== 页脚外链（自定义，见 parts/footer.php 里的 $footer_ext_links）==== */
.footer-ext {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 4px;
    color: #93887E;
    font-size: 13px;
    line-height: 22px;
}

.footer-ext a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

.footer-ext a:not(:last-child)::after {
    content: "·";
    margin: 0 10px;
    color: #B8AEA2;
}

.footer-ext a:hover {
    color: #6D5641;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(109, 86, 65, .45);
}

:root[data-theme="dark"] .footer-ext {
    color: var(--text-body);
}

:root[data-theme="dark"] .footer-ext a:not(:last-child)::after {
    color: #4A4A4A;
}

:root[data-theme="dark"] .footer-ext a:hover {
    color: var(--accent-brown);
    text-decoration-color: rgba(215, 164, 107, .5);
}

/* ===== post.css ===== */
/* tp-riven post page */

.site-search-mobile-btn {
    display: none;
}

.post-title {
    font-size: 30px;
    padding-bottom: 15px;
}

.post-title-block {
    position: relative;
    margin: 14px 0 22px;
    padding: 4px 0 18px;
    border: 0;
    border-bottom: 1px solid var(--line-primary);
    text-align: center;
}

.post-title-block h1 {
    max-width: 760px;
    margin: 0 auto 12px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: clamp(22px, 3.4vw, 30px);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.02em;
}

.post-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    width: 100%;
    padding: 2px 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 24px;
}

.post-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.post-meta-item:not(:first-child)::before {
    content: "";
    width: 3px;
    height: 3px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--ink-decor);
}

.post-date-icon {
    position: relative;
    width: 14px;
    height: 14px;
    border: 1px solid var(--accent-brown);
    border-radius: 4px;
    opacity: .9;
}

.post-date-icon::before,
.post-date-icon::after {
    content: "";
    position: absolute;
    top: -3.5px;
    width: 2px;
    height: 5px;
    border-radius: 2px;
    background: var(--accent-brown);
}

.post-date-icon::before {
    left: 3px;
}

.post-date-icon::after {
    right: 3px;
}

.post-date-icon+time {
    color: var(--text-secondary);
    font-size: 13px;
}

.post-views-icon,
.post-meta-icon {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.post-meta-icon,
.post-meta-icon * {
    fill: none !important;
    stroke: currentColor !important;
}

:root[data-theme="dark"] .post-meta-icon,
:root[data-theme="dark"] .post-views-icon {
    color: var(--accent-brown);
}

.tp-post-article .post_content :not(pre)>code {
    border: 1px solid color-mix(in srgb, var(--accent-brown) 26%, var(--line-primary));
    border-radius: 3px;
    background: color-mix(in srgb, var(--accent-brown) 9%, var(--bg-soft));
    color: var(--accent-brown);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: .9em;
    line-height: 1.45;
    padding: 1px 5px;
}

:root[data-theme="dark"] .tp-post-article .post_content :not(pre)>code {
    border-color: color-mix(in srgb, var(--accent-gold) 36%, var(--line-primary));
    background: color-mix(in srgb, var(--accent-gold) 13%, var(--bg-soft));
    color: var(--accent-gold);
}

.post-edit-link {
    display: inline-flex;
    align-items: center;
    height: 24px;
    margin-left: 0;
    padding: 0 8px;
    border: 1px solid var(--control-border);
    border-radius: 999px;
    background: var(--control-bg);
    box-shadow: var(--control-shadow);
    color: var(--control-text);
    font-size: 12px;
}

.tp-post-article {
    color: var(--text-body);
    font-family: var(--font-main);
    font-size: clamp(15px, 1.8vw, 16px);
    line-height: 1.92;
}

.tp-post-article .post_content {
    width: 100%;
    max-width: none;
    margin: 8px 0 24px;
    padding: clamp(18px, 3vw, 28px) clamp(16px, 4vw, 36px) clamp(22px, 3.4vw, 32px);
    border: 1px solid var(--line-secondary);
    border-radius: clamp(12px, 1.8vw, 16px);
    background: var(--bg-card);
    box-shadow: 0 16px 42px rgba(62, 57, 52, 0.035);
    backdrop-filter: blur(1.2px);
    -webkit-backdrop-filter: blur(1.2px);
    color: var(--text-body);
    overflow-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
}

.tp-post-article .post_content *,
.tp-post-article .post_content *::before,
.tp-post-article .post_content *::after {
    box-sizing: border-box;
}

.tp-post-article .post_content p {
    margin: 0 0 18px;
    color: var(--text-body);
    font-size: inherit;
    font-weight: 400;
    line-height: 1.92;
    letter-spacing: 0.01em;
    text-align: justify;
    word-break: normal;
}

body.tp-paragraph-indent .tp-post-article .post_content p {
    text-indent: 2em;
}

.tp-post-article .post_content> :first-child {
    margin-top: 0;
}

.tp-post-article .post_content> :last-child {
    margin-bottom: 0;
}

.tp-post-article .post_content h1,
.tp-post-article .post_content h2,
.tp-post-article .post_content h3,
.tp-post-article .post_content h4,
.tp-post-article .post_content h5,
.tp-post-article .post_content h6 {
    clear: both;
    margin: 34px 0 14px;
    position: relative;
    padding: 0 0 9px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
}

.tp-post-article .post_content h1::before,
.tp-post-article .post_content h2::before,
.tp-post-article .post_content h3::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ink-decor), var(--accent-brown));
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform .22s ease;
}

.tp-post-article .post_content h1::before {
    width: 52px;
    height: 3px;
}

.tp-post-article .post_content h2::before {
    width: 40px;
    height: 3px;
}

.tp-post-article .post_content h3::before {
    width: 25px;
    height: 2px;
}

.tp-post-article .post_content h1:hover::before,
.tp-post-article .post_content h2:hover::before,
.tp-post-article .post_content h3:hover::before {
    transform: scaleX(1.3);
}

.tp-post-article .post_content h1 {
    margin-top: 38px;
    font-size: 22px;
}

.tp-post-article .post_content h2 {
    font-size: 20px;
}

.tp-post-article .post_content h3 {
    font-size: 18px;
}

.tp-post-article .post_content h4 {
    font-size: 16px;
}

.tp-post-article .post_content h5 {
    font-size: 14px;
}

.tp-post-article .post_content h6 {
    color: var(--text-secondary);
    font-size: 12px;
}

.tp-post-article .post_content strong,
.tp-post-article .post_content b {
    color: var(--text-primary);
    font-weight: 700;
}

.tp-post-article .post_content em,
.tp-post-article .post_content i {
    color: var(--text-body);
    font-style: italic;
}

.tp-post-article .post_content del,
.tp-post-article .post_content s {
    text-decoration-line: line-through;
    text-decoration-color: color-mix(in srgb, var(--accent-brown) 78%, currentColor);
    text-decoration-thickness: 1.5px;
    text-decoration-skip-ink: none;
}

:root[data-theme="dark"] .tp-post-article .post_content del,
:root[data-theme="dark"] .tp-post-article .post_content s {
    text-decoration-color: color-mix(in srgb, var(--accent-brown) 90%, currentColor);
    text-decoration-thickness: 2px;
}

.tp-post-article .post_content mark {
    padding: 0 5px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ink-decor) 24%, transparent);
    color: var(--text-primary);
}

.tp-post-article .post_content abbr[title] {
    border-bottom: 1px dotted var(--accent-brown);
    cursor: help;
    text-decoration: none;
}

.tp-post-article .post_content blockquote {
    margin: 22px 0;
    padding: 15px 18px 15px 22px;
    border: 1px solid color-mix(in srgb, var(--accent-brown) 42%, var(--line-primary));
    border-left: 5px solid var(--accent-brown);
    border-radius: 12px 8px 8px 12px;
    background: color-mix(in srgb, var(--accent-gold) 10%, var(--bg-card));
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.42), 0 8px 20px rgba(62, 57, 52, 0.045);
    color: var(--text-body);
    line-height: 1.9;
}

.tp-post-article .post_content blockquote p {
    margin: 0 0 10px;
}

.tp-post-article .post_content blockquote p:last-child {
    margin-bottom: 0;
}

.tp-post-article .post_content ul,
.tp-post-article .post_content ol {
    display: block;
    margin: 16px 0 20px;
    padding: 0 0 0 1.55em;
}

.tp-post-article .post_content ul {
    list-style: none;
}

.tp-post-article .post_content ol {
    counter-reset: tp-post-ol;
    list-style: none;
    padding-left: 1.85em;
}

.tp-post-article .post_content li {
    display: list-item;
    position: relative;
    margin: 7px 0;
    padding: 0 0 0 0.35em;
    color: var(--text-body);
    line-height: 1.86;
    letter-spacing: 0.01em;
    text-align: left;
    word-break: normal;
}

.tp-post-article .post_content ul>li::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: -1.08em;
    width: 8px;
    height: 8px;
    border: 1px solid var(--accent-brown);
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-brown) 0 2px, var(--bg-card) 2.5px);
}

.tp-post-article .post_content ol>li {
    counter-increment: tp-post-ol;
}

.tp-post-article .post_content ol>li::before {
    content: counter(tp-post-ol);
    position: absolute;
    top: 0.28em;
    left: -1.95em;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid color-mix(in srgb, var(--accent-brown) 36%, transparent);
    border-radius: 50%;
    background: linear-gradient(180deg, var(--bg-card), var(--bg-soft));
    box-shadow: 0 2px 5px rgba(92, 70, 48, .06), inset 0 0 0 1px rgba(255, 255, 255, .48);
    color: var(--accent-brown);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tp-post-article .post_content li>ul,
.tp-post-article .post_content li>ol {
    margin: 6px 0 8px;
}

.tp-post-article .post_content input[type="checkbox"] {
    flex: 0 0 auto;
    position: relative;
    width: 16px;
    height: 16px;
    margin: 0 9px 0 0;
    border: 1px solid var(--line-secondary);
    border-radius: 4px;
    background: var(--bg-soft);
    appearance: none;
    -webkit-appearance: none;
    vertical-align: -2px;
}

.tp-post-article .post_content input[type="checkbox"]::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border-right: 2px solid #4F88B7;
    border-bottom: 2px solid #4F88B7;
    transform: rotate(42deg);
}

.tp-post-article .post_content input[type="checkbox"]:checked {
    border-color: var(--accent-brown);
    background: var(--bg-soft);
}

.tp-post-article .post_content input[type="checkbox"]:checked::after {
    border-color: #6B975C;
}

.tp-post-article .post_content .contains-task-list,
.tp-post-article .post_content ul:has(.task-list-item) {
    padding-left: 0;
}

.tp-post-article .post_content .task-list-item,
.tp-post-article .post_content li:has(> input[type="checkbox"]) {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding-left: 0;
    list-style: none;
}

.tp-post-article .post_content li:has(input[type="checkbox"])::before {
    display: none;
}

.tp-post-article .post_content .task-list-item-checkbox[disabled],
.tp-post-article .post_content input[type="checkbox"][disabled] {
    cursor: default;
    opacity: 1;
}

.tp-post-article .post_content hr {
    height: 1px;
    margin: 30px 0;
    padding: 0;
    border: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-brown) 35%, transparent), transparent);
}

.tp-post-article .post_content code:not([class]),
.tp-post-article .post_content p code,
.tp-post-article .post_content li code,
.tp-post-article .post_content td code {
    margin: 0 2px;
    padding: 2px 6px;
    border: 1px solid var(--line-secondary);
    border-radius: 5px;
    background: var(--bg-soft);
    color: #7A4B3A;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.88em;
    font-weight: 500;
    letter-spacing: 0;
    vertical-align: baseline;
}

.tp-post-article .post_content div.code-toolbar {
    position: relative;
    margin: 24px 0;
    padding-top: 36px;
    border: 1px solid var(--text-secondary);
    border-radius: 10px;
    background: var(--bg-soft);
    box-shadow: 0 8px 24px rgba(62, 57, 52, 0.05);
    overflow: hidden;
}

.tp-post-article .post_content div.code-toolbar::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 13px;
    left: 15px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #DD5F58;
    box-shadow: 18px 0 #D9A94E, 36px 0 #6E9B73;
}

.tp-post-article .post_content div.code-toolbar>.toolbar {
    position: absolute;
    inset: 7px 10px auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 22px;
    padding: 0;
    text-align: center;
    opacity: 1;
    pointer-events: none;
}

.tp-post-article .post_content div.code-toolbar>.toolbar .toolbar-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    color: #80756C;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
    pointer-events: auto;
}

.tp-post-article .post_content div.code-toolbar>.toolbar button {
    position: absolute;
    top: 1px;
    right: 0;
    height: 20px;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, var(--accent-brown) 28%, transparent);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-family: var(--font-main);
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.tp-post-article .post_content div.code-toolbar>.toolbar button span {
    display: inline;
    color: inherit;
    font: inherit;
}

.tp-post-article .post_content div.code-toolbar>.toolbar button:hover {
    border-color: color-mix(in srgb, var(--accent-brown) 48%, transparent);
    color: var(--accent-brown);
}

.tp-post-article .post_content pre,
.tp-post-article .post_content pre[class*="language-"] {
    margin: 22px 0;
    padding: 16px 18px;
    border: 1px solid var(--line-secondary);
    border-radius: 10px;
    background: rgba(59, 53, 48, 0.94);
    box-shadow: 0 8px 24px rgba(80, 64, 48, 0.06);
    color: #F8F4ED;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.78;
    letter-spacing: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.tp-post-article .post_content div.code-toolbar>pre,
.tp-post-article .post_content div.code-toolbar>pre[class*="language-"] {
    margin: 0 10px 10px;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--text-secondary) 36%, transparent);
    border-radius: 0 0 7px 7px;
    box-shadow: none;
}

.tp-post-article .post_content pre[class*="language-"] {
    scrollbar-width: thin;
    scrollbar-color: rgba(248, 244, 237, 0.38) rgba(255, 255, 255, 0.06);
}

.tp-post-article .post_content pre[class*="language-diff"],
.tp-post-article .post_content pre[class*="language-patch"] {
    line-height: 1.35;
}

.tp-post-article .post_content pre[class*="language-"]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.tp-post-article .post_content pre[class*="language-"]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
}

.tp-post-article .post_content pre[class*="language-"]::-webkit-scrollbar-thumb {
    background: rgba(248, 244, 237, 0.38);
    border-radius: 999px;
}

.tp-post-article .post_content pre code,
.tp-post-article .post_content pre[class*="language-"] code {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.tp-post-article .post_content pre[class*="language-"] .token.deleted,
.tp-post-article .post_content pre[class*="language-"] .token.tag,
.tp-post-article .post_content pre[class*="language-"] .token.attr-name,
.tp-post-article .post_content pre[class*="language-"] .token.keyword,
.tp-post-article .post_content pre[class*="language-"] .token.important,
.tp-post-article .post_content pre[class*="language-"] .token.selector,
.tp-post-article .post_content pre[class*="language-"] .token.function,
.tp-post-article .post_content pre[class*="language-"] .token.class-name,
.tp-post-article .post_content pre[class*="language-"] .token.property,
.tp-post-article .post_content pre[class*="language-"] .token.boolean,
.tp-post-article .post_content pre[class*="language-"] .token.number,
.tp-post-article .post_content pre[class*="language-"] .token.constant,
.tp-post-article .post_content pre[class*="language-"] .token.symbol {
    color: #FF7B72 !important;
}

.tp-post-article .post_content pre[class*="language-"].line-numbers {
    padding-left: 3.8em;
    max-height: 32rem;
}

.tp-post-article .post_content .line-numbers .line-numbers-rows {
    top: 0;
    left: -3.8em;
    border-right: 1px solid color-mix(in srgb, var(--bg-soft) 16%, transparent);
    background: transparent;
}

.tp-post-article .post_content .line-numbers-rows>span::before {
    color: color-mix(in srgb, var(--bg-soft) 45%, transparent);
    transform: translateY(-1px);
}

.tp-post-article .post_content table {
    width: 100%;
    margin: 22px 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    border: 1px solid var(--line-secondary);
    border-radius: 9px;
    background: var(--bg-card);
    overflow: hidden;
}

.tp-post-article .post_content iframe,
.tp-post-article .post_content video,
.tp-post-article .post_content embed,
.tp-post-article .post_content object {
    max-width: 100%;
}

.tp-post-article .post_content thead {
    background: var(--bg-soft);
    color: #3D3128;
}

.tp-post-article .post_content th,
.tp-post-article .post_content td {
    padding: 11px 14px;
    border-right: 1px solid var(--line-secondary);
    border-bottom: 1px solid var(--line-secondary);
    color: var(--text-body);
    font-size: 14px;
    line-height: 1.68;
    text-align: left;
    vertical-align: top;
}

.tp-post-article .post_content th {
    color: #3B3028;
    font-weight: 600;
}

.tp-post-article .post_content th[align="center"],
.tp-post-article .post_content td[align="center"],
.tp-post-article .post_content th[style*="text-align:center"],
.tp-post-article .post_content td[style*="text-align:center"],
.tp-post-article .post_content th[style*="text-align: center"],
.tp-post-article .post_content td[style*="text-align: center"] {
    text-align: center !important;
}

.tp-post-article .post_content th[align="right"],
.tp-post-article .post_content td[align="right"],
.tp-post-article .post_content th[style*="text-align:right"],
.tp-post-article .post_content td[style*="text-align:right"],
.tp-post-article .post_content th[style*="text-align: right"],
.tp-post-article .post_content td[style*="text-align: right"] {
    text-align: right !important;
}

.tp-post-article .post_content tr> :last-child {
    border-right: 0;
}

.tp-post-article .post_content tbody tr:last-child>td {
    border-bottom: 0;
}

.tp-post-article .post_content tbody tr:nth-child(even) {
    background: var(--bg-card);
}

.tp-post-article .post_content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 12px auto;
    border-radius: 8px;
}

.tp-post-article .post_content p:has(> img:only-child) {
    margin: 12px 0;
}

.tp-post-article .post_content figure {
    margin: 14px 0;
}

.tp-post-article .post_content figcaption {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.tp-post-article .post_content kbd {
    display: inline-block;
    min-width: 1.6em;
    padding: 1px 6px;
    border: 1px solid #D8C9B5;
    border-bottom-width: 2px;
    border-radius: 5px;
    background: #FCFAF6;
    color: #5B5148;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.82em;
    line-height: 1.5;
    text-align: center;
}

.tp-post-article .post_content sup {
    margin: 0 2px;
    color: var(--accent-brown);
    font-size: 0.75em;
}

.tp-post-article .post_content .footnotes,
.tp-post-article .post_content .footnotes-list {
    margin-top: 30px;
    padding-top: 14px;
    border-top: 1px solid var(--line-primary);
    color: var(--text-secondary);
    font-size: 14px;
}

.tp-post-article .post_content .footnotes ol {
    margin: 0;
}

.tp-post-article .post_content .footnotes>hr {
    display: none;
}

.tp-post-article .post_content details {
    margin: 20px 0;
    padding: 13px 15px;
    border: 1px solid var(--line-secondary);
    border-radius: 9px;
    background: var(--bg-card);
}

.tp-post-article .post_content summary {
    cursor: pointer;
    color: var(--accent-brown);
    font-weight: 500;
}

.tp-post-article .post_content .mx-hide-notice,
.tp-post-article .post_content .mx-hide-content,
.tp-post-article .post_content .card:not(cat_article_video) {
    display: block;
    margin: 20px 0;
    padding: 16px 18px;
    border: 1px solid var(--line-secondary);
    border-radius: 9px;
    background: var(--bg-card);
    box-shadow: none;
    color: var(--text-body);
    text-align: left;
    text-indent: 0;
}

.tp-post-article .post_content .mx-hide-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.tp-post-article .post_content .mx-hide-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: #6C543B;
}

.tp-post-article .post_content .cat_container {
    display: grid;
    gap: 10px;
    margin: 22px 0;
}

.tp-post-article .post_content .cat_container.grid2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tp-post-article .post_content .cat_container.grid3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tp-post-article .post_content .mx-photo-row {
    display: flex;
    gap: 8px;
    width: 100%;
    margin: 12px 0;
    padding: 0;
}

.tp-post-article .post_content .mx-photo-item {
    flex: 1 1 0;
    min-width: 0;
    display: block;
    padding: 0;
    border: 1px solid var(--line-secondary);
    border-radius: 8px;
    background: var(--bg-card);
    box-shadow: 0 6px 16px rgba(62, 57, 52, 0.035);
    overflow: hidden;
    transition: all .22s ease;
}

.tp-post-article .post_content .mx-photo-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
}

.tp-post-article .post_content .mx-photo-row+.mx-photo-row {
    margin-top: -4px;
}

.tp-post-article .post_content .mx_notice {
    --notice-accent: #5470a6;
    --notice-bg: color-mix(in srgb, var(--notice-accent) 9%, var(--bg-card));
    --notice-border: color-mix(in srgb, var(--notice-accent) 28%, var(--line-secondary));
    align-items: flex-start;
    display: flex;
    gap: 11px;
    margin: 14px 0;
    padding: 12px 15px;
    border: 1px solid var(--notice-border);
    border-radius: 8px;
    background: var(--notice-bg);
    color: color-mix(in srgb, var(--notice-accent) 72%, var(--text-primary));
    font: 500 15px/1.8 var(--font-main);
}

.tp-post-article .post_content .mx_notice_icon {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin-top: 4px;
    color: var(--notice-accent);
    fill: color-mix(in srgb, var(--notice-accent) 16%, var(--bg-card));
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.tp-post-article .post_content .mx_notice_icon circle {
    stroke: currentColor;
    stroke-width: 1.6;
}

.tp-post-article .post_content .mx_notice_content {
    min-width: 0;
}

.tp-post-article .post_content .mx_notice_content> :last-child {
    margin-bottom: 0;
}

.tp-post-article .post_content .mx_notice+.mx_notice {
    margin-top: 10px;
}

.mx_timeline {
    position: relative;
    margin: 18px 0;
    padding-left: 10px;
}

.mx_timeline_card {
    padding: 24px 30px 26px;
}

.mx_timeline_card .mx_timeline {
    margin-top: 22px;
}

.mx_timeline::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 9px;
    bottom: 12px;
    width: 1px;
    background: linear-gradient(180deg, rgba(184, 135, 77, .38), rgba(184, 135, 77, .08));
}

.mx_timeline_item {
    position: relative;
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    padding: 0 0 20px;
}

.mx_timeline_item:last-child {
    padding-bottom: 0;
}

.mx_timeline_dot {
    position: absolute;
    left: -8px;
    top: 6px;
    width: 10px;
    height: 10px;
    border: 2px solid #b78c60;
    border-radius: 50%;
    background: var(--bg-card);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg-card) 80%, transparent);
}

.mx_timeline_time {
    margin-left: 10px;
    color: #8f7355;
    font: 500 13px/1.9 var(--font-main);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mx_timeline_content {
    margin: 0;
    color: var(--text-primary);
    font: 400 14px/1.9 var(--font-main);
}

:root[data-theme="dark"] .mx_timeline_time,
:root[data-theme="dark"] .mx_timeline_content {
    color: var(--text-body);
}

.tp-post-article .post_content .mx_post_card {
    display: block;
    position: relative;
    width: 50%;
    margin: 16px auto;
    padding: 12px 12px 8px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg-card) 88%, #f1f1f1);
    color: var(--text-primary);
    text-decoration: none;
}

.tp-post-article .post_content .mx_post_card_badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-brown) 12%, var(--bg-card));
    color: var(--accent-brown);
    font: 600 11px/1.4 var(--font-main);
}

.tp-post-article .post_content .mx_post_card:hover {
    border-color: color-mix(in srgb, var(--accent-brown) 42%, var(--line-secondary));
}

.tp-post-article .post_content .mx_post_card_main {
    align-items: center;
    display: flex;
    gap: 12px;
}

.tp-post-article .post_content .mx_post_card_main>span {
    display: grid;
    flex: 1 1 auto;
    gap: 4px;
    min-width: 0;
    padding-right: 46px;
}

.tp-post-article .post_content .mx_post_card_icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-brown) 12%, var(--bg-card));
    color: var(--accent-brown);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.tp-post-article .post_content .mx_post_card strong {
    display: block;
    color: var(--text-primary);
    font: 700 15px/1.5 var(--font-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-post-article .post_content .mx_post_card em,
.tp-post-article .post_content .mx_post_card small {
    color: var(--text-secondary);
    font: 500 12px/1.4 var(--font-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-post-article .post_content .mx_post_card em {
    display: block;
    min-width: 0;
}

.tp-post-article .post_content .mx_post_card small {
    display: block;
    margin-top: 10px;
    padding-top: 7px;
    border-top: 1px solid var(--line-soft);
}

.tp-post-article .post_content .mx_post_card small {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.tp-post-article .post_content .mx_post_card b,
.tp-post-article .post_content .mx_post_card time {
    color: inherit;
    font: inherit;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-post-article .post_content .mx_post_card time {
    flex: 0 0 auto;
    margin-left: 8px;
}

:root[data-theme="dark"] .tp-post-article .post_content .mx_post_card {
    background: color-mix(in srgb, var(--bg-card) 88%, var(--bg-soft));
    border-color: var(--line-primary);
}

.tp-post-article .post_content .mx_notice_red {
    --notice-accent: #b85249;
}

.tp-post-article .post_content .mx_notice_green {
    --notice-accent: #4f8a62;
}

.tp-post-article .post_content .mx_notice_orange {
    --notice-accent: #b77a32;
}

.tp-post-article .post_content .mx_notice_blue {
    --notice-accent: #4d78a8;
}

:root[data-theme="dark"] .tp-post-article .post_content .mx_notice {
    --notice-bg: color-mix(in srgb, var(--notice-accent) 18%, var(--bg-card));
    --notice-border: color-mix(in srgb, var(--notice-accent) 42%, var(--line-secondary));
    color: color-mix(in srgb, var(--notice-accent) 58%, var(--text-primary));
}

:root[data-theme="dark"] .tp-post-article .post_content .mx_notice_icon {
    fill: color-mix(in srgb, var(--notice-accent) 14%, var(--bg-card));
    stroke-width: 2.1;
}

:root[data-theme="dark"] .tp-post-article .post_content .mx_notice_red {
    --notice-accent: #e17970;
}

:root[data-theme="dark"] .tp-post-article .post_content .mx_notice_green {
    --notice-accent: #76b889;
}

:root[data-theme="dark"] .tp-post-article .post_content .mx_notice_orange {
    --notice-accent: #dfa052;
}

:root[data-theme="dark"] .tp-post-article .post_content .mx_notice_blue {
    --notice-accent: #78a7d6;
}

.tp-post-article .post_content .mx_download {
    display: block;
    width: 50%;
    margin: 16px auto;
    padding: 16px;
    border: 1px dashed color-mix(in srgb, var(--text-secondary) 55%, var(--line-secondary));
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-card) 88%, #f2f2f2);
    color: var(--text-primary);
    text-decoration: none;
    box-shadow: none;
    box-sizing: border-box;
}

.tp-post-article .post_content .mx_download_head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    min-width: 0;
}

.tp-post-article .post_content .mx_download_file {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.tp-post-article .post_content .mx_download_icon {
    width: 32px;
    height: 32px;
    padding: 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--text-muted) 12%, var(--line-soft));
    color: color-mix(in srgb, var(--text-primary) 72%, var(--text-secondary));
    fill: none;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.5;
}

.tp-post-article .post_content .mx_download_name {
    color: inherit;
    font: 600 16px/1.45 var(--font-main);
    min-width: 0;
    overflow-wrap: anywhere;
}

.tp-post-article .post_content .mx_download_attrs {
    display: grid;
    gap: 6px;
    margin-top: 12px;
}

.tp-post-article .post_content .mx_download_attr {
    align-items: baseline;
    color: var(--text-secondary);
    display: flex;
    font: 500 13px/1.5 var(--font-main);
    gap: 16px;
    justify-content: space-between;
    min-width: 0;
}

.tp-post-article .post_content .mx_download_attr_name,
.tp-post-article .post_content .mx_download_attr_value {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tp-post-article .post_content .mx_download_attr_name {
    color: var(--text-secondary);
}

.tp-post-article .post_content .mx_download_attr_value {
    color: var(--text-secondary);
    flex: 0 1 auto;
    font-weight: 500;
    text-align: right;
}

.tp-post-article .post_content .mx_download_action {
    align-self: center;
    align-items: center;
    display: inline-flex;
    gap: 4px;
    justify-content: center;
    min-width: 78px;
    padding: 7px 10px;
    border-radius: 4px;
    background: color-mix(in srgb, #1e90ff 14%, var(--bg-card));
    color: #1e90ff;
    font: 700 13px/1 var(--font-main);
    text-decoration: none;
    white-space: nowrap;
}

.tp-post-article .post_content .mx_download_action:hover {
    background: color-mix(in srgb, #1e90ff 20%, var(--bg-card));
    color: #1e90ff;
}

.tp-post-article .post_content .mx_download_action_icon {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.6;
}

:root[data-theme="dark"] .tp-post-article .post_content .mx_download {
    background: color-mix(in srgb, var(--bg-card) 88%, var(--bg-soft));
    border-color: color-mix(in srgb, var(--text-secondary) 46%, var(--line-secondary));
}

@media (max-width: 560px) {
    .tp-post-article .post_content .mx_post_card {
        width: 100%;
    }
    .tp-post-article .post_content .mx_post_card_main>span {
        padding-right: 42px;
    }
    .mx_timeline {
        padding-left: 8px;
    }
    .mx_timeline_item {
        grid-template-columns: 104px minmax(0, 1fr);
        padding-bottom: 16px;
    }
    .mx_timeline_time {
        font-size: 12px;
    }
    .tp-post-article .post_content .mx_download {
        width: 100%;
        padding: 14px;
    }
    .tp-post-article .post_content .mx_download_head {
        gap: 12px;
    }
    .tp-post-article .post_content .mx_download_icon {
        width: 30px;
        height: 30px;
        padding: 8px;
    }
    .tp-post-article .post_content .mx_download_action {
        min-width: 72px;
        padding: 7px 9px;
    }
    .tp-post-article .post_content .mx_download_attr {
        gap: 12px;
    }
}

.tp-post-article .post_content .cat_collapse {
    margin: 20px 0;
    border: 1px solid color-mix(in srgb, var(--accent-brown) 26%, var(--line-secondary));
    border-radius: 8px;
    background: var(--bg-card);
    overflow: hidden;
}

.tp-post-article .post_content .collapse-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 11px 15px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--accent-brown) 18%, var(--line-secondary));
    background: color-mix(in srgb, var(--accent-gold) 10%, var(--bg-card));
    color: var(--accent-brown);
    font: 600 15px/22px var(--font-main);
    text-align: left;
    cursor: pointer;
    transition: background-color .2s ease;
}

.tp-post-article .post_content .collapse-btn:after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20color%3D%22%23000000%22%3E%0A%20%20%3Cpath%20d%3D%22M6%2013L12%2019L18%2013%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C/path%3E%0A%20%20%3Cpath%20d%3D%22M6%205L12%2011L18%205%22%20stroke%3D%22%23000000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C/path%3E%0A%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s ease;
}

.tp-post-article .post_content .collapse-btn:not(.collapsed):after {
    transform: rotate(-180deg);
}

.tp-post-article .post_content .collapse {
    max-height: 0;
    padding: 0 16px;
    background: transparent;
    opacity: 0;
    overflow: hidden;
    transition: max-height .28s ease, padding .28s ease, opacity .2s ease;
}

.tp-post-article .post_content .collapse.show,
.tp-post-article .post_content .cat_collapse.open .collapse {
    max-height: 1200px;
    padding: 14px 16px;
    opacity: 1;
}

.tp-post-article .post_content .cat_tabs {
    margin: 20px 0;
    border: 1px solid var(--line-secondary);
    border-radius: 10px;
    background: var(--bg-card);
    overflow: hidden;
}

.tp-post-article .post_content .cat_tab_nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 8px 10px 0;
    border-bottom: 1px solid var(--line-secondary);
    background: var(--bg-soft);
}

.tp-post-article .post_content .cat_tab_btn {
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--text-secondary);
    font: 600 14px/22px var(--font-main);
    padding: 7px 14px;
    cursor: pointer;
}

.tp-post-article .post_content .cat_tab_btn.active {
    border-color: var(--line-secondary);
    background: var(--bg-card);
    color: var(--accent-brown);
    transform: translateY(1px);
}

.tp-post-article .post_content .cat_tab_panel {
    display: none;
}

.tp-post-article .post_content .cat_tab_panel.active {
    display: block;
    padding: 18px 20px;
}

.tp-post-article .post_content .cat_tab_panel>p:empty {
    display: none;
}

.tp-post-article .post_content .cat_tab_panel div.code-toolbar {
    margin: 0;
}

.tp-post-article .post_content .cat_tab_panel div.code-toolbar>pre,
.tp-post-article .post_content .cat_tab_panel div.code-toolbar>pre[class*="language-"] {
    margin: 0;
}

.tp-post-article .post_content cat_article_video,
.tp-post-article .post_content .item_image {
    display: block;
    cursor: pointer;
}

.tp-post-article .post_content mx_music {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 22px;
    width: 100%;
    margin: 18px 0;
    padding: 18px 20px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-body);
}

.tp-post-article .post_content .mx-music-cover,
.tp-post-article .post_content .mx-music-play {
    appearance: none;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
}

.tp-post-article .post_content .mx-music-cover {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle at center, #2e2d30 0 11%, transparent 12%), radial-gradient(circle at 47% 42%, rgba(255, 255, 255, .38) 0 4%, transparent 5%), radial-gradient(circle at 60% 58%, #6d5f65 0 20%, #2c2b2f 21% 56%, #151518 57% 100%);
    box-shadow: 0 7px 16px rgba(31, 28, 26, .16);
}

.tp-post-article .post_content .mx-music-cover span {
    position: absolute;
    inset: 19px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a6b7c9, #76616e 55%, #292c35);
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22);
}

.tp-post-article .post_content .mx-music-cover span.has-cover {
    inset: 10px;
}

.tp-post-article .post_content mx_music.is-playing .mx-music-cover {
    animation: mx-music-spin 5s linear infinite;
}

.tp-post-article .post_content .mx-music-body {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.tp-post-article .post_content .mx-music-title {
    display: block;
    overflow: hidden;
    color: #2f435a;
    font-size: 14px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-post-article .post_content .mx-music-status {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-post-article .post_content .mx-music-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.tp-post-article .post_content .mx-music-progress {
    width: 100%;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(to right, #9b9b9b var(--mx-progress, 0%), #d5d5d5 0);
    cursor: pointer;
    appearance: none;
}

.tp-post-article .post_content .mx-music-progress::-webkit-slider-thumb {
    width: 0;
    height: 0;
    appearance: none;
}

.tp-post-article .post_content .mx-music-progress::-moz-range-thumb {
    width: 0;
    height: 0;
    border: 0;
}

.tp-post-article .post_content .mx-music-time {
    color: #9b9b9b;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
}

.tp-post-article .post_content .mx-music-play {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #2f435a;
}

.tp-post-article .post_content .mx-music-play svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.tp-post-article .post_content mx_music.is-playing .mx-music-play svg path {
    d: path("M7 5h4v14H7zM13 5h4v14h-4z");
}

.tp-post-article .post_content mx_music audio {
    display: none;
}

.tp-post-article .post_content .mx-music-group {
    display: grid;
    gap: 0;
    margin: 18px 0;
    padding: 8px 18px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--bg-card);
}

.tp-post-article .post_content .mx-music-group-title {
    padding: 8px 0 10px;
    color: #2f435a;
    font-size: 15px;
    font-weight: 700;
}

.tp-post-article .post_content .mx-music-playlist-status {
    padding: 12px 0;
    color: var(--text-muted);
    font-size: 13px;
}

.tp-post-article .post_content .mx-music-playlist {
    max-height: 460px;
    overflow: auto;
    overscroll-behavior: contain;
}

.tp-post-article .post_content .mx-music-group mx_music {
    grid-template-columns: 44px minmax(0, 1fr) 30px;
    gap: 14px;
    margin: 0;
    padding: 10px 0;
    border: 0;
    border-top: 1px solid var(--line-soft);
    border-radius: 0;
    background: transparent;
}

.tp-post-article .post_content .mx-music-playlist mx_music:first-of-type {
    border-top: 0;
}

.tp-post-article .post_content .mx-music-group mx_music.is-playing {
    grid-template-columns: 64px minmax(0, 1fr) 34px;
    gap: 18px;
    margin: 8px 0;
    padding: 14px 16px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: rgba(47, 67, 90, .045);
}

.tp-post-article .post_content .mx-music-group .mx-music-cover {
    width: 34px;
    height: 34px;
}

.tp-post-article .post_content .mx-music-group mx_music.is-playing .mx-music-cover {
    width: 56px;
    height: 56px;
}

.tp-post-article .post_content .mx-music-group .mx-music-cover span {
    inset: 10px;
}

.tp-post-article .post_content .mx-music-group .mx-music-cover span.has-cover {
    inset: 4px;
}

.tp-post-article .post_content .mx-music-group mx_music.is-playing .mx-music-cover span {
    inset: 15px;
}

.tp-post-article .post_content .mx-music-group mx_music.is-playing .mx-music-cover span.has-cover {
    inset: 7px;
}

.tp-post-article .post_content .mx-music-group .mx-music-body {
    gap: 8px;
}

.tp-post-article .post_content .mx-music-group mx_music.is-playing .mx-music-body {
    gap: 12px;
}

.tp-post-article .post_content .mx-music-group mx_music.is-playing .mx-music-title {
    font-size: 14px;
    font-weight: 700;
}

:root[data-theme="dark"] .tp-post-article .post_content mx_music {
    border-color: var(--line-primary);
    background: var(--bg-card);
}

:root[data-theme="dark"] .tp-post-article .post_content .mx-music-group {
    border-color: var(--line-primary);
    background: var(--bg-card);
}

:root[data-theme="dark"] .tp-post-article .post_content .mx-music-title,
:root[data-theme="dark"] .tp-post-article .post_content .mx-music-play,
:root[data-theme="dark"] .tp-post-article .post_content .mx-music-group-title {
    color: var(--text-primary);
}

@keyframes mx-music-spin {
    to {
        transform: rotate(360deg);
    }
}

.tp-post-article .post_content>.item_image {
    margin: 12px auto;
}

.tp-post-article .post_content .item_image img,
.tp-post-article .post_content .cat_container img {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    object-fit: cover;
    cursor: pointer;
    transition: filter .22s ease, transform .22s ease;
}

.tp-post-article .post_content .item_image:hover img {
    filter: brightness(.98);
    transform: translateY(-1px);
}

.tp-post-article .post_content cat_article_video iframe,
.tp-post-article .post_content cat_article_video video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 8px;
    background: rgba(47, 42, 38, 0.12);
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0;
}

.article-tags br {
    display: none;
}

.article-tags a {
    margin: 0;
    padding: 4px 12px;
    border: 1px solid var(--control-border);
    border-radius: 999px;
    background: var(--control-bg);
    box-shadow: var(--control-shadow);
    color: var(--control-text);
    font-size: 13px;
    line-height: 20px;
}

.article-tags a:hover {
    border-color: var(--control-hover-border);
    background: var(--control-hover-bg);
    box-shadow: var(--control-hover-shadow);
    color: var(--control-hover-text);
}

.post-near {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0 18px;
}

.post-near-card {
    min-width: 0;
    min-height: 64px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--control-border);
    border-radius: 7px;
    background: var(--control-bg);
    box-shadow: var(--control-shadow);
    color: var(--control-text);
    transition: all .22s ease;
}

.post-near-card:hover {
    border-color: var(--control-hover-border);
    background: var(--control-hover-bg);
    box-shadow: var(--control-hover-shadow);
    color: var(--control-hover-text);
}

.post-near-next {
    grid-template-columns: minmax(0, 1fr) 34px;
    text-align: right;
}

.post-near-body {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.post-near-body strong {
    overflow: hidden;
    color: var(--text-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-near-body small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1;
}

.post-near-arrow {
    position: relative;
    width: 11px;
    height: 11px;
    margin: 0 auto;
    border-left: 2px solid var(--ink-decor);
    border-bottom: 2px solid var(--ink-decor);
    transform: rotate(45deg);
}

.post-near-next .post-near-arrow {
    border: 0;
    border-right: 2px solid var(--ink-decor);
    border-top: 2px solid var(--ink-decor);
    transform: rotate(45deg);
}

.post-near-card:hover .post-near-arrow {
    border-color: var(--accent-brown);
}

.post-near-card.is-disabled {
    opacity: .58;
    cursor: not-allowed;
    border-color: var(--control-disabled-border);
    background: var(--control-disabled-bg);
    box-shadow: var(--control-disabled-shadow);
    color: var(--control-disabled-text);
}

@media (max-width: 800px) {
    .main_screen {
        width: min(100% - 24px, var(--page-width));
    }
    .tp-post-article .post_content {
        max-width: none;
        margin-top: 6px;
    }
    .post-meta {
        gap: 6px 10px;
    }
    .tp-post-article .post_content table {
        display: table;
        width: 100%;
        min-width: 100%;
        table-layout: fixed;
        white-space: normal;
        overflow: hidden;
    }
    .tp-post-article .post_content th,
    .tp-post-article .post_content td {
        min-width: 0;
        padding: 9px 10px;
        white-space: normal;
        word-break: break-word;
    }
    .tp-post-article .post_content table:has(tr> :nth-child(5)) {
        display: block;
        min-width: 0;
        table-layout: auto;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .tp-post-article .post_content table:has(tr> :nth-child(5)) th,
    .tp-post-article .post_content table:has(tr> :nth-child(5)) td {
        min-width: 120px;
        white-space: nowrap;
        word-break: normal;
    }
    .tp-post-article .post_content .cat_container.grid2,
    .tp-post-article .post_content .cat_container.grid3 {
        grid-template-columns: 1fr 1fr;
    }
    .tp-post-article .post_content .mx-photo-row {
        overflow-x: visible;
        gap: 8px;
        flex-wrap: nowrap;
        padding-bottom: 0;
    }
    .tp-post-article .post_content .mx-photo-item {
        min-width: 0;
    }
    .post-near {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .tp-post-article .post_content {
        overflow-x: hidden;
    }
    .tp-post-article .post_content div.code-toolbar {
        margin-left: -2px;
        margin-right: -2px;
    }
    .tp-post-article .post_content pre,
    .tp-post-article .post_content pre[class*="language-"] {
        font-size: 12px;
        line-height: 1.7;
    }
    .tp-post-article .post_content pre[class*="language-"].line-numbers {
        padding-left: 3.2em;
    }
    .tp-post-article .post_content blockquote {
        padding: 12px 14px 12px 16px;
        border-left-width: 4px;
        border-radius: 10px 7px 7px 10px;
    }
    .tp-post-article .post_content th,
    .tp-post-article .post_content td {
        padding: 8px;
    }
    .tp-post-article .post_content .cat_container.grid2,
    .tp-post-article .post_content .cat_container.grid3 {
        grid-template-columns: 1fr;
    }
    .tp-post-article .post_content .mx-photo-item {
        min-width: 0;
    }
    .tp-post-article .post_content .mx-photo-row {
        gap: 5px;
        margin: 8px 0;
    }
}

/* ===== 正文底部：发布/编辑 + 旧文提示（2026-10-16 加） ===== */
.post-updated { margin: 26px 0 4px; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--line-secondary); border-left: 3px solid var(--accent-gold); border-right: 3px solid var(--accent-gold); border-radius: 8px; font-size: 13px; color: var(--text-secondary); line-height: 1.7; }
.post-updated-main { display: flex; align-items: flex-start; gap: 8px; }
.post-updated-icon { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; fill: none; stroke: var(--accent-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.post-updated time { color: var(--text-primary); font-weight: 600; }
.post-updated .pu-age { color: var(--accent-brown); font-weight: 600; }
.post-updated .pu-note { color: var(--text-muted); }

/* ===== comment.css ===== */
/* Comment form and list */

#comments,
#comments * {
    box-sizing: border-box;
}

#comments {
    margin-bottom: 40px;
    scroll-margin-top: 110px;
}

#comments ul,
#comments li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#comments .respond {
    position: relative;
    z-index: 1300;
    display: block;
    margin: 24px 0;
}

#comments .cat_comment_respond_form {
    display: grid;
    gap: 10px;
    width: 100%;
    padding: 16px;
    border: 1px solid var(--line-primary);
    border-radius: 12px;
    background: var(--bg-card);
    box-shadow: 0 10px 28px rgba(62, 57, 52, .035);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

#comments .cat_comment_respond_form .card,
#comments .comment-form-btn-wrap .card {
    overflow: visible;
    word-break: normal;
}

#comments .cat_comment_respond_form .head {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#comments .cat_comment_respond_form .head .list,
#comments .cat_comment_respond_form .body {
    border: 1px solid var(--line-secondary);
    border-radius: 8px;
    background: var(--bg-card);
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

#comments .cat_comment_respond_form .head .list:focus-within,
#comments .cat_comment_respond_form .body:focus-within,
#comments .tp-comment-captcha:focus-within {
    border-color: var(--control-hover-border);
    background: var(--control-bg);
    box-shadow: var(--control-hover-shadow);
}

#comments .cat_comment_respond_form input,
#comments .cat_comment_respond_form textarea {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-body);
    font: 14px/1.7 var(--font-main);
}

#comments .cat_comment_respond_form .head input {
    height: 36px;
    padding: 0 12px;
}

#comments .cat_comment_respond_form .body {
    padding: 0;
}

#comments .cat_comment_respond_form .Comment_Textarea {
    display: block;
    min-height: 92px;
    padding: 11px 12px;
    resize: vertical;
}

#comments .cat_comment_respond_form input::placeholder,
#comments .cat_comment_respond_form textarea::placeholder {
    color: var(--text-muted);
}

#comments .comment-form-btn-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#comments .comment-form-btn-wrap .right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#comments .tp-comment-captcha {
    display: inline-flex;
    flex: 1 1 138px;
    align-items: center;
    width: 138px;
    min-width: 0;
    max-width: 138px;
    height: 34px;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    background: var(--control-bg);
    box-shadow: var(--control-shadow);
    overflow: hidden;
}

#comments .tp-comment-captcha-input {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 100%;
    padding: 0 6px;
    font-size: 13px;
    line-height: 32px;
    text-transform: lowercase;
}

#comments .tp-comment-captcha-code {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48%;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 100%;
    padding: 0;
    border-left: 1px solid var(--control-border);
    background: radial-gradient(circle at 10px 8px, color-mix(in srgb, var(--accent-brown) 16%, transparent) 0 1px, transparent 1.4px), radial-gradient(circle at 38px 23px, color-mix(in srgb, var(--accent-brown) 12%, transparent) 0 1px, transparent 1.4px), linear-gradient(180deg, var(--control-bg), var(--control-hover-bg));
    color: var(--control-text);
    cursor: pointer;
    font: italic 700 15px/32px Consolas, "Courier New", monospace;
    letter-spacing: 2.5px;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, .8), -1px 0 0 rgba(171, 59, 58, .16);
    user-select: none;
}

#comments .tp-comment-captcha-code:hover {
    background: var(--control-hover-bg);
    color: var(--control-hover-text);
    filter: contrast(1.08) saturate(1.08);
}

#comments .tp-comment-captcha-code img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tp-puzzle-lock {
    overflow: hidden;
}

.tp-puzzle-modal {
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.tp-puzzle-modal[hidden] {
    display: none !important;
}

.tp-puzzle-mask {
    position: absolute;
    inset: 0;
    background: rgba(32, 25, 18, .18);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.tp-puzzle-dialog {
    position: relative;
    width: min(380px, calc(100vw - 28px));
    padding: 18px 16px 16px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(180deg, #fffbf5 0%, #fbf5eb 100%);
    box-shadow: 0 22px 48px rgba(70, 52, 35, .22);
    color: #4f4034;
    overflow: hidden;
}

.tp-puzzle-dialog::before,
.tp-puzzle-dialog::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.tp-puzzle-dialog::before {
    inset: 0;
    background: radial-gradient(circle, rgba(125, 101, 75, .12) 0 1.1px, transparent 1.4px) 40px 42px / 48px 48px, radial-gradient(circle, rgba(125, 101, 75, .08) 0 1px, transparent 1.4px) 18px 10px / 72px 72px;
    opacity: .65;
}

.tp-puzzle-dialog::after {
    display: none;
}

.tp-puzzle-close {
    position: absolute;
    right: 12px;
    top: 8px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border: 0;
    background: transparent;
    color: #745231;
    cursor: pointer;
    font: 26px/24px Arial, sans-serif;
}

.tp-puzzle-head {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 14px;
    text-align: center;
}

.tp-puzzle-head strong {
    margin-top: 8px;
    color: #3f332a;
    font: 800 22px/1.15 var(--font-main);
}

.tp-puzzle-head em {
    margin-top: 8px;
    color: #ad9f91;
    font: 700 14px/1.2 var(--font-main);
    font-style: normal;
}

.tp-puzzle-shield {
    width: 30px;
    height: 30px;
    fill: #6E4F2F;
}

.tp-puzzle-stage {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(205, 190, 172, .72);
    box-shadow: 0 10px 24px rgba(92, 68, 45, .08);
}

.tp-puzzle-bg {
    position: relative;
    aspect-ratio: 332 / 158;
    min-height: 150px;
    background: linear-gradient(rgba(255, 251, 245, .08), rgba(55, 48, 39, .08)), url("../static/images/captcha_bg.png") center / cover no-repeat;
}

.tp-puzzle-hole,
.tp-puzzle-piece {
    --tp-puzzle-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='black' d='M20 20H39C36 8 44 0 54 0S72 8 69 20H80Q92 20 92 32V84Q92 96 80 96H20Q8 96 8 84V70C24 73 36 63 36 54S24 35 8 38V32Q8 20 20 20Z'/%3E%3C/svg%3E");
    position: absolute;
    width: 66px;
    aspect-ratio: 1;
    border-radius: 8px;
    background: rgba(255, 255, 255, .98);
    -webkit-mask: var(--tp-puzzle-shape) center / 100% 100% no-repeat;
    mask: var(--tp-puzzle-shape) center / 100% 100% no-repeat;
}

.tp-puzzle-hole::after,
.tp-puzzle-piece::after {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: 1;
    pointer-events: none;
    background: var(--tp-puzzle-fill);
    border-radius: 6px;
    -webkit-mask: var(--tp-puzzle-shape) center / 100% 100% no-repeat;
    mask: var(--tp-puzzle-shape) center / 100% 100% no-repeat;
}

.tp-puzzle-hole {
    --tp-puzzle-fill: linear-gradient(rgba(52, 48, 41, .82), rgba(52, 48, 41, .82)), url("../static/images/captcha_bg.png") calc(var(--puzzle-x, 0px) * -1) calc(var(--puzzle-y, 0px) * -1) / var(--stage-width, 332px) var(--stage-height, 158px) no-repeat;
    filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 1)) drop-shadow(1px 0 0 rgba(255, 255, 255, 1)) drop-shadow(0 1px 0 rgba(255, 255, 255, 1)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 1)) drop-shadow(0 0 4px rgba(255, 255, 255, .9)) drop-shadow(0 6px 10px rgba(40, 32, 24, .28));
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .9), inset 0 12px 18px rgba(255, 255, 255, .1), inset 0 -12px 18px rgba(28, 24, 20, .18);
}

.tp-puzzle-piece {
    --tp-puzzle-fill: linear-gradient(rgba(226, 217, 201, .88), rgba(194, 181, 160, .88)), url("../static/images/captcha_bg.png") calc(var(--puzzle-x, 0px) * -1) calc(var(--puzzle-y, 0px) * -1) / var(--stage-width, 332px) var(--stage-height, 158px) no-repeat;
    filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 1)) drop-shadow(1px 0 0 rgba(255, 255, 255, 1)) drop-shadow(0 1px 0 rgba(255, 255, 255, 1)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 1)) drop-shadow(0 0 4px rgba(255, 255, 255, .95)) drop-shadow(0 7px 12px rgba(61, 46, 33, .22));
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .96), inset 0 12px 18px rgba(255, 255, 255, .22), inset 0 -14px 20px rgba(111, 91, 65, .16);
    cursor: grab;
    touch-action: none;
}

.tp-puzzle-captcha.is-dragging .tp-puzzle-piece {
    cursor: grabbing;
}

.tp-puzzle-refresh {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 250, 241, .9);
    color: #5d4731;
    cursor: pointer;
    box-shadow: 0 7px 16px rgba(76, 55, 36, .13), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.tp-puzzle-refresh svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tp-puzzle-slider {
    position: relative;
    z-index: 1;
    height: 34px;
    margin-top: 12px;
    border-radius: 999px;
    background: rgba(255, 252, 246, .78);
    box-shadow: inset 0 0 0 1px rgba(221, 207, 190, .82), inset 0 2px 6px rgba(101, 76, 52, .05);
    overflow: hidden;
    user-select: none;
}

.tp-puzzle-slider::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: var(--puzzle-error-width, 0);
    height: 100%;
    background: rgba(255, 78, 66, .34);
    opacity: 0;
}

.tp-puzzle-track-text {
    display: block;
    padding-left: 42px;
    color: #b8ab9d;
    font-size: 12px;
    font-weight: 600;
    line-height: 34px;
    text-align: center;
}

.tp-puzzle-handle {
    position: absolute;
    left: 0;
    top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 30px;
    border: 1px solid rgba(225, 214, 199, .86);
    border-radius: 999px;
    background: #fffdf9;
    box-shadow: 0 5px 12px rgba(91, 68, 49, .1);
    cursor: grab;
    touch-action: none;
    transform: translateX(-50%);
}

.tp-puzzle-handle svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #7d634c;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.tp-puzzle-handle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    opacity: 0;
    transform: translate(-50%, -50%);
    background: linear-gradient(45deg, transparent 40%, #fff 41% 59%, transparent 60%), linear-gradient(-45deg, transparent 40%, #fff 41% 59%, transparent 60%);
}

.tp-puzzle-captcha.is-dragging .tp-puzzle-handle {
    cursor: grabbing;
}

.tp-puzzle-captcha.is-error .tp-puzzle-slider {
    background: var(--bg-soft);
    box-shadow: inset 0 0 0 1px rgba(255, 78, 66, .68), 0 0 0 3px rgba(255, 78, 66, .08);
}

.tp-puzzle-captcha.is-error .tp-puzzle-slider::before,
.tp-puzzle-captcha.is-error .tp-puzzle-handle::after {
    opacity: 1;
}

.tp-puzzle-captcha.is-error .tp-puzzle-handle {
    width: 38px;
    border-color: #ff594d;
    background: #ff594d;
    box-shadow: none;
}

.tp-puzzle-captcha.is-error .tp-puzzle-handle svg {
    opacity: 0;
}

.tp-puzzle-captcha.is-verified .tp-puzzle-slider {
    background: var(--bg-soft);
    box-shadow: inset 0 0 0 1px rgba(107, 156, 101, .46);
}

@media (max-width: 380px) {
    .tp-puzzle-dialog {
        width: min(330px, calc(100vw - 20px));
        padding: 16px 12px 14px;
    }
    .tp-puzzle-head strong {
        font-size: 20px;
    }
    .tp-puzzle-head em,
    .tp-puzzle-track-text {
        font-size: 12px;
    }
    .tp-puzzle-bg {
        min-height: 136px;
    }
    .tp-puzzle-slider {
        height: 34px;
        margin-top: 12px;
    }
    .tp-puzzle-track-text {
        padding-left: 42px;
        line-height: 34px;
    }
    .tp-puzzle-handle {
        top: 2px;
        width: 42px;
        height: 30px;
    }
    .tp-puzzle-handle svg {
        width: 16px;
        height: 16px;
    }
    .tp-puzzle-refresh {
        width: 32px;
        height: 32px;
    }
    .tp-puzzle-refresh svg {
        width: 18px;
        height: 18px;
    }
}

#comments .comment-form-btn-wrap .tp-emoji-picker {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line-secondary);
    border-radius: 50%;
    background: var(--bg-soft) !important;
    color: var(--accent-brown);
    cursor: pointer;
    font-family: emoji, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 18px;
    line-height: 1;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}

#comments .comment-form-btn-wrap .tp-emoji-picker:hover,
#comments .comment-form-btn-wrap .tp-emoji-picker:focus-visible,
#comments .comment-form-btn-wrap .tp-emoji-picker.is-open {
    border-color: var(--accent-brown);
    background: var(--bg-soft) !important;
    color: var(--accent-brown);
    transform: translateY(-1px);
    outline: 0;
}

#comments .comment-form-btn-wrap .tp-emoji-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    bottom: auto;
    display: none;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    width: min(254px, calc(100vw - 32px));
    max-width: min(260px, calc(100vw - 32px));
    max-height: 220px;
    padding: 10px;
    border: 1px solid var(--line-primary);
    border-radius: 10px !important;
    background: var(--bg-card);
    box-shadow: 0 16px 34px rgba(62, 57, 52, .12);
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 2001 !important;
}

#comments .comment-form-btn-wrap .tp-emoji-picker.is-open .tp-emoji-panel {
    display: grid !important;
}

#comments .comment-form-btn-wrap .tp-emoji-panel::before {
    content: "";
    position: absolute;
    left: 10px;
    top: -5px;
    width: 10px;
    height: 10px;
    border-left: 1px solid var(--line-primary);
    border-top: 1px solid var(--line-primary);
    background: var(--bg-card);
    transform: rotate(45deg);
}

#comments .comment-form-btn-wrap .tp-emoji-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font: 20px/1 emoji, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    line-height: 1;
    transition: background-color .18s ease, transform .18s ease;
}

#comments .comment-form-btn-wrap .tp-emoji-item:hover,
#comments .comment-form-btn-wrap .tp-emoji-item:focus-visible {
    background: var(--bg-soft);
    box-shadow: none;
    transform: translateY(-1px);
    outline: 0;
}

#comments .send_anniu_style,
#comments .comment-form-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--control-border);
    border-radius: 8px;
    background: var(--control-bg);
    box-shadow: var(--control-shadow);
    color: var(--control-text);
    cursor: pointer;
    font-size: 13px;
    line-height: 34px;
    white-space: nowrap;
    overflow: visible;
    transition: all .2s ease;
}

#comments .comment-form-cancel {
    background: var(--control-bg);
    color: var(--text-secondary);
}

#comments #cancel-comment-reply-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

#comments .send_anniu_style:hover,
#comments .comment-form-cancel:hover {
    border-color: var(--control-hover-border);
    background: var(--control-hover-bg);
    box-shadow: var(--control-hover-shadow);
    color: var(--control-hover-text);
}

:root[data-theme="dark"] #comments .send_anniu_style,
:root[data-theme="dark"] #comments .send_anniu_style:hover {
    color: var(--text-body);
}

.tp-heart-confirm-mask {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: color-mix(in srgb, var(--line-primary) 34%, transparent);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity .18s ease;
}

.tp-heart-confirm-mask.is-show {
    opacity: 1;
}

.tp-heart-confirm {
    position: relative;
    width: min(300px, calc(100vw - 48px));
    min-height: 148px;
    padding: 14px 22px 16px;
    border: 1px solid color-mix(in srgb, var(--accent-gold) 38%, transparent);
    border-radius: 12px;
    background: url("../static/images/dialog_bg.png") right bottom / 74px auto no-repeat, linear-gradient(135deg, var(--bg-card), var(--bg-soft));
    box-shadow: 0 12px 30px rgba(84, 55, 30, .18), inset 0 1px 0 rgba(255, 255, 255, .72);
    color: #6D4B32;
    transform: translateY(8px) scale(.98);
    transition: transform .18s ease;
}

.tp-heart-confirm-mask.is-show .tp-heart-confirm {
    transform: translateY(0) scale(1);
}

.tp-heart-confirm-close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8A5D37;
    cursor: pointer;
}

.tp-heart-confirm-close::before,
.tp-heart-confirm-close::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    width: 10px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
}

.tp-heart-confirm-close::before {
    transform: rotate(45deg);
}

.tp-heart-confirm-close::after {
    transform: rotate(-45deg);
}

.tp-heart-confirm-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 20px 16px;
    color: #6E4828;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}

.tp-heart-confirm-title span {
    width: 5px;
    height: 5px;
    background: #B47C45;
    transform: rotate(45deg);
}

.tp-heart-confirm-body {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.tp-heart-confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid color-mix(in srgb, var(--accent-gold) 36%, transparent);
    border-radius: 50%;
    background: var(--bg-card);
    box-shadow: 0 5px 12px rgba(116, 74, 35, .08);
    color: #D06B35;
    font: 700 20px/1 Georgia, serif;
}

.tp-heart-confirm-body p {
    margin: 0;
    color: #6D4B32;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
}

.tp-heart-confirm-actions {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
    padding-right: 0;
}

.tp-heart-confirm-btn {
    min-width: 64px;
    height: 24px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--accent-red) 74%, transparent);
    border-radius: 5px;
    background: var(--bg-card);
    color: #9B5A36;
    cursor: pointer;
    font-size: 12px;
    line-height: 22px;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.tp-heart-confirm-btn.is-ok {
    background: #C86135;
    color: #FFF8EC;
    box-shadow: 0 5px 12px rgba(198, 97, 53, .2);
}

.tp-heart-confirm-btn:hover,
.tp-heart-confirm-btn:focus-visible {
    background: #B7532C;
    color: #FFF8EC;
    outline: 0;
}

#comments .tp-comment-panel {
    margin-top: 26px;
    padding: 18px 22px;
    border: 1px solid var(--line-primary);
    border-radius: 12px;
    background: var(--bg-card);
    box-shadow: 0 10px 28px rgba(62, 57, 52, .045);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

#comments .tp-comment-head,
#comments .tp-comment-title-wrap,
#comments .tp-comment-meta,
#comments .tp-comment-foot,
#comments .tp-comment-actions,
#comments .tp-comment-from,
#comments .tp-comment-from>span,
#comments .tp-heart-action,
#comments .tp-reply-action {
    display: flex;
    align-items: center;
}

#comments .tp-comment-head {
    gap: 16px;
}

#comments .tp-comment-title-wrap {
    gap: 10px;
    min-width: 0;
}

#comments .tp-comment-title-mark {
    display: inline-block;
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    background-color: var(--accent-brown);
    -webkit-mask: url("../static/images/comment.svg") center / contain no-repeat;
    mask: url("../static/images/comment.svg") center / contain no-repeat;
    opacity: .9;
}

#comments .tp-comment-title-mark::after {
    display: none;
    content: none;
}

#comments .comments-list-title {
    margin: 0;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
}

#comments .tp-comment-count {
    color: var(--text-secondary);
    font-size: 13px;
}

#comments .comment-list {
    display: grid;
    gap: 0;
}

#comments .comment-list>.tp-comment-item {
    padding: 13px 0 15px;
    border-bottom: 0;
}

#comments .tp-comment-card {
    position: relative;
}

#comments .tp-comment-main {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 5px;
    align-items: start;
}

#comments .tp-comment-avatar-wrap .avatar,
#comments .avatar {
    display: block;
    width: 30px !important;
    height: 30px !important;
    border: 1px solid var(--line-secondary);
    border-radius: 50%;
    background: var(--bg-soft);
    object-fit: cover;
}

#comments .tp-comment-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "top top" "text text" "foot actions";
    column-gap: 16px;
    min-width: 0;
}

#comments .tp-comment-top {
    grid-area: top;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

#comments .tp-comment-meta {
    flex-wrap: wrap;
    gap: 4px 8px;
    min-height: 20px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 20px;
}

#comments .tp-comment-author,
#comments .tp-comment-author a {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

#comments .tp-comment-author a:hover {
    color: var(--accent-brown);
}

#comments .tp-comment-level,
#comments .commentapprove {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border: 1px solid color-mix(in srgb, var(--ink-decor) 26%, transparent);
    border-radius: 4px;
    background: var(--bg-soft);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 400;
    line-height: 18px;
}

#comments .commentapprove.tp-comment-level {
    border-color: color-mix(in srgb, var(--accent-brown) 18%, transparent);
    background: var(--accent-brown);
    box-shadow: 0 4px 10px rgba(74, 48, 25, .12);
    color: #FFF8EC;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(50, 32, 16, .2);
}

#comments .commentapprove.comment-level {
    border-color: color-mix(in srgb, var(--accent-brown) 16%, transparent);
    background: var(--accent-brown);
    box-shadow: 0 4px 10px rgba(74, 48, 25, .08);
    color: #FFF8EC;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(50, 32, 16, .16);
}

:root[data-theme="dark"] #comments .commentapprove.comment-level,
:root[data-theme="dark"] #comments .commentapprove.tp-comment-level {
    color: #fff;
}

#comments .tp-heart-badge {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent-red) 14%, transparent);
    background: color-mix(in srgb, var(--accent-red) 8%, transparent);
    color: #9b4a38;
    font-size: 11px;
    line-height: 18px;
}

#comments .tp-comment-text {
    grid-area: text;
    margin-top: 4px;
    color: #222;
    font-size: 16px;
    line-height: 1.58;
    word-break: break-word;
}

:root[data-theme="dark"] #comments .tp-comment-text,
:root[data-theme="dark"] #comments .tp-comment-text * {
    color: var(--text-body);
}

#comments .tp-comment-text p {
    margin: 0 0 6px;
}

#comments .tp-comment-text p:last-child {
    margin-bottom: 0;
}

#comments .comment-list-item-relation,
#comments .tp-comment-time,
#comments .tp-comment-from {
    color: #B4ACA4;
}

#comments .tp-comment-foot {
    grid-area: foot;
    gap: 0;
    min-height: 22px;
    margin-top: 6px;
    font-size: 13px;
    line-height: 22px;
}

:root[data-theme="dark"] #comments .tp-comment-foot,
:root[data-theme="dark"] #comments .tp-comment-foot * {
    color: #888a8f !important;
}

#comments .tp-comment-from {
    flex-wrap: wrap;
    gap: 0;
    min-width: 0;
    font-size: 13px;
}

#comments .tp-comment-from:empty {
    display: none;
}

#comments .tp-comment-from>span {
    max-width: 100%;
}

#comments .tp-comment-location,
#comments .tp-comment-location * {
    color: inherit !important;
}

#comments .tp-comment-from>span::before {
    content: "\00b7";
    margin: 0 5px;
}

#comments .tp-comment-from img,
#comments .tp-comment-from svg,
#comments .tp-comment-from .icon,
#comments .tp-comment-from i {
    display: inline-block;
    width: 15px !important;
    height: 15px !important;
    max-width: 15px !important;
    max-height: 15px !important;
    margin: 0 3px;
    object-fit: contain;
    vertical-align: -2px;
    opacity: .58;
}

#comments .tp-comment-from svg {
    flex: 0 0 15px;
}

#comments .comment-waiting {
    margin-bottom: 6px;
    color: var(--accent-red);
    font-size: 13px;
}

#comments .tp-comment-actions {
    grid-area: actions;
    justify-content: flex-end;
    gap: 13px;
    min-height: 22px;
    margin-top: 6px;
    white-space: nowrap;
}

#comments .tp-heart-action,
#comments .tp-reply-action {
    justify-content: center;
    position: relative;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font: 13px/22px var(--font-main);
    font-weight: 400;
    text-decoration: none;
    text-shadow: none;
    transition: color .2s ease;
}

#comments .tp-heart-action::before {
    content: "\2661";
    margin-right: 4px;
    font-size: 17px;
    line-height: 1;
}

#comments .tp-heart-action.is-active::before {
    content: "\2665";
    color: var(--accent-red);
}

#comments .tp-heart-action.is-active {
    color: var(--accent-red);
}

#comments .tp-reply-action::before {
    content: "";
    width: 14px;
    height: 14px;
    margin-right: 4px;
    background-color: currentColor;
    -webkit-mask: url("../static/images/comment.svg") center / contain no-repeat;
    mask: url("../static/images/comment.svg") center / contain no-repeat;
}

#comments .tp-comment-foot>.tp-reply-action {
    margin-left: 10px;
}

#comments .tp-reply-action span {
    color: inherit;
}

#comments .tp-heart-action:hover,
#comments .tp-reply-action:hover {
    color: var(--accent-brown);
    text-decoration: none;
    text-shadow: none;
}

#comments .comment-list>.tp-comment-item>.tp-comment-children {
    margin: 8px 0 0 20px;
    padding: 10px 14px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    background: transparent;
    overflow: visible;
}

#comments .tp-comment-item .respond,
#comments .tp-comment-item .cat_comment_respond_form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#comments .tp-comment-children .comment-list,
#comments .tp-comment-children .tp-comment-children,
#comments .tp-comment-children .tp-comment-item>.tp-comment-children {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

#comments .tp-comment-children .comment-list {
    margin: 0;
}

#comments .tp-comment-children .tp-comment-item {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

#comments .tp-comment-children .tp-comment-item+.tp-comment-item,
#comments .tp-comment-children .tp-comment-children .tp-comment-item {
    margin-top: 12px;
}

#comments .tp-comment-children .tp-comment-main {
    grid-template-columns: 30px minmax(0, 1fr);
}

#comments .tp-comment-children .avatar {
    width: 24px !important;
    height: 24px !important;
}

#comments .tp-comment-children .tp-comment-author,
#comments .tp-comment-children .tp-comment-author a {
    font-size: 14px;
}

#comments .tp-comment-children .tp-comment-text {
    font-size: 15px;
    line-height: 1.55;
}

#comments .comment-list-empty {
    margin: 20px 0 30px;
    padding: 18px 16px;
    border: 1px dashed var(--line-primary);
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--text-secondary);
    text-align: center;
}

#comments .comment-list-empty-text {
    display: block;
    margin: 0;
}

#comments .comment-list-empty-image {
    display: block;
    width: min(100%, 260px);
    max-height: 150px;
    object-fit: contain;
    margin: 0 auto;
}

#comments .comment-pagination {
    margin: 40px 0 0;
}

@media (max-width: 800px) {
    #comments .comment-list>.tp-comment-item>.tp-comment-children {
        margin-left: 0;
    }
    #comments .cat_comment_respond_form .head {
        grid-template-columns: 1fr;
    }
    #comments .tp-comment-head {
        align-items: flex-start;
        flex-direction: column;
    }
    #comments .comment-list-empty {
        margin: 16px 0 30px;
        padding: 12px;
    }
    #comments .comment-list-empty-image {
        width: min(100%, 210px);
        max-height: 116px;
    }
}

@media (max-width: 480px) {
    #comments .comment-list-empty {
        margin: 14px 0 30px;
        padding: 10px;
    }
    #comments .comment-list-empty-image {
        width: min(100%, 178px) !important;
        max-height: 96px !important;
    }
    #comments .comment-form-btn-wrap .tp-emoji-panel {
        width: min(254px, calc(100vw - 24px)) !important;
        max-width: min(254px, calc(100vw - 24px));
        max-height: 190px;
    }
}

#comments .comment-form-btn-wrap {
    position: relative;
    z-index: 60;
    overflow: visible;
}

#comments .comment-form-btn-wrap .tp-emoji-picker {
    z-index: 80;
}

#comments .comment-form-btn-wrap .tp-emoji-picker:hover,
#comments .comment-form-btn-wrap .tp-emoji-picker:focus-within,
#comments .comment-form-btn-wrap .tp-emoji-picker.is-open {
    z-index: 10020;
}

#comments .comment-form-btn-wrap .tp-emoji-panel {
    z-index: 10010 !important;
}

@media (max-width: 480px) {
    #comments .comment-form-btn-wrap .tp-emoji-picker:hover,
    #comments .comment-form-btn-wrap .tp-emoji-picker:focus-within,
    #comments .comment-form-btn-wrap .tp-emoji-picker.is-open {
        transform: none !important;
    }
    #comments .comment-form-btn-wrap .tp-emoji-panel {
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        top: auto !important;
        bottom: calc(100% + 8px) !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        width: min(220px, calc(100vw - 96px)) !important;
        max-width: min(232px, calc(100vw - 96px)) !important;
        max-height: 190px !important;
        transform: none !important;
        z-index: 10010 !important;
    }
    #comments .tp-comment-item .comment-form-btn-wrap .tp-emoji-panel {
        max-width: min(224px, calc(100vw - 116px)) !important;
    }
    #comments .comment-form-btn-wrap .tp-emoji-panel::before {
        display: none;
    }
}

/* 评论为空时主列不拉伸（原为 _comments.html 内联 <style>，2026-10-17 移到此处并加作用域） */
.main_screen:has(.comment-list-empty) > main{flex:0 0 auto!important;}

/* ===== zm-ext.css ===== */
/* ==========================================================================
   Riven（曾墨版）— 补充样式层
   这一层只放「Riven 原版没有、或需要按 ZMBlog 结构微调」的部分，
   颜色全部走 Riven 的 CSS 变量，所以深色模式自动生效。
   加载顺序：在 main/home/post/comment/liuyan 之后。
   ========================================================================== */

/* ---------- 基础 ---------- */
.zm-html { scroll-behavior: smooth; }
.zm-main { display: block; }
main.zm-main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; }
.zm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 18px; border-radius: 6px;
  border: 1px solid var(--line-primary); background: var(--bg-card);
  color: var(--text-body); font-size: 14px; line-height: 1; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.zm-btn:hover { background: var(--bg-soft); color: var(--accent-brown); border-color: var(--control-hover-border); text-decoration: none; }
.zm-btn.ghost { background: transparent; }

/* 空状态 */
.zm-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 16px; text-align: center; }
.zm-empty img { width: min(220px, 60%); opacity: .9; }
.zm-empty p { margin: 0; color: var(--text-secondary); font-size: 14px; }

/* 需要非空判定的地方，隐藏空元素 */
.home-notice-viewport .home-notice-track p { margin: 0; }

/* ---------- 顶部：搜索弹层 / 明暗切换 ---------- */
.zm-search {
  position: fixed; inset: 0; z-index: 9997;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 14vh 16px 0;
  background: color-mix(in srgb, var(--bg-page) 72%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.zm-search[hidden] { display: none; }
.zm-search-box {
  display: flex; align-items: center; gap: 10px;
  width: min(560px, 100%); padding: 12px 16px;
  border: 1px solid var(--line-primary); border-radius: 12px;
  background: var(--bg-float); box-shadow: 0 18px 40px rgba(40, 34, 28, .18);
  color: var(--text-secondary);
}
.zm-search-box input {
  flex: 1 1 auto; min-width: 0; height: 34px; border: 0; outline: none;
  background: transparent; color: var(--text-primary);
  font-family: var(--font-main); font-size: 16px;
}
.zm-search-box button {
  flex: 0 0 auto; white-space: nowrap;
  height: 34px; padding: 0 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--control-border); background: var(--control-bg);
  color: var(--control-text); font-size: 14px; line-height: 1;
  font-family: var(--font-main);
}
.zm-search-box button:hover { background: var(--control-hover-bg); color: var(--control-hover-text); }

/* 搜索即时建议 / 搜索历史（对齐原站 SiteSearch 的下拉） */
.zm-search-panel {
  width: min(560px, 100%); margin-top: 10px;
  max-height: min(52vh, 420px); overflow-y: auto;
  border: 1px solid var(--line-primary); border-radius: 12px;
  background: var(--bg-float); box-shadow: 0 18px 40px rgba(40, 34, 28, .18);
  padding: 6px; font-family: var(--font-main);
}
.zm-search-panel[hidden] { display: none; }
.zm-search-head {
  padding: 8px 10px 6px; font-size: 12px; letter-spacing: .04em;
  color: var(--text-secondary); opacity: .85;
}
.zm-search-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  color: var(--text-primary); text-decoration: none;
}
.zm-search-row:hover, .zm-search-row.is-active { background: var(--control-hover-bg); color: var(--control-hover-text); }
.zm-search-row-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.zm-search-row-sub { flex: 0 0 auto; font-size: 12px; color: var(--text-secondary); opacity: .9; }
.zm-search-row:hover .zm-search-row-sub, .zm-search-row.is-active .zm-search-row-sub { color: var(--control-hover-text); opacity: .85; }
.zm-search-more, .zm-search-clear {
  display: block; padding: 9px 10px; margin-top: 2px; border-radius: 8px;
  font-size: 13px; color: var(--accent-brown, #b08d57); text-decoration: none;
  border-top: 1px dashed var(--line-primary);
}
.zm-search-clear { color: var(--text-secondary); text-align: center; }
.zm-search-more:hover, .zm-search-clear:hover { background: var(--control-hover-bg); color: var(--control-hover-text); }
.zm-search-hint { margin: 8px 0 0; font-size: 12px; color: var(--text-secondary); opacity: .8; }
.zm-search-hint[hidden] { display: none; }
:root[data-theme="dark"] .zm-search-panel { box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }

/* 浮动按钮（深浅切换 / 返回顶部 / 目录 / 评论）由主题 main.css 统一定义 */

/* ---------- 分页补充 ---------- */
.home-pagination li a[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.home-pagination li.zm-page-gap > span {
  display: inline-flex; align-items: center; justify-content: center;
  height: 35px; min-width: 24px; color: var(--text-muted); font-size: 13px;
}
.zm-pagination { margin-top: 8px; }

/* ---------- 文章：元信息 / 版权 / 标签 / 附件 ---------- */
.post-title-block .post-title { margin: 0 auto 10px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--text-secondary); font-size: 13px; }
.post-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.post-meta .post-cat-link { color: var(--accent-brown); }
.post-meta-icon, .post-views-icon { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.post-edit-link { margin-left: auto; color: var(--accent-gold); }

.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.article-tags a {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border: 1px solid var(--line-secondary); border-radius: 13px;
  background: var(--bg-soft); color: var(--text-secondary); font-size: 13px;
}
.article-tags a:hover { color: var(--accent-brown); border-color: var(--accent-gold); text-decoration: none; }

.post-copyright {
  margin: 26px 0 0; padding: 14px 16px; border: 1px dashed var(--line-primary);
  border-radius: 8px; background: color-mix(in srgb, var(--bg-soft) 60%, transparent);
}
.post-copyright-badge {
  display: inline-block; margin-bottom: 6px; padding: 1px 8px; border-radius: 4px;
  background: var(--accent-brown); color: #F7F4EE; font-size: 12px;
}
.post-copyright p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.8; }

.zm-attachments { margin: 26px 0 0; padding: 16px; border: 1px solid var(--line-secondary); border-radius: 8px; background: var(--bg-card); }
.zm-attachments h3 { margin: 0 0 10px; font-size: 15px; }
.zm-attachments ul { margin: 0; padding: 0; list-style: none; }
.zm-attachments li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px dashed var(--line-soft); }
.zm-attachments li:first-child { border-top: 0; }
.zm-attachments .hint { color: var(--text-muted); font-size: 12px; }

/* 目录面板按钮（Riven 有样式，这里补无障碍焦点与当前项） */
.operator-button:focus-visible, .zm-btn:focus-visible, .search-toggle:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
.post-toc-link.is-current { background: var(--bg-soft); color: var(--accent-brown); }

/* 代码复制兜底按钮（Prism 工具栏未启用时） */
.zm-copy-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  height: 24px; padding: 0 10px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--control-border); background: var(--control-bg);
  color: var(--control-text); font-size: 12px; line-height: 1;
  opacity: 0; transition: opacity .18s ease;
}
.tp-post-article .post_content pre { position: relative; }
.tp-post-article .post_content pre:hover .zm-copy-btn,
.zm-copy-btn:focus-visible { opacity: 1; }

/* ---------- 归档时间轴 ---------- */
.zm-timeline { margin-top: 12px; }
.zm-timeline-group { margin: 0 0 22px; }
.zm-timeline-month {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
  font-size: 16px; font-weight: 600;
}
.zm-timeline-month a { color: var(--text-primary); }
.zm-timeline-month a:hover { color: var(--accent-brown); text-decoration: none; }
.zm-timeline-month small { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.zm-timeline-list { margin: 0; padding: 0; list-style: none; }
.zm-timeline-list li { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; }
.zm-timeline-list time { flex: 0 0 auto; width: 92px; color: var(--text-muted); font-size: 13px; }
.zm-timeline-list a { color: var(--text-body); }
.zm-timeline-list a:hover { color: var(--accent-brown); }
@media (max-width: 480px) {
  .zm-timeline-list li { flex-direction: column; gap: 2px; }
  .zm-timeline-list time { width: auto; }
}

/* ---------- 友情链接 ---------- */
.zm-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 18px; }
.zm-link-card {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line-secondary); border-radius: 10px;
  background: var(--bg-card); color: var(--text-primary);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.zm-link-card:hover { transform: translateY(-2px); border-color: var(--accent-gold); box-shadow: var(--control-shadow); text-decoration: none; }
.zm-link-avatar { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: var(--bg-soft); }
.zm-link-body { display: flex; flex-direction: column; min-width: 0; }
.zm-link-body strong { font-size: 14px; font-weight: 600; }
.zm-link-body small { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 评论区补充 ---------- */
.tp-comment-msg { margin: 8px 0 0; min-height: 18px; font-size: 13px; color: var(--text-secondary); }
.tp-comment-msg.is-ok { color: #3B7A57; }
.tp-comment-msg.is-err { color: #B4483B; }
.tp-reply-tip { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 8px 12px; border-radius: 6px; background: var(--bg-soft); color: var(--text-secondary); font-size: 13px; }
.tp-reply-tip[hidden] { display: none; }
.tp-reply-tip button { height: 24px; padding: 0 10px; border: 1px solid var(--control-border); border-radius: 4px; background: var(--control-bg); color: var(--control-text); cursor: pointer; font-size: 12px; }
.send_anniu_style { cursor: pointer; }
.tp-emoji-picker { user-select: none; }
.comment-list-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 0; }
.comment-list-empty img { width: 180px; opacity: .85; }
.comment-list-empty p { margin: 0; color: var(--text-muted); font-size: 13px; }
.tp-comment-closed { margin: 0; padding: 12px 0; color: var(--text-muted); font-size: 14px; }
.comment-pagination { margin-top: 14px; }
.comment-pagination .home-pagination { margin: 0; }

/* ---------- 密码页 / 404 ---------- */
.zm-password, .zm-404 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 46px 16px; }
.zm-password-image { width: min(220px, 55%); opacity: .9; }
.zm-password p { margin: 0; color: var(--text-secondary); }
.zm-password-form { display: flex; gap: 8px; width: min(380px, 100%); margin-top: 6px; }
.zm-password-form input {
  flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 12px;
  border: 1px solid var(--control-border); border-radius: 6px;
  background: var(--control-bg); color: var(--text-primary); font-family: var(--font-main);
}
.zm-password-form button {
  height: 38px; padding: 0 18px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--control-active-border); background: var(--control-active-bg); color: var(--control-active-text);
}
.zm-password-msg { min-height: 18px; font-size: 13px; color: var(--accent-red); }
.zm-password-back a { color: var(--accent-brown); }
.zm-404-code { margin: 0; font-size: 76px; font-weight: 700; line-height: 1; color: var(--accent-gold); letter-spacing: 4px; }
.zm-404-title { margin: 0; font-size: 22px; }
.zm-404-desc { margin: 0; color: var(--text-secondary); }
.zm-404-actions { display: flex; gap: 10px; margin-top: 8px; }

/* ---------- 图片放大（lightbox） ---------- */
.zm-lightbox {
  position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(20, 18, 16, .86); cursor: zoom-out;
}
.zm-lightbox[hidden] { display: none; }
.zm-lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.float-right .operator-button { display: inline-flex; align-items: center; justify-content: center; }
.zm-lightbox-close {
  position: absolute; top: 16px; right: 20px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .35); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.zm-zoomable { cursor: zoom-in; }

/* ---------- 深色模式补丁 ---------- */
:root[data-theme="dark"] .zm-search { background: rgba(20, 20, 20, .78); }
:root[data-theme="dark"] .zm-btn { background: var(--bg-card); color: var(--text-body); }
:root[data-theme="dark"] .zm-link-card { background: var(--bg-card); }
:root[data-theme="dark"] .post-copyright { background: rgba(51, 51, 51, .5); }
:root[data-theme="dark"] .zm-attachments { background: var(--bg-card); }
:root[data-theme="dark"] .tp-reply-tip { background: var(--bg-soft); }

/* ---------- 段落缩进（主题设置可开） ---------- */
.tp-para-indent .post_content > p { text-indent: 2em; }
.tp-para-indent .post_content > p:has(img), .tp-para-indent .post_content > p:has(> img) { text-indent: 0; }

/* ---------- 移动端 ---------- */
@media (max-width: 800px) {
  .tp-nav { padding-right: 4px; }
  .zm-links { grid-template-columns: 1fr 1fr; }
  .zm-link-body small { display: none; }
}
@media (max-width: 480px) {
  .zm-links { grid-template-columns: 1fr; }
  .post-meta { gap: 6px 10px; }
}

/* ---------- 评论点赞 ---------- */
#comments .tp-comment-like {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font: 13px/22px var(--font-main);
}
#comments .tp-comment-like:hover { color: var(--accent-brown); }
#comments .tp-comment-like .tp-like-icon { font-size: 13px; line-height: 1; filter: grayscale(1); opacity: .8; }
#comments .tp-comment-like.is-active .tp-like-icon { filter: none; opacity: 1; }
#comments .tp-comment-like.is-active .tp-like-num { color: var(--accent-brown); }
#comments .tp-comment-foot > .tp-comment-like { margin-left: 10px; }

/* 回复提示条 */
.tp-reply-tip { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; color: var(--text-secondary); }
.tp-reply-tip[hidden] { display: none; }

/* ===== PJAX：顶部加载进度条 + 换页过渡（对齐原站无刷新跳转） ===== */
.is-pjax-loading { cursor: progress; }
.is-pjax-loading::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--accent-brown, #b08d57), #e6c992 60%, transparent);
  transform-origin: 0 50%;
  animation: tp-pjax-bar 1.1s ease-out infinite;
}
@keyframes tp-pjax-bar {
  0% { transform: scaleX(0); opacity: 1; }
  70% { transform: scaleX(.9); opacity: 1; }
  100% { transform: scaleX(1); opacity: .2; }
}
.is-pjax-loading main.zm-main { opacity: .55; transition: opacity .12s linear; }
html[data-pjax='on'] main.zm-main { transition: opacity .18s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .is-pjax-loading::before { animation: none; }
  html[data-pjax='on'] main.zm-main { transition: none; }
}

/* ---------- 「文章归档」页面（对齐原站 /archives.html） ---------- */
.zm-archive-wrap { display: flex; flex-direction: column; gap: 18px; }
.zm-archive-hero {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 24px 16px 6px; text-align: center;
}
.zm-archive-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--bg-soft); border: 1px solid var(--line-primary);
  color: var(--accent-brown);
}
.zm-archive-icon svg { width: 25px; height: 25px; }
.zm-archive-title { margin: 0; font-size: 26px; line-height: 1.35; color: var(--text-primary); }
.zm-archive-hero-line { display: block; width: 46px; height: 3px; border-radius: 2px; background: var(--accent-gold); opacity: .75; }
.zm-archive-sub { color: var(--text-secondary); font-size: 13.5px; }

.zm-archive-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.zm-archive-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 8px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--line-primary);
  box-shadow: var(--control-shadow);
}
.zm-archive-stat strong { font-size: 22px; line-height: 1.2; color: var(--accent-brown); font-weight: 600; }
.zm-archive-stat span { font-size: 12.5px; color: var(--text-secondary); }

.zm-archive-box {
  padding: 16px 16px 18px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--line-primary);
}
.zm-archive-box-title {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--text-primary);
}
.zm-archive-box-title svg { width: 17px; height: 17px; color: var(--accent-brown); }
.zm-archive-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.zm-archive-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--line-secondary);
  color: var(--text-body); font-size: 13px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.zm-archive-chip em { font-style: normal; font-size: 12px; color: var(--text-muted); }
.zm-archive-chip:hover {
  background: var(--control-hover-bg); color: var(--accent-brown);
  border-color: var(--control-hover-border); text-decoration: none;
}

.zm-archive-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.zm-archive-switch {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px;
  border-radius: 999px; font-size: 13px;
  background: var(--bg-soft); border: 1px solid var(--line-secondary); color: var(--text-body);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.zm-archive-switch:hover { border-color: var(--control-hover-border); color: var(--accent-brown); text-decoration: none; }
.zm-archive-switch.active {
  background: var(--control-active-bg); border-color: var(--control-active-border);
  color: var(--control-active-text);
}

.zm-archive-groups { display: flex; flex-direction: column; gap: 10px; }
.zm-archive-group {
  border: 1px solid var(--line-soft); border-radius: 8px; background: var(--bg-page);
  overflow: hidden;
}
.zm-archive-group-head {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 14px; list-style: none; user-select: none;
}
.zm-archive-group-head::-webkit-details-marker { display: none; }
.zm-archive-group-head:hover { background: var(--bg-soft); }
.zm-archive-chevron {
  width: 8px; height: 8px; flex: 0 0 auto; margin-left: 2px;
  border-right: 1.6px solid var(--text-secondary); border-bottom: 1.6px solid var(--text-secondary);
  transform: rotate(-45deg); transition: transform .18s ease;
}
.zm-archive-group[open] .zm-archive-chevron { transform: rotate(45deg); }
.zm-archive-group-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.zm-archive-group-count {
  margin-left: auto; font-size: 12px; color: var(--accent-brown);
  background: var(--bg-soft); border: 1px solid var(--line-secondary);
  border-radius: 999px; padding: 1px 9px;
}
.zm-archive-group-body { display: flex; flex-direction: column; padding: 2px 8px 8px; }
.zm-archive-item {
  display: flex; align-items: baseline; gap: 12px;
  padding: 7px 8px; border-radius: 6px;
}
.zm-archive-item:hover { background: var(--bg-soft); }
.zm-archive-date { flex: 0 0 auto; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.zm-archive-link {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-body); font-size: 14px;
}
.zm-archive-link:hover { color: var(--accent-brown); text-decoration: none; }
:root[data-theme="dark"] .zm-archive-stat strong { color: var(--accent-gold); }
:root[data-theme="dark"] .zm-archive-chip:hover { color: var(--accent-gold); }
:root[data-theme="dark"] .zm-archive-link:hover { color: var(--accent-gold); }
:root[data-theme="dark"] .zm-archive-switch:hover { color: var(--accent-gold); }
@media (max-width: 640px) {
  .zm-archive-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zm-archive-title { font-size: 22px; }
}

/* ===== dark.css ===== */
/* ==========================================================================
   深色模式通用文字/控件配色（从 functions.js headCss() 内联样式抽出）
   对齐 Riven 原版 head.php：把正文与控件文字统一到主题的深色变量。
   ========================================================================== */
:root[data-theme="dark"] body,
:root[data-theme="dark"] main,
:root[data-theme="dark"] section,
:root[data-theme="dark"] article,
:root[data-theme="dark"] p,
:root[data-theme="dark"] li,
:root[data-theme="dark"] span,
:root[data-theme="dark"] small,
:root[data-theme="dark"] time,
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
:root[data-theme="dark"] label,
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] button,
:root[data-theme="dark"] .post_content,
:root[data-theme="dark"] .post_content *:not(pre):not(code):not(kbd):not(samp):not(svg):not(path) {
  color: var(--text-body);
}
:root[data-theme="dark"] a:hover,
:root[data-theme="dark"] button:hover,
:root[data-theme="dark"] [role="button"]:hover,
:root[data-theme="dark"] .tp-nav-link:hover,
:root[data-theme="dark"] .tp-subnav-link:hover,
:root[data-theme="dark"] .home-post:hover .home-post-title,
:root[data-theme="dark"] .home-sticky-content h2 a:hover,
:root[data-theme="dark"] .home-pagination li a[href]:hover {
  color: var(--accent-brown);
}


/* ===== about.css ===== */
.ztj-about-page,.ztj-about-page *{box-sizing:border-box}.ztj-about-page{--about-card-bg:linear-gradient(180deg,rgba(255,253,249,.88),rgba(255,248,239,.76));--about-border:rgba(147,116,78,.16);--about-border-light:rgba(147,116,78,.09);--about-title:#3f352c;--about-text:#5d5044;--about-muted:#8f8172;--about-gold:#b8874d;--about-gold-dark:#8a6037;--about-shadow:0 14px 34px rgba(83,62,38,.055);width:100%;color:var(--about-text);font-family:var(--font-main)}:root[data-theme="dark"] .ztj-about-page{--about-card-bg:linear-gradient(180deg,rgba(42,42,42,.9),rgba(37,37,37,.78));--about-border:rgba(85,85,85,.72);--about-border-light:rgba(85,85,85,.58);--about-title:var(--text-body);--about-text:var(--text-body);--about-muted:var(--text-body);--about-gold:var(--accent-brown);--about-gold-dark:var(--accent-brown);--about-shadow:0 14px 34px rgba(0,0,0,.34)}.ztj-about-wrap{width:100%;max-width:var(--page-width,980px);margin:0 auto;padding:10px 0 26px}.ztj-card{position:relative;margin-bottom:18px;border:1px solid var(--about-border);border-radius:16px;background:var(--about-card-bg);box-shadow:var(--about-shadow);overflow:hidden}.ztj-card::before{content:"";position:absolute;inset:1px;z-index:0;border:1px solid rgba(255,255,255,.52);border-radius:15px;pointer-events:none}:root[data-theme="dark"] .ztj-card::before{border-color:rgba(255,255,255,.08)}.ztj-card>*{position:relative;z-index:1}.ztj-titlebar{min-height:62px;margin-top:8px;padding:0 18px;display:flex;align-items:center}.ztj-titlebar-left{display:flex;align-items:center;gap:13px;min-width:0;width:100%}.ztj-titlebar-icon,.ztj-section-head svg{color:var(--about-gold-dark);flex:0 0 auto}.ztj-titlebar-icon svg{width:25px;height:25px;display:block}.ztj-titlebar-copy{min-width:0;display:flex;align-items:center;gap:14px}.ztj-titlebar h1,.ztj-section-head h2,.ztj-profile-content h2{margin:0;color:var(--about-title);font-weight:700}.ztj-titlebar h1{font-size:22px;line-height:1.2;letter-spacing:.03em;white-space:nowrap}.ztj-titlebar p{position:relative;margin:0;padding-left:14px;color:var(--about-muted);font-size:13px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ztj-titlebar p::before{content:"";position:absolute;left:0;top:50%;width:1px;height:16px;transform:translateY(-50%);background:rgba(147,116,78,.18)}.ztj-profile{min-height:214px;padding:34px 38px;display:grid;grid-template-columns:minmax(250px,310px) minmax(0,1fr);gap:30px;align-items:center}.ztj-profile::after{content:"";position:absolute;right:18px;top:22px;z-index:0;width:150px;height:160px;opacity:.28;background:linear-gradient(104deg,transparent 47%,rgba(111,91,64,.36) 48%,transparent 50%) 72px 15px / 42px 128px no-repeat,linear-gradient(32deg,transparent 46%,rgba(111,91,64,.22) 48%,transparent 51%) 55px 56px / 86px 32px no-repeat,linear-gradient(150deg,transparent 46%,rgba(111,91,64,.18) 48%,transparent 51%) 54px 86px / 86px 32px no-repeat,radial-gradient(ellipse at 82% 88%,rgba(111,91,64,.16),transparent 58%);pointer-events:none}.ztj-avatar-zone{position:relative;min-height:178px;display:flex;align-items:center;justify-content:center}.ztj-about-page .ztj-avatar{width:126px;height:126px;padding:6px;border-radius:50%;border:1px solid rgba(147,116,78,.18);background:rgba(255,252,247,.88);box-shadow:0 12px 28px rgba(83,62,38,.08);transition:transform .28s ease,box-shadow .28s ease}.ztj-about-page .ztj-avatar-zone:hover .ztj-avatar{transform:translateY(-3px) scale(1.025);box-shadow:0 18px 36px rgba(83,62,38,.12)}.ztj-avatar-inner{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.8),transparent 32%),linear-gradient(180deg,#f1e3d0,#dfc2a3);overflow:hidden}.ztj-avatar-inner img{width:100% !important;height:100% !important;display:block;border-radius:50%;object-fit:cover}:root[data-theme="dark"] .ztj-about-page .ztj-avatar{border-color:var(--about-border);background:rgba(51,51,51,.82);box-shadow:0 0 0 3px rgba(30,30,30,.45)}.ztj-float-tag{position:absolute;z-index:2;height:30px;padding:0 10px;border-radius:999px;border:1px solid rgba(184,135,77,.18);background:rgba(255,251,244,.74);color:#8a6a48;display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:1;white-space:nowrap;box-shadow:0 10px 24px rgba(83,62,38,.06);backdrop-filter:blur(8px);transition:transform .24s ease,background .24s ease,border-color .24s ease,box-shadow .24s ease,color .24s ease}.ztj-float-tag svg{width:13px;height:13px}.ztj-float-tag:hover{color:#7a5129;border-color:rgba(184,135,77,.32);background:rgba(255,248,238,.94);box-shadow:0 14px 28px rgba(117,80,42,.10)}:root[data-theme="dark"] .ztj-float-tag,:root[data-theme="dark"] .ztj-stat-box,:root[data-theme="dark"] .ztj-contact-item{color:var(--text-body);border-color:var(--about-border-light);background:rgba(51,51,51,.72)}:root[data-theme="dark"] .ztj-float-tag:hover,:root[data-theme="dark"] .ztj-contact-item:hover{color:var(--accent-brown);border-color:var(--about-border);background:rgba(51,51,51,.92)}.ztj-float-tag-1{left:0;top:27px;transform:rotate(-4deg)}.ztj-float-tag-2{left:6px;bottom:31px;transform:rotate(4deg)}.ztj-float-tag-3{right:0;top:31px;transform:rotate(4deg)}.ztj-float-tag-4{right:7px;bottom:27px;transform:rotate(-4deg)}.ztj-float-tag-1:hover{transform:rotate(-4deg) translateY(-3px)}.ztj-float-tag-2:hover{transform:rotate(4deg) translateY(-3px)}.ztj-float-tag-3:hover{transform:rotate(4deg) translateY(-3px)}.ztj-float-tag-4:hover{transform:rotate(-4deg) translateY(-3px)}.ztj-profile-content h2{font-size:28px;line-height:1.25;letter-spacing:.06em}.ztj-profile-content p,.ztj-story p,.ztj-about-site p{margin:14px 0 0;color:#625548;font-size:14px;line-height:2}.ztj-profile-content p{max-width:620px;font-size:15px}:root[data-theme="dark"] .ztj-titlebar h1,:root[data-theme="dark"] .ztj-section-head h2,:root[data-theme="dark"] .ztj-profile-content h2,:root[data-theme="dark"] .ztj-ten-date strong,:root[data-theme="dark"] .ztj-progress-title,:root[data-theme="dark"] .ztj-ten-stat-item strong,:root[data-theme="dark"] .ztj-stat-text strong,:root[data-theme="dark"] .ztj-contact-text strong{color:var(--text-body)}:root[data-theme="dark"] .ztj-titlebar p,:root[data-theme="dark"] .ztj-profile-content p,:root[data-theme="dark"] .ztj-story p,:root[data-theme="dark"] .ztj-story-sign,:root[data-theme="dark"] .ztj-about-site p,:root[data-theme="dark"] .ztj-section-head span,:root[data-theme="dark"] .ztj-ten-date span,:root[data-theme="dark"] .ztj-ten-stat-item span,:root[data-theme="dark"] .ztj-milestone-item,:root[data-theme="dark"] .ztj-ten-quote,:root[data-theme="dark"] .ztj-stat-text span,:root[data-theme="dark"] .ztj-stat-text em,:root[data-theme="dark"] .ztj-contact-text span{color:var(--text-body)}:root[data-theme="dark"] .ztj-story-sign{color:var(--text-body) !important}.ztj-section,.ztj-contact{padding:24px}.ztj-section-head{display:flex;align-items:center;gap:10px;padding-bottom:15px;border-bottom:1px solid var(--about-border-light)}.ztj-section-head svg{width:22px;height:22px}.ztj-section-head h2{font-size:20px;line-height:1.35;letter-spacing:.06em}.ztj-section-head span{margin-left:10px;color:var(--about-muted);font-size:13px;line-height:1.6}.ztj-story p{margin-top:18px}.ztj-story-sign{text-align:right;color:#9b866f !important;font-style:italic}.ztj-ten-body{padding:28px 32px 10px}.ztj-ten-row{display:grid;grid-template-columns:128px minmax(0,1fr) 128px;gap:28px;align-items:center}.ztj-ten-date{text-align:center}.ztj-ten-date span,.ztj-ten-stat-item span{display:block;color:var(--about-muted);font-size:13px;line-height:1.6}.ztj-ten-date strong{display:block;margin-top:4px;color:#6c533b;font-size:18px;line-height:1.4;font-weight:700}.ztj-progress-title{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:13px;color:#69584a;font-size:17px;font-weight:700;letter-spacing:.04em}.ztj-progress-badge{height:27px;padding:0 12px;border-radius:999px;border:1px solid rgba(184,135,77,.22);background:rgba(255,247,236,.78);color:#a77a46;display:inline-flex;align-items:center;font-size:12px;font-weight:600;letter-spacing:0;white-space:nowrap}.ztj-progress{height:15px;border-radius:999px;background:rgba(227,211,191,.72);border:1px solid rgba(147,116,78,.12);overflow:hidden}:root[data-theme="dark"] .ztj-progress,:root[data-theme="dark"] .ztj-progress-badge{color:var(--text-body);border-color:var(--about-border);background:rgba(51,51,51,.76)}.ztj-progress i{display:block;width:70%;height:100%;border-radius:999px;background:linear-gradient(90deg,#c99759,#d3a568 52%,#b7834a);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}.ztj-ten-stat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px;padding-top:22px;border-top:1px solid var(--about-border-light)}.ztj-ten-stat-item{text-align:center}.ztj-ten-stat-item strong{display:block;margin-top:5px;color:#9a6936;font-size:24px;line-height:1.25;font-weight:700}.ztj-milestone{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:720px;margin:30px auto 0}.ztj-milestone::before{content:"";position:absolute;left:10%;right:10%;top:8px;height:1px;background:linear-gradient(90deg,#b98a51 70%,rgba(183,157,126,.35) 70%)}.ztj-milestone-item{position:relative;z-index:1;text-align:center;color:#8d7a66;font-size:13px;line-height:1.5}.ztj-milestone-dot{width:15px;height:15px;margin:1px auto 9px;border-radius:50%;background:#fff9f1;border:1px solid rgba(183,157,126,.48)}:root[data-theme="dark"] .ztj-milestone-dot{border-color:var(--about-border);background:rgba(51,51,51,.9)}.ztj-milestone-item.is-done .ztj-milestone-dot{background:#b98a51;border-color:#b98a51;box-shadow:0 0 0 4px rgba(185,138,81,.10)}.ztj-milestone-item.is-ellipsis{color:#b19a83;font-size:18px;letter-spacing:.12em;line-height:1.18}.ztj-milestone-item.is-ellipsis .ztj-milestone-dot{width:8px;height:8px;margin-top:4px;margin-bottom:12px;box-shadow:none}.ztj-ten-quote{margin:24px 0 0;text-align:center;color:#a98763;font-size:14px;line-height:1.8;letter-spacing:.08em}.ztj-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:18px;margin-bottom:18px}.ztj-grid .ztj-card{margin-bottom:0}.ztj-stats-grid,.ztj-contact-grid{display:grid;gap:10px;margin-top:18px}.ztj-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ztj-stat-box,.ztj-contact-item{border:1px solid var(--about-border-light);border-radius:12px;background:rgba(255,252,247,.56);display:flex;align-items:center}.ztj-stat-box{min-height:66px;padding:12px 14px;gap:11px}.ztj-stat-icon,.ztj-contact-icon{border-radius:50%;background:#f3e8d8;color:var(--about-gold-dark);display:flex;align-items:center;justify-content:center;flex:0 0 auto}.ztj-stat-icon{width:34px;height:34px}.ztj-stat-icon svg{width:17px;height:17px}.ztj-stat-text{min-width:0;line-height:1.2}.ztj-stat-text span{display:block;margin-bottom:4px;color:var(--about-muted);font-size:12px;line-height:1.2;white-space:nowrap}.ztj-stat-text strong{display:inline-block;color:#7e552d;font-size:22px;line-height:1.1;white-space:nowrap}.ztj-stat-text em{display:inline-block;margin-left:3px;color:#9b8a78;font-size:12px;font-style:normal;white-space:nowrap}.ztj-contact-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.ztj-contact-item{min-height:70px;padding:12px 13px;gap:11px;color:inherit;text-decoration:none;transition:transform .2s ease,border-color .2s ease,background .2s ease}.ztj-contact-item:hover{transform:translateY(-2px);border-color:rgba(184,135,77,.26);background:rgba(255,250,244,.86)}.ztj-contact-icon{width:36px;height:36px}.ztj-contact-icon svg{width:18px;height:18px}.ztj-contact-text{min-width:0}.ztj-contact-text strong,.ztj-contact-text span{display:block;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ztj-contact-text strong{color:#514438;font-size:14px}.ztj-contact-text span{max-width:128px;margin-top:3px;color:var(--about-muted);font-size:12px}:root[data-theme="dark"] .ztj-stat-icon,:root[data-theme="dark"] .ztj-contact-icon{color:var(--accent-brown);background:rgba(215,164,107,.12)}@media (max-width:920px){.ztj-profile,.ztj-grid{grid-template-columns:1fr}.ztj-profile{gap:18px;padding:28px 24px;text-align:center}.ztj-avatar-zone{width:min(100%,330px);margin:0 auto}.ztj-contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:680px){.ztj-card{border-radius:15px}.ztj-card::before{border-radius:14px}.ztj-titlebar{min-height:68px;margin:6px 0 16px;padding:12px 15px}.ztj-titlebar-left{gap:12px}.ztj-titlebar-icon svg{width:23px;height:23px}.ztj-titlebar-copy{flex-direction:column;align-items:flex-start;gap:4px}.ztj-titlebar h1{font-size:20px;line-height:1.25}.ztj-titlebar p{padding-left:0;font-size:12px;line-height:1.45;white-space:normal;overflow:visible;text-overflow:clip}.ztj-titlebar p::before{display:none}.ztj-profile{padding:22px 18px 24px}.ztj-avatar-zone{min-height:168px;width:min(100%,318px)}.ztj-about-page .ztj-avatar{width:104px;height:104px}.ztj-float-tag{height:28px;padding:0 9px;font-size:12px}.ztj-float-tag-1{left:6px;top:24px}.ztj-float-tag-2{left:13px;bottom:25px}.ztj-float-tag-3{right:6px;top:26px}.ztj-float-tag-4{right:13px;bottom:24px}.ztj-profile-content h2{font-size:24px}.ztj-profile-content p,.ztj-story p,.ztj-about-site p{font-size:14px;line-height:1.95}.ztj-section,.ztj-contact,.mx_timeline_card{padding:16px 14px}.ztj-section-head{align-items:flex-start;flex-wrap:wrap;padding-bottom:13px}.ztj-section-head h2{font-size:19px}.ztj-section-head span{width:100%;margin-left:32px}.ztj-ten-body{padding:18px 0 4px}.ztj-ten-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}.ztj-ten-row>div:nth-child(2){grid-column:1 / -1;order:-1;margin-bottom:6px}.ztj-ten-date,.ztj-ten-stat-item{padding:10px 8px;border:1px solid rgba(147,116,78,.08);border-radius:12px;background:rgba(255,252,247,.56)}.ztj-ten-date strong{font-size:15px;white-space:nowrap}.ztj-progress-title{flex-direction:column;gap:8px;margin-bottom:12px;font-size:16px}.ztj-progress{height:13px}.ztj-ten-stat{grid-template-columns:1fr;gap:9px;margin-top:16px;padding-top:14px}.ztj-ten-stat-item{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}.ztj-ten-stat-item strong{margin-top:0;font-size:18px;white-space:nowrap;text-align:right}.ztj-milestone{grid-template-columns:repeat(5,66px);width:max-content;max-width:none;margin:18px 0 0;padding:0 2px 4px;overflow-x:auto;scrollbar-width:none}.ztj-milestone::-webkit-scrollbar{display:none}.ztj-milestone::before{left:28px;right:auto;width:224px}.ztj-milestone-item{font-size:12px}.ztj-ten-quote{margin-top:17px;padding:0 10px;font-size:13px;line-height:1.9;letter-spacing:.03em}.ztj-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}.ztj-stat-box{min-height:64px;padding:10px 11px;gap:9px}.ztj-stat-icon{width:30px;height:30px}.ztj-stat-icon svg{width:15px;height:15px}.ztj-stat-text strong{font-size:21px}.ztj-contact-grid{grid-template-columns:1fr}}@media (max-width:380px){.ztj-avatar-zone{min-height:198px}.ztj-float-tag-1{left:50%;top:0;transform:translateX(-110%) rotate(-3deg)}.ztj-float-tag-3{right:auto;left:50%;top:0;transform:translateX(10%) rotate(3deg)}.ztj-float-tag-2{left:50%;bottom:0;transform:translateX(-110%) rotate(3deg)}.ztj-float-tag-4{right:auto;left:50%;bottom:0;transform:translateX(10%) rotate(-3deg)}.ztj-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ztj-stat-box{min-height:60px;padding:9px 8px;gap:7px}.ztj-stat-icon{width:28px;height:28px}.ztj-stat-text strong{font-size:19px}}.ztj-about-page .ztj-avatar-initial{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:34px;font-weight:700;color:#b8874d;letter-spacing:.02em}.ztj-story p:first-child{margin-top:0}.ztj-story ul,.ztj-story ol{margin:14px 0 0;padding-left:22px;color:#625548;font-size:14px;line-height:2}.ztj-story li{margin:2px 0}.ztj-story blockquote{margin:14px 0 0;padding:10px 14px;border-left:3px solid rgba(184,135,77,.35);border-radius:0 8px 8px 0;background:rgba(184,135,77,.06);color:#6f6053;font-size:14px;line-height:2}.ztj-story h3,.ztj-story h4{margin:20px 0 0;color:#4a3f35;font-size:15px;line-height:1.6}.ztj-story code{padding:1px 5px;border-radius:5px;background:rgba(118,95,71,.1);font-size:13px}.ztj-story a{color:#a77849;text-decoration:none;border-bottom:1px solid rgba(167,120,73,.3)}:root[data-theme="dark"] .ztj-story ul,:root[data-theme="dark"] .ztj-story ol,:root[data-theme="dark"] .ztj-story blockquote,:root[data-theme="dark"] .ztj-story h3,:root[data-theme="dark"] .ztj-story h4{color:var(--text-body)}

/* ===== archive.css ===== */
/* ==========================================================================
   文章归档页样式（guidang-*）—— 从原站主题 guidang.php 内联 <style> 抽出
   对齐原站 /archives.html（第 1 项），配合 _archives.html / _archive_group.html
   ========================================================================== */
            main.guidang-page {
                --gd-bg: rgba(255, 252, 246, .72);
                --gd-panel: rgba(255, 252, 246, .80);
                --gd-panel-soft: rgba(255, 252, 246, .62);
                --gd-border: rgba(125, 100, 72, .14);
                --gd-border-strong: rgba(125, 100, 72, .22);
                --gd-text: #4f4439;
                --gd-sub: #8f8070;
                --gd-soft: #ad9d8c;
                --gd-accent: #bf7d57;
                --gd-accent-dark: #8e6044;
                --gd-shadow: 0 16px 38px rgba(80, 58, 39, .05);
                --gd-shadow-hover: 0 20px 44px rgba(80, 58, 39, .10);
                width: 100%;
            }

            :root[data-theme="dark"] main.guidang-page {
                --gd-bg: rgba(42, 42, 42, .78);
                --gd-panel: rgba(42, 42, 42, .88);
                --gd-panel-soft: rgba(51, 51, 51, .74);
                --gd-border: rgba(85, 85, 85, .72);
                --gd-border-strong: rgba(102, 102, 102, .78);
                --gd-text: var(--text-body);
                --gd-sub: var(--text-secondary);
                --gd-soft: var(--text-muted);
                --gd-accent: var(--accent-brown);
                --gd-accent-dark: var(--accent-brown);
                --gd-shadow: 0 16px 38px rgba(0, 0, 0, .32);
                --gd-shadow-hover: 0 20px 44px rgba(0, 0, 0, .42);
            }

            .guidang-wrap {
                width: 100%;
                max-width: var(--page-width, 860px);
                margin: 0 auto;
                padding: 10px 0 30px;
                color: var(--gd-text);
                font-family: var(--font-main);
            }

            .guidang-hero {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 16px;
                min-height: 62px;
                padding: 0 18px 0 20px;
                margin-bottom: 18px;
                border: 1px solid var(--gd-border);
                border-radius: 10px;
                background: linear-gradient(135deg, rgba(255, 252, 246, .84), rgba(255, 248, 238, .58)), rgba(255, 252, 246, .65);
                box-shadow: 0 12px 30px rgba(80, 61, 42, .05);
                backdrop-filter: blur(10px);
                overflow: hidden;
            }

            :root[data-theme="dark"] .guidang-hero {
                background: linear-gradient(135deg, rgba(42, 42, 42, .9), rgba(37, 37, 37, .74)), var(--gd-panel);
                box-shadow: var(--gd-shadow);
            }

            .guidang-hero::after {
                content: "";
                position: absolute;
                right: 38px;
                top: 50%;
                width: 170px;
                height: 70px;
                transform: translateY(-50%);
                background: radial-gradient(ellipse at 70% 55%, rgba(120, 96, 66, .07), transparent 60%);
                pointer-events: none;
            }

            :root[data-theme="dark"] .guidang-hero::after {
                background: radial-gradient(ellipse at 70% 55%, rgba(215, 164, 107, .12), transparent 60%);
            }

            .guidang-hero-title {
                position: relative;
                z-index: 1;
                display: flex;
                align-items: center;
                gap: 14px;
                min-width: 0;
            }

            .guidang-main-icon {
                width: 30px;
                height: 30px;
                flex: 0 0 auto;
                color: #b08458;
                filter: drop-shadow(0 5px 10px rgba(153, 108, 62, .12));
            }

            .guidang-hero-title strong {
                font-size: 24px;
                line-height: 1;
                color: #42382f;
                font-weight: 650;
                letter-spacing: .05em;
                white-space: nowrap;
            }

            :root[data-theme="dark"] .guidang-hero-title strong,
            :root[data-theme="dark"] .guidang-stat-text strong,
            :root[data-theme="dark"] .guidang-tags-title,
            :root[data-theme="dark"] .guidang-group-title,
            :root[data-theme="dark"] .guidang-link {
                color: var(--text-body);
            }

            .guidang-hero-title i {
                width: 1px;
                height: 19px;
                background: rgba(120, 96, 66, .23);
                font-style: normal;
            }

            :root[data-theme="dark"] .guidang-hero-title i {
                background: var(--gd-border);
            }

            .guidang-hero-title span {
                color: #76695e;
                font-size: 14px;
                white-space: nowrap;
            }

            :root[data-theme="dark"] .guidang-hero-title span,
            :root[data-theme="dark"] .guidang-intro,
            :root[data-theme="dark"] .guidang-stat-text span,
            :root[data-theme="dark"] .guidang-group-count {
                color: var(--text-body);
            }

            .guidang-hero-arrow {
                position: relative;
                z-index: 1;
                width: 18px;
                height: 18px;
                color: #a29181;
            }

            .guidang-hero-arrow::before {
                content: "";
                display: block;
                width: 9px;
                height: 9px;
                margin: 4px 0 0 2px;
                border-top: 1.5px solid currentColor;
                border-right: 1.5px solid currentColor;
                transform: rotate(45deg);
            }

            .guidang-intro {
                margin: 0 0 18px;
                color: #5f5349;
                font-size: 14px;
                line-height: 2;
                letter-spacing: .02em;
            }

            .guidang-intro p { margin: 0; }

            .guidang-stats {
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 12px;
                margin: 0 0 14px;
            }

            .guidang-stat {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 15px;
                min-width: 0;
                min-height: 84px;
                border: 1px solid rgba(120, 96, 66, .14);
                border-radius: 10px;
                background: radial-gradient(circle at 50% 0, rgba(142, 112, 75, .055), transparent 54%), rgba(255, 252, 246, .58);
                box-shadow: 0 10px 24px rgba(80, 61, 42, .045);
                backdrop-filter: blur(8px);
            }

            :root[data-theme="dark"] .guidang-stat,
            :root[data-theme="dark"] .guidang-tags,
            :root[data-theme="dark"] .guidang-group,
            :root[data-theme="dark"] .guidang-empty {
                border-color: var(--gd-border);
                background: var(--gd-panel-soft);
                box-shadow: var(--gd-shadow);
            }

            .guidang-stat-icon {
                width: 42px;
                height: 42px;
                flex: 0 0 42px;
                border-radius: 50%;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                color: #8d7259;
                background: rgba(120, 96, 66, .075);
                border: 1px solid rgba(120, 96, 66, .09);
            }

            :root[data-theme="dark"] .guidang-stat-icon {
                color: var(--accent-brown);
                border-color: var(--gd-border);
                background: rgba(215, 164, 107, .12);
            }

            .guidang-stat-icon svg {
                display: block;
                width: 24px;
                height: 24px;
                flex: 0 0 24px;
            }

            .guidang-stat-text {
                display: flex;
                flex-direction: column;
                gap: 2px;
                min-width: 0;
            }

            .guidang-stat-text span {
                color: #6b5d50;
                font-size: 13px;
            }

            .guidang-stat-text strong {
                color: #42382f;
                font-family: Georgia, "Times New Roman", serif;
                font-size: clamp(26px, 3.15vw, 32px);
                line-height: 1;
                font-weight: 600;
                font-variant-numeric: tabular-nums;
                white-space: nowrap;
            }

            .guidang-tags {
                margin: 0 0 16px;
                padding: 18px;
                border: 1px solid rgba(125, 100, 72, .12);
                border-radius: 12px;
                background: rgba(255, 252, 246, .62);
            }

            .guidang-tags-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                padding-bottom: 16px;
                border-bottom: 1px solid rgba(125, 100, 72, .1);
            }

            :root[data-theme="dark"] .guidang-tags-head {
                border-bottom-color: var(--gd-border);
            }

            .guidang-tags-title,
            .guidang-tag {
                display: flex;
                align-items: center;
            }

            .guidang-tags-title {
                gap: 10px;
                color: #4b4036;
                font-size: 20px;
                font-weight: 700;
            }

            .guidang-tags-title svg {
                width: 22px;
                height: 22px;
                color: #a16f4d;
            }

            .guidang-tags-grid {
                display: grid;
                grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 14px 18px;
                margin-top: 18px;
            }

            .guidang-tag {
                justify-content: space-between;
                gap: 10px;
                min-width: 0;
                height: 38px;
                padding: 0 10px 0 16px;
                border-radius: 10px;
                color: #4f453c;
                text-decoration: none;
                border: 1px solid rgba(148, 118, 82, .12);
                background: rgba(255, 253, 249, .72);
            }

            :root[data-theme="dark"] .guidang-tag {
                color: var(--text-body);
                border-color: var(--gd-border);
                background: rgba(51, 51, 51, .74);
            }

            .guidang-tag:hover {
                border-color: rgba(150, 116, 77, .22);
                background: rgba(255, 254, 251, .9);
            }

            :root[data-theme="dark"] .guidang-tag:hover {
                color: var(--accent-brown);
                border-color: var(--gd-border-strong);
                background: rgba(51, 51, 51, .92);
            }

            .guidang-tag span:first-child {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 15px;
                font-weight: 700;
            }

            .guidang-tag-count {
                flex: 0 0 auto;
                color: #7d7167;
                min-width: 46px;
                height: 24px;
                padding: 0 9px;
                border-radius: 999px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: rgba(255, 253, 249, .78);
                border: 1px solid rgba(146, 121, 91, .12);
                font-size: 13px;
                font-weight: 700;
                font-variant-numeric: tabular-nums;
            }

            :root[data-theme="dark"] .guidang-tag-count {
                color: var(--text-body);
                border-color: var(--gd-border);
                background: rgba(42, 42, 42, .86);
            }

            .guidang-panel {
                border: 1px solid var(--gd-border);
                border-radius: 12px;
                background: linear-gradient(180deg, rgba(255, 252, 246, .84), rgba(255, 249, 240, .62)), rgba(255, 252, 246, .72);
                box-shadow: var(--gd-shadow);
                backdrop-filter: blur(9px);
                padding: 16px;
            }

            :root[data-theme="dark"] .guidang-panel {
                background: var(--gd-panel);
            }

            .guidang-toolbar {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 8px;
                margin-bottom: 14px;
            }

            .guidang-switch {
                display: inline-flex;
                align-items: center;
                height: 36px;
                padding: 0 18px;
                border-radius: 9px;
                border: 1px solid rgba(125, 100, 72, .14);
                background: rgba(255, 252, 246, .82);
                color: #695b4f;
                font-size: 14px;
                text-decoration: none;
                transition: all .18s ease;
            }

            :root[data-theme="dark"] .guidang-switch {
                color: var(--text-body);
                border-color: var(--gd-border);
                background: rgba(42, 42, 42, .86);
            }

            .guidang-switch:hover {
                border-color: rgba(125, 100, 72, .24);
                background: rgba(255, 252, 246, .95);
            }

            :root[data-theme="dark"] .guidang-switch:hover {
                color: var(--accent-brown);
                border-color: var(--gd-border-strong);
                background: rgba(51, 51, 51, .92);
            }

            .guidang-switch.active {
                color: #fff8ed;
                border-color: #b46f4b;
                background: linear-gradient(180deg, #d18d66, #c07752);
                box-shadow: 0 9px 18px rgba(144, 92, 60, .16);
            }

            :root[data-theme="dark"] .guidang-switch.active {
                color: #1E1E1E;
                border-color: var(--accent-brown);
                background: var(--accent-brown);
            }

            .guidang-list {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .guidang-group {
                border: 1px solid rgba(125, 100, 72, .12);
                border-radius: 10px;
                background: rgba(255, 252, 246, .62);
                overflow: hidden;
                transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
            }

            .guidang-group:hover {
                border-color: rgba(125, 100, 72, .18);
                box-shadow: 0 12px 26px rgba(80, 58, 39, .05);
                background: rgba(255, 252, 246, .72);
            }

            :root[data-theme="dark"] .guidang-group:hover,
            :root[data-theme="dark"] .guidang-group.is-open {
                border-color: var(--gd-border-strong);
                background: rgba(51, 51, 51, .82);
                box-shadow: var(--gd-shadow-hover);
            }

            .guidang-group.is-open {
                border-color: rgba(125, 100, 72, .18);
            }

            :root[data-theme="dark"] .guidang-group.is-open {
                border-color: var(--gd-border-strong);
            }

            .guidang-group-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 14px;
                width: 100%;
                padding: 18px 18px;
                border: 0;
                background: transparent;
                cursor: pointer;
                text-align: left;
                color: inherit;
            }

            .guidang-group-left {
                display: flex;
                align-items: center;
                gap: 12px;
                min-width: 0;
            }

            .guidang-chevron {
                position: relative;
                width: 16px;
                height: 16px;
                color: #8f7f70;
                flex: 0 0 auto;
                transition: transform .18s ease, color .18s ease;
            }

            :root[data-theme="dark"] .guidang-chevron,
            :root[data-theme="dark"] .guidang-date,
            :root[data-theme="dark"] .guidang-tags-title svg,
            :root[data-theme="dark"] .guidang-main-icon {
                color: var(--accent-brown);
            }

            .guidang-chevron::before {
                content: "";
                position: absolute;
                left: 4px;
                top: 4px;
                width: 7px;
                height: 7px;
                border-top: 1.6px solid currentColor;
                border-right: 1.6px solid currentColor;
                transform: rotate(135deg);
            }

            .guidang-group.is-open .guidang-chevron {
                transform: rotate(-90deg);
                color: var(--gd-accent-dark);
            }

            .guidang-group-title {
                color: #40362f;
                font-size: 18px;
                font-weight: 650;
                letter-spacing: .02em;
                white-space: nowrap;
            }

            .guidang-group-count {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 84px;
                height: 30px;
                padding: 0 12px;
                border-radius: 999px;
                background: rgba(120, 96, 66, .065);
                color: #8c7c6d;
                font-size: 13px;
                white-space: nowrap;
            }

            .guidang-group-body {
                border-top: 1px solid rgba(125, 100, 72, .09);
                padding: 0 18px;
            }

            :root[data-theme="dark"] .guidang-group-body {
                border-top-color: var(--gd-border);
            }

            .guidang-group-body-inner {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                column-gap: 42px;
                row-gap: 8px;
                padding: 18px 0 16px;
            }

            .guidang-item {
                display: flex;
                align-items: baseline;
                gap: 14px;
                min-width: 0;
                padding: 4px 0;
            }

            .guidang-date {
                color: #b07c60;
                font-family: Georgia, "Times New Roman", serif;
                font-size: 14px;
                line-height: 1.4;
                white-space: nowrap;
                flex: 0 0 auto;
            }

            .guidang-link {
                min-width: 0;
                color: #4d4339;
                font-size: 15px;
                line-height: 1.7;
                text-decoration: none;
                transition: color .18s ease, transform .18s ease;
            }

            .guidang-link:hover {
                color: var(--gd-accent-dark);
                transform: translateX(1px);
            }

            :root[data-theme="dark"] .guidang-link:hover {
                color: var(--accent-brown);
            }

            .guidang-group-body.is-collapsed {
                display: none;
            }

            .guidang-empty {
                padding: 46px 18px;
                text-align: center;
                border: 1px solid var(--gd-border);
                border-radius: 10px;
                color: var(--gd-sub);
                background: rgba(255, 252, 246, .55);
            }

            @media (max-width: 800px) {
                .guidang-hero {
                    min-height: 56px;
                    padding: 0 14px;
                    margin-bottom: 16px;
                }

                .guidang-hero-title {
                    gap: 10px;
                }

                .guidang-main-icon {
                    width: 27px;
                    height: 27px;
                }

                .guidang-hero-title strong {
                    font-size: 20px;
                }

                .guidang-hero-title span {
                    font-size: 13px;
                }

                .guidang-stats {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    gap: 10px;
                }

                .guidang-stat {
                    min-height: auto;
                    padding: 12px 8px;
                    gap: 8px;
                    flex-direction: column;
                    justify-content: center;
                    text-align: center;
                }

                .guidang-stat-icon {
                    width: 36px;
                    height: 36px;
                    flex-basis: 36px;
                }

                .guidang-stat-icon svg {
                    width: 21px;
                    height: 21px;
                    flex-basis: 21px;
                }

                .guidang-stat-text strong {
                    font-size: clamp(22px, 8vw, 28px);
                }

                .guidang-tags {
                    padding: 16px;
                }

                .guidang-tags-grid {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    gap: 12px;
                }

                .guidang-group-body-inner {
                    grid-template-columns: 1fr;
                    column-gap: 0;
                    row-gap: 6px;
                }
            }

            @media (max-width: 520px) {
                .guidang-hero-title span,
                .guidang-hero-title i {
                    display: none;
                }

                .guidang-intro {
                    font-size: 13px;
                    line-height: 1.9;
                }

                .guidang-panel {
                    padding: 12px;
                }

                .guidang-tags {
                    padding: 14px;
                }

                .guidang-tags-head {
                    padding-bottom: 12px;
                }

                .guidang-tags-title {
                    font-size: 18px;
                }

                .guidang-tags-grid {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                }

                .guidang-toolbar {
                    justify-content: stretch;
                }

                .guidang-switch {
                    flex: 1 1 0;
                    justify-content: center;
                    padding: 0 12px;
                }

                .guidang-group-header {
                    padding: 15px 14px;
                }

                .guidang-group-body {
                    padding: 0 14px;
                }

                .guidang-group-title {
                    font-size: 17px;
                }

                .guidang-group-count {
                    min-width: 74px;
                    height: 28px;
                    padding: 0 10px;
                    font-size: 12px;
                }

                .guidang-item {
                    gap: 12px;
                }

                .guidang-link {
                    font-size: 14px;
                    line-height: 1.65;
                }
            }
            /* =========================================================
             * 顶部标题卡片：统一为关于页风格
             * 电脑端：图标 + 标题 + 描述 一行显示
             * 手机端：标题在上，描述在下
             * ========================================================= */
            .guidang-hero {
                min-height: 62px !important;
                margin: 8px 0 18px !important;
                padding: 0 18px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: flex-start !important;
                border-radius: 14px !important;
                border: 1px solid rgba(147, 116, 78, .14) !important;
                background: linear-gradient(180deg, rgba(255, 253, 249, .88), rgba(255, 248, 239, .72)) !important;
                box-shadow: 0 12px 30px rgba(83, 62, 38, .045) !important;
                backdrop-filter: none !important;
                overflow: hidden !important;
            }

            .guidang-hero::before {
                content: "";
                position: absolute;
                inset: 1px;
                border-radius: 13px;
                border: 1px solid rgba(255, 255, 255, .50);
                pointer-events: none;
            }

            .guidang-hero::after,
            .guidang-hero-arrow {
                display: none !important;
            }

            .guidang-hero-title {
                position: relative;
                z-index: 1;
                display: grid !important;
                grid-template-columns: 31px auto 1px minmax(0, 1fr);
                grid-template-areas: "icon title line desc";
                align-items: center !important;
                gap: 0 13px !important;
                min-width: 0;
                width: 100%;
            }

            .guidang-main-icon {
                grid-area: icon;
                width: 31px !important;
                height: 31px !important;
                color: rgba(138, 96, 53, .68) !important;
                filter: none !important;
                display: block !important;
            }

            .guidang-hero-title h1 {
                font-size: 22px;
                line-height: 1.2;
                letter-spacing: .03em;
                white-space: nowrap;
                margin: 0;
                color: #3f352c;
                font-weight: 700;
            }

            .guidang-hero-title i {
                grid-area: line;
                display: block !important;
                width: 1px !important;
                height: 16px !important;
                margin: 0 !important;
                background: rgba(147, 116, 78, .18) !important;
                font-style: normal;
            }

            .guidang-hero-title span {
                grid-area: desc;
                min-width: 0;
                margin: 0 !important;
                color: #8f8172 !important;
                font-size: 13px !important;
                line-height: 1.4 !important;
                white-space: nowrap !important;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            :root[data-theme="dark"] .guidang-hero {
                border-color: var(--gd-border) !important;
                background: linear-gradient(135deg, rgba(42, 42, 42, .9), rgba(37, 37, 37, .76)) !important;
                box-shadow: var(--gd-shadow) !important;
            }

            :root[data-theme="dark"] .guidang-hero::before {
                border-color: rgba(255, 255, 255, .08) !important;
            }

            :root[data-theme="dark"] .guidang-hero-title h1 {
                color: var(--text-body) !important;
            }

            :root[data-theme="dark"] .guidang-hero-title span {
                color: var(--text-body) !important;
            }

            :root[data-theme="dark"] .guidang-main-icon {
                color: var(--accent-brown) !important;
            }

            :root[data-theme="dark"] .guidang-hero-title i {
                background: var(--gd-border) !important;
            }

            @media (max-width: 680px) {
                .guidang-hero {
                    min-height: 68px !important;
                    margin: 6px 0 16px !important;
                    padding: 12px 15px !important;
                    border-radius: 13px !important;
                }

                .guidang-hero::before {
                    border-radius: 12px;
                }

                .guidang-hero-title {
                    grid-template-columns: 28px minmax(0, 1fr);
                    grid-template-areas:
                        "icon title"
                        "icon desc";
                    column-gap: 12px !important;
                    row-gap: 4px !important;
                }

                .guidang-main-icon {
                    width: 28px !important;
                    height: 28px !important;
                }

                .guidang-hero-title i {
                    display: none !important;
                }

                .guidang-hero-title span {
                    display: block !important;
                    font-size: 12px !important;
                    line-height: 1.45 !important;
                    white-space: normal !important;
                    overflow: visible;
                    text-overflow: clip;
                }
            }


/* ===== links.css ===== */
main.links-page{--link-card-bg:rgba(255,252,246,.62);--link-card-bg-hover:rgba(255,252,246,.82);--link-border:rgba(120,96,66,.16);--link-border-hover:rgba(120,96,66,.25);--link-text:#4c4035;--link-muted:#988b7e;--link-brown:#765f47;--link-brown-dark:#5e4935;--link-shadow:0 16px 36px rgba(76,58,39,.055);--link-shadow-hover:0 22px 48px rgba(76,58,39,.11)}:root[data-theme="dark"] main.links-page{--link-card-bg:rgba(42,42,42,.82);--link-card-bg-hover:rgba(51,51,51,.92);--link-border:rgba(85,85,85,.72);--link-border-hover:rgba(102,102,102,.82);--link-text:var(--text-body);--link-muted:var(--text-secondary);--link-brown:var(--accent-brown);--link-brown-dark:var(--accent-brown);--link-shadow:0 16px 36px rgba(0,0,0,.32);--link-shadow-hover:0 22px 48px rgba(0,0,0,.42)}.links-page{width:100%}main.links-page,main.links-page *{box-sizing:border-box}.ztj-links-wrap{width:100%;max-width:var(--page-width,800px);margin:0 auto;padding-top:10px;color:var(--link-text);font-family:var(--font-main)}.ztj-links-hero{position:relative;min-height:68px;display:flex;align-items:center;gap:14px;padding:0 18px;margin-bottom:22px;border:1px solid var(--link-border);border-radius:12px;background:linear-gradient(135deg,rgba(255,252,246,.88),rgba(255,248,238,.64)),rgba(255,252,246,.72);box-shadow:0 10px 26px rgba(80,61,42,.045);backdrop-filter:blur(10px);overflow:hidden}:root[data-theme="dark"] .ztj-links-hero{background:linear-gradient(135deg,rgba(42,42,42,.9),rgba(37,37,37,.76));box-shadow:var(--link-shadow)}.ztj-links-hero-main{position:relative;z-index:1;display:flex;align-items:center;gap:12px;min-width:0}.ztj-links-leaf{width:28px;height:28px;flex:0 0 auto;color:#a77849}.ztj-links-hero-text{display:flex;align-items:center;gap:14px;min-width:0}.ztj-links-hero h1{font-size:22px;line-height:1.2;letter-spacing:.03em;white-space:nowrap;margin:0;color:#3f352c;font-weight:700}:root[data-theme="dark"] .ztj-links-hero h1,:root[data-theme="dark"] .ztj-links-apply-title,:root[data-theme="dark"] .ztj-links-rule-text strong,:root[data-theme="dark"] .ztj-links-sort-title,:root[data-theme="dark"] .ztj-link-name,:root[data-theme="dark"] .ztj-links-empty strong{color:var(--text-body)}.ztj-links-hero p{margin:0;padding-left:14px;border-left:1px solid rgba(120,96,66,.18);color:#8b7e70;font-size:14px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:root[data-theme="dark"] .ztj-links-hero p,:root[data-theme="dark"] .ztj-links-intro,:root[data-theme="dark"] .ztj-links-apply-note,:root[data-theme="dark"] .ztj-links-rule-text span,:root[data-theme="dark"] .ztj-links-site-row dt,:root[data-theme="dark"] .ztj-links-site-row dd,:root[data-theme="dark"] .ztj-links-sort-label,:root[data-theme="dark"] .ztj-links-sort-count,:root[data-theme="dark"] .ztj-links-sort-nav em,:root[data-theme="dark"] .ztj-link-url,:root[data-theme="dark"] .ztj-links-empty,:root[data-theme="dark"] .ztj-links-empty-config{color:var(--text-body)}.ztj-links-intro{margin:0 0 24px;color:#62574d;font-size:15px;line-height:2.05;letter-spacing:.02em}.ztj-links-intro p{margin:0}.ztj-links-apply{margin:0 0 24px}.ztj-links-apply-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:12px}.ztj-links-apply-title{margin:0;color:#40372f;font-size:18px;line-height:1.35;font-weight:700;letter-spacing:.04em}.ztj-links-apply-note{margin:0;color:#9a8b7a;font-size:13px;line-height:1.6;white-space:nowrap}.ztj-links-apply-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(260px,.92fr);gap:12px}.ztj-links-rule-card,.ztj-links-site-card{position:relative;border:1px solid var(--link-border);border-radius:10px;background:radial-gradient(circle at 86% 12%,rgba(167,120,73,.08),transparent 34%),linear-gradient(135deg,rgba(255,252,246,.82),rgba(255,248,238,.58));box-shadow:0 14px 30px rgba(80,61,42,.045);backdrop-filter:blur(10px);overflow:hidden}:root[data-theme="dark"] .ztj-links-rule-card,:root[data-theme="dark"] .ztj-links-site-card,:root[data-theme="dark"] .ztj-links-sort-nav,:root[data-theme="dark"] .ztj-link-card,:root[data-theme="dark"] .ztj-links-empty{border-color:var(--link-border);background:var(--link-card-bg);box-shadow:var(--link-shadow)}.ztj-links-rule-card{padding:18px 18px 16px}.ztj-links-site-card{padding:18px}.ztj-links-card-kicker{display:inline-flex;align-items:center;height:28px;padding:0 12px;margin-bottom:13px;border:1px solid rgba(122,88,50,.22);border-radius:999px;background:linear-gradient(135deg,rgba(132,96,59,.96),rgba(188,143,85,.9));color:#fff9ef;font-size:13px;line-height:1;font-weight:700;letter-spacing:.04em;box-shadow:0 8px 18px rgba(116,86,52,.16)}.ztj-links-rule-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}.ztj-links-rule-item{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:flex-start}.ztj-links-rule-no{width:22px;height:22px;margin-top:0;border-radius:7px;background:rgba(118,95,71,.1);color:#765f47;display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1;font-weight:700;font-family:Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums;flex:0 0 22px}:root[data-theme="dark"] .ztj-links-rule-no,:root[data-theme="dark"] .ztj-links-sort-count,:root[data-theme="dark"] .ztj-links-sort-nav a,:root[data-theme="dark"] .ztj-links-copy{color:var(--text-body);border-color:var(--link-border);background:rgba(51,51,51,.78)}.ztj-links-rule-text strong{display:block;color:#463b32;font-size:15px;line-height:1.45;font-weight:700}.ztj-links-rule-text span{display:block;margin-top:3px;color:#756a60;font-size:13px;line-height:1.7}.ztj-links-site-info{display:grid;gap:8px;margin:0}.ztj-links-site-row{display:grid;grid-template-columns:46px minmax(0,1fr);gap:10px;align-items:center;padding:8px 10px;border:1px solid rgba(120,96,66,.1);border-radius:8px;background:rgba(255,252,246,.48);transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}:root[data-theme="dark"] .ztj-links-site-row{border-color:var(--link-border);background:rgba(51,51,51,.68)}.ztj-links-site-row:hover,.ztj-links-site-row:focus-within{border-color:rgba(120,96,66,.2);background:rgba(255,252,246,.74);box-shadow:0 8px 18px rgba(76,58,39,.055)}:root[data-theme="dark"] .ztj-links-site-row:hover,:root[data-theme="dark"] .ztj-links-site-row:focus-within,:root[data-theme="dark"] .ztj-links-sort-nav a:hover,:root[data-theme="dark"] .ztj-link-card:hover{border-color:var(--link-border-hover);background:var(--link-card-bg-hover);box-shadow:var(--link-shadow-hover)}.ztj-links-site-row dt{color:#9a8b7a;font-size:13px;line-height:1.45}.ztj-links-site-row dd{min-width:0;margin:0;color:#51463c;font-size:13px;line-height:1.45;word-break:break-all;display:flex;align-items:center;gap:8px}.ztj-links-site-row a{color:#765f47;text-decoration:none}:root[data-theme="dark"] .ztj-links-sort-nav a:hover,:root[data-theme="dark"] .ztj-link-card:hover .ztj-link-name{color:var(--accent-brown)}:root[data-theme="dark"] .ztj-links-site-row a{color:var(--text-body)}.ztj-links-copy-text{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}.ztj-links-copy{flex:0 0 auto;height:24px;padding:0 8px;border:1px solid rgba(120,96,66,.16);border-radius:999px;background:rgba(255,252,246,.78);color:#765f47;cursor:pointer;font-size:12px;line-height:1;opacity:0;transform:translateX(4px);transition:opacity .18s ease,transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease}.ztj-links-site-row:hover .ztj-links-copy,.ztj-links-site-row:focus-within .ztj-links-copy{opacity:1;transform:translateX(0)}.ztj-links-copy:hover{border-color:rgba(118,95,71,.42);background:#765f47;color:#fff8ed}.ztj-links-copy.is-copied{border-color:rgba(87,124,77,.3);background:rgba(87,124,77,.13);color:#587a49}.ztj-links-empty-config{margin:15px 0 0;padding:12px 13px;border-radius:8px;background:rgba(118,95,71,.07);color:#6d5b49;font-size:13px;font-weight:700;line-height:1.75}:root[data-theme="dark"] .ztj-links-empty-config{background:rgba(51,51,51,.74)}.ztj-links-sort-nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:10px;border:1px solid var(--link-border);border-radius:12px;background:rgba(255,252,246,.54);box-shadow:0 10px 24px rgba(80,61,42,.038);backdrop-filter:blur(8px)}.ztj-links-sort-label{height:30px;padding:0 9px;display:inline-flex;align-items:center;border-right:1px solid rgba(120,96,66,.14);color:#8b7e70;font-size:13px;white-space:nowrap}:root[data-theme="dark"] .ztj-links-sort-label,:root[data-theme="dark"] .ztj-links-hero p{border-color:var(--link-border)}.ztj-links-sort-nav a{max-width:100%;height:30px;padding:0 11px;border:1px solid rgba(120,96,66,.12);border-radius:999px;background:rgba(255,252,246,.58);color:#6f5a43;display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:1;text-decoration:none;white-space:nowrap;transition:transform .18s ease,background .18s ease,border-color .18s ease}.ztj-links-sort-nav a:hover{transform:translateY(-1px);border-color:rgba(120,96,66,.24);background:rgba(255,252,246,.88)}.ztj-links-sort-nav em{font-style:normal;color:#a18f7c;font-size:12px}.ztj-links-list{display:grid;gap:22px}.ztj-links-sort-section{min-width:0;scroll-margin-top:80px}.ztj-links-sort-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;padding:0 2px}.ztj-links-sort-title-wrap{min-width:0;display:flex;align-items:center;gap:9px}.ztj-links-sort-mark{width:8px;height:22px;border-radius:999px;background:linear-gradient(180deg,rgba(118,95,71,.88),rgba(180,145,101,.42));box-shadow:0 6px 14px rgba(86,65,40,.12);flex:0 0 auto}.ztj-links-sort-title{min-width:0;margin:0;color:#40372f;font-size:18px;line-height:1.35;font-weight:700;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ztj-links-sort-count{flex:0 0 auto;height:28px;padding:0 10px;border:1px solid rgba(120,96,66,.12);border-radius:999px;background:rgba(255,252,246,.58);color:#9a8b7a;display:inline-flex;align-items:center;justify-content:center;font-size:12px;white-space:nowrap}.ztj-links-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.ztj-link-card{position:relative;min-height:68px;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:9px;padding:10px 10px;border:1px solid var(--link-border);border-radius:10px;background:radial-gradient(circle at 86% 16%,rgba(156,126,86,.065),transparent 34%),linear-gradient(135deg,rgba(255,252,246,.66),rgba(255,248,238,.46));box-shadow:0 10px 22px rgba(76,58,39,.045);backdrop-filter:blur(8px);text-decoration:none;color:inherit;overflow:hidden;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}.ztj-link-card:hover{transform:translateY(-2px);border-color:var(--link-border-hover);background:radial-gradient(circle at 86% 16%,rgba(156,126,86,.1),transparent 36%),linear-gradient(135deg,rgba(255,252,246,.84),rgba(255,248,238,.66));box-shadow:0 16px 34px rgba(76,58,39,.085)}.ztj-link-card:focus-visible{outline:3px solid rgba(118,95,71,.18);outline-offset:2px}.ztj-link-cover{width:42px;height:42px;border-radius:9px;overflow:hidden;border:1px solid rgba(120,96,66,.14);background:linear-gradient(135deg,rgba(255,252,246,.9),rgba(232,221,205,.62));display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(73,55,36,.06)}:root[data-theme="dark"] .ztj-link-cover{border-color:var(--link-border);background:rgba(51,51,51,.82);box-shadow:none}.ztj-link-cover img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .32s ease,opacity .32s ease}.ztj-link-card:hover .ztj-link-cover img{transform:scale(1.05);opacity:.94}.ztj-link-placeholder{color:#8f7d67;font-size:18px;font-weight:600;letter-spacing:.03em}.ztj-link-info{min-width:0}.ztj-link-name{display:block;color:#40372f;font-size:15px;line-height:1.25;font-weight:700;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ztj-link-url{display:block;margin-top:4px;color:#8b8076;font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,"Times New Roman",serif}.ztj-links-empty{padding:42px 18px;border:1px solid var(--link-border);border-radius:8px;background:rgba(255,252,246,.62);color:var(--link-muted);text-align:center;line-height:1.9}.ztj-links-empty strong{color:#665646}@media (max-width:820px){.ztj-links-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ztj-links-sort-nav{margin-bottom:16px}.ztj-links-list{gap:20px}.ztj-links-hero{margin-bottom:18px}.ztj-links-apply-head{align-items:flex-start;flex-direction:column;gap:4px}.ztj-links-apply-note{white-space:normal}.ztj-links-apply-grid{grid-template-columns:1fr}}@media (max-width:560px){.ztj-links-hero{min-height:auto;padding:15px 14px;margin-bottom:18px;border-radius:12px}.ztj-links-hero-main{gap:10px}.ztj-links-leaf{width:24px;height:24px;margin-top:1px}.ztj-links-hero-text{flex-direction:column;align-items:flex-start;gap:4px}.ztj-links-hero p{padding-left:0;border-left:0;font-size:13px;line-height:1.5;white-space:normal;overflow:visible;text-overflow:clip}.ztj-links-intro{margin-bottom:17px;font-size:14px;line-height:1.9}.ztj-links-apply{margin-bottom:18px}.ztj-links-sort-nav{gap:7px;padding:9px;border-radius:10px}.ztj-links-sort-label{width:100%;height:auto;padding:0 2px 2px;border-right:0}.ztj-links-sort-nav a{height:28px;max-width:calc(50% - 4px);overflow:hidden;text-overflow:ellipsis}.ztj-links-sort-head{gap:8px;margin-bottom:10px}.ztj-links-sort-title{font-size:16px}.ztj-links-sort-count{height:26px;padding:0 8px;font-size:12px}.ztj-links-apply-title{font-size:16px}.ztj-links-rule-card,.ztj-links-site-card{padding:14px;border-radius:10px}.ztj-links-card-kicker{height:26px;margin-bottom:11px;font-size:12px}.ztj-links-rule-list{gap:9px}.ztj-links-rule-item{grid-template-columns:22px minmax(0,1fr);gap:8px}.ztj-links-rule-no{width:20px;height:20px;border-radius:7px;font-size:11px}.ztj-links-rule-text strong{font-size:14px}.ztj-links-rule-text span,.ztj-links-site-row dt,.ztj-links-site-row dd,.ztj-links-empty-config{font-size:12px}.ztj-links-site-row{grid-template-columns:42px minmax(0,1fr);gap:8px;padding:7px 9px}.ztj-links-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.ztj-link-card{grid-template-columns:36px minmax(0,1fr);gap:8px;min-height:58px;padding:9px 9px}.ztj-link-cover{width:36px;height:36px;border-radius:8px}.ztj-link-name{font-size:14px}.ztj-link-url{font-size:11px}.ztj-links-copy{opacity:1;transform:none}}@media (max-width:380px){.ztj-link-card{grid-template-columns:32px minmax(0,1fr);gap:7px;padding:8px}.ztj-link-cover{width:32px;height:32px}.ztj-link-name{font-size:13px}.ztj-link-url{font-size:10px}}

/* ===== zouxin.css ===== */

            main.heart-comments-page {
                --heart-bg: rgba(255, 252, 246, .72);
                --heart-card: rgba(255, 252, 246, .70);
                --heart-card-hover: rgba(255, 252, 246, .86);
                --heart-border: rgba(120, 96, 66, .16);
                --heart-border-hover: rgba(120, 96, 66, .26);
                --heart-text: #4e4439;
                --heart-sub: #95887b;
                --heart-soft: #b9aa98;
                --heart-brown: #765f47;
                --heart-brown-dark: #5e4935;
                --heart-red: #b86b55;
                --heart-shadow: 0 16px 38px rgba(76, 58, 39, .055);
                --heart-shadow-hover: 0 24px 52px rgba(76, 58, 39, .11);
                width: 100%;
            }

            :root[data-theme="dark"] main.heart-comments-page {
                --heart-bg: rgba(42, 42, 42, .78);
                --heart-card: rgba(42, 42, 42, .84);
                --heart-card-hover: rgba(51, 51, 51, .94);
                --heart-border: rgba(85, 85, 85, .72);
                --heart-border-hover: rgba(102, 102, 102, .82);
                --heart-text: var(--text-body);
                --heart-sub: var(--text-secondary);
                --heart-soft: var(--text-muted);
                --heart-brown: var(--accent-brown);
                --heart-brown-dark: var(--accent-brown);
                --heart-red: var(--accent-red);
                --heart-shadow: 0 16px 38px rgba(0, 0, 0, .32);
                --heart-shadow-hover: 0 24px 52px rgba(0, 0, 0, .42);
            }

            .heart-wrap {
                width: 100%;
                margin: 0 auto;
                color: var(--heart-text);
                padding-top: 10px;
                font-family: var(--font-main);
            }







            :root[data-theme="dark"] .heart-stat-icon,
            :root[data-theme="dark"] .heart-quote {
                color: var(--accent-brown);
            }




            :root[data-theme="dark"] .heart-stat-text strong,
            :root[data-theme="dark"] .heart-name {
                color: var(--text-body);
            }




            :root[data-theme="dark"] .heart-intro,
            :root[data-theme="dark"] .heart-stat-text span,
            :root[data-theme="dark"] .heart-date,
            :root[data-theme="dark"] .heart-comment,
            :root[data-theme="dark"] .heart-source,
            :root[data-theme="dark"] .heart-empty {
                color: var(--text-body);
            }


            .heart-intro {
                margin: 0 0 18px;
                color: #5f5349;
                font-size: 14px;
                line-height: 2;
                letter-spacing: .02em;
            }

            .heart-intro p {
                margin: 0;
            }

            .heart-stats {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 12px;
                margin: 0 0 14px;
            }

            .heart-stat {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 15px;
                min-height: 74px;
                border: 1px solid rgba(120, 96, 66, .14);
                border-radius: 9px;
                background:
                    radial-gradient(circle at 50% 0, rgba(142, 112, 75, .055), transparent 54%),
                    rgba(255, 252, 246, .58);
                box-shadow: 0 10px 24px rgba(80, 61, 42, .045);
                backdrop-filter: blur(8px);
            }

            :root[data-theme="dark"] .heart-stat,
            :root[data-theme="dark"] .heart-card,
            :root[data-theme="dark"] .heart-empty {
                border-color: var(--heart-border);
                background: var(--heart-card);
                box-shadow: var(--heart-shadow);
            }

            .heart-stat-icon {
                width: 42px;
                height: 42px;
                border-radius: 50%;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                color: #8d7259;
                background: rgba(120, 96, 66, .075);
                border: 1px solid rgba(120, 96, 66, .09);
            }

            :root[data-theme="dark"] .heart-stat-icon {
                border-color: var(--heart-border);
                background: rgba(215, 164, 107, .12);
            }

            .heart-stat-icon svg {
                width: 21px;
                height: 21px;
            }

            .heart-stat-text {
                display: flex;
                flex-direction: column;
                gap: 2px;
            }

            .heart-stat-text span {
                color: #6b5d50;
                font-size: 13px;
            }

            .heart-stat-text strong {
                color: #42382f;
                font-family: Georgia, "Times New Roman", serif;
                font-size: 28px;
                line-height: 1;
                font-weight: 600;
            }

            .heart-grid {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 12px;
                margin-top: 2px;
            }

            .heart-card {
                position: relative;
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 236px;
                margin: 0;
                padding: 16px 18px 14px;
                border: 1px solid var(--heart-border);
                border-radius: 9px;
                background:
                    linear-gradient(180deg, rgba(255, 252, 246, .82), rgba(255, 249, 240, .58)),
                    var(--heart-card);
                box-shadow: var(--heart-shadow);
                backdrop-filter: blur(8px);
                overflow: hidden;
                transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
            }

            .heart-card:hover {
                transform: translateY(-2px);
                border-color: var(--heart-border-hover);
                background: var(--heart-card-hover);
                box-shadow: var(--heart-shadow-hover);
            }

            :root[data-theme="dark"] .heart-card:hover {
                border-color: var(--heart-border-hover);
                background: var(--heart-card-hover);
            }

            .heart-card::before {
                content: "";
                position: absolute;
                right: -40px;
                top: -55px;
                width: 140px;
                height: 140px;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(142, 112, 75, .07), transparent 62%);
                pointer-events: none;
            }

            :root[data-theme="dark"] .heart-card::before {
                background: radial-gradient(circle, rgba(215, 164, 107, .1), transparent 62%);
            }

            .heart-card-head {
                position: relative;
                z-index: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                margin-bottom: 10px;
            }

            .heart-author {
                display: flex;
                align-items: center;
                gap: 10px;
                min-width: 0;
            }

            .heart-avatar {
                width: 43px;
                height: 43px;
                border-radius: 50%;
                overflow: hidden;
                flex: 0 0 auto;
                border: 1px solid rgba(120, 96, 66, .15);
                background: rgba(255, 248, 237, .8);
                box-shadow:
                    0 5px 12px rgba(75, 56, 37, .07),
                    0 0 0 3px rgba(255, 252, 246, .55);
                display: flex;
                align-items: center;
                justify-content: center;
                color: #7a654f;
                font-weight: 600;
            }

            :root[data-theme="dark"] .heart-avatar {
                color: var(--text-body);
                border-color: var(--heart-border);
                background: rgba(51, 51, 51, .82);
                box-shadow: 0 0 0 3px rgba(30, 30, 30, .45);
            }

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

            .heart-name {
                min-width: 0;
                color: #3f362f;
                font-size: 16px;
                line-height: 1.2;
                font-weight: 650;
                letter-spacing: .03em;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .heart-date {
                color: #a19487;
                font-size: 12px;
                white-space: nowrap;
                font-family: Georgia, "Times New Roman", serif;
            }

            .heart-comment {
                position: relative;
                z-index: 1;
                display: grid;
                grid-template-columns: 34px minmax(0, 1fr);
                gap: 6px;
                flex: 1 1 auto;
                min-height: 0;
                margin: 4px 0 13px;
                overflow: hidden;
                color: #5d5146;
                font-size: 13px;
                line-height: 1.9;
                letter-spacing: .02em;
            }

            .heart-comment > div {
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
                overflow: hidden;
                word-break: break-word;
            }

            .heart-quote {
                color: rgba(142, 112, 75, .28);
                font-size: 42px;
                line-height: .9;
                font-family: Georgia, "Times New Roman", serif;
                transform: translateY(4px);
                user-select: none;
            }

            .heart-source {
                position: relative;
                z-index: 1;
                display: grid;
                grid-template-columns: auto minmax(0, 1fr);
                align-items: center;
                column-gap: 8px;
                min-width: 0;
                margin-top: auto;
                padding-top: 2px;
                color: #8e8174;
                font-size: 12px;
            }

            .heart-source span {
                flex: 0 0 auto;
                white-space: nowrap;
                line-height: 24px;
            }

            .heart-source a {
                position: relative;
                display: block;
                width: 100%;
                max-width: none;
                min-width: 0;
                min-height: 24px;
                padding: 2px 30px 2px 8px;
                border-radius: 7px;
                color: #7a6654;
                text-decoration: none;
                border: 1px solid transparent;
                background: rgba(120, 96, 66, .035);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                line-height: 20px;
                transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
            }

            :root[data-theme="dark"] .heart-source a {
                color: var(--text-body);
                border-color: var(--heart-border);
                background: rgba(51, 51, 51, .7);
            }

            .heart-source a::after {
                content: "";
                position: absolute;
                right: 9px;
                top: 50%;
                width: 6px;
                height: 6px;
                border-top: 1.4px solid currentColor;
                border-right: 1.4px solid currentColor;
                transform: translateY(-50%) rotate(45deg);
                opacity: .58;
                transition: right .18s ease, opacity .18s ease;
            }

            .heart-source a:hover {
                color: var(--heart-brown-dark);
                background: rgba(118, 95, 71, .105);
                border-color: rgba(118, 95, 71, .22);
                box-shadow: 0 7px 16px rgba(78, 59, 38, .075);
                transform: translateY(-1px);
            }

            :root[data-theme="dark"] .heart-source a:hover {
                color: var(--accent-brown);
                border-color: var(--heart-border-hover);
                background: rgba(51, 51, 51, .92);
                box-shadow: var(--heart-shadow-hover);
            }

            .heart-source a:hover::after {
                right: 7px;
                opacity: .9;
            }

            .heart-empty {
                grid-column: 1 / -1;
                padding: 42px 18px;
                border: 1px solid var(--heart-border);
                border-radius: 10px;
                background: rgba(255, 252, 246, .62);
                color: var(--heart-sub);
                text-align: center;
                font-size: 14px;
            }

            @media (max-width: 800px) {









                .heart-stats {
                    grid-template-columns: repeat(3, minmax(0, 1fr));
                    gap: 10px;
                }

                .heart-stat {
                    min-height: auto;
                    padding: 12px 8px;
                    gap: 8px;
                    flex-direction: column;
                    justify-content: center;
                    text-align: center;
                }

                .heart-stat-icon {
                    width: 36px;
                    height: 36px;
                }

                .heart-stat-icon svg {
                    width: 18px;
                    height: 18px;
                }

                .heart-stat-text strong {
                    font-size: 24px;
                }

                .heart-grid {
                    grid-template-columns: 1fr;
                }
            }

            @media (max-width: 480px) {
                .heart-intro {
                    font-size: 13px;
                    line-height: 1.9;
                }

                .heart-stats {
                    gap: 8px;
                }

                .heart-stat {
                    padding: 10px 6px;
                    border-radius: 8px;
                }

                .heart-stat-text span {
                    font-size: 12px;
                }

                .heart-stat-text strong {
                    font-size: 22px;
                }

                .heart-card {
                    padding: 15px 14px 13px;
                    margin-bottom: 10px;
                }

                .heart-source {
                    column-gap: 6px;
                    font-size: 12px;
                }

                .heart-source a {
                    padding-right: 26px;
                }

                .heart-comment {
                    grid-template-columns: 28px minmax(0, 1fr);
                    font-size: 13px;
                }

                .heart-quote {
                    font-size: 36px;
                }

            }

/* ===== memos.css ===== */
:root {
    --ztj-card: var(--bg-card, #FBFAF7);
    --ztj-soft: var(--bg-soft, #F2EEE8);
    --ztj-border: var(--line-secondary, #E7E1D8);
    --ztj-border-strong: var(--line-primary, #DDD6CC);
    --ztj-text: var(--text-body, #4B463F);
    --ztj-heading: var(--text-primary, #3E3934);
    --ztj-sub: var(--text-secondary, #8C857D);
    --ztj-light: var(--text-muted, #A49D95);
    --ztj-brown: var(--accent-brown, #6E4F2F);
    --ztj-gold: var(--accent-gold, #A78C63);
    --ztj-radius: var(--radius, 10px);
    --ztj-gap: 12px;
    --ztj-soft-shadow: 0 14px 36px rgba(62, 57, 52, .045);
    --ztj-soft-shadow-hover: 0 18px 42px rgba(62, 57, 52, .075);
}

.ztj-memos-wrap {
    width: 100%;
    max-width: var(--page-width, 800px);
    margin: 0 auto;
    color: var(--ztj-text);
    padding-top: 10px;
    font-family: var(--font-main, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif);
}

.ztj-memos-head,
.ztj-memo-card,
.ztj-empty,
.ztj-modal {
    border: 1px solid var(--ztj-border);
    background: var(--ztj-card);
    color: var(--ztj-text);
    box-shadow: var(--ztj-soft-shadow);
}

.ztj-memos-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
    margin: 8px 0 16px;
    padding: 0 18px;
    border-radius: var(--ztj-radius);
}

.ztj-memos-title {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    flex: 1 1 auto;
}

.ztj-leaf {
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    color: var(--ztj-gold);
}

.ztj-memos-title-text {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    line-height: 1;
}

.ztj-memos-title h1,
.ztj-memo-author strong,
.ztj-modal-head strong {
    color: var(--ztj-heading);
    letter-spacing: 0;
    text-shadow: none;
}

.ztj-memos-title h1 {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.ztj-memos-title p {
    position: relative;
    min-width: 0;
    margin: 0;
    padding-left: 14px;
    color: var(--ztj-sub);
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ztj-memos-title p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 16px;
    transform: translateY(-50%);
    background: var(--ztj-border-strong);
}

.ztj-publish-btn,
.ztj-comment-submit,
.ztj-btn.primary {
    height: 34px;
    border: 1px solid var(--control-active-border, var(--ztj-heading));
    border-radius: 8px;
    background: var(--control-active-bg, var(--ztj-heading));
    color: var(--control-active-text, var(--bg-page));
    box-shadow: var(--control-active-shadow, 0 8px 18px rgba(62, 57, 52, .16));
    cursor: pointer;
}

.ztj-publish-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 15px;
    font-size: 13px;
    white-space: nowrap;
}

.ztj-publish-btn:hover,
.ztj-comment-submit:hover,
.ztj-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--control-hover-shadow, 0 10px 24px rgba(62, 57, 52, .12));
}

:root[data-theme="dark"] .ztj-comment-submit,
:root[data-theme="dark"] .ztj-comment-submit:hover {
    color: var(--text-body);
}

.ztj-memo-card {
    position: relative;
    display: grid;
    grid-template-columns: clamp(42px, 6vw, 52px) minmax(0, 1fr);
    gap: clamp(8px, 1.6vw, var(--ztj-gap));
    margin-bottom: 12px;
    padding: clamp(14px, 2.3vw, 18px);
    border-radius: var(--ztj-radius);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ztj-memo-card:hover {
    border-color: var(--ztj-border-strong);
    box-shadow: var(--ztj-soft-shadow-hover);
    transform: translateY(-1px);
}

.ztj-avatar {
    width: clamp(38px, 5.6vw, 44px);
    height: clamp(38px, 5.6vw, 44px);
    border: 1px solid var(--ztj-border-strong);
    border-radius: 50%;
    background: var(--ztj-soft);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

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

.ztj-avatar-text {
    width: 100%;
    height: 100%;
    line-height: 1.05;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ztj-brown);
    font-size: 12px;
    writing-mode: vertical-rl;
    letter-spacing: .08em;
}

.ztj-memo-main {
    min-width: 0;
}

.ztj-memo-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.ztj-memo-author strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.ztj-memo-time {
    display: block;
    margin-top: 3px;
    color: var(--ztj-sub);
    font-size: 12px;
}

.ztj-more-wrap {
    position: relative;
    flex: 0 0 auto;
}

.ztj-more-btn,
.ztj-menu-item,
.ztj-comment-cancel,
.ztj-btn,
.ztj-comment-more {
    border: 1px solid var(--control-border, var(--ztj-border-strong));
    background: var(--control-bg, var(--ztj-card));
    color: var(--control-text, var(--ztj-text));
    box-shadow: var(--control-shadow, none);
}

.ztj-more-btn {
    width: 31px;
    height: 29px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ztj-more-btn::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: -7px 0 0 currentColor, 7px 0 0 currentColor;
    opacity: .78;
}

.ztj-more-btn:hover,
.ztj-more-wrap.open .ztj-more-btn,
.ztj-comment-cancel:hover,
.ztj-btn:hover,
.ztj-comment-more:hover {
    border-color: var(--control-hover-border, var(--ztj-border-strong));
    background: var(--control-hover-bg, var(--ztj-soft));
    color: var(--control-hover-text, var(--ztj-heading));
    box-shadow: var(--control-hover-shadow, none);
}

.ztj-more-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 36px;
    z-index: 20;
    min-width: 104px;
    padding: 7px;
    border: 1px solid var(--ztj-border);
    border-radius: 10px;
    background: var(--bg-float, var(--ztj-card));
    box-shadow: var(--float-shadow, 0 8px 20px rgba(62, 57, 52, .08));
}

.ztj-more-wrap.open .ztj-more-menu {
    display: block;
}

.ztj-menu-item {
    width: 100%;
    height: 35px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .16s ease, color .16s ease;
}

.ztj-menu-item:hover {
    background: var(--control-hover-bg, var(--ztj-soft));
    color: var(--ztj-heading);
}

.ztj-menu-item.danger {
    color: var(--accent-red, #9A5548);
}

.ztj-memo-body,
.ztj-memo-body.only-text,
.ztj-memo-body.only-text .ztj-memo-text {
    display: block;
    width: 100%;
    max-width: none;
}

.ztj-memo-text {
    color: var(--ztj-text);
    font-size: clamp(14px, 1.8vw, 15px);
    line-height: 1.9;
    letter-spacing: 0;
    word-break: break-word;
}

.ztj-memo-text a {
    color: var(--ztj-brown);
    border-bottom: 1px dotted color-mix(in srgb, var(--ztj-brown) 36%, transparent);
}

.ztj-media-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, var(--ztj-thumb-size, 180px));
    gap: 8px;
    justify-self: start;
    margin-top: 12px;
}

.ztj-media-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: var(--ztj-soft);
    display: block;
    cursor: zoom-in;
    text-decoration: none;
    aspect-ratio: 1 / 1;
}

.ztj-media-item img,
.ztj-media-item video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .35s ease, opacity .35s ease;
}

.ztj-media-item:hover img,
.ztj-media-item:hover video {
    transform: scale(1.045);
    opacity: .94;
}

.ztj-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .86);
    background: rgba(0, 0, 0, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    backdrop-filter: blur(4px);
}

.ztj-memo-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--ztj-sub);
    font-size: 13px;
}

.ztj-action-btn {
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    line-height: 1;
    font-size: 13px;
    transition: color .16s ease, transform .16s ease;
}

.ztj-action-btn svg {
    width: 16px;
    height: 16px;
}

.ztj-action-btn:hover,
.ztj-action-btn.liked {
    color: var(--ztj-brown);
}

.ztj-comment-more {
    margin-top: 10px;
    padding: 6px 8px;
    border-radius: 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 12px/1 var(--font-main);
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.ztj-comment-more-arrow {
    width: 13px;
    height: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.ztj-comment-more-arrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.45px solid currentColor;
    border-bottom: 1.45px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    border-radius: 1px;
    transition: transform .18s ease;
}

.ztj-comment-more.is-expanded .ztj-comment-more-arrow::before {
    transform: translateY(2px) rotate(225deg);
}

.ztj-comment-preview {
    margin-top: 12px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ztj-comment-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 22px;
    margin: 0 0 10px;
    color: var(--ztj-sub);
    font-size: 12px;
    line-height: 1.45;
}

.ztj-comment-avatars {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding-left: 1px;
}

.ztj-comment-avatars img,
.ztj-comment-avatars span {
    display: block;
    width: 20px;
    height: 20px;
    margin-left: -6px;
    border: 1px solid var(--bg-card, #FBFAF7);
    border-radius: 50%;
    background: var(--bg-soft, #F2EEE8);
    object-fit: cover;
}

.ztj-comment-avatars img:first-child,
.ztj-comment-avatars span:first-child {
    margin-left: 0;
}

.ztj-comment-preview:not(.expanded) .ztj-comment-list,
.ztj-comment-preview:not(.expanded) .ztj-comment-thread.is-extra {
    display: none;
}

.ztj-comment-thread,
.ztj-comment-list {
    margin-top: 0;
}

.ztj-comment-thread+.ztj-comment-thread,
.ztj-comment-children .ztj-comment-thread+.ztj-comment-thread,
.ztj-comment-children .ztj-comment-children .ztj-comment-thread {
    margin-top: 12px;
}

.ztj-comment-one,
.ztj-comment-children .ztj-comment-one {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: flex-start;
    gap: 5px;
    color: var(--ztj-text);
    font-size: 13px;
    line-height: 1.58;
}

.ztj-comment-one img,
.ztj-comment-one .ztj-comment-avatar {
    width: 30px;
    height: 30px;
    border: 1px solid var(--line-secondary, #E7E1D8);
    border-radius: 50%;
    background: var(--bg-soft, #F2EEE8);
    object-fit: cover;
    box-sizing: border-box;
}

.ztj-comment-body {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "content content" "foot foot";
    column-gap: 16px;
}

.ztj-comment-content {
    grid-area: content;
    min-width: 0;
}

.ztj-comment-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.ztj-comment-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-height: 20px;
    color: var(--ztj-sub);
    font-size: 13px;
    line-height: 20px;
}

.ztj-comment-meta b {
    color: var(--ztj-text);
    font-size: 15px;
    font-weight: 500;
}

.ztj-comment-meta .commentapprove,
.ztj-comment-meta .tp-comment-level,
.ztj-comment-meta .comment-level {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    border: 1px solid color-mix(in srgb, var(--accent-brown, #6E4F2F) 16%, transparent);
    border-radius: 4px;
    background: var(--accent-brown, #6E4F2F);
    box-shadow: 0 4px 10px rgba(74, 48, 25, .08);
    color: #FFF8EC;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-shadow: 0 1px 1px rgba(50, 32, 16, .16);
}

.ztj-comment-text {
    margin-top: 4px;
    color: var(--ztj-text);
    font-size: 15px;
    line-height: 1.58;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.ztj-comment-at {
    margin-right: 4px;
    color: var(--ztj-sub);
}

.ztj-comment-side {
    grid-area: foot;
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 22px;
    margin-top: 6px;
    color: var(--ztj-sub);
    font-size: 13px;
    line-height: 22px;
}

.ztj-comment-side em {
    color: var(--text-muted, #A49D95);
    font-style: normal;
    white-space: nowrap;
}

.ztj-comment-from {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    color: var(--text-muted, #A49D95);
}

.ztj-comment-from::before {
    content: "\00b7";
    margin: 0 5px;
}

.ztj-comment-location,
.ztj-comment-location * {
    color: inherit !important;
}

.ztj-comment-reply-btn {
    height: 22px;
    margin-left: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ztj-sub);
    cursor: pointer;
    font: 13px/22px var(--font-main);
    transition: color .2s ease;
    white-space: nowrap;
}

.ztj-comment-reply-btn::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    background-color: currentColor;
    -webkit-mask: url("../static/images/comment.svg") center / contain no-repeat;
    mask: url("../static/images/comment.svg") center / contain no-repeat;
    vertical-align: -2px;
}

.ztj-comment-reply-btn:hover {
    color: var(--ztj-brown);
}

.ztj-comment-list>.ztj-comment-thread>.ztj-comment-children {
    margin: 8px 0 0 20px;
    padding: 10px 14px 12px;
    border: 1px solid var(--line-soft, #EEE9E2);
    border-radius: 6px;
    background: transparent;
    overflow: visible;
}

.ztj-comment-children .ztj-comment-children {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.ztj-comment-children .ztj-comment-one {
    grid-template-columns: 30px minmax(0, 1fr);
}

.ztj-comment-children .ztj-comment-one img,
.ztj-comment-children .ztj-comment-one .ztj-comment-avatar {
    width: 24px;
    height: 24px;
}

.ztj-comment-children .ztj-comment-meta b {
    font-size: 14px;
}

.ztj-comment-children .ztj-comment-text {
    font-size: 15px;
    line-height: 1.55;
}

.ztj-comment-thread.depth-1,
.ztj-comment-thread.depth-2,
.ztj-comment-thread.depth-3,
.ztj-comment-thread.depth-4,
.ztj-comment-thread.depth-5 {
    padding-left: 0;
}

.ztj-comment-form {
    display: none;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--ztj-border);
    border-radius: 8px;
    background: var(--ztj-soft);
    box-shadow: none;
}

.ztj-comment-form.show {
    display: block;
}

.ztj-comment-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.ztj-comment-url-input {
    margin-bottom: 8px;
}

.ztj-input,
.ztj-textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--control-border, var(--ztj-border-strong));
    background: var(--control-bg, var(--ztj-card));
    color: var(--ztj-text);
    border-radius: 8px;
    outline: none;
    font: 14px / 1.7 var(--font-main);
}

.ztj-input {
    height: 34px;
    padding: 0 10px;
}

.ztj-textarea {
    min-height: 74px;
    padding: 10px;
    resize: vertical;
}

.ztj-input:focus,
.ztj-textarea:focus {
    border-color: var(--ztj-brown);
    background: var(--ztj-card);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ztj-brown) 12%, transparent);
}

.ztj-comment-form-actions {
    margin-top: 9px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.ztj-comment-form .tp-comment-captcha {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    width: 118px;
    height: 32px;
    border: 1px solid var(--control-border, var(--ztj-border-strong));
    border-radius: 8px;
    background: var(--ztj-card);
    overflow: hidden;
}

.ztj-comment-form .tp-comment-captcha-input {
    flex: 0 0 56px;
    width: 56px;
    height: 30px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--ztj-text);
    font-size: 13px;
    line-height: 30px;
    text-transform: lowercase;
}

.ztj-comment-form .tp-comment-captcha-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 60px;
    width: 60px;
    height: 30px;
    padding: 0;
    border-left: 1px solid var(--control-border, var(--ztj-border-strong));
    background: var(--ztj-soft);
    color: var(--ztj-brown);
    cursor: pointer;
}

.ztj-comment-form .tp-comment-captcha-code img {
    width: 60px;
    height: 30px;
    display: block;
    object-fit: cover;
}

.ztj-comment-submit,
.ztj-comment-cancel,
.ztj-btn {
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.ztj-empty {
    padding: 42px 18px;
    border-radius: var(--ztj-radius);
    text-align: center;
    color: var(--ztj-sub);
    font-size: 14px;
}

.ztj-modal-mask {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(62, 57, 52, .28);
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.ztj-modal-mask.show {
    display: flex;
}

.ztj-modal {
    width: min(620px, 100%);
    border-radius: 14px;
    overflow: hidden;
}

.ztj-modal-head {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--ztj-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ztj-modal-titlebar {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.ztj-modal-leaf {
    width: 40px;
    height: 30px;
    flex: 0 0 auto;
    display: inline-block;
    opacity: .82;
    color: var(--ztj-gold);
    background: currentColor;
    -webkit-mask: radial-gradient(ellipse at 35% 55%, #000 0 36%, transparent 37%) left center / 50% 80% no-repeat, radial-gradient(ellipse at 65% 45%, #000 0 34%, transparent 35%) right center / 55% 76% no-repeat;
    mask: radial-gradient(ellipse at 35% 55%, #000 0 36%, transparent 37%) left center / 50% 80% no-repeat, radial-gradient(ellipse at 65% 45%, #000 0 34%, transparent 35%) right center / 55% 76% no-repeat;
}

.ztj-modal-head strong {
    font-size: 22px;
    line-height: 1;
    font-weight: 600;
}

.ztj-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
}

.ztj-modal-body {
    padding: 18px 20px;
}

.ztj-field {
    margin-bottom: 13px;
}

.ztj-field.is-main-text {
    margin-bottom: 15px;
}

.ztj-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--ztj-heading);
    font-size: 13px;
}

.ztj-field small {
    color: var(--ztj-sub);
    font-size: 12px;
}

.ztj-memo-textarea-shell {
    position: relative;
}

.ztj-memo-media-input {
    display: none;
}

.ztj-memo-textarea-shell .ztj-textarea {
    min-height: 164px;
    padding: 18px 18px 34px;
    background-color: var(--control-bg, var(--ztj-card));
    font-size: 15px;
    line-height: 1.8;
}

.ztj-text-count {
    position: absolute;
    right: 18px;
    bottom: 14px;
    color: var(--ztj-sub);
    font-size: 13px;
    line-height: 1;
    pointer-events: none;
}

.ztj-modal textarea.ztj-textarea {
    min-height: 112px;
}

.ztj-modal #ztjMemoImages,
.ztj-modal #ztjMemoVideo {
    min-height: 82px;
}

.ztj-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px 18px;
}

@media (max-width: 720px) {
    .ztj-memos-head {
        min-height: auto;
        padding: 12px;
        gap: 12px;
    }
    .ztj-memos-title-text {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        line-height: normal;
    }
    .ztj-memos-title p {
        padding-left: 0;
    }
    .ztj-memos-title p::before {
        display: none;
    }
    .ztj-media-grid {
        grid-template-columns: repeat(2, var(--ztj-thumb-size, 130px));
    }
}

@media (max-width: 430px) {
    .ztj-comment-body {
        grid-template-columns: minmax(0, 1fr);
    }
    .ztj-comment-side {
        flex-wrap: wrap;
    }
    .ztj-comment-list>.ztj-comment-thread>.ztj-comment-children {
        margin-left: 0;
        padding: 10px;
    }
}

/* ===== guestbook.css ===== */
/* 留言板（guestbook）— hero 卡样式对齐「友链 / 走心评论」页 */
main.guestbook-page {
    padding-top: 10px;
    --gb-text: #4e4439;
    --gb-sub: #8f8172;
    --gb-border: rgba(147, 116, 78, .14);
    --gb-icon: rgba(138, 96, 53, .68);
    --gb-shadow: 0 16px 38px rgba(76, 58, 39, .055);
    width: 100%;
}

:root[data-theme="dark"] main.guestbook-page {
    --gb-text: var(--text-body);
    --gb-sub: var(--text-secondary);
    --gb-border: rgba(85, 85, 85, .72);
    --gb-icon: var(--accent-brown);
}

.zm-gb-hero {
    position: relative;
    min-height: 62px;
    margin: 8px 0 18px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 14px;
    border: 1px solid var(--gb-border);
    background: linear-gradient(180deg, rgba(255, 253, 249, .88), rgba(255, 248, 239, .72));
    box-shadow: 0 12px 30px rgba(83, 62, 38, .045);
    overflow: hidden;
}

:root[data-theme="dark"] .zm-gb-hero {
    background: linear-gradient(135deg, rgba(42, 42, 42, .9), rgba(37, 37, 37, .76));
    box-shadow: var(--gb-shadow);
}

.zm-gb-hero::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .50);
    pointer-events: none;
}

:root[data-theme="dark"] .zm-gb-hero::before {
    border-color: rgba(255, 255, 255, .08);
}

.zm-gb-hero-title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    width: 100%;
}

/* 图标沿用站内评论气泡（assets/static/images/comment.svg） */
.zm-gb-icon {
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    background-color: var(--gb-icon);
    -webkit-mask: url("../static/images/comment.svg") center / contain no-repeat;
    mask: url("../static/images/comment.svg") center / contain no-repeat;
}

.zm-gb-hero-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    line-height: 1;
}

.zm-gb-hero-title h1 {
    margin: 0;
    color: #3f352c;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}

:root[data-theme="dark"] .zm-gb-hero-title h1 {
    color: var(--text-body);
}

.zm-gb-hero-copy>i {
    width: 1px;
    height: 16px;
    background: rgba(147, 116, 78, .18);
    font-style: normal;
    flex: 0 0 auto;
}

:root[data-theme="dark"] .zm-gb-hero-copy>i {
    background: var(--gb-border);
}

.zm-gb-hero-copy>span {
    color: var(--gb-sub);
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 800px) {
    .zm-gb-hero {
        min-height: 68px;
        margin: 6px 0 16px;
        padding: 12px 15px;
        border-radius: 13px;
    }

    .zm-gb-hero::before {
        border-radius: 12px;
    }

    .zm-gb-hero-title {
        gap: 12px;
    }

    .zm-gb-hero-copy {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        line-height: normal;
    }

    .zm-gb-hero-title h1 {
        font-size: 20px;
        line-height: 1.25;
    }

    .zm-gb-hero-copy>i {
        display: none;
    }

    .zm-gb-hero-copy>span {
        font-size: 12px;
        line-height: 1.45;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .zm-gb-icon {
        width: 28px;
        height: 28px;
    }
}

/* ===== subscribe.css ===== */
.es-subscribe{margin:0 0 18px;padding:18px 16px 16px;border:1px solid var(--line-primary);border-radius:12px;background:var(--bg-card);box-shadow:0 10px 28px rgba(62,57,52,.035);text-align:center;}
.es-sub-head{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 14px;}
.es-sub-badge{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--line-secondary);background:var(--bg-soft);color:var(--accent-brown);font-size:17px;}
.es-sub-title{margin:0;font-size:15px;font-weight:600;color:var(--text-primary);}
.es-sub-desc{margin:0;font-size:13px;color:var(--text-secondary);}
.es-hp{position:absolute!important;left:-9999px!important;top:auto!important;width:1px;height:1px;overflow:hidden;opacity:0;}
.es-sub-btn{cursor:pointer;}
.es-sub-cap{display:inline-flex;align-items:center;gap:9px;margin:12px auto 0;padding:6px 8px 6px 12px;border:1px solid var(--line-primary);border-radius:999px;background:var(--bg-soft);font-size:13px;color:var(--text-secondary);}
.es-sub-cap-tag{font-size:11px;line-height:1;color:var(--accent-brown);background:rgba(110,79,47,.10);border-radius:999px;padding:4px 9px;letter-spacing:.5px;}
.es-sub-cap-q{font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:.5px;white-space:nowrap;}
.es-sub-cap input[type=text]{width:58px;padding:5px 8px;border:1px solid var(--line-primary);border-radius:999px;background:var(--bg-card);color:var(--text-primary);text-align:center;font:inherit;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;}
.es-sub-cap input[type=text]:focus{outline:none;border-color:var(--accent-brown);box-shadow:0 0 0 2px rgba(110,79,47,.15);}
.es-sub-msg{margin:8px 0 0;font-size:13px;color:var(--text-secondary);}
.es-sub-msg:empty{display:none;}

/* ===== page-hero.css ===== */
/* ===== 独立页统一标题条（对齐归档页标题：icon + 标题 + 竖线 + 副标题） ===== */
.page-hero{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:16px;min-height:62px;margin:8px 0 18px;padding:0 18px;border:1px solid rgba(147,116,78,.14);border-radius:14px;background:linear-gradient(180deg,rgba(255,253,249,.88),rgba(255,248,239,.72));box-shadow:0 12px 30px rgba(83,62,38,.045);overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:1px;border-radius:13px;border:1px solid rgba(255,255,255,.50);pointer-events:none}
.page-hero-title{position:relative;z-index:1;display:grid;grid-template-columns:31px auto 1px minmax(0,1fr);grid-template-areas:"icon title line desc";align-items:center;gap:0 13px;min-width:0;width:100%}
.page-hero-icon{grid-area:icon;width:31px;height:31px;flex:0 0 auto;display:block;color:rgba(138,96,53,.68)}
.page-hero-title h1{grid-area:title;margin:0;color:#3f352c;font-size:22px;line-height:1.2;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.page-hero-title i{grid-area:line;display:block;width:1px;height:16px;margin:0;background:rgba(147,116,78,.18);font-style:normal}
.page-hero-title span{grid-area:desc;min-width:0;margin:0;color:#8f8172;font-size:13px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root[data-theme="dark"] .page-hero{border-color:rgba(85,85,85,.72);background:linear-gradient(135deg,rgba(42,42,42,.9),rgba(37,37,37,.76));box-shadow:0 16px 38px rgba(0,0,0,.32)}
:root[data-theme="dark"] .page-hero::before{border-color:rgba(255,255,255,.08)}
:root[data-theme="dark"] .page-hero-title h1{color:var(--text-body)}
:root[data-theme="dark"] .page-hero-title span{color:var(--text-body)}
:root[data-theme="dark"] .page-hero-icon{color:var(--accent-brown)}
:root[data-theme="dark"] .page-hero-title i{background:rgba(85,85,85,.72)}
@media (max-width:680px){
.page-hero{min-height:68px;margin:6px 0 16px;padding:12px 15px;border-radius:13px}
.page-hero::before{border-radius:12px}
.page-hero-title{grid-template-columns:28px minmax(0,1fr);grid-template-areas:"icon title" "icon desc";column-gap:12px;row-gap:4px}
.page-hero-icon{width:28px;height:28px}
.page-hero-title i{display:none}
.page-hero-title span{font-size:12px;line-height:1.45;white-space:normal;overflow:visible;text-overflow:clip}
}
/* 有页面用 <span> 当图标（留言页 zm-gb-icon）→ 会同时命中上面的 .page-hero-title span(desc)，
   特异性更高把它挤到 desc 格里 → 这里用更高特异性钉回 icon 格。 */
.page-hero-title span.page-hero-icon{grid-area:icon;width:31px;height:31px;min-width:0;margin:0;font-size:0;line-height:0;color:rgba(138,96,53,.68);overflow:visible;white-space:nowrap}
:root[data-theme="dark"] .page-hero-title span.page-hero-icon{color:var(--accent-brown)}
@media (max-width:680px){.page-hero-title span.page-hero-icon{width:28px;height:28px}}