@charset "utf-8";
/* ==========================================================================
   青岚 (Qinglan) — 正文皮肤
   --------------------------------------------------------------------------
   这一层不重写任何组件，只做两件事：

   1. 把 lightmind（Typora）的设计令牌翻译成青岚主题的令牌名。
      main.css 里那 60 多个 --xxx 变量是整站唯一的颜色入口，改这里等于换肤，
      不必去 14 个 CSS 文件里逐个替换色值（那 250KB 谁也维护不动）。

   2. 覆写正文排印（.tp-post-article .post_content 里的 h1-h6 / p / 引用 /
      代码 / 表格 / 分隔线）。这部分旧版皮肤原本是按"棕墨"调的，纸换了、墨就得换。

   加载顺序：本文件排在 main/home/post/prism/shortcodes 之后（见 functions.php
   里 qinglan_enqueue_assets 的最后一行），所以同优先级下它赢。
   暗色模式那几条必须带 :root[data-theme="dark"] 前缀 —— header.php 里有一段
   内联暗色样式（`:root[data-theme="dark"] .post_content *`，优先级 0,3,1），
   不带前缀压不住它。
   ========================================================================== */

/* ==========================================================================
   一、设计令牌（浅色：暖米纸 + 山林绿）
   ========================================================================== */
:root {
    /* 表面 */
    --ql-paper: #f4f1e8;        /* 页面底色 — 暖米纸 */
    --ql-paper-write: #faf7ef;  /* 写作区 — 比页面略亮 */
    --ql-paper-soft: #ece8db;   /* 次表面 — 表头条纹、分隔 */
    --ql-paper-quote: #ecefe6;  /* 引用块 — 雾色草地 */
    --ql-paper-code: #e7eee5;   /* 行内代码 — 柔和绿蒙层 */

    /* 墨色 */
    --ql-ink: #2c3a32;          /* 正文 — 深森林绿，不刺眼 */
    --ql-ink-muted: #6b7a6f;    /* 次要 / 元信息 */
    --ql-ink-faint: #93a098;    /* 更弱 */
    --ql-heading: #1f2a23;      /* 标题 — 比正文深一档 */

    /* 山色 */
    --ql-green: #4a7c59;        /* 中山林绿 — 全站强调色 */
    --ql-green-deep: #2f5a40;   /* 松林阴影 — 标题、加粗 */
    --ql-green-soft: #8fb39b;   /* 雾色山脊 — 分隔线 */
    --ql-warm: #c2a878;         /* 阳光余晖 — 标记、暖调点缀 */
    --ql-red: #a85343;          /* 砖红 — 只用于告警/危险，别扩散 */

    /* 代码块（深海军蓝，与纸面形成硬对比） */
    --ql-code-bg: #1e2330;
    --ql-code-bg-soft: #262c3a;
    --ql-code-fg: #c8cfd9;
    --ql-code-line: #3a4253;
    --ql-code-gutter: #6b7488;

    /* 字体 */
    --ql-font-body: "LXGW WenKai", "LXGW WenKai Screen", "霞鹜文楷",
        "霞鹜文楷 屏幕阅读版", "Noto Serif CJK SC", "Source Han Serif CN",
        "Songti SC", "SimSun", system-ui, serif;
    --ql-font-mono: "JetBrains Mono", "JetBrainsMono NF", "Fira Code",
        "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;
}

/* ==========================================================================
   二、令牌映射 —— lightmind → 青岚
   --------------------------------------------------------------------------
   左边是 main.css / home.css / post.css 里在用的旧令牌名，右边是新色。
   这些名字里带 brown/gold 是历史包袱（旧皮肤棕墨调的命名），但它们是整站
   唯一的引用入口，改名要动 250KB CSS，不划算；语义上它们现在分别代表
   "主强调色"和"暖调辅助色"。
   ========================================================================== */
