/* ==========================================================================
   星轨博客 v2 · 专业内容平台设计系统 (pro.css)
   --------------------------------------------------------------------------
   定位：把「二次元小清新」改造为「大型博客 / 专业内容平台」观感。

   实现方式（关键）：本文件不重写任何组件，而是**重映射站点原有的 CSS 变量**。
   style.css 里所有颜色、圆角、阴影、字体都吃这套变量，因此改变量 = 全局换肤，
   结构零改动、功能零风险。新组件（Hero / 分区 / 卡片）使用新的 --zb-* 令牌。

   加载顺序：style.css → 主题色内联变量 → pro.css → 管理员自定义 CSS
   （管理员自定义 CSS 在最后，站长仍拥有最高优先级）

   红线：不改 URL、不改 DOM 语义、不删功能、不动 heading 层级。
   ========================================================================== */

/* ==========================================================================
   0. 设计令牌
   ========================================================================== */
:root {
    /* --- 中性色：冷调灰，8 档，承担页面 90% 面积 --- */
    --text-1: hsl(222 12% 14%);   /* 标题、正文 */
    --text-2: hsl(222 8% 34%);    /* 摘要 */
    --text-3: hsl(222 6% 48%);    /* 元信息、时间 */
    --text-4: hsl(222 6% 62%);    /* 禁用、占位 */
    --surface-1: #ffffff;                  /* 卡片 */
    --surface-2: hsl(220 20% 98%);         /* 页面底 */
    --surface-3: hsl(220 16% 96%);         /* hover、条纹 */
    --surface-4: hsl(220 14% 92%);         /* 代码块、分区条 */
    --border-1: hsl(220 14% 91%);
    --border-2: hsl(220 12% 85%);

    /* --- 品牌色阶：由 PHP 注入 --brand / --brand-50 / --brand-600 --- */
    /* 兜底值，PHP 未注入时也能正常工作 */
    --brand: #E4488A;
    --brand-50: hsl(340 90% 96%);
    --brand-100: hsl(340 88% 92%);
    --brand-600: hsl(340 75% 42%);
    --brand-400: hsl(340 80% 66%);

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

    /* --- 字号阶梯（rem，基准 16px）--- */
    --text-xs: 0.75rem;      /* 12  图注、脚注 */
    --text-sm: 0.8125rem;    /* 13  摘要、标签、时间 */
    --text-base: 0.9375rem;  /* 15  导航、按钮、表单 */
    --text-body: 1.0625rem;  /* 17  正文唯一值 */
    --text-lead: 1.1875rem;  /* 19  导语 */
    --text-h4: 1.0625rem;    /* 17 */
    --text-h3: 1.375rem;     /* 22 */
    --text-h2: 1.75rem;      /* 28 */
    --text-h1: 2.25rem;      /* 36 */
    --text-display: 3rem;    /* 48  仅 Hero */

    /* --- 行高 --- */
    --lh-tight: 1.25;
    --lh-title: 1.35;
    --lh-head: 1.5;
    --lh-body: 1.75;

    /* --- 间距（4px 基线）--- */
    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-6: 24px;  --sp-8: 32px;  --sp-12: 48px; --sp-16: 64px;
    --sp-20: 80px; --sp-30: 120px;

    /* --- 圆角：4 档，退掉胶囊与大圆角 --- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* --- 阴影：3 档，不带主色 --- */
    --shadow-1: 0 1px 2px rgba(15, 17, 21, .04), 0 2px 8px rgba(15, 17, 21, .05);
    --shadow-2: 0 4px 16px rgba(15, 17, 21, .08);
    --shadow-3: 0 16px 48px rgba(15, 17, 21, .16);

    /* --- 版心 --- */
    --container: 1200px;
    --prose: 34rem;      /* ≈680px，中文单行 34-42 字 */
    --prose-wide: 820px; /* 代码块破出宽度 */

    /* --- 动效 --- */
    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --dur-fast: .2s;
    --dur: .25s;
    --dur-slow: .3s;
}

/* ==========================================================================
   1. 重映射站点原有变量 —— 这一节是全局换肤的全部秘密
   ========================================================================== */
