@charset "UTF-8";
/*!
 * 素简 Simple Grace — Typecho 1.3.0 主题样式
 * 纸墨质感 / 单栏流线 / 零依赖
 * 设计令牌见下方 :root
 */

/* ============================================================
   1. 设计令牌 (Design Tokens)
   ============================================================ */
:root {
    /* 色彩规范 */
    --paper: #FBFBF9;        /* 主背景色（纸色） */
    --ink: #2B2B2B;          /* 主正文字色（墨黑） */
    --ink-mid: #3D3D3B;      /* 摘要等次级正文 */
    --ink-soft: #8C8C88;     /* 次要辅助色（铅灰/元数据） */
    --ink-quote: #6E6E6A;    /* 引用块字色（浅墨灰） */
    --line: #EAE9E4;         /* 细边框 / 分割线 */
    --line-strong: #DAD8D1;  /* 悬停态边框 */
    --line-soft: #F2F1EC;    /* 更浅的分隔线（列表行） */
    --code-bg: #F4F3EF;      /* 代码块背景 */

    /* 纸纹与花边 */
    --desk: #EFF4F1;         /* 纸笺之外的案面色（薄荷灰绿） */
    --frame-line: #DED6C2;   /* 笺纸外框线（浅棕灰） */
    --frame-line-soft: #F4F1E9; /* 笺纸内衬线（近乎看不见，仅留层次） */
    --orn: #BEB5A0;          /* 角饰线色 */

    /* 飘叶（取 Eco Bloom 的绿蓝） */
    --leaf-1: #2D9A68;
    --leaf-2: #6EB5D8;
    --leaf-3: #7FD4A8;
    --leaf-4: #3A7CA5;

    /* 字体规范 */
    --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong",
             "SimSun", Georgia, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
            "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* 内联小图标（SVG data-URI，零外部请求；仅用 alpha 做 mask） */
    --icon-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3C/svg%3E");

    /* 排版律动 */
    --reading-width: 680px;
    --para-space: 1.8em;
    --line-height: 1.9;
    --radius: 3px;
}

/* ============================================================
   2. 基础重置
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    /* 案面：薄荷绿→天蓝柔光 + 极细噪点纸纹（取 Eco Bloom 色调的极淡版本） */
    background-color: var(--desk);
    background-image:
        radial-gradient(ellipse 80% 60% at 12% 18%, rgba(125, 212, 166, 0.30), rgba(125, 212, 166, 0) 55%),
        radial-gradient(ellipse 70% 50% at 88% 12%, rgba(110, 181, 216, 0.28), rgba(110, 181, 216, 0) 50%),
        radial-gradient(ellipse 60% 50% at 78% 88%, rgba(45, 154, 104, 0.14), rgba(45, 154, 104, 0) 55%),
        radial-gradient(ellipse 50% 40% at 18% 82%, rgba(58, 124, 165, 0.16), rgba(58, 124, 165, 0) 50%),
        radial-gradient(115% 70% at 50% 0%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 240px 240px;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 16px;              /* 正文字号 1.05rem */
    line-height: var(--line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection { background: #EDEBE3; color: var(--ink); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; border: 0; }

/* 可访问性：键盘焦点 */
:focus-visible {
    outline: 1px solid var(--ink-soft);
    outline-offset: 2px;
    border-radius: 2px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   3. 页面骨架
   ============================================================ */
.page {
    max-width: var(--reading-width);
    margin: 0 auto;
    padding: 0 22px 80px;
}

/* ---------- 头部 ---------- */
.site-header { padding: 68px 0 30px; }

.site-title {
    display: inline-block;
    font-size: 1.62rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
}
.site-title:hover { border-bottom: 1px solid var(--line-strong); }

.site-logo img { max-height: 46px; display: block; }

.site-desc {
    margin: 0.55em 0 0;
    font-family: var(--sans);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
    line-height: 1.7;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em 1.5em;
    margin-top: 1.15em;
    padding-top: 1.5em;
    border-top: 1px solid var(--line);
    font-family: var(--sans);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
}
.nav-link { color: var(--ink-soft); padding-bottom: 2px; }
.nav-link:hover { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.nav-link.is-current { color: var(--ink); border-bottom: 1px solid var(--ink); }

/* ============================================================
   4. 首页 / 归档列表
   ============================================================ */
.archive-head { padding: 2.2em 0 0; }

.archive-title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 400;
    font-family: var(--sans);
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

.post-list { margin-top: 2.6em; }

.post-item { padding: 2.2em 0; border-bottom: 1px solid var(--line); }
.post-item:first-child { padding-top: 0; }
.post-item:last-child { border-bottom: 0; }

.post-title {
    margin: 0 0 0.6em;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.62;
    letter-spacing: 0.01em;
}
.post-title a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 5px;
}

/* 元数据（无衬线） */
.post-meta {
    font-family: var(--sans);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    line-height: 1.9;
}
.post-meta a { color: var(--ink-soft); border-bottom: 1px solid transparent; }
.post-meta a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.post-meta .dot { margin: 0 0.6em; color: var(--line-strong); }

.post-excerpt { margin: 1em 0 0; color: var(--ink-mid); }
.post-excerpt p { margin: 0 0 var(--para-space); }
.post-excerpt p:last-child { margin-bottom: 0; }

.post-more {
    margin: 1.15em 0 0;
    font-family: var(--sans);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
}
.more-link { color: var(--ink-soft); }
.more-link:hover { color: var(--ink); border-bottom: 1px solid var(--line-strong); }

/* 空状态 */
.post-empty { padding: 3em 0; color: var(--ink-soft); font-family: var(--sans); font-size: 0.86rem; }

/* ============================================================
   5. 分页
   ============================================================ */
.page-navigator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9em;
    margin: 2.6em 0 0;
    padding: 1.4em 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}
.page-navigator li { display: inline-block; }
.page-navigator a { color: var(--ink-soft); border-bottom: 1px solid transparent; }
.page-navigator a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.page-navigator .current,
.page-navigator .current a { color: var(--ink); }
.page-navigator .current a { border-bottom: 1px solid var(--ink); }

/* ============================================================
   6. 文章正文
   ============================================================ */
.post-head { padding-bottom: 0.4em; }

.post-single .post-title { font-size: 1.5rem; margin-bottom: 0.5em; }

.post-content { margin-top: 2.2em; }

.post-content p { margin: 0 0 var(--para-space); }

.post-content h2 {
    margin: 2.6em 0 1.1em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--line);
    font-size: 1.14rem;
    font-weight: 600;
    line-height: 1.6;
}
.post-content h3 {
    margin: 2.2em 0 0.85em;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
}
.post-content h4 {
    margin: 1.9em 0 0.7em;
    font-family: var(--sans);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.post-content ul,
.post-content ol { margin: 0 0 var(--para-space); padding-left: 1.4em; }
.post-content li { margin: 0.42em 0; }
.post-content li > ul,
.post-content li > ol { margin: 0.5em 0; }

/* 引用块：左侧 2px 浅灰实线，无斜体，浅墨灰字 */
.post-content blockquote {
    margin: var(--para-space) 0;
    padding: 0 0 0 1.15em;
    border-left: 2px solid var(--line-strong);
    color: var(--ink-quote);
    font-style: normal;
}
.post-content blockquote p:last-child { margin-bottom: 0; }

/* 链接 */
.post-content a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 4px;
}
.post-content a:hover { text-decoration-color: var(--ink-soft); }

/* 代码 */
.post-content code {
    font-family: var(--mono);
    font-size: 0.87em;
    background: var(--code-bg);
    padding: 0.12em 0.36em;
    border-radius: var(--radius);
}
.post-content pre {
    margin: var(--para-space) 0;
    padding: 1.15em 1.25em;
    background: var(--code-bg);
    border-radius: var(--radius);
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 0.85rem;
    line-height: 1.75;
}
.post-content pre code { background: none; padding: 0; font-size: inherit; }

/* 图片与图注 */
.post-content img { display: block; margin: var(--para-space) auto; }
.post-content figure { margin: var(--para-space) 0; }
.post-content figcaption {
    margin-top: 0.65em;
    font-family: var(--sans);
    font-size: 0.74rem;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
    text-align: center;
}

/* 表格 */
.post-content table {
    width: 100%;
    margin: var(--para-space) 0;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.post-content th,
.post-content td {
    padding: 0.62em 0.5em;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.post-content th {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
}

.post-content hr { margin: 2.8em 0; border: 0; border-top: 1px solid var(--line); }

.post-content embed,
.post-content iframe,
.post-content video { max-width: 100%; }

/* ---------- 文章页脚 ---------- */
.post-foot {
    margin-top: 2.8em;
    padding-top: 1.3em;
    border-top: 1px solid var(--line);
}

.post-tags {
    font-family: var(--sans);
    font-size: 0.74rem;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
}
.post-tags .tags-label { margin-right: 0.7em; }
.post-tags a {
    display: inline-block;
    margin: 0 0.35em 0.4em 0;
    padding: 0.1em 0.55em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink-soft);
}
.post-tags a:hover { border-color: var(--line-strong); color: var(--ink); }

.post-near {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 2em;
    margin: 1.8em 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--sans);
    font-size: 0.76rem;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
}
.post-near a { color: var(--ink-soft); border-bottom: 1px solid transparent; }
.post-near a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.post-near .near-label { margin-right: 0.5em; }

/* ============================================================
   7. 评论区（原生 · 极简扁平）
   ============================================================ */
.comments {
    margin-top: 3.6em;
    padding-top: 1.8em;
    border-top: 1px solid var(--line);
}

.comments-title {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
}

.comment-list {
    margin: 1.7em 0 0;
    padding: 0;
    list-style: none;
}

.comment-body {
    padding: 1.3em 0;
    border-bottom: 1px solid var(--line);
}
.comment-list > .comment-body:first-child { padding-top: 0.2em; }

.comment-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4em 0.9em;
    font-family: var(--sans);
    font-size: 0.76rem;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
}
.comment-name { font-style: normal; color: var(--ink); }
.comment-time { color: var(--ink-soft); }
.comment-reply a { color: var(--ink-soft); }
.comment-reply a:hover { color: var(--ink); }

.comment-content { margin-top: 0.6em; color: var(--ink-mid); }
.comment-content p { margin: 0 0 0.9em; }
.comment-content p:last-child { margin-bottom: 0; }

/* 嵌套回复：靠缩进与浅线区分层级 */
.comment-children {
    margin: 1.1em 0 0;
    padding-left: 1.15em;
    border-left: 1px solid var(--line);
    list-style: none;
}
.comment-children > .comment-body { padding-bottom: 0; border-bottom: 0; }
.comment-children > .comment-body:last-child { padding-bottom: 0; }

.comment-by-author > .comment-head .comment-name::after {
    content: "作者";
    margin-left: 0.6em;
    padding: 0.05em 0.4em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 0.68rem;
    color: var(--ink-soft);
}

.comment-awaiting { font-family: var(--sans); font-size: 0.74rem; color: var(--ink-soft); }

/* ---------- 评论表单 ---------- */
.respond { margin-top: 2.6em; }

.respond-title {
    margin: 0 0 1.2em;
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
}

.cancel-comment-reply { font-family: var(--sans); font-size: 0.74rem; margin-bottom: 0.8em; }
.cancel-comment-reply a { color: var(--ink-soft); }

.respond form p { margin: 0 0 1.05em; }

.respond label {
    display: block;
    margin-bottom: 0.4em;
    font-family: var(--sans);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
}

.respond input[type="text"],
.respond input[type="email"],
.respond input[type="url"],
.respond textarea {
    width: 100%;
    padding: 0.6em 0.85em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #FFFFFF;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 0.95rem;
    line-height: 1.8;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.respond textarea { resize: vertical; min-height: 7.5em; }

.respond input:focus,
.respond textarea:focus {
    outline: none;
    border-color: var(--line-strong);
    box-shadow: 0 0 0 3px rgba(43, 43, 43, 0.03);
}

.respond input::placeholder,
.respond textarea::placeholder { color: #BFBDB6; }

/* 线框轻按钮（Ghost Button）：透明底 + 1px 浅墨线 */
.respond button,
.respond .submit {
    display: inline-block;
    padding: 0.5em 1.25em;
    border: 1px solid #D8D8D3;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink-mid);
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.respond button:hover,
.respond .submit:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}
.respond button:active,
.respond .submit:active { background: #000000; border-color: #000000; color: var(--paper); }

.respond .logged-in { font-family: var(--sans); font-size: 0.76rem; color: var(--ink-soft); }
.respond .logged-in a { border-bottom: 1px solid var(--line-strong); }

.comments-closed { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-soft); }

/* ============================================================
   8. 独立页面 / 404 / 搜索
   ============================================================ */
.page-single .post-content { margin-top: 2em; }

.error-page { padding: 3.4em 0; }
.error-page .error-code {
    margin: 0 0 0.4em;
    font-family: var(--sans);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--ink-soft);
}
.error-page .error-title { margin: 0 0 1.1em; font-size: 1.28rem; font-weight: 600; }
.error-page p { margin: 0 0 1.6em; color: var(--ink-mid); }

/* ============================================================
   9. 页脚
   ============================================================ */
.site-footer {
    margin-top: 4.2em;
    padding-top: 1.6em;
    border-top: 1px solid var(--line);
    font-family: var(--sans);
    font-size: 0.74rem;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
}
.footer-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1.2em;
    align-items: baseline;
    justify-content: space-between;
}
.site-footer a { color: var(--ink-soft); border-bottom: 1px solid transparent; }
.site-footer a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }

/* 极简搜索（原生表单，无 JS） */
.site-search { display: flex; gap: 0.5em; margin-top: 1.2em; }
.site-search input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5em 0.7em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #FFFFFF;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.78rem;
}
.site-search input[type="text"]:focus { outline: none; border-color: var(--line-strong); }
.site-search button {
    flex: 0 0 auto;
    padding: 0.5em 0.95em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.site-search button:hover { border-color: var(--line-strong); color: var(--ink); }

/* ============================================================
   10. 响应式
   ============================================================ */
@media (max-width: 680px) {
    .page { padding: 0 18px 68px; }
    .site-header { padding: 46px 0 24px; }
    .site-title { font-size: 1.42rem; }
    .post-list { margin-top: 2.1em; }
    .post-item { padding: 1.9em 0; }
    .post-title { font-size: 1.12rem; }
    .post-single .post-title { font-size: 1.32rem; }
    .post-content { margin-top: 1.8em; }
    .comment-children { padding-left: 0.85em; }
}

@media (max-width: 400px) {
    .post-meta .dot { margin: 0 0.45em; }
}

/* ============================================================
   11. 打印
   ============================================================ */
@media print {
    .site-nav, .site-search, .comments, .page-navigator, .post-more, .post-near { display: none; }
    body { background: #FFFFFF; font-size: 11.5pt; }
    .page { max-width: none; padding: 0; }
    .post-content a { text-decoration: none; }
}

/* ============================================================
   12. 纸纹底 · 花边角饰（笺纸）
   ============================================================ */
.paper-frame {
    position: relative;
    max-width: calc(var(--reading-width) + 2px);
    margin: 42px auto 52px;
    border: 1px solid var(--frame-line);
    /* 笺纸面：纸色 + 更细的纸纤维噪点 */
    background-color: var(--paper);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23m)' opacity='0.05'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 160px 160px;
    box-shadow: 0 1px 2px rgba(43, 43, 43, 0.035), 0 16px 34px -26px rgba(43, 43, 43, 0.24);
}

/* 笺纸内的正文列仍是 680px 阅读宽 */
.paper-frame .page { padding: 0 30px 64px; }
.paper-frame .site-header { padding: 52px 0 30px; }

/* 评论表单：行间留白略增，减轻密实感 */
.respond p { margin: 0 0 1.05em; }

/* 四角卷草花边（同一 SVG 旋转 90° 复制，方向统一） */
.orn {
    position: absolute;
    width: 28px;
    height: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23BEB5A0' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M1 23.2C1 11.8 11.8 1 23.2 1'/%3E%3Cpath d='M7.2 23.2C7.2 14.4 14.4 7.2 23.2 7.2'/%3E%3Cpath d='M23.2 1c-3.5.4-5.6 2.4-4.9 4.3.7 1.8 3.2 1.6 3.6-.1'/%3E%3Cpath d='M1 23.2c.4-3.5 2.4-5.6 4.3-4.9 1.8.7 1.6 3.2-.1 3.6'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}
.orn-tl { top: -14px; left: -14px; }
.orn-tr { top: -14px; right: -14px; transform: rotate(90deg); }
.orn-br { right: -14px; bottom: -14px; transform: rotate(180deg); }
.orn-bl { bottom: -14px; left: -14px; transform: rotate(270deg); }

@media (max-width: 680px) {
    .paper-frame { margin: 18px 16px 28px; }
    .paper-frame .page { padding: 0 18px 56px; }
    .paper-frame .site-header { padding: 40px 0 24px; }
    .orn { width: 20px; height: 20px; }
    .orn-tl, .orn-tr { top: -10px; }
    .orn-bl, .orn-br { bottom: -10px; }
    .orn-tl, .orn-bl { left: -10px; }
    .orn-tr, .orn-br { right: -10px; }
}

/* ============================================================
   13. 飘叶（案面上的缓慢飘落）
   ============================================================ */
.leaves {
    position: fixed;
    inset: 0;
    z-index: 0;              /* 在笺纸之下：叶子主要飘在纸外案面 */
    overflow: hidden;
    opacity: 0.42;
    pointer-events: none;
}
.leaf {
    position: absolute;
    top: -10%;
    display: block;
    opacity: 0;
    animation: leaf-fall 34s linear infinite;
    will-change: transform, opacity;
    filter: blur(0.4px) drop-shadow(0 1px 1px rgba(26, 107, 74, 0.06));
}
.leaf svg { display: block; width: 100%; height: auto; }
.leaf-1 { left: 5%;  width: 24px; animation-duration: 36s; animation-delay: -3s; }
.leaf-2 { left: 16%; width: 16px; animation-duration: 47s; animation-delay: -18s; }
.leaf-3 { left: 31%; width: 20px; animation-duration: 41s; animation-delay: -9s; }
.leaf-4 { left: 63%; width: 17px; animation-duration: 45s; animation-delay: -27s; }
.leaf-5 { left: 79%; width: 23px; animation-duration: 38s; animation-delay: -14s; }
.leaf-6 { left: 93%; width: 15px; animation-duration: 52s; animation-delay: -33s; }

@keyframes leaf-fall {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
    6%   { opacity: 0.9; }
    45%  { transform: translate3d(26px, 52vh, 0) rotate(170deg); }
    88%  { opacity: 0.62; }
    100% { transform: translate3d(-22px, 114vh, 0) rotate(360deg); opacity: 0; }
}

@media (max-width: 680px) {
    /* 窄屏两侧余量太小，叶子改到纸面上方，透明度压到极淡 */
    .leaves { z-index: 5; opacity: 0.16; }
    .leaf-2, .leaf-6 { display: none; }
}

@media print {
    .paper-frame { margin: 0; border: 0; box-shadow: none; background-image: none; }
    .orn, .leaves { display: none; }
    .paper-frame .page { padding: 0; }
}

/* ============================================================
   14. 动效偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ============================================================
   15. 夜间模式（纸墨·夜）
   参考 VOID / Initial 等主题的自动夜間模式做法：
   变量整体换一套，JS 只切 html[data-theme]
   ============================================================ */
html[data-theme="dark"] { color-scheme: dark; }

html[data-theme="dark"] {
    --paper: #22241F;        /* 夜纸 */
    --ink: #D9D6CD;
    --ink-mid: #C6C3BA;
    --ink-soft: #9C9991;
    --ink-quote: #B0ADA3;
    --line: #383A34;
    --line-strong: #4C4F46;
    --line-soft: #2E3029;
    --code-bg: #2A2C26;
    --desk: #101318;         /* 夜色案面 */
    --frame-line: #45463F;
    --frame-line-soft: #2B2D28;
    --orn: #6B6759;
}

html[data-theme="dark"] body {
    background-color: var(--desk);
    background-image:
        radial-gradient(ellipse 80% 60% at 12% 18%, rgba(45, 154, 104, 0.16), rgba(45, 154, 104, 0) 55%),
        radial-gradient(ellipse 70% 50% at 88% 12%, rgba(58, 124, 165, 0.20), rgba(58, 124, 165, 0) 50%),
        radial-gradient(ellipse 60% 50% at 78% 88%, rgba(45, 154, 104, 0.08), rgba(45, 154, 104, 0) 55%),
        radial-gradient(115% 70% at 50% 0%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 240px 240px;
}

html[data-theme="dark"] ::selection { background: #3C4038; }
html[data-theme="dark"] .paper-frame {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 18px 40px -28px rgba(0, 0, 0, 0.75);
}
html[data-theme="dark"] .leaves { opacity: 0.22; }
html[data-theme="dark"] .post-content img { filter: brightness(0.9) contrast(0.98); }
html[data-theme="dark"] .post-content table th { background-color: #2A2C26; }

/* ============================================================
   16. 阅读工具条（夜间切换 / 字号）
   ============================================================ */
.site-tools {
    position: absolute;
    top: 20px;
    right: 22px;
    display: flex;
    gap: 7px;
    z-index: 8;
}

.tool-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.tool-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.tool-btn:active { transform: scale(0.94); }
.tool-btn svg { width: 16px; height: 16px; display: block; }

html[data-theme="dark"] .tool-btn {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--ink-mid);
    border-color: #4A4D45;
}

/* 夜间/日间图标互斥显示 */
.tool-theme .i-sun { display: none; }
html[data-theme="dark"] .tool-theme .i-sun { display: block; }
html[data-theme="dark"] .tool-theme .i-moon { display: none; }

/* 字号按钮上的 A 大小随档位变化 */
html[data-fs="s"] .tool-fs { font-size: 11px; }
html[data-fs="l"] .tool-fs { font-size: 15px; }

/* ============================================================
   17. 文章目录（TOC）
   单栏主题里放在正文之前，可折叠；手机默认收起
   ============================================================ */
.post-toc {
    margin: 2.1em 0 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: rgba(244, 243, 239, 0.55);
}
html[data-theme="dark"] .post-toc { background-color: rgba(255, 255, 255, 0.03); }
html[data-theme="dark"] .post-toc > summary,
html[data-theme="dark"] .post-toc li { color: var(--ink-mid); }

.post-toc > summary {
    display: flex;
    align-items: center;
    gap: 0.55em;
    padding: 0.7em 1em;
    font-family: var(--sans);
    font-size: 0.79rem;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.post-toc > summary::-webkit-details-marker { display: none; }
.post-toc > summary::before {
    content: "";
    width: 11px;
    height: 11px;
    background-color: currentColor;
    -webkit-mask: var(--icon-list) center/contain no-repeat;
    mask: var(--icon-list) center/contain no-repeat;
    opacity: 0.75;
}
.post-toc[open] > summary { border-bottom: 1px solid var(--line); }

.post-toc ol {
    margin: 0;
    list-style: none;
    padding: 0.65em 1.1em 0.85em 1.5em;
    font-family: var(--sans);
    font-size: 0.82rem;
    line-height: 1.9;
}
.post-toc li { position: relative; margin: 0.1em 0; padding-left: 0.95em; color: var(--ink-soft); }
.post-toc li::before {
    content: "";
    position: absolute;
    left: 0.06em;
    top: 0.82em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--line-strong);
}
.post-toc li.lv-3 { margin-left: 1.3em; padding-left: 0.85em; color: var(--ink-faint); }
.post-toc li.lv-3::before {
    top: 0.95em;
    width: 5px;
    height: 1px;
    border-radius: 0;
}
.post-toc li.lv-3 a { font-size: 0.93em; color: var(--ink-soft); }
.post-toc a { color: var(--ink-mid); }
.post-toc a:hover { color: var(--ink); }
.post-toc a.is-active {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* ============================================================
   18. 代码块增强（Mac 三点 + 复制按钮）
   ============================================================ */
.code-wrap { position: relative; }
.code-wrap > pre { margin: 0; padding-top: 2.3em; }
.code-dots {
    position: absolute;
    top: 13px;
    left: 15px;
    display: flex;
    gap: 6px;
    pointer-events: none;
}
.code-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--line-strong);
    display: block;
}
.code-copy {
    position: absolute;
    top: 8px;
    right: 10px;
    padding: 3px 10px;
    font-family: var(--sans);
    font-size: 11px;
    line-height: 1.5;
    color: var(--ink-soft);
    background-color: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.code-copy:hover { color: var(--ink); border-color: var(--line-strong); }
.code-copy.is-done { color: #2D9A68; border-color: #9FD3BA; }

/* ============================================================
   19. 图片灯箱（点击放大）
   ============================================================ */
.post-content img { cursor: zoom-in; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 4vmin;
    background-color: rgba(18, 20, 18, 0.93);
}
.lightbox.is-open { display: flex; }
.lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 2px;
    cursor: zoom-out;
    filter: none;
}
.lightbox .lb-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.lightbox .lb-close:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); }

/* ============================================================
   20. 返回顶部
   ============================================================ */
.back-top {
    position: fixed;
    right: 24px;
    bottom: 28px;
    z-index: 40;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--ink-soft);
    background-color: rgba(251, 251, 249, 0.86);
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: 0 6px 18px -12px rgba(43, 43, 43, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    cursor: pointer;
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s, color 0.2s, border-color 0.2s;
}
.back-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.back-top:hover { color: var(--ink); border-color: var(--line-strong); }
.back-top svg { width: 15px; height: 15px; display: block; }
html[data-theme="dark"] .back-top {
    background-color: rgba(34, 36, 31, 0.9);
    box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.8);
}