:root {
    /* 表面 */
    --bg-page: var(--ql-paper);
    --bg-page-alt: #efebdf;
    --bg-card: rgba(250, 247, 239, 0.86);
    --bg-soft: var(--ql-paper-soft);
    --bg-float: #faf7ef;

    /* 文字 */
    --text-primary: var(--ql-heading);
    --text-body: var(--ql-ink);
    --text-secondary: var(--ql-ink-muted);
    --text-muted: var(--ql-ink-faint);
    --text-tertiary: var(--ql-ink-faint);   /* 404.php 里带 fallback 的那个，补齐 */

    /* 线 */
    --line-primary: #d9d3c2;
    --line-secondary: #e3ddcc;
    --line-soft: #ebe6d8;
    --ink-decor: var(--ql-green-soft);

    /* 强调 */
    --accent-brown: var(--ql-green);
    --accent-gold: var(--ql-warm);
    --accent-red: var(--ql-red);
    --hover: var(--ql-green-deep);
    --bg-color: var(--ql-green);

    /* 控件 */
    --control-bg: #faf7ef;
    --control-text: #4d5c52;
    --control-border: #ddd7c6;
    --control-shadow: 0 4px 12px rgba(44, 58, 50, 0.06);
    --control-hover-bg: var(--ql-paper-soft);
    --control-hover-text: var(--ql-heading);
    --control-hover-border: #c9c2b0;
    --control-hover-shadow: 0 6px 16px rgba(44, 58, 50, 0.1);
    --control-active-bg: var(--ql-green-deep);
    --control-active-text: #faf7ef;
    --control-active-border: var(--ql-green-deep);
    --control-active-shadow: 0 8px 18px rgba(47, 90, 64, 0.22);

    /* 浮动按钮 */
    --float-bg: rgba(250, 247, 239, 0.9);
    --float-icon: #5b6a5f;
    --float-border: rgba(217, 211, 194, 0.9);
    --float-hover-bg: var(--ql-paper-soft);
    --float-hover-icon: var(--ql-heading);
    --float-hover-border: #ccc5b3;
    --float-active-bg: #e4dfd0;
    --float-active-icon: var(--ql-green-deep);

    /* 字体 */
    --font-main: var(--ql-font-body);
    --font-body: var(--ql-font-body);
}

/* ==========================================================================
   三、暗色令牌（暗夜森林）
   ========================================================================== */
:root[data-theme="dark"] {
    --ql-paper: #161d1a;
    --ql-paper-write: #1d2622;
    --ql-paper-soft: #232d28;
    --ql-paper-quote: #1d2722;
    --ql-paper-code: #25342c;

    --ql-ink: #ccd8ce;
    --ql-ink-muted: #9ba89e;
    --ql-ink-faint: #6f7a72;
    --ql-heading: #e8ede1;

    --ql-green: #7fbe92;
    --ql-green-deep: #a8d4b6;
    --ql-green-soft: #5a7d68;
    --ql-warm: #d8bd86;
    --ql-red: #d3816f;

    --ql-code-bg: #14181f;
    --ql-code-bg-soft: #1c2128;
    --ql-code-fg: #c8cfd9;
    --ql-code-line: #3a4253;
    --ql-code-gutter: #6b7488;

    /* 暗色下阴影加深两档 */
    --ql-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.35);
    --ql-shadow-float: 0 10px 28px rgba(0, 0, 0, 0.5);

    /* 令牌映射（暗色单独再走一遍，别指望浅色这份自动继承） */
    --bg-page: var(--ql-paper);
    --bg-page-alt: #1a221e;
    --bg-card: #1d2622;
    --bg-soft: var(--ql-paper-soft);
    --bg-float: #1d2622;

    --text-primary: var(--ql-heading);
    --text-body: var(--ql-ink);
    --text-secondary: var(--ql-ink-muted);
    --text-muted: var(--ql-ink-faint);
    --text-tertiary: var(--ql-ink-faint);

    --line-primary: #33403a;
    --line-secondary: #2a352f;
    --line-soft: #232d28;
    --ink-decor: #45564b;

    --accent-brown: var(--ql-green);
    --accent-gold: var(--ql-warm);
    --accent-red: var(--ql-red);
    --hover: var(--ql-green-deep);
    --bg-color: var(--ql-green);

    --control-bg: #202a25;
    --control-text: #ccd8ce;
    --control-border: #33403a;
    --control-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
    --control-hover-bg: #27332c;
    --control-hover-text: #ffffff;
    --control-hover-border: #45564b;
    --control-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
    --control-active-bg: var(--ql-green);
    --control-active-text: #101714;
    --control-active-border: var(--ql-green);
    --control-active-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);

    --float-bg: rgba(29, 38, 34, 0.9);
    --float-icon: #b3c2b7;
    --float-border: rgba(51, 64, 58, 0.9);
    --float-hover-bg: #27332c;
    --float-hover-icon: #ffffff;
    --float-hover-border: #45564b;
    --float-active-bg: #33403a;
    --float-active-icon: #ffffff;

    font-size: 16px;
}