:root {
    --text-primary: var(--text-1);
    --text-secondary: var(--text-2);
    --text-tertiary: var(--text-3);
    --text-link: var(--brand);
    --text-link-hover: var(--brand-600);

    --bg-body: var(--surface-2);
    --bg-card: var(--surface-1);
    --bg-card-rgb: 255, 255, 255;
    --bg-hover: var(--surface-3);
    --bg-active: var(--surface-4);
    --bg-overlay: rgba(15, 17, 21, .55);
    --bg-navbar: rgba(255, 255, 255, .86);

    --border-color: var(--border-1);
    --border-color-light: var(--border-1);

    --border-radius-sm: var(--radius-sm);
    --border-radius: var(--radius-md);
    --border-radius-lg: var(--radius-lg);
    --border-radius-full: var(--radius-xl);

    --shadow-sm: var(--shadow-1);
    --shadow: var(--shadow-1);
    --shadow-md: var(--shadow-2);
    --shadow-lg: var(--shadow-3);
    --shadow-primary: 0 4px 16px rgba(0, 0, 0, .10);

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
                 "Noto Sans SC", sans-serif;

    --spacing-xs: var(--sp-1);
    --spacing-sm: var(--sp-2);
    --spacing-md: var(--sp-4);
    --spacing-lg: var(--sp-6);
    --spacing-xl: var(--sp-8);

    --transition-fast: var(--dur-fast) ease;
    --transition: var(--dur) ease;
    --transition-slow: var(--dur-slow) ease;

    --container-width: var(--container);
    --navbar-height: 64px;
}

/* ==========================================================================
   2. 深色模式：独立的表面层级系统（不靠阴影，靠表面变亮 + 亮边）
   ========================================================================== */
[data-theme="dark"] {
    --text-1: hsl(0 0% 90%);
    --text-2: hsl(0 0% 75%);
    --text-3: hsl(0 0% 60%);
    --text-4: hsl(0 0% 45%);
    --surface-1: #1a1b24;   /* 卡片 */
    --surface-2: #12131a;   /* 页面底（深灰非纯黑） */
    --surface-3: #22232e;   /* hover */
    --surface-4: #2b2c39;   /* 代码块 */
    --border-1: hsl(220 10% 28%);
    --border-2: hsl(220 10% 38%);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, .5);
    --shadow-3: 0 16px 48px rgba(0, 0, 0, .6);

    /* 深色下主色去刺眼 */
    --brand: var(--brand-400);
    --brand-50: rgba(255, 255, 255, .06);
    --brand-600: var(--brand-400);

    --bg-body: var(--surface-2);
    --bg-card: var(--surface-1);
    --bg-card-rgb: 26, 27, 36;
    --bg-hover: var(--surface-3);
    --bg-active: var(--surface-4);
    --bg-navbar: rgba(26, 27, 36, .88);

    --text-primary: var(--text-1);
    --text-secondary: var(--text-2);
    --text-tertiary: var(--text-3);
    --text-link: var(--brand-400);
    --text-link-hover: var(--brand-400);
}

/* ==========================================================================
   3. 基础排版
   ========================================================================== */
body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--lh-head);
    color: var(--text-1);
    background: var(--bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 全局：退掉过圆的元素 */
.btn, .btn-primary, .btn-secondary, .action-btn, .submit-btn,
.category-badge, .sticky-badge, .tag-cloud a, .tag-list a,
input[type="text"], input[type="email"], input[type="password"],
textarea, select {
    border-radius: var(--radius-md);
}

/* 标签/徽标：从实心色块改为浅底 + 深色字（大幅减少主色面积） */
.category-badge,
.zb-tag {
    display: inline-block;
    padding: 2px 10px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--brand-600);
    background: var(--brand-50);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
}
[data-theme="dark"] .category-badge,
[data-theme="dark"] .zb-tag {
    color: var(--brand-400);
    background: rgba(255, 255, 255, .07);
}

/* 置顶徽标：改为低调的中性深色胶囊 */
.sticky-badge {
    background: rgba(15, 17, 21, .72) !important;
    color: #fff !important;
    font-size: var(--text-xs);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    border: none !important;
}