/* ============================================================
   21. 字号档位（阅读板式微调，走 body 基准字号）
   ============================================================ */
html[data-fs="s"] body { font-size: 15px; }
html[data-fs="l"] body { font-size: 18px; }
html[data-fs="s"] .post-content h3,
html[data-fs="l"] .post-content h3 { font-size: 1em; }

/* ============================================================
   22. 页脚附加链接（RSS 等）
   ============================================================ */
.footer-links { display: inline-flex; gap: 0.9em; align-items: center; }
.footer-links a { color: var(--ink-soft); }
.footer-links a:hover { color: var(--ink); }

@media (max-width: 680px) {
    .site-tools { top: 14px; right: 14px; gap: 6px; }
    .tool-btn { width: 31px; height: 31px; }
    .back-top { right: 14px; bottom: 18px; width: 38px; height: 38px; }
    .post-toc { margin-top: 1.7em; }
}

@media print {
    .site-tools, .back-top, .lightbox, .post-toc, .code-copy, .code-dots { display: none !important; }
}

/* ============================================================
   23. 点赞 + 浏览量
   ============================================================ */
.meta-views { color: var(--ink-soft); }

.post-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.7em;
    margin: 1.9em 0 0.3em;
}

.like-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.48em 1.2em;
    font-family: var(--sans);
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--ink-soft);
    background-color: rgba(244, 243, 239, 0.72);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.like-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.like-btn:active { transform: scale(0.96); }
.like-btn[disabled] { cursor: default; }
.like-btn .like-icon { width: 15px; height: 15px; display: block; }
.like-btn .like-num { font-variant-numeric: tabular-nums; }

.like-btn.is-liked {
    color: #B4474A;
    border-color: #E4C0BE;
    background-color: rgba(228, 176, 173, 0.16);
}
.like-btn.is-liked .like-icon { fill: currentColor; }
.like-btn.is-error { color: #B4593F; border-color: #E0C6B9; }

html[data-theme="dark"] .like-btn { background-color: rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .like-btn.is-liked {
    color: #E0908E;
    border-color: #5D3D3C;
    background-color: rgba(224, 144, 142, 0.12);
}
html[data-theme="dark"] .like-btn.is-error { color: #D89B84; border-color: #5A4238; }

@media (max-width: 680px) {
    .post-actions { margin-top: 1.6em; }
    .like-btn { padding: 0.55em 1.3em; font-size: 0.84rem; }
}

/* ============================================================
   24. 友情链接页（正文写列表即可，自动排成朴素友链行）
   ============================================================ */
.friends-list > ul {
    list-style: none;
    margin: 1.5em 0 0;
    padding: 0;
}

.friends-list > ul > li {
    margin: 0;
    padding: 0.95em 0.15em;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.95em;
    line-height: 1.85;
    transition: padding-left 0.18s ease;
}
.friends-list > ul > li:first-child { border-top: 1px solid var(--line); }
.friends-list > ul > li:hover { padding-left: 0.5em; }

.friends-list > ul > li > a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}
.friends-list > ul > li > a::after {
    content: "↗";
    margin-left: 0.28em;
    font-size: 0.78em;
    color: var(--ink-soft);
}
.friends-list > ul > li > a:hover { border-bottom: 1px solid var(--ink-soft); }

.friends-list > ul > li::marker { content: none; }

html[data-theme="dark"] .friends-list > ul > li { color: var(--ink-soft); }

@media (max-width: 680px) {
    .friends-list > ul > li { padding: 0.85em 0.1em; font-size: 0.93em; }
}

/* ============================================================
   25. 借鉴自生态主题的可见功能：
       阅读进度条 / 分享 / 评论表情 / 评论头像 / 代码行号 /
       相关文章 / 热门文章 / 标签云 / 归档时间轴 / 字体切换 / 站点统计
   ============================================================ */

/* ---- 字体切换（宋 ⇄ 黑），零外部字体 ---- */
html[data-font="sans"] { --serif: var(--sans); }

/* ---- 阅读进度条 ---- */
.read-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 90;
    pointer-events: none;
    background-color: transparent;
}
.read-progress > i {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #2D9A68 0%, #6EB5D8 100%);
    opacity: 0.55;
}

/* ---- 分享按钮（与点赞同款） ---- */
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.48em 1.2em;
    font-family: var(--sans);
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--ink-soft);
    background-color: rgba(244, 243, 239, 0.72);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.share-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.share-btn:active { transform: scale(0.96); }
.share-btn svg { width: 15px; height: 15px; display: block; }
html[data-theme="dark"] .share-btn { background-color: rgba(255, 255, 255, 0.04); }

/* ---- 轻提示 ---- */
.grace-toast {
    position: fixed;
    left: 50%;
    bottom: 84px;
    transform: translate(-50%, 12px);
    padding: 0.5em 1.1em;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--ink);
    background-color: rgba(251, 251, 249, 0.96);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(20, 30, 24, 0.08);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 120;
}
.grace-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
html[data-theme="dark"] .grace-toast {
    background-color: rgba(22, 25, 30, 0.96);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* ---- 评论表情面板 ---- */
.emoji-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
    margin: -0.4em 0 1.1em;
    padding: 0.55em 0.7em;
    border: 1px solid var(--line);
    border-radius: 10px;
    background-color: rgba(244, 243, 239, 0.5);
}
.emoji-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease;
}
.emoji-btn:hover { border-color: var(--line); background-color: rgba(255, 255, 255, 0.7); }
html[data-theme="dark"] .emoji-bar { background-color: rgba(255, 255, 255, 0.03); }
html[data-theme="dark"] .emoji-btn:hover { background-color: rgba(255, 255, 255, 0.07); }