/* ==========================================================================
   四、页面底色
   --------------------------------------------------------------------------
   同旧皮肤（Riven）的 --tp-bg 机制：全站铺一幅青绿山水做底，卡片半透明
   浮在画上。画是自产的（AI 生成后裁边、降饱和、向宣纸色洗白），色调按
   青岚配的，中央大留白留给正文。纸纹垫在最底层——万一画加载失败，露
   出来的仍是纸而不是白板。
   ========================================================================== */
:root {
    --tp-bg: url("../images/home-bg.jpg");
    /* 纸纹背景图（自产 SVG，1.5KB，平铺无缝；放 assets/images/） */
    --ql-paper-tex: url("../images/paper-light.svg");
    --ql-paper-tex-dark: url("../images/paper-dark.svg");
    /* 阴影只有两档：卡片浮起 / 悬浮层 */
    --ql-shadow-card: 0 2px 10px rgba(44, 58, 50, 0.08);
    --ql-shadow-float: 0 10px 28px rgba(44, 58, 50, 0.16);
}

body::before {
    background-color: var(--ql-paper);
    background-image:
        radial-gradient(
            1180px 620px at 50% -12%,
            rgba(194, 168, 120, 0.18),
            rgba(194, 168, 120, 0) 72%
        ),
        var(--tp-bg),
        var(--ql-paper-tex);
    background-repeat: no-repeat, no-repeat, repeat;
    background-position: center top, center top, 0 0;
    background-size: 100% 100%, 100% 100%, 512px 512px;
}

:root[data-theme="dark"] body::before {
    background-color: var(--ql-paper);
    background-image:
        radial-gradient(
            1180px 620px at 50% -12%,
            rgba(127, 190, 146, 0.09),
            rgba(127, 190, 146, 0) 70%
        ),
        linear-gradient(rgba(22, 29, 26, 0.86), rgba(22, 29, 26, 0.86)),
        var(--tp-bg),
        var(--ql-paper-tex-dark);
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-position: center top, center top, center top, 0 0;
    background-size: 100% 100%, 100% 100%, 100% 100%, 512px 512px;
}

/* 纸纹质感由 body::before 的背景图承担；这层（home.css 原中轴渐变）明确关掉。 */
body::after {
    background: none;
    opacity: 0;
}

/* 文楷数字是比例宽度：表格/日期/计数场景统一等宽，不然对不齐 */
.tp-post-article .post_content table,
.post-meta,
.tp-post-article .post_content .footnotes {
    font-variant-numeric: tabular-nums;
}

/* 选中文字：淡绿蒙层，别用系统蓝 */
::selection {
    background: rgba(74, 124, 89, 0.26);
    color: var(--ql-heading);
}

:root[data-theme="dark"] ::selection {
    background: rgba(127, 190, 146, 0.32);
    color: #ffffff;
}