/* 链接：正文内用主色下划线，列表与卡片标题一律无下划线 */
a {
    color: var(--text-1);
    text-decoration: none;
}
/* 只作用于文章正文容器。
   注意：切勿写 .post-content a —— .post-content 是**卡片内容区**的 class，
   那样会把首页每篇文章的标题都划上一条下划线（很难看）。 */
:is(.article-body, .article-content) a {
    color: var(--brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
:is(.article-body, .article-content) a:hover { color: var(--brand-600); }
/* 卡片区兜底：无论继承到什么，标题都不加下划线 */
.post-card a,
.post-title a,
.zb-hero__link,
.zb-compact,
.zb-textcard,
.zb-mood-card { text-decoration: none; }

/* ==========================================================================
   4. 容器与栅格
   ========================================================================== */
.container,
.main-layout,
.content-area {
    max-width: var(--container);
}

/* ==========================================================================
   5. 导航栏：去掉粉感，改为克制的白底 + 发丝分隔线
   ========================================================================== */
.navbar {
    border-bottom: 1px solid var(--border-1);
    box-shadow: none !important;
}
.navbar.is-scrolled {
    box-shadow: var(--shadow-1) !important;
}
.navbar-menu > li > a::after {
    background: var(--brand);
    height: 2px;
}
.navbar-logo {
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text-1);
}
.navbar-logo i { color: var(--brand); }

/* 主 CTA 用品牌色，其余按钮中性 */
.btn-primary,
.btn-login {
    background: var(--brand);
    border: none;
    font-weight: 600;
    box-shadow: none;
}
.btn-primary:hover,
.btn-login:hover {
    background: var(--brand-600);
}

/* ==========================================================================
   6. Hero 头条区
   ========================================================================== */
.zb-hero {
    /* Hero 与下方第一个分区之间要有明显呼吸，否则「最新发布」会紧贴着 Hero */
    margin: 0 0 var(--sp-16);
}
@media (max-width: 768px) {
    .zb-hero { margin-bottom: var(--sp-8); }
}
.zb-hero__link {
    display: grid;
    gap: var(--sp-6);
    align-items: center;
    padding: var(--sp-6);
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: box-shadow var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
}
.zb-hero__link:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
}
.zb-hero__body { min-width: 0; }
.zb-hero__title {
    font-size: var(--text-h1);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: -.02em;
    color: var(--text-1);
    margin: var(--sp-3) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.zb-hero__link:hover .zb-hero__title { color: var(--brand); }
.zb-hero__excerpt {
    font-size: var(--text-lead);
    line-height: 1.7;
    color: var(--text-2);
    margin: 0 0 var(--sp-4);
    display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* split 布局：左 7 封面 / 右 5 文字 */
@media (min-width: 900px) {
    .zb-hero--split .zb-hero__link {
        grid-template-columns: 7fr 5fr;
    }
    .zb-hero--split .zb-hero__title { font-size: calc(var(--text-h1) * .85); }
}
/* wide 布局：整幅封面 + 叠字 */
.zb-hero--wide .zb-hero__link {
    display: block;
    position: relative;
    padding: 0;
}
.zb-hero--wide .zb-cover { border-radius: 0; }
.zb-hero--wide .zb-hero__body {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--sp-8) var(--sp-6) var(--sp-6);
    background: linear-gradient(180deg, transparent, rgba(15, 17, 21, .82));
    color: #fff;
}
.zb-hero--wide .zb-hero__title,
.zb-hero--wide .zb-hero__excerpt { color: #fff; }
.zb-hero--wide .zb-card-meta { color: rgba(255, 255, 255, .78); }

/* Hero 右侧的次要头条列表 */
.zb-headline-list {
    display: flex;
    flex-direction: column;
}
.zb-headline-list .zb-textcard + .zb-textcard {
    border-top: 1px solid var(--border-1);
}
@media (min-width: 900px) {
    .zb-hero-row {
        display: grid;
        grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
        gap: var(--sp-6);
        align-items: stretch;
    }
}

/* ==========================================================================
   7. 封面容器：比例锁死，杜绝网格参差
   ========================================================================== */
.zb-cover {
    position: relative;
    overflow: hidden;
    background: var(--surface-3);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}
.zb-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--dur-slow) var(--ease-out);
}
.zb-cover--16-9 { aspect-ratio: 16 / 9; }
.zb-cover--4-3  { aspect-ratio: 4 / 3; }
.zb-cover--21-9 { aspect-ratio: 21 / 9; }
.zb-cover--square { aspect-ratio: 1 / 1; width: 72px; border-radius: var(--radius-sm); }