/* ---- 评论首字头像 + 博主标识 ---- */
.comment-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 0.5em;
    font-family: var(--sans);
    font-size: 0.8rem;
    color: #FBFBF9;
    background-color: var(--avatar-bg, #2D9A68);
    border-radius: 50%;
    opacity: 0.92;
}
.comment-badge {
    margin-left: 0.45em;
    padding: 0.1em 0.5em;
    font-family: var(--sans);
    font-size: 0.68rem;
    color: #1A6B4A;
    background-color: rgba(45, 154, 104, 0.12);
    border: 1px solid rgba(45, 154, 104, 0.25);
    border-radius: 999px;
}
html[data-theme="dark"] .comment-badge { color: #8FD7B4; border-color: rgba(143, 215, 180, 0.28); }

/* ---- 代码块语言标签 + 行号 ---- */
.code-lang {
    position: absolute;
    top: 0.45em;
    right: 5.4em;   /* 靠右站，和「复制」按钮同排；左侧留给 Mac 三点 */
    left: auto;
    font-family: var(--sans);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    text-transform: lowercase;
    pointer-events: none;
}
.code-wrap pre code { counter-reset: grace-line; }
.code-wrap pre code .cl { display: block; }
.code-wrap pre code .cl::before {
    counter-increment: grace-line;
    content: counter(grace-line);
    display: inline-block;
    width: 2em;
    margin-right: 0.9em;
    text-align: right;
    color: var(--ink-soft);
    opacity: 0.5;
    user-select: none;
}

/* ---- 相关文章 / 热门文章 ---- */
.block-title {
    margin: 0 0 0.9em;
    font-family: var(--sans);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
}

.related-block,
.hot-block {
    margin: 2.6em 0 0;
    padding-top: 1.5em;
    border-top: 1px solid var(--line);
}

.related-list,
.hot-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.related-list > li,
.hot-list > li {
    display: flex;
    align-items: baseline;
    gap: 0.7em;
    padding: 0.62em 0.1em;
    border-bottom: 1px solid var(--line-soft);
}
.related-list > li:last-child,
.hot-list > li:last-child { border-bottom: none; }
.related-list a,
.hot-list a {
    flex: 1 1 auto;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.related-list a:hover,
.hot-list a:hover { border-bottom-color: var(--ink-soft); }
.related-list time,
.hot-views {
    flex: 0 0 auto;
    font-family: var(--sans);
    font-size: 0.76rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.hot-rank {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-family: var(--sans);
    font-size: 0.7rem;
    color: var(--ink-soft);
    background-color: rgba(244, 243, 239, 0.9);
    border: 1px solid var(--line);
    border-radius: 5px;
}
.hot-list > li:nth-child(1) .hot-rank { color: #1A6B4A; border-color: rgba(45, 154, 104, 0.35); }
html[data-theme="dark"] .hot-rank { background-color: rgba(255, 255, 255, 0.04); }

/* ---- 标签云 ---- */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-top: 1.3em;
}
.tag-cloud .post-empty { margin: 0; }
.tag-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    padding: 0.34em 0.8em;
    font-size: 0.88em;
    color: var(--ink);
    text-decoration: none;
    background-color: rgba(244, 243, 239, 0.66);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.tag-pill:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.tag-count {
    font-family: var(--sans);
    font-size: 0.72em;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .tag-pill { background-color: rgba(255, 255, 255, 0.04); }

/* ---- 归档时间轴 ---- */
.timeline { margin-top: 1.4em; }
.tl-year {
    display: flex;
    align-items: baseline;
    gap: 0.7em;
    margin: 2em 0 0.7em;
    padding-bottom: 0.4em;
    font-size: 1.15rem;
    border-bottom: 1px solid var(--line);
}
.tl-year:first-child { margin-top: 0.4em; }
.tl-year-num { font-family: var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.tl-year-count {
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--ink-soft);
}
.tl-month { margin: 0 0 1.1em; }
.tl-month-label {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    margin-bottom: 0.2em;
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--ink-soft);
}
.tl-month-label > span {
    font-size: 0.7rem;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}
.tl-list { margin: 0; padding: 0; list-style: none; }
.tl-list > li {
    display: flex;
    align-items: baseline;
    gap: 0.9em;
    padding: 0.5em 0.1em 0.5em 0.2em;
    border-bottom: 1px dashed var(--line-soft);
}
.tl-list > li:last-child { border-bottom: none; }
.tl-list time {
    flex: 0 0 auto;
    font-family: var(--sans);
    font-size: 0.76rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.tl-list a {
    flex: 1 1 auto;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.tl-list a:hover { border-bottom-color: var(--ink-soft); }

/* ---- 页脚站点统计 ---- */
.footer-stats {
    margin: 0 0 0.7em;
    font-family: var(--sans);
    font-size: 0.76rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.footer-stats .dot { margin: 0 0.4em; opacity: 0.6; }

@media print {
    .read-progress, .grace-toast, .emoji-bar, .share-btn, .related-block, .hot-block { display: none !important; }
}

@media (max-width: 680px) {
    .share-btn { padding: 0.55em 1.3em; font-size: 0.84rem; }
    .emoji-btn { width: 32px; height: 32px; }
    .tl-list > li { gap: 0.7em; }
    .code-wrap pre code .cl::before { width: 1.7em; margin-right: 0.6em; }
}

/* ============================================================
   26. 配色预设（借鉴 Slanted / Silence / 结香 的多配色思路）
       前台右上角「色」按钮一键循环：纸墨(默认) → 竹青 → 暮蓝 → 暖褐
       与夜间模式正交：夜间模式不使用预设，保持墨夜本色
   ============================================================ */

/* --- 竹青 --- */
html:not([data-theme="dark"])[data-skin="bamboo"] {
    --paper: #FAFCFA;
    --ink: #26302A;
    --ink-mid: #364039;
    --ink-soft: #828E86;
    --ink-quote: #5F6B63;
    --line: #E3EAE4;
    --line-strong: #CFDACF;
    --line-soft: #EEF3EE;
    --code-bg: #F1F5F1;
    --desk: #E8F1EA;
    --frame-line: #C9D8CC;
    --frame-line-soft: #F1F6F2;
    --orn: #A8BCAE;
    --leaf-1: #1F7A52;
    --leaf-2: #4F9E86;
    --leaf-3: #6FC79A;
    --leaf-4: #2E7A6B;
}
html:not([data-theme="dark"])[data-skin="bamboo"] body {
    background-image:
        radial-gradient(ellipse 80% 60% at 12% 18%, rgba(111, 199, 154, 0.22), rgba(111, 199, 154, 0) 55%),
        radial-gradient(ellipse 70% 50% at 88% 12%, rgba(79, 158, 134, 0.20), rgba(79, 158, 134, 0) 50%),
        radial-gradient(ellipse 60% 50% at 78% 88%, rgba(31, 122, 82, 0.13), rgba(31, 122, 82, 0) 55%),
        radial-gradient(ellipse 50% 40% at 18% 82%, rgba(46, 122, 107, 0.12), rgba(46, 122, 107, 0) 50%),
        radial-gradient(115% 70% at 50% 0%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 60%);
}

/* --- 暮蓝 --- */
html:not([data-theme="dark"])[data-skin="dusk"] {
    --paper: #F9FAFC;
    --ink: #262A33;
    --ink-mid: #363B46;
    --ink-soft: #868B96;
    --ink-quote: #616874;
    --line: #E5E8EF;
    --line-strong: #D2D7E1;
    --line-soft: #EFF1F6;
    --code-bg: #F2F4F8;
    --desk: #E9EEF7;
    --frame-line: #CBD4E2;
    --frame-line-soft: #F2F5FA;
    --orn: #AEB7C6;
    --leaf-1: #3A6EA5;
    --leaf-2: #6E9BD8;
    --leaf-3: #8AB6E4;
    --leaf-4: #4A5F9E;
}
html:not([data-theme="dark"])[data-skin="dusk"] body {
    background-image:
        radial-gradient(ellipse 80% 60% at 12% 18%, rgba(138, 182, 228, 0.26), rgba(138, 182, 228, 0) 55%),
        radial-gradient(ellipse 70% 50% at 88% 12%, rgba(110, 155, 216, 0.24), rgba(110, 155, 216, 0) 50%),
        radial-gradient(ellipse 60% 50% at 78% 88%, rgba(74, 95, 158, 0.14), rgba(74, 95, 158, 0) 55%),
        radial-gradient(ellipse 50% 40% at 18% 82%, rgba(58, 110, 165, 0.14), rgba(58, 110, 165, 0) 50%),
        radial-gradient(115% 70% at 50% 0%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 60%);
}

/* --- 暖褐（旧纸/茶色） --- */
html:not([data-theme="dark"])[data-skin="sepia"] {
    --paper: #FBF7EE;
    --ink: #3A322A;
    --ink-mid: #4A4137;
    --ink-soft: #968873;
    --ink-quote: #6E6355;
    --line: #EDE5D6;
    --line-strong: #DFD4BF;
    --line-soft: #F6F1E6;
    --code-bg: #F6F1E6;
    --desk: #F2EADB;
    --frame-line: #D8C9AC;
    --frame-line-soft: #F7F2E7;
    --orn: #C3B393;
    --leaf-1: #A8843C;
    --leaf-2: #C7A76A;
    --leaf-3: #D6C08A;
    --leaf-4: #8E6B3A;
}
html:not([data-theme="dark"])[data-skin="sepia"] body {
    background-image:
        radial-gradient(ellipse 80% 60% at 12% 18%, rgba(214, 192, 138, 0.26), rgba(214, 192, 138, 0) 55%),
        radial-gradient(ellipse 70% 50% at 88% 12%, rgba(199, 167, 106, 0.24), rgba(199, 167, 106, 0) 50%),
        radial-gradient(ellipse 60% 50% at 78% 88%, rgba(168, 132, 60, 0.14), rgba(168, 132, 60, 0) 55%),
        radial-gradient(ellipse 50% 40% at 18% 82%, rgba(142, 107, 58, 0.13), rgba(142, 107, 58, 0) 50%),
        radial-gradient(115% 70% at 50% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%);
}

/* 配色按钮：小色块示意当前配色 */
.tool-skin { position: relative; }
.tool-skin::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 12px;
    height: 2px;
    transform: translateX(-50%);
    border-radius: 1px;
    background-color: var(--frame-line);
}
html[data-skin="bamboo"] .tool-skin::after { background-color: #6FC79A; }
html[data-skin="dusk"] .tool-skin::after { background-color: #6E9BD8; }
html[data-skin="sepia"] .tool-skin::after { background-color: #C7A76A; }
html:not([data-theme="dark"])[data-skin="bamboo"] .tool-skin::after { background-color: #1F7A52; }
html:not([data-theme="dark"])[data-skin="sepia"] .tool-skin::after { background-color: #A8843C; }

/* 打印时保持纸墨 */
@media print {
    html[data-skin] body { background-image: none !important; }
}

/* ============================================================
   26. 生态优点移植（参考 typecho-fans/themes 13 个主题）
       —— 面包屑 / 公告条 / 列表封面 / 作者卡 / 阅读模式 /
          分享面板 / 快捷键帮助 / 图片渐显 / 打印样式
   ============================================================ */

/* ---- 26.1 面包屑（GreenGrapes / twentytwelve 都有） ---- */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin: 0 0 1.1em;
    font-family: var(--sans);
    font-size: 0.76rem;
    line-height: 1.6;
    color: var(--ink-soft);
}
.breadcrumb a {
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.breadcrumb a:hover { color: var(--ink); border-bottom-color: var(--line-strong); }
.crumb-sep { opacity: 0.45; }
.crumb-cat a { color: var(--ink-soft); }
.crumb-current { color: var(--ink-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }

/* ---- 26.2 公告条（Tiphia / Yakumo 的公告，这里零依赖 + 可关闭） ---- */
.announce {
    display: flex;
    align-items: center;
    gap: 0.55em;
    margin: 0.2em 0 1.5em;
    padding: 0.66em 0.9em;
    border: 1px solid var(--frame-line);
    border-left: 2px solid rgba(45, 154, 104, 0.55);
    border-radius: 4px;
    background-color: var(--frame-line-soft);
    font-family: var(--sans);
    font-size: 0.8rem;
    color: var(--ink-mid);
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.24s ease, transform 0.24s ease;
}
.announce.is-on { opacity: 1; transform: none; }
.announce-icon { flex: 0 0 auto; width: 14px; height: 14px; color: var(--leaf-1); }
.announce-text { flex: 1 1 auto; min-width: 0; }
.announce-close {
    flex: 0 0 auto;
    width: 1.6em;
    height: 1.6em;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 50%;
    background: none;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--ink-soft);
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease;
}
.announce-close:hover { color: var(--ink); border-color: var(--line-strong); }
html[data-theme="dark"] .announce { border-color: #3A4038; border-left-color: rgba(45, 154, 104, 0.6); background-color: #1A1E1C; }

/* ---- 26.3 列表封面缩略图（twentyfourteen / Bigfa 的特色图） ---- */
.post-item.has-thumb { display: flex; align-items: flex-start; gap: 1.1em; }
.item-thumb { flex: 0 0 128px; display: block; }
.item-thumb img {
    display: block;
    width: 128px;
    height: 92px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: var(--code-bg);
}
.item-main { flex: 1 1 auto; min-width: 0; }
.post-item.has-thumb .post-title { margin-top: 0; }
html[data-theme="dark"] .item-thumb img { filter: brightness(0.9) contrast(0.98); border-color: #3A3D37; }

/* ---- 26.4 作者卡（Bigfa / twentyfourteen 的作者信息） ---- */
.author-card {
    display: flex;
    align-items: flex-start;
    gap: 0.9em;
    margin: 2.2em 0 1.6em;
    padding: 1em 1.1em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: var(--code-bg);
}
.author-card .comment-avatar { width: 42px; height: 42px; margin-right: 0; font-size: 1.05rem; border-radius: 50%; }
.author-info { min-width: 0; }
.author-name { margin: 0 0 0.25em; font-size: 0.94rem; font-weight: 600; color: var(--ink); }
.author-bio { margin: 0 0 0.45em; font-size: 0.82rem; line-height: 1.75; color: var(--ink-mid); }
.author-stat { margin: 0; font-family: var(--sans); font-size: 0.74rem; color: var(--ink-soft); }
html[data-theme="dark"] .author-card { background-color: #1E211E; border-color: #3A3D37; }

/* ---- 26.5 分享面板（Slanted 的 share.php 升级版） ---- */
.post-actions { position: relative; }
.share-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 15.5em;
    padding: 0.6em;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background-color: var(--paper);
    box-shadow: 0 8px 26px rgba(43, 43, 43, 0.10);
    z-index: 24;
}
.share-item {
    flex: 0 0 auto;
    padding: 0.32em 0.7em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: none;
    font-family: var(--sans);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--ink-mid);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease;
}
.share-item:hover { color: var(--ink); border-color: var(--line-strong); }
html[data-theme="dark"] .share-panel { background-color: #191C19; border-color: #4A4D45; }

/* ---- 26.6 阅读模式（Bigfa 的专注阅读，纯 CSS 开关） ---- */
html[data-reader="on"] .site-nav,
html[data-reader="on"] .site-desc,
html[data-reader="on"] .announce,
html[data-reader="on"] .breadcrumb,
html[data-reader="on"] .post-foot,
html[data-reader="on"] .post-near,
html[data-reader="on"] .related-block,
html[data-reader="on"] .author-card,
html[data-reader="on"] #comments,
html[data-reader="on"] .back-top,
html[data-reader="on"] .orn,
html[data-reader="on"] .leaves,
html[data-reader="on"] .site-footer { display: none !important; }

html[data-reader="on"] .tool-btn:not(.tool-reader) { display: none; }
html[data-reader="on"] .paper-frame { border-color: transparent; box-shadow: none; }
html[data-reader="on"] { --reading-width: 740px; }
html[data-reader="on"] .post-content { font-size: 1.055em; line-height: 2.05; }
html[data-reader="on"] .post-single { padding-bottom: 2em; }

/* ---- 26.7 快捷键帮助面板（Yakumo / GreenGrapes 的快捷键，此处带提示层） ---- */
.keys-help {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5em;
    background-color: rgba(43, 43, 43, 0.30);
    z-index: 60;
}
.kh-card {
    width: 17em;
    max-width: 92vw;
    padding: 1.15em 1.3em;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background-color: var(--paper);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.14);
}
.kh-title { margin: 0 0 0.85em; font-family: var(--sans); font-size: 0.86rem; color: var(--ink); }
.keys-help ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5em; }
.keys-help li { display: flex; align-items: center; gap: 0.6em; font-size: 0.8rem; color: var(--ink-mid); }
.keys-help li span { flex: 1 1 auto; }
.keys-help kbd {
    min-width: 1.9em;
    padding: 0.1em 0.45em;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background-color: var(--code-bg);
    font-family: var(--mono);
    font-size: 0.72rem;
    text-align: center;
    color: var(--ink);
}
.kh-tip { margin: 1em 0 0; font-family: var(--sans); font-size: 0.7rem; text-align: center; color: var(--ink-soft); }
html[data-theme="dark"] .kh-card { background-color: #191C19; border-color: #4A4D45; }

/* ---- 26.8 图片懒加载渐显 ---- */
.img-fade { opacity: 0; transition: opacity 0.4s ease; }
.img-fade.is-loaded { opacity: 1; }

/* ---- 26.9 手机端：工具按钮多一个也不挤 ---- */
@media (max-width: 460px) {
    .site-tools { top: 14px; right: 14px; gap: 5px; }
    .tool-btn { width: 30px; height: 30px; font-size: 0.74rem; }
    .tool-btn svg { width: 14px; height: 14px; }
    .crumb-current { max-width: 45%; }
    .share-panel { left: auto; right: 0; transform: none; }
}

@media (max-width: 560px) {
    .post-item.has-thumb { display: block; }
    .item-thumb { margin-bottom: 0.7em; }
    .item-thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

/* ---- 26.9c 长标题自动平衡，避免末行只剩一两个字 ---- */
.post-head .post-title { text-wrap: balance; }

/* ---- 26.9a 长链接/长串在手机端不撑破版面 ---- */
.post-content a,
.post-content p,
.post-content li,
.post-content td,
.post-content th { overflow-wrap: anywhere; }

/* ---- 26.9b 宽表格横向滚动（手机端不撑破版面） ---- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--para-space) 0; }
.table-wrap table { margin: 0; min-width: 100%; }
.table-wrap.is-scrollable { padding-bottom: 0.35em; border-bottom: 1px dashed var(--line); }

/* ---- 26.10 打印样式（twentytwelve 的 print.css 思路） ---- */
@media print {
    .site-tools, .site-nav, .site-desc, .announce, .breadcrumb, .post-foot,
    .post-near, .related-block, .author-card, #comments, .back-top, .leaves,
    .orn, .keys-help, .share-panel, .site-footer, .progress-bar, .post-toc,
    .code-copy, .code-dots { display: none !important; }
    html, body { background: #FFFFFF !important; color: #000000 !important; font-size: 12pt; }
    .paper-frame { border: 0 !important; box-shadow: none !important; padding: 0 !important; }
    .page { max-width: 100% !important; padding: 0 !important; }
    .post-content a { color: #000000 !important; text-decoration: underline; }
    .post-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444444; }
    .table-wrap { overflow: visible !important; }
    .post-content pre, .post-content img { page-break-inside: avoid; border: 1px solid #CCCCCC !important; }
    .post-content pre code, .post-content pre code .token { color: #000000 !important; }
    .post-content pre { background: #FFFFFF !important; }
    .post-content pre code .cl::before { color: #888888 !important; }
}

/* ==========================================================
 * 27. 网站数据页（统计页）
 * ========================================================== */

.stats-page .post-meta { color: var(--ink-soft); }

/* ---- 27.1 总览数字卡 ---- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7em;
    margin: 1.6em 0 2em;
}
.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25em;
    padding: 0.95em 0.5em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: rgba(244, 243, 239, 0.5);
}
html[data-theme="dark"] .stat-card { background-color: rgba(255, 255, 255, 0.03); }
.stat-num {
    font-family: var(--sans);
    font-size: 1.42rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ink);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.stat-label {
    font-family: var(--sans);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
}

/* ---- 27.2 区块通用 ---- */
.stat-block { margin: 2.2em 0; }
.stat-title {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    margin: 0 0 0.9em;
    font-family: var(--sans);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--ink-mid);
}
.stat-title::before {
    content: "";
    width: 3px;
    height: 0.9em;
    border-radius: 2px;
    background-color: var(--ink-soft);
    opacity: 0.55;
}
.stat-title-gap { margin-top: 1.7em; }
.stat-sub {
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}
.stat-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
}
.stat-half { min-width: 0; }

/* ---- 27.3 热力图 ---- */
.heat-wrap { overflow-x: auto; padding-bottom: 0.3em; }
.heat-months {
    display: flex;
    gap: 3px;
    min-width: max-content;
    margin-bottom: 0.3em;
    font-family: var(--sans);
}
.heat-month {
    width: 11px;
    font-size: 0.62rem;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: visible;
}
.heat-grid { display: flex; gap: 3px; min-width: max-content; }
.heat-col { display: flex; flex-direction: column; gap: 3px; }
.heat-cell {
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background-color: var(--line-soft);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
    cursor: default;
}
html[data-theme="dark"] .heat-cell { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
.heat-cell.lv-0 { background-color: var(--line-soft); }
.heat-cell.lv-1 { background-color: #CBE6D8; }
.heat-cell.lv-2 { background-color: #9AD2B6; }
.heat-cell.lv-3 { background-color: #5FB78C; }
.heat-cell.lv-4 { background-color: #2D9A68; }
html[data-theme="dark"] .heat-cell.lv-1 { background-color: #2A4438; }
html[data-theme="dark"] .heat-cell.lv-2 { background-color: #356B51; }
html[data-theme="dark"] .heat-cell.lv-3 { background-color: #3E8C67; }
html[data-theme="dark"] .heat-cell.lv-4 { background-color: #4FB585; }
.heat-legend {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 0.7em;
    font-family: var(--sans);
    font-size: 0.68rem;
    color: var(--ink-soft);
}
.heat-legend .heat-cell { cursor: default; }
.heat-legend span:first-child { margin-right: 0.3em; }
.heat-legend span:last-child { margin-left: 0.3em; }

/* ---- 27.4 环形图 ---- */
.donut-wrap { display: flex; align-items: center; gap: 1.2em; }
.donut { width: 118px; height: 118px; flex: 0 0 auto; }
.donut-seg { transition: opacity 0.18s ease; }
.donut-seg:hover { opacity: 0.72; }
.donut-center-num {
    font-family: var(--sans);
    font-size: 20px;
    font-weight: 600;
    fill: var(--ink);
}
.donut-center-label {
    font-family: var(--sans);
    font-size: 10px;
    fill: var(--ink-soft);
}
.donut-legend { margin: 0; padding: 0; list-style: none; min-width: 0; }
.donut-legend li {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.26em 0;
    font-family: var(--sans);
    font-size: 0.79rem;
}
.donut-legend a { color: var(--ink-mid); text-decoration: none; border-bottom: 1px solid transparent; }
.donut-legend a:hover { border-bottom-color: var(--line-strong); }
.dot-color { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.donut-num { margin-left: auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---- 27.5 横向柱条 ---- */
.bar-list { margin: 0; padding: 0; list-style: none; }
.bar-list li {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.34em 0;
    font-family: var(--sans);
    font-size: 0.79rem;
}
.bar-label { flex: 0 0 5.9em; color: var(--ink-mid); }
.bar-track {
    flex: 1 1 auto;
    height: 7px;
    border-radius: 4px;
    background-color: var(--line-soft);
    overflow: hidden;
}
.bar-track > i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #9AD2B6 0%, #2D9A68 100%);
}
.bar-num { flex: 0 0 1.8em; text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---- 27.6 标签条 ---- */
.tag-bars { display: flex; flex-wrap: wrap; gap: 0.45em; }
.tag-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.26em 0.7em;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.75rem;
    color: var(--ink-mid);
    text-decoration: none;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}
.tag-bar:hover { border-color: var(--line-strong); background-color: var(--code-bg); }
.tag-bar-count { color: var(--ink-soft); font-size: 0.7rem; }

/* ---- 27.7 排行榜 ---- */
.rank-list { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.rank-list li {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    padding: 0.46em 0;
    border-bottom: 1px dashed var(--line-soft);
    font-family: var(--sans);
    font-size: 0.8rem;
}
.rank-list li:last-child { border-bottom: 0; }
.rank-no {
    flex: 0 0 1.35em;
    height: 1.35em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    font-size: 0.68rem;
    color: var(--ink-soft);
    background-color: var(--line-soft);
    font-variant-numeric: tabular-nums;
}
.rank-no.r1 { background-color: #2D9A68; color: #FFFFFF; }
.rank-no.r2 { background-color: #5FB78C; color: #FFFFFF; }
.rank-no.r3 { background-color: #9AD2B6; color: #23302A; }
.rank-list a {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink-mid);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rank-list a:hover { border-bottom-color: var(--line-strong); }
.rank-val { flex: 0 0 auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---- 27.8 手机端 ---- */
@media (max-width: 680px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-two-col { grid-template-columns: 1fr; gap: 1.6em; }
    .donut-wrap { gap: 0.9em; }
    .donut { width: 100px; height: 100px; }
    .stat-num { font-size: 1.24rem; }
    .bar-label { flex-basis: 5.4em; font-size: 0.75rem; }
}

@media print {
    .stat-grid, .stat-block { break-inside: avoid; }
}

/* ==========================================================
 * 28. 时光机（微语）
 * ========================================================== */

.moments-page .post-meta { color: var(--ink-soft); }

/* ---- 28.1 发布框（仅管理员可见） ---- */
.moment-compose {
    margin: 1.6em 0 2.2em;
    padding: 1em 1.1em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: rgba(244, 243, 239, 0.5);
}
html[data-theme="dark"] .moment-compose { background-color: rgba(255, 255, 255, 0.03); }
.moment-compose textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5em 0.2em;
    border: 0;
    border-bottom: 1px dashed var(--line-strong);
    background: transparent;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 0.94rem;
    line-height: 1.75;
    resize: vertical;
    outline: none;
}
.moment-compose textarea::placeholder { color: var(--ink-soft); }
.moment-compose textarea:focus { border-bottom-color: var(--ink-soft); }
.compose-row {
    display: flex;
    align-items: center;
    gap: 0.7em;
    margin-top: 0.8em;
}
.compose-file {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.34em 0.85em;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.75rem;
    color: var(--ink-mid);
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}
.compose-file:hover { background-color: var(--code-bg); }
.compose-file svg { width: 14px; height: 14px; opacity: 0.7; }
.compose-tip {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--sans);
    font-size: 0.74rem;
    color: var(--ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.compose-tip.is-bad { color: #B4553F; }
.compose-submit {
    flex: 0 0 auto;
    padding: 0.4em 1.25em;
    border: 1px solid var(--ink-soft);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-mid);
    font-family: var(--sans);
    font-size: 0.79rem;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.compose-submit:hover:not(:disabled) { background-color: var(--ink-soft); color: var(--paper); }
.compose-submit:disabled { opacity: 0.5; cursor: default; }

/* ---- 28.2 记录列表（时间线脊柱） ---- */
.moment-list { position: relative; margin: 1.4em 0 0; }
.moment-list::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.7em;
    bottom: 2em;
    width: 1px;
    background-color: var(--line);
}
.moment-item {
    position: relative;
    padding: 0 0 1.5em 1.7em;
}
.moment-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--paper);
    box-shadow: inset 0 0 0 2px var(--line-strong);
}
.moment-item.is-new::before { box-shadow: inset 0 0 0 2px #2D9A68; }
.moment-text {
    margin: 0 0 0.6em;
    font-size: 0.96rem;
    line-height: 1.85;
    color: var(--ink-mid);
    word-break: break-word;
}
.moment-img {
    display: block;
    margin: 0.5em 0 0.7em;
    max-width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
}
.moment-img img {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.35s ease;
}
.moment-foot {
    display: flex;
    align-items: center;
    gap: 0.9em;
    font-family: var(--sans);
    font-size: 0.73rem;
    color: var(--ink-soft);
}
.moment-del {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: 0.73rem;
    cursor: pointer;
    opacity: 0.75;
    transition: color 0.18s ease, opacity 0.18s ease;
}
.moment-del:hover { color: #B4553F; opacity: 1; }
.moment-del:disabled { opacity: 0.35; cursor: default; }
.moment-empty { padding-left: 1.7em; }

@media (max-width: 680px) {
    .moment-compose { padding: 0.85em 0.9em; }
    .compose-row { flex-wrap: wrap; }
    .compose-submit { margin-left: auto; }
    .moment-item { padding-left: 1.4em; }
}

/* ==========================================================
 * 29. 内容保护（加密块 / 私密评论）
 * ========================================================== */

.guard-box {
    margin: 1.6em 0;
    padding: 1.5em 1.2em;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    background-color: rgba(244, 243, 239, 0.55);
    text-align: center;
}
html[data-theme="dark"] .guard-box { background-color: rgba(255, 255, 255, 0.03); }
.guard-inner { display: block; }
.guard-icon {
    width: 26px;
    height: 26px;
    color: var(--ink-soft);
    opacity: 0.75;
}
.guard-title {
    margin: 0.5em 0 0.15em;
    font-family: var(--serif);
    font-size: 0.95rem;
    color: var(--ink-mid);
}
.guard-desc {
    margin: 0 0 1em;
    font-family: var(--sans);
    font-size: 0.76rem;
    color: var(--ink-soft);
}
.guard-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    max-width: 320px;
    margin: 0 auto;
}
.guard-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.42em 0.75em;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.82rem;
    outline: none;
}
.guard-input:focus { border-color: var(--ink-soft); }
.guard-submit {
    flex: 0 0 auto;
    padding: 0.42em 1.1em;
    border: 1px solid var(--ink-soft);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-mid);
    font-family: var(--sans);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}
.guard-submit:hover:not(:disabled) { background-color: var(--ink-soft); color: var(--paper); }
.guard-submit:disabled { opacity: 0.5; cursor: default; }
.guard-tip {
    margin: 0.7em 0 0;
    min-height: 1em;
    font-family: var(--sans);
    font-size: 0.74rem;
    color: var(--ink-soft);
}
.guard-tip.is-bad { color: #B4553F; }

/* 私密评论提示 */
.comment-locked {
    display: flex;
    align-items: center;
    gap: 0.45em;
    margin: 0;
    padding: 0.55em 0.8em;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--ink-soft);
}
.comment-locked svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: 0.7; }

@media (max-width: 680px) {
    .guard-box { padding: 1.2em 0.9em; }
    .guard-form { max-width: 100%; }
}

/* ==========================================================
   第 30 节 · OwO 表情面板
   —— 纸墨素简：细边框、无圆角夸张、低饱和
   ========================================================== */

.owo-wrap {
    position: relative;
    margin: 0.9em 0 0.5em;
}

.owo-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.32em 0.85em;
    font-size: 0.9rem;
    color: var(--c-ink-soft, #6b6259);
    background: transparent;
    border: 1px solid var(--c-line, #e3ddd2);
    border-radius: 3px;
    cursor: pointer;
    transition: color .18s, border-color .18s, background .18s;
}

.owo-toggle:hover,
.owo-toggle[aria-expanded="true"] {
    color: var(--c-ink, #2f2a24);
    border-color: var(--c-ink-soft, #6b6259);
    background: rgba(0, 0, 0, .02);
}

.owo-face {
    font-size: 1.05em;
    line-height: 1;
}

.owo {
    display: none;
    margin-top: 0.55em;
    border: 1px solid var(--c-line, #e3ddd2);
    border-radius: 4px;
    background: var(--c-paper, #fbfbf9);
    max-width: 100%;
}

.owo.on {
    display: block;
}

.owo-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15em;
    padding: 0.45em 0.5em 0;
    border-bottom: 1px solid var(--c-line, #e3ddd2);
}

.owo-tab {
    padding: 0.25em 0.7em;
    font-size: 0.86rem;
    color: var(--c-ink-soft, #6b6259);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .16s, border-color .16s;
}

.owo-tab:hover {
    color: var(--c-ink, #2f2a24);
}

.owo-tab.on {
    color: var(--c-ink, #2f2a24);
    border-bottom-color: var(--c-accent, #8c6f4e);
}

.owo-grid {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 2px;
    padding: 0.5em;
    max-height: 208px;
    overflow-y: auto;
}

.owo-grid.on {
    display: grid;
}

.owo-item {
    padding: 3px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    line-height: 0;
    transition: background .15s, border-color .15s, transform .12s;
}

.owo-item:hover {
    background: rgba(0, 0, 0, .045);
    border-color: var(--c-line, #e3ddd2);
    transform: translateY(-1px);
}

.owo-item img,
img.owo-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    vertical-align: -6px;
}

img.owo-img {
    display: inline-block;
    margin: 0 1px;
}

@media (max-width: 680px) {
    .owo-grid {
        grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
        max-height: 180px;
    }

    .owo-item img,
    img.owo-img {
        width: 24px;
        height: 24px;
    }
}

/* 暗色模式 */
@media (prefers-color-scheme: dark) {
    .owo {
        background: #1c1a18;
    }

    .owo-item:hover {
        background: rgba(255, 255, 255, .07);
    }
}

/* ============================================================
   28. 移动端精修（导航横滑 / 触控热区 / 字号可读性 / 留白）
   追加于文件末尾，同权重下覆盖上方规则
   ============================================================ */

/* ---- 28.0 站内搜索：工具条按钮 + 检索弹层 ---- */
.search-modal {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 18px 18px;
}
.search-modal[hidden] { display: none; }
.search-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(28, 30, 27, 0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.search-modal-box {
    position: relative;
    width: 100%;
    max-width: 560px;
    padding: 1.1em 1.15em 1em;
    border: 1px solid var(--frame-line);
    border-radius: 8px;
    background-color: var(--paper);
    box-shadow: 0 2px 6px rgba(43, 43, 43, 0.08), 0 26px 52px -24px rgba(43, 43, 43, 0.42);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.search-modal.is-on .search-modal-box { opacity: 1; transform: none; }
.search-modal-form {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding-bottom: 0.7em;
    border-bottom: 1px solid var(--line);
}
.search-modal-icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--ink-soft); }
.search-modal-form input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.45em 0;
    border: 0;
    background: none;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 0.95rem;
}
.search-modal-form input[type="text"]:focus { outline: none; }
.search-modal-form input[type="text"]::placeholder { color: var(--ink-soft); }
.search-modal-go {
    flex: 0 0 auto;
    padding: 0.42em 0.85em;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: none;
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.search-modal-go:hover { border-color: var(--line-strong); color: var(--ink); }
.search-modal-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 50%;
    background: none;
    color: var(--ink-soft);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}
.search-modal-close:hover { color: var(--ink); border-color: var(--line-strong); }

.search-hints { padding-top: 0.85em; }
.search-hint-label {
    display: block;
    margin-bottom: 0.5em;
    font-family: var(--sans);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
}
.search-tags { display: flex; flex-wrap: wrap; gap: 0.45em; }
.search-tag {
    padding: 0.3em 0.72em;
    border: 1px solid var(--line);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.5);
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--ink-mid);
    transition: color 0.16s ease, border-color 0.16s ease;
}
.search-tag:hover { color: var(--ink); border-color: var(--line-strong); }
.search-empty {
    padding: 0.2em 0 0.3em;
    font-family: var(--sans);
    font-size: 0.78rem;
    color: var(--ink-soft);
}
html[data-theme="dark"] .search-modal-mask { background: rgba(0, 0, 0, 0.55); }
html[data-theme="dark"] .search-tag { background-color: rgba(255, 255, 255, 0.06); border-color: #3A3D37; }
html[data-theme="dark"] .search-modal-form input[type="text"] { color: var(--ink); }

/* 文章列表缩略图统一比例，避免高度跳动 */
.item-thumb img { aspect-ratio: 16 / 9; }

/* ---- 28.1 移动端：触控热区 ≥44px（视觉仍纤细，热区外扩） ---- */
@media (max-width: 680px) {
    .site-tools { top: 14px; right: 14px; gap: 6px; }
    .tool-btn {
        position: relative;
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }
    .tool-btn::after { content: ""; position: absolute; inset: -3px; }
    .tool-btn svg { width: 18px; height: 18px; }
    html[data-fs="s"] .tool-fs { font-size: 13px; }
    html[data-fs="l"] .tool-fs { font-size: 18px; }

    /* 关闭按钮热区 */
    .announce-close { width: 34px; height: 34px; margin: -0.35em -0.5em -0.35em 0; font-size: 1.3rem; }
    .notice-close { min-width: 44px; min-height: 44px; }

    /* ---- 28.2 留白收紧：手机多给 10px 正文宽 ---- */
    .paper-frame { margin: 16px auto 26px; }
    .paper-frame .page { padding: 0 20px 56px; }
    .paper-frame .site-header { padding: 60px 0 22px; }

    /* ---- 28.3 导航：单行横向滑动，不再折成两行 ---- */
    .site-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x proximity;
        gap: 0.15em;
        margin-top: 0.95em;
        padding-top: 1.05em;
        padding-bottom: 0.3em;
        font-size: 0.9rem;
        mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
    }
    .site-nav::-webkit-scrollbar { display: none; }
    .site-nav .nav-link {
        flex: 0 0 auto;
        padding: 0.5em 0.7em;
        scroll-snap-align: start;
        border-radius: 999px;
    }
    .site-nav .nav-link:hover { background-color: rgba(0, 0, 0, 0.035); }
    html[data-theme="dark"] .site-nav .nav-link:hover { background-color: rgba(255, 255, 255, 0.06); }

    /* ---- 28.4 字号可读性：辅助文字提到 13px 以上 ---- */
    .post-meta { font-size: 0.84rem; line-height: 1.8; }
    .post-meta .dot { margin: 0 0.5em; }
    .site-desc { font-size: 0.88rem; }
    .archive-title { font-size: 0.9rem; }
    .site-footer { font-size: 0.86rem; }
    .footer-stats { font-size: 0.86rem; line-height: 1.9; }
    .footer-links a { display: inline-block; padding: 0.4em 0; }
    .crumbs { font-size: 0.84rem; }
    .post-content figcaption { font-size: 0.82rem; }
    .block-title { font-size: 0.9rem; }
    .related-list li, .hot-list li { font-size: 0.92rem; }

    /* ---- 28.5 正文图：圆角 + 不再溢出 ---- */
    .post-content img { border-radius: var(--radius); }
    .post-content img { max-width: 100%; height: auto; }

    /* ---- 28.6 列表页：缩略图全宽，标题与元信息层级拉开 ---- */
    .post-item { padding: 1.7em 0; }
    .post-title { font-size: 1.16rem; line-height: 1.45; }
    .post-single .post-title { font-size: 1.36rem; line-height: 1.42; }
    .post-excerpt { font-size: 1rem; }
    .more-link { display: inline-block; padding: 0.45em 0; font-size: 0.9rem; }

    /* ---- 28.7 搜索弹层：手机贴顶、按钮可点 ---- */
    .search-modal { padding: 8vh 14px 14px; }
    .search-modal-box { padding: 1em; }
    .search-modal-go { padding: 0.5em 0.9em; font-size: 0.86rem; }
    .search-modal-close { width: 34px; height: 34px; font-size: 1.3rem; }
    .search-tag { padding: 0.42em 0.8em; font-size: 0.84rem; }
}

@media (max-width: 400px) {
    .tool-btn { width: 36px; height: 36px; }
    .tool-btn::after { inset: -4px; }
    .site-nav { font-size: 0.86rem; }
}

/* ============================================================
   29. 移动端第二轮精修（触控热区达标 / 文案适配 / 文章页）
   ============================================================ */

/* 手机端不显示「按 ? 看快捷键」这类键盘提示 */
@media (max-width: 680px) {

    /* ---- 29.1 工具按钮：本体 40px，热区 46px ---- */
    .site-tools { top: 12px; right: 12px; gap: 4px; }
    .tool-btn { width: 40px; height: 40px; font-size: 0.95rem; }
    .tool-btn::after { inset: -3px; }
    .tool-btn svg { width: 19px; height: 19px; }
    html[data-fs="s"] .tool-fs { font-size: 14px; }
    html[data-fs="l"] .tool-fs { font-size: 19px; }

    /* ---- 29.2 导航项：整块可点，高度 44px ---- */
    .site-nav { padding-top: 0.9em; padding-bottom: 0.35em; }
    .site-nav .nav-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0 0.85em;
        line-height: 1;
    }

    /* ---- 29.3 公告条：关闭按钮加大 + 键盘提示弱化 ---- */
    .announce {
        align-items: flex-start;
        padding: 0.7em 0.6em 0.7em 0.85em;
        line-height: 1.65;
    }
    .announce-close {
        width: 40px;
        height: 40px;
        margin: -0.5em -0.35em 0 0;
        font-size: 1.45rem;
    }
    .announce-icon { margin-top: 0.2em; }

    /* ---- 29.4 正文：行高与段距更适合手机长读 ---- */
    .post-content { line-height: 1.92; }
    .post-content h2 { font-size: 1.22rem; }
    .post-content h3 { font-size: 1.08rem; }
    .post-content blockquote { padding-left: 1em; }

    /* ---- 29.5 点赞 / 分享：热区 ≥44px ---- */
    .post-actions { gap: 0.7em; }
    .like-btn, .share-btn { min-height: 44px; padding: 0.5em 1em; font-size: 0.88rem; }

    /* ---- 29.6 标签 / 归档 / 文章列表项：热区加大 ---- */
    .post-tags a, .tags-page a { display: inline-block; padding: 0.42em 0.72em; }
    .related-list li a, .hot-list li a { display: inline-block; padding: 0.35em 0; }

    /* ---- 29.7 面包屑与前后篇 ---- */
    .post-near li { padding: 0.6em 0; }
    .post-near a { display: inline-block; padding: 0.3em 0; }

    /* ---- 29.8 页脚：链接热区与文案可读 ---- */
    .footer-row { gap: 0.55em; }
    .footer-links { gap: 0.25em 0.9em; }
    .footer-links a { padding: 0.5em 0; }
    .footer-copy, .footer-meta { line-height: 1.85; }
}

@media (max-width: 400px) {
    .tool-btn { width: 38px; height: 38px; }
    .site-tools { gap: 3px; }
    .site-nav .nav-link { padding: 0 0.7em; font-size: 0.88rem; }
}

/* ---- 29.9 手机端隐藏桌面键盘提示（.keys-hint 由模板输出） ---- */
@media (max-width: 680px) {
    .announce .keys-hint,
    .announce .kbd-hint { display: none; }
}

/* ---- 29.10 公告里的键盘提示（宽屏显示、窄屏隐藏） ---- */
.announce .keys-hint { display: inline; }

/* ============================================================
   31. 视觉升级第一轮（2026-09-27）：层级 / 主色 / 卡片质感
   —— 追加段，同权重覆盖上方；不动既有交互逻辑
   ============================================================ */

/* ---- 31.1 全局节奏：标题重一点、元信息可读一点 ---- */
.post-title {
    font-size: 1.28rem;
    line-height: 1.55;
    letter-spacing: 0.005em;
}
.post-single .post-title { font-size: 1.62rem; line-height: 1.45; }

.post-meta { font-size: 0.78rem; }
.post-meta a, .post-meta .dot { color: var(--ink-soft); }
.post-meta a:hover { color: var(--ink); }

/* 继续阅读：主色强调 + hover 右移 */
.more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: #14593D;
    font-weight: 500;
    border-bottom: 0;
    transition: color 0.16s ease, gap 0.16s ease;
}
.more-link::after { content: ""; }
.more-link:hover { color: #166243; }
.more-link:hover::after { content: none; }
html[data-theme="dark"] .more-link { color: #79C49B; }
html[data-theme="dark"] .more-link:hover { color: #93D8B4; }

/* ---- 31.2 列表条目：图左文右对齐 3:7，节奏统一 ---- */
.post-item { padding: 2.4em 0; }
.post-item.has-thumb { gap: 1.35em; }
.item-thumb { flex: 0 0 168px; }
.item-thumb img {
    width: 168px;
    height: 106px;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(43, 43, 43, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post-item.has-thumb:hover .item-thumb img {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -10px rgba(43, 43, 43, 0.28);
}
html[data-theme="dark"] .item-thumb img { box-shadow: none; }

/* 摘要统一 2 行截断（有图 96 字仍保留，纯兜底） */
.post-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-item.has-thumb .post-excerpt { -webkit-line-clamp: 2; }

/* ---- 31.3 热门文章：徽章化 + 卡片容器，形成章节感 ---- */
.hot-block {
    margin: 3.2em 0 0;
    padding: 1.5em 1.35em 1.1em;
    border: 1px solid var(--line);
    border-radius: 12px;
    background-color: rgba(244, 243, 239, 0.45);
    box-shadow: 0 1px 2px rgba(43, 43, 43, 0.03);
}
html[data-theme="dark"] .hot-block {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: #3A3D37;
}
.block-title { font-size: 0.9rem; color: var(--ink-mid); }
.hot-rank {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-weight: 600;
    color: var(--ink-soft);
    background-color: var(--paper);
}
.hot-list > li:nth-child(1) .hot-rank,
.hot-list > li:nth-child(2) .hot-rank,
.hot-list > li:nth-child(3) .hot-rank {
    color: #FBFBF9;
    background-color: #2D9A68;
    border-color: #2D9A68;
}
html[data-theme="dark"] .hot-list > li:nth-child(1) .hot-rank,
html[data-theme="dark"] .hot-list > li:nth-child(2) .hot-rank,
html[data-theme="dark"] .hot-list > li:nth-child(3) .hot-rank {
    color: #16181B;
    background-color: #4FB585;
    border-color: #4FB585;
}
.hot-list > li:nth-child(2) .hot-rank { opacity: 0.88; }
.hot-list > li:nth-child(3) .hot-rank { opacity: 0.76; }
.hot-list a { font-size: 0.95rem; }

/* ---- 31.4 正文图片与灯箱质感 ---- */
.post-content img, .post-content figure img {
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(43, 43, 43, 0.06);
}
html[data-theme="dark"] .post-content img { box-shadow: none; }

/* ---- 31.5 页脚收束：统计数字略突出 ---- */
.footer-stats span { opacity: 0.92; }
.footer-stats { font-size: 0.78rem; }

/* ---- 31.6 移动端适配跟随 ---- */
@media (max-width: 680px) {
    .post-title { font-size: 1.18rem; }
    .post-single .post-title { font-size: 1.4rem; }
    .item-thumb { flex: 0 0 118px; }
    .item-thumb img { width: 118px; height: 76px; }
    .post-item.has-thumb .post-excerpt { -webkit-line-clamp: 3; }
    .hot-block { padding: 1.2em 1em 0.9em; }
}
@media (max-width: 560px) {
    .post-item.has-thumb { display: block; }
    .item-thumb { margin-bottom: 0.75em; }
    .item-thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

/* ---- 31.7 热门列表：数字右对齐、条目垂直居中 ---- */
.hot-list > li, .related-list > li { align-items: center; }
.hot-list .hot-rank { align-self: flex-start; margin-top: 0.1em; }
.hot-list a, .related-list a { margin-right: 0.7em; }
.hot-views { white-space: nowrap; }

/* ---- 31.8 无图条目也保持左缘一致（标题/摘要不缩进） ---- */
.post-item:not(.has-thumb) .post-title { margin-top: 0; }


/* ============================================================
   32. 视觉升级第二轮（2026-09-27）：文字封面 / 头部印章 / 悬浮目录
   —— 追加段，同权重覆盖上方
   ============================================================ */

/* ---- 32.1 无图文章「文字封面」：米色底 + 主题绿印章字 ---- */
.post-item.has-thumb, .post-item.has-cover { display: flex; align-items: flex-start; gap: 1.35em; }
.post-item.has-cover .post-title { margin-top: 0; }
.post-item.has-cover .post-excerpt { -webkit-line-clamp: 2; }
@media (max-width: 560px) { .post-item.has-cover { display: block; } }
.item-cover {
    flex: 0 0 168px;
    height: 106px;
    aspect-ratio: 16 / 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: linear-gradient(135deg, #F6F2E8 0%, #EDE7D8 100%);
    box-shadow: 0 1px 2px rgba(43, 43, 43, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}
.post-item.has-cover:hover .item-cover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -10px rgba(43, 43, 43, 0.28);
}
.cover-char {
    font-size: 2.5rem;
    font-weight: 700;
    color: #14593D;
    opacity: 0.82;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.cover-cat {
    position: absolute;
    right: 8px;
    bottom: 6px;
    font-size: 0.68rem;
    color: var(--ink-soft);
    letter-spacing: 0.05em;
    opacity: 0.85;
}
html[data-theme="dark"] .item-cover {
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    box-shadow: none;
}
html[data-theme="dark"] .cover-char { color: #79C49B; opacity: 0.7; text-shadow: none; }
@media (max-width: 680px) {
    .item-cover { flex: 0 0 118px; height: 76px; }
    .cover-char { font-size: 1.8rem; }
}
@media (max-width: 560px) {
    .item-cover { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

/* ---- 32.2 站名头部：印章方块 + 站名/简介左右布局 ---- */
.site-header {
    display: flex;
    align-items: center;
    gap: 0.9em;
}
.site-header .site-logo, .site-header .site-seal { flex-shrink: 0; }
.site-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: linear-gradient(135deg, #14593D 0%, #1A6B4A 100%);
    color: #F6F2E8;
    font-size: 1.9rem;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    box-shadow: 0 2px 6px -2px rgba(20, 89, 61, 0.4);
}
.site-id { display: flex; flex-direction: column; gap: 0.15em; }
.site-id .site-title { font-size: 1.35rem; }
.site-id .site-desc {
    margin: 0;
    font-size: 0.82rem;
    color: var(--ink-soft);
}
html[data-theme="dark"] .site-seal {
    background: linear-gradient(135deg, #1A6B4A 0%, #22946B 100%);
}

/* ---- 32.6 手机端精修（第二轮反馈） ---- */
@media (max-width: 680px) {
    /* meta 行：信息项整体不拆词，允许整项换行 */
    .post-meta time, .post-meta .meta-views, .post-meta a, .post-meta .meta-read, .post-meta .meta-words { white-space: nowrap; }
    .post-meta .dot { white-space: nowrap; }
    /* 公告条：词组不拆行 */
    .announce-text { line-height: 1.75; }
    /* 工具条不再溢出：间距更紧、按钮 28px */
    .site-tools { right: 12px; gap: 4px; }
    .tool-btn { width: 30px; height: 30px; }
    /* 列表条目：摘要与继续阅读间距收紧 */
    .post-more { margin-top: 0.55em; }
    /* 页脚安全区 */
    .site-footer { padding-bottom: env(safe-area-inset-bottom, 0px); }
}
@media (max-width: 460px) {
    .site-tools { right: 10px; gap: 3px; }
    .tool-btn { width: 28px; height: 28px; font-size: 0.7rem; }
    .tool-btn svg { width: 13px; height: 13px; }
}

/* 手机回纵排：印章+站名一行，简介跟站名，导航独占下一行（原主题布局） */
@media (max-width: 680px) {
    .site-header { flex-wrap: wrap; }
    .site-id { flex: 1 1 auto; min-width: 0; }
    .site-id .site-title { font-size: 1.32rem; }
    .site-id .site-desc { font-size: 0.84rem; }
    .site-seal { width: 44px; height: 44px; font-size: 1.6rem; border-radius: 9px; }
    .site-nav {
        flex: 1 1 100%;
        margin-top: 0.8em;
        padding-top: 0.9em;
    }
}

/* ---- 32.2a 公告条快捷键提示不折行 + 摘要兜底高度 ---- */
.keys-hint { white-space: nowrap; }
.post-item .post-excerpt { min-height: 3.2em; }
.post-item.has-thumb .post-excerpt, .post-item.has-cover .post-excerpt { min-height: 2.9em; }

/* ---- 32.2b 热门 4/5 名徽章补边框（与 Top3 同形，仅色阶弱化） ---- */
.hot-rank { border: 1px solid var(--line); }
html[data-theme="dark"] .hot-rank { border-color: #3A3D37; }

/* ---- 32.3 悬浮目录侧栏（>1180px 才渲染，grace.js 控制） ---- */
.toc-float {
    position: fixed;
    right: 18px;
    bottom: 24px;
    max-width: 240px;
    max-height: 62vh;
    overflow-y: auto;
    background: rgba(250, 247, 240, 0.96);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 6px 24px -8px rgba(43, 43, 43, 0.22);
    padding: 0.6em 0;
    z-index: 60;
    font-size: 0.8rem;
    backdrop-filter: blur(6px);
}
.toc-float > summary {
    display: none;
}
.toc-float ol {
    margin: 0;
    padding: 0 0.9em;
    list-style: none;
}
.toc-float li {
    margin: 0.15em 0;
    padding-left: 0.9em;
    position: relative;
}
.toc-float li.lv-3 { padding-left: 1.8em; }
.toc-float a {
    color: var(--ink-soft);
    text-decoration: none;
    display: block;
    line-height: 1.5;
}
.toc-float a:hover { color: var(--ink); }
.toc-float a.is-active {
    color: #14593D;
    font-weight: 600;
}
.toc-float a.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1em;
    border-radius: 2px;
    background: #14593D;
}
html[data-theme="dark"] .toc-float {
    background: rgba(30, 32, 30, 0.96);
    box-shadow: 0 6px 24px -8px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .toc-float a.is-active { color: #79C49B; }
html[data-theme="dark"] .toc-float a.is-active::before { background: #79C49B; }
@media (max-width: 1179px) { .toc-float { display: none; } }

/* ---- 32.4 列表 meta 浏览数：与评论数同款弱化色 ---- */
.post-item .meta-views { color: var(--ink-soft); }

/* ---- 32.5 暗色微调：正文图边框/行内代码对比度 ---- */
html[data-theme="dark"] .post-content img { border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .post-content code { background: rgba(255,255,255,0.06); }


/* ============================================================
   33. UI 第三轮：明星主题亮点移植（卡片化 + hover 上浮 + 胶囊标签）
   ============================================================ */
@media screen {
  /* 33.1 文章卡片化 */
  .post-list { display: flex; flex-direction: column; gap: 18px; }
  .post-item {
    padding: 1.5em 1.6em;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 1px 12px -4px rgba(43, 59, 43, 0.08);
    transition: box-shadow .25s ease, transform .25s ease;
    border-bottom: 1px solid var(--line);
  }
  .post-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px -8px rgba(43, 59, 43, 0.16);
  }
  .post-item:first-child { padding-top: 1.5em; }
  .post-item:last-child { border-bottom: 1px solid var(--line); }
  /* 33.2 标题装饰条 */
  .post-title { font-size: 1.3rem; }
  .post-title a { color: var(--ink); }
  /* 33.3 缩略图 */
  .item-thumb { flex: 0 0 148px; }
  .item-thumb img {
    width: 148px; height: 104px;
    border-radius: 8px;
    transition: transform .25s ease;
  }
  .post-item:hover .item-thumb img { transform: scale(1.02); }
  .item-cover { border-radius: 8px; }
  /* 33.4 meta 行 */
  .post-meta a { color: var(--ink-soft); }
  .post-meta a:hover { color: var(--ink); }
  /* 33.5 继续阅读胶囊 */
  .more-link {
    display: inline-block;
    padding: 4px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 0.8rem;
    transition: all .2s ease;
  }
  .more-link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  /* 33.6 热门文章卡 */
  .hot-block {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 1px 12px -4px rgba(43, 59, 43, 0.08);
    padding: 1.2em 1.4em;
  }
  /* 33.7 夜间模式适配 */
  html[data-theme="dark"] .post-item,
  html[data-theme="dark"] .hot-block {
    background: #262925;
    border-color: #3A3D37;
    box-shadow: 0 1px 12px -4px rgba(0,0,0,0.35);
  }
  html[data-theme="dark"] .more-link:hover { background: #E8E6DF; color: #22241F; border-color: #E8E6DF; }
  /* 33.8 手机端 */
  @media (max-width: 680px) {
    .post-item { padding: 1.2em 1.1em; box-shadow: 0 1px 8px -4px rgba(43,59,43,0.07); }
    .post-item:hover { transform: none; }
    .item-thumb, .item-thumb img { flex-basis: 108px; width: 108px; height: 82px; }
    .post-title { font-size: 1.14rem; }
  }
}


/* 33.9 手机端横向溢出兜底 */
@media (max-width: 680px) {
  html, body { overflow-x: hidden; }
}

/* ============================================================
   34. 宽屏版式拓宽与卡片精修（Argon 方案 2026-10-19）
   ============================================================ */
:root {
    --reading-width: clamp(680px, 68vw, 920px);
}

.paper-frame {
    max-width: calc(var(--reading-width) + 2px);
    margin: 36px auto 56px;
}
.paper-frame .page {
    padding: 0 48px 72px;
}

.site-header {
    padding: 48px 0 28px;
    flex-wrap: wrap;
}
.site-nav {
    flex: 1 1 100%;
    margin-top: 1.25em;
    padding-top: 1.15em;
    gap: 0.5em 1.8em;
    font-size: 0.86rem;
}

.post-list {
    gap: 22px;
}
.post-item {
    padding: 1.75em 2em;
    border-radius: 12px;
}
.post-item.has-thumb,
.post-item.has-cover {
    gap: 1.75em;
    align-items: center;
}
.item-thumb,
.item-cover {
    flex: 0 0 200px;
    width: 200px;
    height: 126px;
    border-radius: 10px;
}
.item-thumb img {
    width: 200px;
    height: 126px;
    object-fit: cover;
    border-radius: 10px;
}
.post-title {
    font-size: 1.36rem;
    margin-bottom: 0.45em;
}
.post-excerpt {
    font-size: 0.96rem;
    line-height: 1.8;
}

.post-single .post-title {
    font-size: 1.78rem;
}
.stat-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

/* 悬浮目录：吸附纸笺右侧伴随区 */
@media (min-width: 1360px) {
    .toc-float {
        right: auto;
        left: calc(50% + (var(--reading-width) / 2) + 24px);
        top: 120px;
        bottom: auto;
        width: 230px;
        max-width: 230px;
        max-height: calc(100vh - 180px);
    }
    /* 右侧悬浮目录出现时收起正文内嵌目录，避免重复 */
    #post-toc {
        display: none;
    }
}

/* 平板与手机端回退 */
@media (max-width: 960px) {
    :root { --reading-width: 92vw; }
    .paper-frame .page { padding: 0 28px 60px; }
    .stat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
    :root { --reading-width: 100%; }
    .paper-frame { margin: 14px 12px 24px; }
    .paper-frame .page { padding: 0 18px 48px; }
    .post-item { padding: 1.25em 1.15em; }
    .post-item.has-thumb,
    .post-item.has-cover { align-items: flex-start; gap: 1em; }
    .item-thumb, .item-cover, .item-thumb img {
        flex: 0 0 112px;
        width: 112px;
        height: 80px;
    }
}
@media (max-width: 560px) {
    .item-thumb, .item-cover, .item-thumb img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}