/* 滚动条：细、低对比，别抢戏 */
::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(74, 124, 89, 0.26);
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(74, 124, 89, 0.44);
    background-clip: content-box;
}

/* ==========================================================================
   五、正文容器
   --------------------------------------------------------------------------
   lightmind 的写作区是一张纸：暖白底、12px 圆角、一层很浅的投影，
   和页面底色只差一点点明度 —— 靠这点差距分出层次，不用描边。
   ========================================================================== */
.tp-post-article {
    font-family: var(--ql-font-body);
    color: var(--ql-ink);
}

.tp-post-article .post_content {
    padding: 34px 38px 40px;
    border: 1px solid rgba(44, 58, 50, 0.06);
    border-radius: 12px;
    background: var(--ql-paper-write);
    box-shadow:
        0 2px 10px rgba(44, 58, 50, 0.06),
        0 1px 3px rgba(44, 58, 50, 0.04);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--ql-ink);
    font-size: 17px;
    line-height: 1.86;
}

:root[data-theme="dark"] .tp-post-article .post_content {
    border-color: rgba(127, 190, 146, 0.07);
    background: var(--ql-paper-write);
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.22);
    color: var(--ql-ink);
}

@media (max-width: 640px) {
    .tp-post-article .post_content {
        padding: 22px 18px 26px;
        font-size: 16.5px;
    }
}

/* ==========================================================================
   六、标题
   --------------------------------------------------------------------------
   lightmind 的标题辨识度全在三条规则上：
     h1 —— 2px 实线绿下划      h2 —— 1px 淡绿下划
     h3 —— 左侧 4px 绿竖条
   旧版皮肤给 h1/h2/h3 都挂了渐变竖条（::before），这里要先把 h1/h2 的
   竖条摘掉，否则会和下划线打架。
   ========================================================================== */
.tp-post-article .post_content h1,
.tp-post-article .post_content h2,
.tp-post-article .post_content h3,
.tp-post-article .post_content h4,
.tp-post-article .post_content h5,
.tp-post-article .post_content h6 {
    color: var(--ql-heading);
    font-family: var(--ql-font-body);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.005em;
}

/* h1 / h2 不要竖条 */
.tp-post-article .post_content h1::before,
.tp-post-article .post_content h2::before {
    content: none;
    display: none;
}

.tp-post-article .post_content h1 {
    margin: 0 0 0.55em;
    padding: 0 0 0.32em;
    border-bottom: 2px solid var(--ql-green);
    font-size: 1.9em;
    line-height: 1.34;
    letter-spacing: 0.02em;
}

.tp-post-article .post_content h2 {
    margin: 1.9em 0 0.62em;
    padding: 0 0 0.28em;
    border-bottom: 1px solid rgba(74, 124, 89, 0.28);
    color: var(--ql-green-deep);
    font-size: 1.45em;
    letter-spacing: 0.02em;
}

.tp-post-article .post_content h3 {
    margin: 1.65em 0 0.55em;
    padding-left: 0.62em;
    color: var(--ql-green-deep);
    font-size: 1.17em;
    letter-spacing: 0.02em;
}

/* 标题锚点：hover 时行尾淡出一个 #，方便复制锚点 */
.tp-post-article .post_content h2:hover::after,
.tp-post-article .post_content h3:hover::after {
    content: " #";
    color: var(--ql-green-soft);
    font-weight: 400;
    letter-spacing: 0;
}

/* h3 保留竖条，改成 lightmind 那种实心短条 */
.tp-post-article .post_content h3::before {
    width: 4px;
    height: 0.88em;
    margin: 0 0.5em 0 -0.62em;
    border-radius: 2px;
    background: var(--ql-green);
    vertical-align: -0.04em;
}

.tp-post-article .post_content h4 {
    margin: 1.5em 0 0.5em;
    color: var(--ql-green-deep);
    font-size: 1.04em;
    letter-spacing: 0.02em;
}