/* 无封面：品牌色淡块 + 分类首字，不留灰框 */
.zb-cover--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-50);
}
[data-theme="dark"] .zb-cover--empty { background: var(--surface-3); }
.zb-cover--empty span {
    font-size: 2rem;
    font-weight: 800;
    color: var(--brand-600);
    opacity: .55;
}
[data-theme="dark"] .zb-cover--empty span { color: var(--brand-400); }

/* ==========================================================================
   8. 分区（Section）
   ========================================================================== */
.zb-section {
    margin: 0 0 var(--sp-20);
}
.zb-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border-1);
}
.zb-section__title {
    position: relative;
    margin: 0;
    padding-left: var(--sp-3);
    font-size: var(--text-h2);
    font-weight: 700;
    line-height: var(--lh-title);
    letter-spacing: -.01em;
    color: var(--text-1);
}
/* 4px 品牌色竖条 —— 「编辑分区」而非装饰区块的信号 */
.zb-section__title::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    min-height: 20px;
    border-radius: 2px;
    background: var(--brand);
}
.zb-section__more {
    flex-shrink: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-3);
    transition: color var(--dur-fast) ease;
}
.zb-section__more:hover { color: var(--brand); }
.zb-section__more i { margin-left: 4px; font-size: .85em; }

/* 网格：auto-fill + minmax 自动降列；各断点的列数由上面统一接管 */
.zb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-8);
}

/* ==========================================================================
   9. 文章卡片（覆盖 .post-card 现有实现）
   ========================================================================== */
/* .post-list 同时被 index / category / tag / search 四个列表页使用，必须保持网格。 */
.post-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-8);
}
/* 清掉原版 flex 布局遗留的 min-width:280px —— 它会顶宽 grid 列、导致窄屏溢出 */
.post-list > .post-card,
.zb-grid > * { flex: none; min-width: 0; width: auto; }

/* ---- 统一响应式断点 ----
   原版 style.css 有大量手写媒体查询控制卡片列数，
   这里用 !important 统一接管，避免手机/平板/PC 三种宽度下列数突变。 */
/* 手机 ≤768px：单列 */
@media (max-width: 768px) {
    .post-list,
    .zb-grid { grid-template-columns: 1fr !important; gap: var(--sp-4); }
}
/* 平板 769–1024px：两列（三列在这个宽度下会挤） */
@media (min-width: 769px) and (max-width: 1024px) {
    .post-list,
    .zb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--sp-6); }
}

.post-card {
    border: 1px solid var(--border-1);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    box-shadow: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}
.post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
    border-color: var(--border-2);
}
.post-card:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

/* 封面锁 16:9 */
.post-card .post-cover {
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    overflow: hidden;
}
.post-card .post-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}
.post-card:hover .post-cover img { transform: scale(1.04); }

.post-card .post-content {
    padding: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    flex: 1;
}
.post-title {
    font-size: 1.25rem;   /* 20px */
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.01em;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.post-title a { color: var(--text-1); transition: color var(--dur-fast) ease; }
.post-card:hover .post-title a { color: var(--brand); }

.post-excerpt {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-2);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* 元信息：单行三件套 */
.post-card .post-meta {
    margin-top: auto;
    padding-top: var(--sp-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--text-3);
}
.post-card .post-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.post-card .post-meta i { font-size: 11px; opacity: .9; }
.post-card .post-meta .category-badge { margin-right: 2px; }
/* 浏览量对单作者博客参考价值最低，降权显示 */
.post-card .post-meta .fa-eye { opacity: .55; }

/* 卡片元信息（新版组件） */
.zb-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--text-3);
}
.zb-dot { opacity: .5; }

/* ==========================================================================
   10. 横向紧凑卡 / 纯文字卡
   ========================================================================== */
.zb-compact {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: center;
    padding: var(--sp-3);
    border-radius: var(--radius-md);
    transition: background-color var(--dur-fast) ease;
}
.zb-compact:hover { background: var(--surface-3); }
.zb-compact__title {
    margin: 0 0 4px;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-1);
    display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.zb-compact:hover .zb-compact__title { color: var(--brand); }

.zb-textcard {
    display: block;
    padding: var(--sp-4) 0 var(--sp-4) var(--sp-4);
    border-left: 3px solid var(--border-1);
    transition: border-color var(--dur-fast) ease;
}
.zb-textcard:hover { border-left-color: var(--brand); }
.zb-textcard__title {
    margin: 0 0 6px;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-1);
    display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.zb-textcard:hover .zb-textcard__title { color: var(--brand); }

/* ==========================================================================
   11. 文章详情页：版心、排版、目录
   ========================================================================== */
.article-detail {
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* 标题：36-40px / 800 / 负字距 */
.article-title {
    font-size: var(--text-h1);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: -.02em;
    color: var(--text-1);
    margin: 0 0 var(--sp-4);
}
@media (max-width: 768px) {
    .article-title { font-size: 1.75rem; }
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px var(--sp-4);
    font-size: var(--text-sm);
    color: var(--text-3);
    padding-bottom: var(--sp-6);
    border-bottom: 1px solid var(--border-1);
}
.article-meta i { opacity: .8; }

/* 正文：版心 680px、17px、行高 1.75 */
.article-body,
:is(.article-body, .article-content),
.entry-content {
    font-size: var(--text-body);
    line-height: var(--lh-body);
    color: var(--text-1);
}
/* 正文块统一收进版心。
   用后代选择器而非子选择器：编辑器（TinyMCE 等）常把内容包一层 <div>，
   若只写 > p，被包裹的段落会漏掉限宽，出现「有的段宽有的段窄」。 */
:is(.article-body, .article-content) p,
:is(.article-body, .article-content) ul,
:is(.article-body, .article-content) ol,
:is(.article-body, .article-content) blockquote,
:is(.article-body, .article-content) h2,
:is(.article-body, .article-content) h3,
:is(.article-body, .article-content) h4,
:is(.article-body, .article-content) figure,
:is(.article-body, .article-content) .zb-table-wrap {
    max-width: var(--prose);
    margin-left: auto;
    margin-right: auto;
}
/* 代码块破出版心
   注意：enhance.js 会把 <pre> 包进 .zb-code-block，
   因此两个选择器都要写，否则包裹后破出规则失效。 */
:is(.article-body, .article-content) > pre,
:is(.article-body, .article-content) > .zb-code-block {
    max-width: var(--prose-wide);
    margin-left: auto;
    margin-right: auto;
}
/* 包裹层内部的 pre 不再受限，撑满 .zb-code-block 宽度 */
:is(.article-body, .article-content) > .zb-code-block > pre { max-width: 100%; }

/* 段落节奏：段距 = 1em，标题上距 > 下距 */
:is(.article-body, .article-content) p {
    margin: 0 0 1em;
    text-align: left; /* 中文禁用两端对齐 */
}
:is(.article-body, .article-content) h2,
:is(.article-body, .article-content) h3,
:is(.article-body, .article-content) h4 {
    color: var(--text-1);
    scroll-margin-top: 88px;
}
:is(.article-body, .article-content) h2 {
    font-size: var(--text-h2);
    font-weight: 700;
    line-height: var(--lh-title);
    margin: 2.5em auto 1em;
}
:is(.article-body, .article-content) h3 {
    font-size: var(--text-h3);
    font-weight: 700;
    line-height: 1.4;
    margin: 2em auto .75em;
}
:is(.article-body, .article-content) h4 {
    font-size: var(--text-h4);
    font-weight: 600;
    margin: 1.6em auto .6em;
}

/* 可选：正文衬线（html.zb-serif 时启用） */
html.zb-serif :is(.article-body, .article-content) p,
html.zb-serif :is(.article-body, .article-content) li,
html.zb-serif :is(.article-body, .article-content) h1,
html.zb-serif :is(.article-body, .article-content) h2 {
    font-family: var(--font-serif);
}

/* 图片：可略宽于正文（820px），但不超出容器 */
:is(.article-body, .article-content) img {
    border-radius: var(--radius-md);
    margin: var(--sp-8) auto;
    display: block;
    max-width: var(--prose-wide);
    height: auto;
}
:is(.article-body, .article-content) figcaption {
    max-width: var(--prose);
    margin: calc(var(--sp-6) * -1) auto var(--sp-8);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-3);
}