/* 移动端 h1 收一档，长标题不挤；必须放在 h1 主规则之后才压得住 */
@media (max-width: 640px) {
    .tp-post-article .post_content h1 {
        font-size: 1.62em;
    }
}

.tp-post-article .post_content h5 {
    margin: 1.4em 0 0.45em;
    color: var(--ql-ink-muted);
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.tp-post-article .post_content h6 {
    margin: 1.4em 0 0.45em;
    color: var(--ql-ink-faint);
    font-size: 0.95em;
    font-weight: 600;
}

/* 暗色：压过 header.php 那段内联样式。
   注意必须带上 :not(#site-search-container *)：header.php 的暗色兜底样式里
   h1-h6 / p / li 等每条都挂了这个 :not，里面藏着一个 ID（#site-search-container），
   特异性是 (1,2,1)，比任何普通类选择器都高 —— 不带上它，标题在暗色下
   会被打回正文色（绿色强调全丢）。这里镜像它的写法，特异性 (1,4,1) 反超。 */
:root[data-theme="dark"] .tp-post-article .post_content :is(h1, h2, h3, h4, h5, h6):not(#site-search-container *) {
    color: var(--ql-heading);
}

:root[data-theme="dark"] .tp-post-article .post_content :is(h2, h3, h4):not(#site-search-container *) {
    color: var(--ql-green-deep);
}

/* 加粗 / 标记 / 删除线：内联兜底样式同样会盖掉，这里一并反超 */
:root[data-theme="dark"] .tp-post-article .post_content :is(strong, b):not(#site-search-container *) {
    color: var(--ql-green-deep);
}

:root[data-theme="dark"] .tp-post-article .post_content mark:not(#site-search-container *) {
    padding: 0 2px;
    border-radius: 2px;
    background: rgba(216, 189, 134, 0.28);
    color: #f0ead8;
}

:root[data-theme="dark"] .tp-post-article .post_content :is(del, s):not(#site-search-container *) {
    color: var(--ql-ink-faint);
}

/* ==========================================================================
   七、段落与行内元素
   ========================================================================== */
.tp-post-article .post_content p {
    margin: 0 0 1.05em;
    color: var(--ql-ink);
    font-size: inherit;
    line-height: 1.86;
    letter-spacing: 0.01em;
}

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

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

.tp-post-article .post_content a {
    padding: 0 1px;
    border-bottom: 1px solid rgba(74, 124, 89, 0.35);
    color: var(--ql-green);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.tp-post-article .post_content a:hover {
    border-bottom-color: var(--ql-green-deep);
    color: var(--ql-green-deep);
}

.tp-post-article .post_content mark {
    padding: 0 2px;
    border-radius: 2px;
    background: rgba(194, 168, 120, 0.38);
    color: var(--ql-heading);
}

.tp-post-article .post_content del,
.tp-post-article .post_content s {
    color: var(--ql-ink-faint);
    text-decoration-color: rgba(168, 83, 67, 0.6);
}

/* 行内代码：淡绿蒙层，不是灰底 */
.tp-post-article .post_content code:not([class]):not(pre code),
.tp-post-article .post_content p code,
.tp-post-article .post_content li code:not(pre code),
.tp-post-article .post_content td code:not(pre code),
.tp-post-article .post_content h2 code,
.tp-post-article .post_content h3 code {
    margin: 0 2px;
    padding: 1px 6px;
    border: 1px solid rgba(74, 124, 89, 0.16);
    border-radius: 4px;
    background: var(--ql-paper-code);
    color: var(--ql-green-deep);
    font-family: var(--ql-font-mono);
    font-size: 0.88em;
    font-weight: 400;
    letter-spacing: 0;
}

:root[data-theme="dark"] .tp-post-article .post_content code:not([class]):not(pre code),
:root[data-theme="dark"] .tp-post-article .post_content p code,
:root[data-theme="dark"] .tp-post-article .post_content li code:not(pre code),
:root[data-theme="dark"] .tp-post-article .post_content td code:not(pre code) {
    border-color: rgba(127, 190, 146, 0.16);
    background: var(--ql-paper-code);
    color: var(--ql-green-deep);
}

/* 列表：只换符标颜色，间距沿用基础样式（那套已经调得比较合适） */
.tp-post-article .post_content ul>li::before {
    background: var(--ql-green);
}

.tp-post-article .post_content ol>li::before {
    color: var(--ql-green-deep);
    font-weight: 600;
}

.tp-post-article .post_content li {
    color: var(--ql-ink);
    line-height: 1.82;
}

/* ==========================================================================
   八、引用块（雾色草地）
   ========================================================================== */
.tp-post-article .post_content blockquote {
    margin: 1.45em 0;
    padding: 16px 22px;
    border: 1px solid rgba(74, 124, 89, 0.18);
    border-left: 4px solid var(--ql-green);
    border-radius: 8px;
    background: var(--ql-paper-quote);
    box-shadow: 0 1px 2px rgba(44, 58, 50, 0.05);
    color: var(--ql-ink);
    font-style: normal;
    line-height: 1.8;
}

.tp-post-article .post_content blockquote p {
    margin: 0.4em 0;
    color: var(--ql-ink);
    font-size: inherit;
    line-height: 1.8;
}

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

.tp-post-article .post_content blockquote blockquote {
    margin: 0.6em 0;
    border-color: rgba(143, 179, 155, 0.45);
    border-left-color: var(--ql-green-soft);
    background: rgba(255, 255, 255, 0.42);
}

:root[data-theme="dark"] .tp-post-article .post_content blockquote {
    border-color: rgba(127, 190, 146, 0.16);
    border-left-color: var(--ql-green);
    background: var(--ql-paper-quote);
    color: var(--ql-ink);
}

:root[data-theme="dark"] .tp-post-article .post_content blockquote p {
    color: var(--ql-ink);
}

:root[data-theme="dark"] .tp-post-article .post_content blockquote blockquote {
    background: rgba(255, 255, 255, 0.03);
}

/* ==========================================================================
   九、代码块（深海军蓝）
   --------------------------------------------------------------------------
   基础样式的代码块是「mac 红绿灯 + 语言标签 + 复制按钮」窗口，这套交互
   留着，只把底从棕墨换成海军蓝，并把语法高亮从"浅色底配色"换成 One Dark
   （prism.css 里那套 #905 / #07a 是给白底用的，放到深底上几乎看不见）。
   ========================================================================== */
.tp-post-article .post_content div.code-toolbar {
    margin: 1.5em 0;
    padding-top: 36px;
    border: 1px solid var(--ql-code-line);
    border-radius: 10px;
    background: var(--ql-code-bg);
    box-shadow: 0 10px 26px rgba(24, 30, 42, 0.22);
}

.tp-post-article .post_content div.code-toolbar>pre,
.tp-post-article .post_content div.code-toolbar>pre[class*="language-"] {
    margin: 0;
    padding: 0 18px 16px;
    border: 0;
    border-radius: 0 0 10px 10px;
    background: transparent;
    box-shadow: none;
    color: var(--ql-code-fg);
}

.tp-post-article .post_content pre,
.tp-post-article .post_content pre[class*="language-"] {
    margin: 1.5em 0;
    padding: 16px 18px;
    border: 1px solid var(--ql-code-line);
    border-radius: 10px;
    background: var(--ql-code-bg);
    box-shadow: 0 10px 26px rgba(24, 30, 42, 0.2);
    color: var(--ql-code-fg);
    font-family: var(--ql-font-mono);
    font-size: 13.5px;
    line-height: 1.72;
}

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

/* 顶栏：红绿灯保留，语言标签与复制按钮改成低对比灰蓝 */
.tp-post-article .post_content div.code-toolbar>.toolbar .toolbar-item {
    color: #8b93a5;
    font-family: var(--ql-font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(139, 147, 165, 0.14);
}

/* 空壳代码块：正文里装了高亮插件（hcb）之后，Prism 的 toolbar 会留下一批
   <code> 已被搬空、只剩红绿灯和语言标签的空窗口，深底上一块一块非常扎眼。
   用 :has 判断里面 code 是否为空，空壳整块隐藏（:has 不支持的旧浏览器
   最多是照旧显示空壳，不会更糟）。 */
.tp-post-article .post_content div.code-toolbar:has(>pre>code:empty) {
    display: none;
}

.tp-post-article .post_content div.code-toolbar>.toolbar button {
    height: 20px;
    padding: 0 9px;
    border: 1px solid rgba(200, 207, 217, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #a9b2c2;
    font-family: var(--ql-font-body);
    font-size: 12px;
    line-height: 18px;
}

.tp-post-article .post_content div.code-toolbar>.toolbar button:hover {
    border-color: rgba(200, 207, 217, 0.34);
    background: rgba(255, 255, 255, 0.08);
    color: #e6ebf2;
}

/* 行号栏 */
.tp-post-article .post_content .line-numbers .line-numbers-rows {
    border-right: 1px solid var(--ql-code-line);
    background-color: var(--ql-code-bg-soft);
}

.tp-post-article .post_content .line-numbers-rows>span:before {
    color: var(--ql-code-gutter);
}

/* 代码块内滚动条（深底上要用浅色） */
.tp-post-article .post_content pre[class*="language-"]::-webkit-scrollbar,
.tp-post-article .post_content pre::-webkit-scrollbar {
    height: 8px;
}

.tp-post-article .post_content pre[class*="language-"]::-webkit-scrollbar-thumb,
.tp-post-article .post_content pre::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(200, 207, 217, 0.28);
    background-clip: content-box;
}

/* ---- Prism token：One Dark 调色板 ---- */
.tp-post-article .post_content .token.comment,
.tp-post-article .post_content .token.prolog,
.tp-post-article .post_content .token.doctype,
.tp-post-article .post_content .token.cdata {
    color: #77b767;
    font-style: italic;
}

.tp-post-article .post_content .token.punctuation {
    color: #a4adbd;
}

.tp-post-article .post_content .token.property,
.tp-post-article .post_content .token.tag,
.tp-post-article .post_content .token.constant,
.tp-post-article .post_content .token.symbol,
.tp-post-article .post_content .token.deleted {
    color: #ef596f;
}

.tp-post-article .post_content .token.boolean,
.tp-post-article .post_content .token.number {
    color: #d19a66;
}

.tp-post-article .post_content .token.selector,
.tp-post-article .post_content .token.attr-name,
.tp-post-article .post_content .token.string,
.tp-post-article .post_content .token.char,
.tp-post-article .post_content .token.builtin,
.tp-post-article .post_content .token.inserted {
    color: #89ca78;
}

.tp-post-article .post_content .token.operator,
.tp-post-article .post_content .token.entity,
.tp-post-article .post_content .token.url {
    color: #c8cfd9;
}

.tp-post-article .post_content .token.atrule,
.tp-post-article .post_content .token.attr-value,
.tp-post-article .post_content .token.keyword {
    color: #d55fde;
}

.tp-post-article .post_content .token.function,
.tp-post-article .post_content .token.class-name {
    color: #61afef;
}

.tp-post-article .post_content .token.regex,
.tp-post-article .post_content .token.important,
.tp-post-article .post_content .token.variable {
    color: #e5c07b;
}

.tp-post-article .post_content .token.deleted {
    color: #ef596f;
}

/* 代码块里的选中色要用深色文字，否则白底白字 */
.tp-post-article .post_content pre ::selection,
.tp-post-article .post_content pre *::selection {
    background: rgba(127, 190, 146, 0.34);
    color: #ffffff;
}

/* ==========================================================================
   十、表格（深绿表头 + 深绿描边，lightmind 最显眼的一处）
   ========================================================================== */
.tp-post-article .post_content table {
    width: 100%;
    margin: 1.5em 0;
    border: 2px solid var(--ql-green-deep);
    border-radius: 8px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--ql-paper-write);
    box-shadow: 0 1px 2px rgba(44, 58, 50, 0.05);
    overflow: hidden;
    font-size: 0.93em;
}

.tp-post-article .post_content thead {
    background: var(--ql-green);
    color: var(--ql-paper-write);
}

.tp-post-article .post_content th,
.tp-post-article .post_content td {
    padding: 10px 14px;
    border-right: 1px solid rgba(74, 124, 89, 0.16);
    border-bottom: 1px solid rgba(74, 124, 89, 0.16);
    color: var(--ql-ink);
    font-size: 14px;
    line-height: 1.7;
}

.tp-post-article .post_content th {
    border-bottom: 1px solid rgba(250, 247, 239, 0.22);
    color: var(--ql-paper-write);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.tp-post-article .post_content tbody tr:nth-child(even) {
    background: rgba(236, 232, 219, 0.42);
}

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

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

:root[data-theme="dark"] .tp-post-article .post_content table {
    border-color: var(--ql-green-deep);
    background: var(--ql-paper-write);
}

:root[data-theme="dark"] .tp-post-article .post_content thead {
    background: #2f5a40;
    color: #eaf3ec;
}

:root[data-theme="dark"] .tp-post-article .post_content th,
:root[data-theme="dark"] .tp-post-article .post_content td {
    border-right-color: rgba(127, 190, 146, 0.14);
    border-bottom-color: rgba(127, 190, 146, 0.14);
    color: var(--ql-ink);
}

:root[data-theme="dark"] .tp-post-article .post_content th {
    border-bottom-color: rgba(234, 243, 236, 0.2);
    color: #eaf3ec;
}

:root[data-theme="dark"] .tp-post-article .post_content tbody tr:nth-child(even) {
    background: rgba(127, 190, 146, 0.05);
}

/* ==========================================================================
   十一、分隔线 / 图片 / 脚注
   ========================================================================== */
.tp-post-article .post_content hr {
    height: 1px;
    margin: 2.2em 0;
    border: 0;
    background: linear-gradient(
        90deg,
        transparent,
        var(--ql-green-soft) 30%,
        var(--ql-green-soft) 70%,
        transparent
    );
    opacity: 0.85;
}

.tp-post-article .post_content img {
    border-radius: 8px;
    box-shadow: var(--ql-shadow-card);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/* 图片被"拿起"：hover 微抬升 + 阴影加深 */
.tp-post-article .post_content img:hover {
    transform: translateY(-2px);
    box-shadow: var(--ql-shadow-float);
}

.tp-post-article .post_content figcaption {
    margin-top: 0.5em;
    color: var(--ql-ink-muted);
    font-size: 0.88em;
    text-align: center;
}

/* 脚注那块的分隔线跟着走 */
.tp-post-article .post_content .footnotes>hr {
    background: linear-gradient(
        90deg,
        transparent,
        var(--ql-green-soft),
        transparent
    );
}

/* ==========================================================================
   十二、正文里的功能性小块
   --------------------------------------------------------------------------
   青岚短代码（{qinglan_notice} / {qinglan_postcard} …）走的是 css/shortcodes.css，
   它们内部已经用 --accent-brown / --bg-soft 这套令牌，令牌一换就跟着变；
   只有几处硬编码的暖褐需要在这里拉回来。
   ========================================================================== */
.tp-post-article .post_content blockquote cite,
.tp-post-article .post_content blockquote footer {
    color: var(--ql-ink-muted);
    font-size: 0.9em;
    font-style: normal;
}

/* 键盘键位 */
.tp-post-article .post_content kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--line-primary);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--ql-paper-soft);
    color: var(--ql-ink);
    font-family: var(--ql-font-mono);
    font-size: 0.86em;
    line-height: 1.5;
}