/* 引用块：细线 + 淡底，不喧宾夺主 */
/* 引用块：只做间距与配色微调。
   原版 style.css 对 blockquote 有两种实现（4px 竖线版 / 引号 ::before 版），
   且带 border-left:0 + padding-left:52px。
   这里若强行设 border-left + 小 padding-left，
   会让引号图标和文字叠在一起 —— 故不动 border/padding，交给原版。 */
:is(.article-body, .article-content) blockquote {
    margin: 1.6em auto;
    color: var(--text-2);
    border-radius: var(--radius-md);
    max-width: var(--prose);
}

/* 代码 */
:is(.article-body, .article-content) pre,
:is(.article-body, .article-content) pre[class*="language-"] {
    font-size: 14.5px;
    line-height: 1.65;
    border-radius: var(--radius-md);
    background: var(--surface-4);
    border: 1px solid var(--border-1);
    tab-size: 2;
}
[data-theme="dark"] :is(.article-body, .article-content) pre { background: #15161d; }
:is(.article-body, .article-content) :not(pre) > code {
    padding: .15em .42em;
    background: var(--surface-3);
    color: var(--text-1);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-sm);
    font-size: .88em;
    font-family: var(--font-mono);
}

/* 目录：吸顶面板 */
.toc, .article-toc, .zb-toc-panel {
    position: sticky;
    top: 88px;
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--sp-4) var(--sp-2);
    font-size: var(--text-sm);
}
.toc-list a, .toc a { color: var(--text-3); }
.toc-list a:hover, .toc a:hover,
.toc-list a.active, .toc a.active {
    color: var(--brand);
}

/* 作者卡、相关推荐、上下篇：统一圆角与留白 */
.author-card,
.related-card,
.zb-pn-item {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-1);
}

/* ==========================================================================
   12. 侧边栏：从主结构降为上下文，只留必要 widget
   ========================================================================== */
.widget, .sidebar-widget {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-1);
    background: var(--surface-1);
    padding: var(--sp-6);
    margin-bottom: var(--sp-6);
}
/* 侧边栏 widget 标题：原版 style.css 已有 ::before 竖条（4×16px），
   这里**不要**再加 border-left，否则会出现长短两条竖线并排。
   只做排版微调，竖条交给原版。 */
.widget-title, .sidebar-widget h3 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-1);
    margin: 0 0 var(--sp-4);
    gap: var(--sp-2);
}
@media (max-width: 1024px) {
    .sidebar { margin-top: var(--sp-8); }
}

/* ==========================================================================
   13. 说说流：独立一屏，横向排布
   ========================================================================== */
.zb-mood-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--sp-4);
}
.zb-mood-card {
    padding: var(--sp-4) var(--sp-6);
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--text-2);
}
.zb-mood-card time {
    display: block;
    margin-top: var(--sp-2);
    font-size: var(--text-xs);
    color: var(--text-3);
}

/* ==========================================================================
   14. 页脚：中性化
   ========================================================================== */
.site-footer, .footer {
    background: var(--surface-1);
    border-top: 1px solid var(--border-1);
    color: var(--text-3);
    font-size: var(--text-sm);
    padding: var(--sp-12) 0;
}
.site-footer a, .footer a { color: var(--text-2); }
.site-footer a:hover, .footer a:hover { color: var(--brand); }

/* ==========================================================================
   15. 性能
   --------------------------------------------------------------------------
   这里刻意**不使用** content-visibility: auto。
   它虽然能降低首屏渲染成本，但会导致：页面内 Ctrl+F 搜不到视口外内容、
   滚动条长度跳动、部分屏幕阅读器读不到。内容站的站内搜索比这点性能更重要，
   且首页卡片通常只有 20-30 个，收益有限。
   取而代之：图片统一 loading="lazy" + decoding="async"（已在 PHP 侧处理）。
   ========================================================================== */

/* ==========================================================================
   16. 无障碍与减少动效
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .post-card:hover,
    .zb-hero__link:hover { transform: none; }
    .post-card:hover .post-cover img,
    .zb-cover img { transform: none !important; }
}

/* ==========================================================================
   17. 与 enhance.js 的协作
   --------------------------------------------------------------------------
   本文件在 enhance.css 之后加载，特异性相同时会覆盖它。
   而 enhance.js 的入场动画 / 图片淡入依赖 opacity 过渡，
   若被下面这些 transform-only 的 transition 覆盖，动画会退化成"瞬变"。
   因此这里用更高特异性显式把它们接回来。
   ========================================================================== */

/* 17.1 滚动入场动画：opacity 与 transform 都要过渡 */
.zb-reveal,
.post-card.zb-reveal {
    transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
                transform .6s cubic-bezier(.22, .61, .36, 1);
}
.zb-reveal.is-visible,
.post-card.zb-reveal.is-visible {
    opacity: 1;
    transform: none;
}
/* 入场结束后，hover 才接管 transform（避免两者互相打断） */
.post-card.zb-reveal.is-visible:hover {
    transform: translateY(-4px);
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}

/* 17.2 图片淡入：保留 opacity 过渡 */
.zb-img-fade,
.post-card .post-cover img.zb-img-fade,
.zb-cover img.zb-img-fade,
:is(.article-body, .article-content) img.zb-img-fade {
    transition: opacity .55s ease, transform .55s ease;
}
/* 加载完成后，hover 缩放才生效 */
.post-card:hover .post-cover img.zb-img-fade.is-loaded,
.zb-cover img.zb-img-fade.is-loaded {
    transform: none;
}
.post-card.zb-reveal.is-visible:hover .post-cover img.zb-img-fade.is-loaded,
.post-card:hover .post-cover img.is-loaded {
    transform: scale(1.04);
}

/* 17.3 代码块：enhance.js 包裹后的语言标签与复制按钮配色跟随新令牌 */
.zb-code-block .zb-code-lang {
    background: var(--surface-4);
    color: var(--text-3);
}
.zb-code-block .zb-code-copy {
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    color: var(--text-2);
}
.zb-code-block .zb-code-copy:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.zb-code-block .zb-code-copy.copied {
    background: #52c41a;
    border-color: #52c41a;
    color: #fff;
}

/* 17.4 时效提醒 / 上下篇 跟随新圆角与留白 */
.zb-stale-notice {
    border-radius: var(--radius-md);
    max-width: var(--prose);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.6em;
}
.zb-prev-next { gap: var(--sp-4); }
.zb-pn-item {
    padding: var(--sp-4) var(--sp-6);
    box-shadow: none;
}
.zb-pn-item:hover { box-shadow: var(--shadow-2); }

/* 17.5 回到顶部按钮：跟随新圆角与阴影，避开移动端底部导航 */
.zb-backtop {
    border-radius: 50%;
    background: var(--surface-1);
    border: 1px solid var(--border-1);
    box-shadow: var(--shadow-2);
    color: var(--text-2);
}
.zb-backtop:hover {
    color: var(--brand);
    box-shadow: var(--shadow-3);
}
.zb-backtop .zb-ring-bg { stroke: var(--border-1); }
.zb-backtop .zb-ring-fg { stroke: var(--brand); }

/* 17.6 分区标题右侧的文章数量 */
.zb-section__count {
    margin-left: var(--sp-3);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-4);
    letter-spacing: 0;
    vertical-align: middle;
}