/*
Theme Name: WP Medium
Theme URI: https://example.com/wp-medium
Author: Trae AI
Author URI: https://example.com
Description: 一款仿照 Medium.com 设计风格的 WordPress 主题，采用极简设计、优雅排版、卡片式布局，为读者提供舒适的阅读体验。针对单用户博客优化：当前版本参考 Medium 现版三栏首页布局（左侧可折叠导航 + 中间 Tab 文章流 + 右侧精选/话题），并保留单文章 Medium 风格互动栏与阅读进度条。
Version: 1.7.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wp-medium
Tags: blog, one-column, two-columns, right-sidebar, custom-colors, custom-menu, editor-style, featured-images, flexible-header, full-width-template, post-formats, threaded-comments, translation-ready, news
*/

/* ==========================================================================
   1. CSS 变量与颜色系统
   ========================================================================== */
:root {
    /* 主色调 - Medium 风格的绿色 */
    --color-primary: #1a8917;
    --color-primary-hover: #0f730c;
    --color-primary-light: rgba(26, 137, 23, 0.05);
    --color-primary-tint: rgba(26, 137, 23, 0.04);
    --color-primary-glow: rgba(26, 137, 23, 0.12);
    --color-primary-glow-strong: rgba(26, 137, 23, 0.25);

    /* 文字颜色 */
    --color-text: #242424;
    --color-text-secondary: #6b6b6b;
    --color-text-light: #8c8c8c;
    --color-text-on-primary: #ffffff;
    --color-text-placeholder: #a0a0a0;

    /* 背景颜色 */
    --color-bg: #ffffff;
    --color-bg-secondary: #fafafa;
    --color-bg-tertiary: #f2f2f2;
    --color-bg-translucent: rgba(255, 255, 255, 0.97);
    --color-border: #e6e6e6;
    --color-border-light: #f0f0f0;

    /* 功能色 */
    --color-overlay: rgba(0, 0, 0, 0.4);
    --color-error: #e74c3c;
    
    /* 排版 - 中文优先：正文无衬线（更适合中文屏幕阅读），标题保留衬线质感 */
    --font-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'PMingLiU', 'SimSun', 'Microsoft YaHei', 'PingFang SC', Georgia, Cambria, 'Times New Roman', serif;
    --font-sans: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    --font-mono: 'SFMono-Regular', source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
    
    /* 字号 —— 均匀级差阶梯，覆盖 11~40px */
    --font-size-2xs: 11px;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-md: 17px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 28px;
    --font-size-3xl: 34px;
    --font-size-4xl: 40px;
    
    /* 间距 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    
    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-full: 9999px;
    
    /* 阴影 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    
    /* 布局 */
    --container-max-width: 1200px;
    --content-max-width: 900px;
    --header-height: 57px;
}

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

html {
    font-size: var(--font-size-md);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--color-primary);
}

/* ==========================================================================
   2.1 可访问性辅助类（WordPress 核心依赖）
   ========================================================================== */

/* 屏幕阅读器专用文本 —— 视觉隐藏但可被读屏器读出 */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--color-bg-tertiary);
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: var(--color-primary);
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* 跳转到内容链接（键盘导航入口） */
.skip-link {
    position: absolute;
    top: -100%;
    left: 6px;
    z-index: 100000;
}

.skip-link:focus {
    top: 6px;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-size: var(--font-size-sm);
    padding: 8px 14px;
    border-radius: var(--radius-md);
    text-decoration: none;
}

/* 全局焦点指示 —— 为 outline:none 的元素提供可见的 :focus-visible 替代 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   2.2 减少动画偏好（无障碍 WCAG 2.3.3）
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 var(--spacing-md) 0;
    letter-spacing: -0.01em;
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }

p {
    margin: 0 0 var(--spacing-md) 0;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

ul, ol {
    margin: 0 0 var(--spacing-md) 0;
    padding-left: var(--spacing-lg);
}

blockquote {
    margin: var(--spacing-lg) 0;
    padding: 0 0 0 var(--spacing-lg);
    border-left: 3px solid var(--color-text);
    font-family: var(--font-serif);
    font-size: var(--font-size-lg);
    font-style: italic;
    color: var(--color-text-secondary);
}

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

pre {
    background: var(--color-bg-secondary);
    color: var(--color-text);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: var(--spacing-lg) 0;
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* ==========================================================================
   3. 工具类
   ========================================================================== */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

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

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.hidden { display: none !important; }

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* ==========================================================================
   4. 按钮样式
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 20px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-text);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    gap: 6px;
}

.btn:hover {
    background: var(--color-text);
    color: var(--color-bg);
}

.btn-primary {
    background: var(--color-text);
    color: var(--color-bg);
}

.btn-primary:hover {
    background: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
}

.btn-green {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-on-primary);
}

.btn-green:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-outline {
    border-color: var(--color-border);
}

.btn-outline:hover {
    border-color: var(--color-text);
}

/* ==========================================================================
   5. 站点头部
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg-translucent);
    border-bottom: 1px solid var(--color-border-light);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
}

.site-branding {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.site-logo {
    font-family: var(--font-serif);
    font-size: var(--font-size-2xl);
    font-weight: 900;
    color: var(--color-text);
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
}

.site-logo:hover {
    color: var(--color-text);
}

/* 自定义 logo 图片 */
.site-logo-img {
    height: 40px;
    width: auto;
    max-height: calc(var(--header-height) - 16px);
    display: block;
}

/* 主导航 */
.main-navigation {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links a {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    transition: color 0.15s ease;
}

.nav-links a:hover {
    color: var(--color-text);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.search-trigger {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.15s ease;
}

.search-trigger:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
}

.search-trigger svg {
    width: 20px;
    height: 20px;
}

.avatar-link {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    cursor: pointer;
}

.avatar-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   5.5 极简 Header（v1.2.0）— 居中搜索框 + 右侧操作
   ========================================================================== */
.site-header--minimal .header-inner {
    gap: var(--spacing-lg);
    max-width: none;
    margin: 0;
    padding: 0 var(--spacing-lg);
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.site-logo-text {
    font-weight: 900;
    margin-left: 2px;
}

/* 搜索框紧邻 Logo 右侧（不再居中） */
.header-search {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-bg-tertiary);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    padding: 0 14px;
    height: 40px;
    transition: all 0.15s ease;
    width: 240px;
    max-width: 100%;
    margin-left: var(--spacing-md);
}

.header-search:focus-within {
    background: var(--color-bg);
    border-color: var(--color-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.header-search-icon {
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.header-search-icon svg {
    width: 18px;
    height: 18px;
}

.header-search-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    min-width: 0;
}

.header-search-input:focus-visible {
    outline: none;
}

.header-search-input::placeholder {
    color: var(--color-text-light);
}

.header-write {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text);
}

.header-write svg {
    width: 14px;
    height: 14px;
}

.header-link {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    padding: 6px 12px;
}

.header-link:hover {
    color: var(--color-text);
}

/* 旧菜单按钮 —— 在最小化 header 中不再使用 */
.menu-toggle {
    display: none;
}

/* 移动端菜单按钮 */
.menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
}

.menu-toggle svg {
    width: 24px;
    height: 24px;
}

/* ==========================================================================
   6. 首页布局（三栏）
   ========================================================================== */
.site-main {
    min-height: calc(100vh - var(--header-height) - 200px);
}

.home-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 320px;
    gap: 40px;
    padding: var(--spacing-xl) var(--spacing-lg) 0 var(--spacing-lg);
    margin: 0 auto;
    transition: grid-template-columns 0.25s ease, gap 0.25s ease;
}

.home-layout.is-sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr) 320px;
    gap: 0 40px;
}

/* 单文章/页面/404 用两栏变体（侧栏 + 内容，无右栏） */
.home-layout--single {
    grid-template-columns: 240px minmax(0, 1fr);
}

.home-layout--single.is-sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr);
    gap: 0 40px;
}

/* 单文章页互动栏：sticky 跟随内容列，置于右侧 */
.home-layout--single .post-engagement {
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-xl));
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 14px 10px;
    z-index: 90;
}

@media (max-width: 1100px) {
    .home-layout--single .post-engagement {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        flex-direction: row;
        justify-content: center;
        background: var(--color-bg-translucent);
        border-top: 1px solid var(--color-border-light);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04);
        padding: 10px 16px;
    }
}

.content-area {
    min-width: 0;
    max-width: 740px;
    margin: 0 auto;
    width: 100%;
}

.home-layout--single .content-area {
    max-width: 1080px;
}

/* 单文章内容器：宽松宽度 */
.home-layout--single .single-post-container {
    max-width: none;
}

.widget-area {
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-lg));
    align-self: start;
    max-height: calc(100vh - var(--header-height) - var(--spacing-2xl));
    overflow-y: auto;
    scrollbar-width: thin;
}

/* ==========================================================================
   6.5 左侧栏（内联 grid 列 —— 由 header 汉堡按钮折叠/展开）
   ========================================================================== */
.left-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-lg));
    align-self: start;
    max-height: calc(100vh - var(--header-height) - var(--spacing-2xl));
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
    scrollbar-width: thin;
    transition: opacity 0.2s ease;
}

.home-layout.is-sidebar-collapsed .left-sidebar {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* 汉堡按钮 —— 始终可见，点击折叠/展开 */
.hamburger-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.hamburger-toggle:hover {
    background: var(--color-bg-tertiary);
}

.hamburger-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.hamburger-icon {
    width: 22px;
    height: 22px;
    display: block;
}

.hamburger-icon-close {
    display: none;
}

.no-sidebar-page .hamburger-toggle {
    display: none;
}

.sidebar-collapse-toggle,
.sidebar-show-mobile {
    display: none;
}

/* ==========================================================================
   左侧栏统一设计（v1.3.0）— 层次 + 间距 + 对齐 + 配色
   ========================================================================== */

/* 旧 nav-list 保留兼容 */
.left-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* —— 顶部导航（首页/关于/站点地图） —— */
.left-nav-top {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 28px;
}

.left-nav-top-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.4;
    transition: background 0.15s ease, color 0.15s ease;
}

.left-nav-top-item:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
}

.left-nav-top-item.is-active {
    color: var(--color-primary);
    background: var(--color-primary-light);
    font-weight: 600;
}

.left-nav-top-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-text-secondary);
    stroke-width: 1.75;
    transition: color 0.15s ease;
}

.left-nav-top-item:hover .left-nav-top-icon {
    color: var(--color-text);
}

.left-nav-top-item.is-active .left-nav-top-icon {
    color: var(--color-primary);
}

.left-nav-top-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* —— 区块通用 —— */
.left-section {
    margin-bottom: 28px;
}

.left-section:last-child {
    margin-bottom: 0;
}

.left-section-head {
    padding: 0 14px 10px;
}

.left-section-title {
    font-size: var(--font-size-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-light);
    margin: 0;
}

/* —— 分类列表 —— */
.left-categories {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.left-category-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    transition: background 0.15s ease, color 0.15s ease;
}

.left-category-item a:hover {
    background: var(--color-bg-tertiary);
}

.left-category-item.is-active a {
    color: var(--color-primary);
    background: var(--color-primary-light);
    font-weight: 500;
}

/* 分类圆点（fallback） */
.left-cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-light);
    flex-shrink: 0;
    margin-left: 5px;
}

/* 分类图标 */
.left-cat-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.left-cat-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.left-cat-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.left-cat-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
}

.left-category-item.is-hidden {
    display: none;
}

/* —— 更多/收起 按钮 —— */
.left-section-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 6px 14px 0;
    padding: 6px 0;
    background: none;
    border: none;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: color 0.15s ease;
}

.left-section-more:hover {
    color: var(--color-text);
}

.left-section-more .more-hide { display: none; }
.left-section-more[aria-expanded="true"] .more-show { display: none; }
.left-section-more[aria-expanded="true"] .more-hide { display: inline; }

.more-chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.left-section-more[aria-expanded="true"] .more-chevron {
    transform: rotate(180deg);
}

.left-section-empty {
    padding: 8px 14px;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* —— 推荐话题 —— */
.left-section--topics {
    margin-top: 0;
}

.left-topics-list {
    list-style: none;
    padding: 0 14px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.left-topic-tag {
    display: inline-block;
    padding: 6px 14px;
    font-size: var(--font-size-sm);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
    color: var(--color-text);
    line-height: 1.3;
    transition: all 0.15s ease;
}

.left-topic-tag:hover {
    background: var(--color-border);
    color: var(--color-primary);
}

/* —— 底部链接（更多话题） —— */
.left-section-link {
    display: inline-block;
    margin: 12px 14px 0;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
}

.left-section-link:hover {
    text-decoration: underline;
}

/* 移动端「显示左侧栏」按钮（header 中） */
.sidebar-show-mobile {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    padding: 0;
}

.sidebar-show-mobile svg {
    width: 22px;
    height: 22px;
}

/* ==========================================================================
   6.6 Feed Tabs（为你推荐 / 精选）
   ========================================================================== */
.feed-tabs {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--spacing-md);
}

.feed-tab {
    padding: 12px 4px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    transition: all 0.15s ease;
    font-family: var(--font-sans);
    margin-bottom: -1px;
}

.feed-tab:hover {
    color: var(--color-text);
}

.feed-tab.is-active {
    color: var(--color-text);
    border-bottom-color: var(--color-text);
    font-weight: 600;
}

.feed-tab[disabled] {
    cursor: not-allowed;
    opacity: 0.45;
}

/* 「精选」Tab 激活时仅显示 featured 文章 */
.posts-feed.is-show-featured .post-card:not(.is-featured) {
    display: none;
}

.posts-feed.is-show-featured .post-card.is-featured {
    padding: var(--spacing-md) 0;
}

/* 归档页头部 */
.archive-header {
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
}

.archive-title {
    font-family: var(--font-serif);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0 0 var(--spacing-xs);
}

.search-query {
    color: var(--color-primary);
}

.archive-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* ==========================================================================
   7. 文章卡片 - Medium 风格
   ========================================================================== */
.section-title {
    font-family: var(--font-serif);
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border-light);
}

.posts-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* 卡片本体 —— 新的 Medium 风格 */
.post-card {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl) 0;
    transition: background 0.15s ease;
    align-items: start;
}

.post-card:hover .post-card-title a {
    color: var(--color-primary);
}

.post-card:hover .post-card-thumbnail img {
    transform: scale(1.04);
}

.post-card.no-thumbnail {
    grid-template-columns: 1fr;
}

.post-card.is-featured {
    background: linear-gradient(180deg, var(--color-primary-tint), transparent 80%);
    margin: 0 calc(-1 * var(--spacing-md));
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    border-radius: var(--radius-md);
}

.post-card-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

/* 来源 / 分类行 */
.post-source {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: 2px;
}

.post-source-name {
    font-weight: 500;
    color: var(--color-text-light);
}

.post-source-name:hover {
    color: var(--color-primary);
}

.post-source-sep,
.post-source-time {
    color: var(--color-text-light);
}

.post-source-badge {
    display: inline-flex;
    align-items: center;
    color: var(--color-primary);
    margin-left: 2px;
}

/* 标题 */
.post-card-title {
    font-family: var(--font-serif);
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.post-card-title a {
    color: inherit;
    transition: color 0.15s ease;
}

.post-card-title a:hover {
    color: var(--color-primary);
}

/* 摘要 */
.post-card-excerpt {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: 1.65;
    color: var(--color-text-light);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 底部：左 = 分类/时间，右 = 互动统计 */
.post-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
    flex-wrap: wrap;
}

.post-card-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.stat-item svg {
    width: 15px;
    height: 15px;
    stroke-width: 1.75;
    opacity: 0.7;
}

.card-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    padding: 0;
}

.card-action-btn:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
}

.card-action-btn svg {
    width: 18px;
    height: 18px;
}

.card-action-btn.is-active {
    color: var(--color-primary);
}

/* 缩略图 */
.post-card-thumbnail {
    width: 140px;
    height: 110px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-bg-tertiary);
}

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

/* ==========================================================================
   8. （旧）特色文章大卡片 —— 已移除
   ========================================================================== */

/* ==========================================================================
   9. 侧边栏
   ========================================================================== */
.widget {
    border-radius: 8px;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.widget-title {
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
    margin-bottom: 14px;
}

.widget-link-more {
    display: inline-block;
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
}
.widget-link-more:hover {
    text-decoration: underline;
}

/* Staff Picks */
.staff-picks-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.staff-pick-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 8px;
    margin: 0 -8px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.staff-pick-item:hover {
    background: var(--color-bg-tertiary);
}

.staff-pick-num {
    font-family: var(--font-serif);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-light);
    line-height: 1.5;
    flex-shrink: 0;
    min-width: 24px;
    padding-top: 1px;
}

.staff-pick-title {
    font-family: var(--font-serif);
    font-size: var(--font-size-base);
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text);
    transition: color 0.15s ease;
    flex: 1;
}

.staff-pick-title:hover {
    color: var(--color-primary);
}

.staff-pick-empty {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    padding: 4px 8px;
    margin: 0;
}

/* Recommended Topics */
.recommended-topics-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.recommended-topic {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    transition: all 0.15s ease;
}

.recommended-topic:hover {
    background: var(--color-border);
}

.topic-add {
    color: var(--color-text-light);
    font-weight: 400;
    margin-left: 2px;
    transition: color 0.15s ease;
}

.recommended-topic:hover .topic-add {
    color: var(--color-primary);
}

/* 侧边栏底部链接 */
.sidebar-foot-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-md);
}

.sidebar-foot-links a {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.sidebar-foot-links a:hover {
    color: var(--color-text);
}

/* ==========================================================================
   10. 单篇文章页面
   ========================================================================== */
.single-post-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-lg) 0;
}

.single-post-header {
    margin-bottom: var(--spacing-md);
}

.single-post-title {
    font-family: var(--font-serif);
    font-size: var(--font-size-4xl);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-lg);
    letter-spacing: -0.02em;
}

.single-post-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}

.single-author-name {
    font-weight: 500;
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.single-post-date {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* 文章特色图片 */
.single-post-thumbnail img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* 文章内容区 */
.post-content {
    font-family: var(--font-sans);
    font-size: var(--font-size-lg);
    line-height: 1.8;
    color: var(--color-text);
}

.post-content p {
    margin-bottom: var(--spacing-lg);
}

.post-content h2,
.post-content h3,
.post-content h4 {
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
}

.post-content h2 { font-size: var(--font-size-2xl); }
.post-content h3 { font-size: var(--font-size-xl); }

.post-content a {
    color: var(--color-primary);
    text-decoration: underline;
}

.post-content img {
    max-width: 100%;
    margin: var(--spacing-lg) auto;
    border-radius: var(--radius-sm);
}

.post-content blockquote {
    font-size: var(--font-size-xl);
    line-height: 1.5;
    padding-left: var(--spacing-lg);
    border-left: 3px solid var(--color-primary);
    margin: var(--spacing-xl) 0;
    font-style: normal;
    color: var(--color-text);
    font-weight: 500;
}

.post-content ul,
.post-content ol {
    margin-bottom: var(--spacing-lg);
    padding-left: var(--spacing-xl);
}

.post-content li {
    margin-bottom: var(--spacing-sm);
}

/* 表格 */
.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-xl) 0;
    font-size: var(--font-size-md);
    line-height: 1.6;
    text-align: left;
}

.post-content thead {
    border-bottom: 2px solid var(--color-border);
}

.post-content th {
    padding: 10px 16px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.post-content tbody tr {
    border-bottom: 1px solid var(--color-border-light);
    transition: background 0.15s ease;
}

.post-content tbody tr:last-child {
    border-bottom: none;
}

.post-content tbody tr:hover {
    background: var(--color-bg-secondary);
}

.post-content td {
    padding: 10px 16px;
    color: var(--color-text-secondary);
}

/* 文章标签 */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
}

.post-tag {
    padding: 6px 14px;
    font-size: var(--font-size-sm);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    transition: all 0.15s ease;
}

.post-tag:hover {
    background: var(--color-border);
    color: var(--color-text);
}

/* 文章底部社交栏 */
.post-footer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-xl);
    padding: var(--spacing-md) 0;
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}

.clap-button {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: transparent;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    transition: all 0.15s ease;
}

.clap-button:hover {
    border-color: var(--color-text);
    color: var(--color-text);
}

.clap-button svg {
    width: 20px;
    height: 20px;
}

.share-buttons {
    display: flex;
    gap: var(--spacing-sm);
}

/* ==========================================================================
   11. 作者简介卡片
   ========================================================================== */
.author-bio-card {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.author-bio-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.author-bio-content {
    flex: 1;
}

.author-bio-name {
    font-family: var(--font-serif);
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.author-bio-text {
    font-family: var(--font-serif);
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

/* ==========================================================================
   12. 评论区
   ========================================================================== */

.comments-area {
    margin-top: var(--spacing-xl);
}

/* 回复标题 */
.comment-reply-title,
.comments-title {
    font-family: var(--font-serif);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
    letter-spacing: -0.02em;
}

.comment-reply-title small {
    font-size: var(--font-size-sm);
    font-weight: 400;
    margin-left: var(--spacing-sm);
}

.comment-reply-title small a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.comment-reply-title small a:hover {
    color: var(--color-primary);
}

/* 提示文字 */
.comment-notes,
.logged-in-as {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
    line-height: 1.5;
}

.comment-notes #email-notes {
    color: var(--color-text-light);
}

/* 评论列表 */
.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment {
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.comment-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.comment-avatar--colorful {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-on-primary);
    flex-shrink: 0;
    text-transform: uppercase;
}

.comment-author-name {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.comment-author-name a {
    color: var(--color-text);
    text-decoration: none;
}

.comment-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin-top: 2px;
}

.comment-content {
    font-family: var(--font-sans);
    font-size: var(--font-size-md);
    line-height: 1.6;
    padding-left: 52px;
    color: var(--color-text);
}

.comment-content p {
    margin-bottom: var(--spacing-sm);
}

.comment-content p:last-child {
    margin-bottom: 0;
}

/* 评论表单整体 */
.comment-form {
    margin-top: var(--spacing-xl);
}

/* 表单段落 */
.comment-form > p {
    margin-bottom: var(--spacing-md);
}

.comment-form > p:last-child {
    margin-bottom: 0;
}

/* 表单标签 */
.comment-form label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
    cursor: pointer;
}

/* 统一样式：所有 input 和 textarea */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    transition: all 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.comment-form textarea {
    min-height: 120px;
    resize: vertical;
    font-family: var(--font-serif);
    font-size: var(--font-size-md);
    line-height: 1.6;
}

.comment-form input[type="text"]::placeholder,
.comment-form input[type="email"]::placeholder,
.comment-form input[type="url"]::placeholder,
.comment-form textarea::placeholder {
    color: var(--color-text-placeholder);
}

/* focus 状态 */
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

/* 必填标记 */
.comment-form .required {
    color: var(--color-error);
    font-weight: 600;
}

/* Cookie 同意复选框 */
.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.comment-form-cookies-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 1px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.comment-form-cookies-consent label {
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 0;
}

/* 提交按钮 */
.comment-form .form-submit {
    margin-top: var(--spacing-lg);
}

.comment-form input[type="submit"],
.comment-form .submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border: none;
    border-radius: 9999px;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.comment-form input[type="submit"]:hover,
.comment-form .submit:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--color-primary-glow-strong);
}

.comment-form input[type="submit"]:active,
.comment-form .submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px var(--color-primary-glow-strong);
}

/* 已登录用户提示 */
.logged-in-as a {
    color: var(--color-primary);
    text-decoration: none;
}

.logged-in-as a:hover {
    text-decoration: underline;
}

/* 评论回复链接 */
.comment-reply-link {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.comment-reply-link:hover {
    color: var(--color-primary);
}

/* 评论嵌套 */
.children {
    list-style: none;
    padding-left: 52px;
    margin-top: var(--spacing-md);
}

.children .comment {
    border-bottom: none;
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--spacing-md);
}

/* 无评论状态 */
.no-comments {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    padding: var(--spacing-md) 0;
}

/* ==========================================================================
   13. 分页
   ========================================================================== */
.pagination {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
}

.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    transition: all 0.15s ease;
}

.page-numbers:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
}

.page-numbers.current {
    background: var(--color-text);
    color: var(--color-bg);
}

.page-numbers.dots {
    background: none;
}

/* 热门文章 "加载更多" 按钮 */
.load-more-wrap {
    text-align: center;
    padding: var(--spacing-lg) 0;
}

.load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.15s ease;
}

.load-more-btn:hover {
    border-color: var(--color-text-secondary);
    color: var(--color-text);
}

.load-more-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ============================================================================
   14. 页脚（极简版，参考 biaodianfu.com）
   ========================================================================== */
.site-footer {
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-light);
    padding: 12px 0;
    margin-top: var(--spacing-xl);
}

.footer-simple {
    text-align: center;
}

.footer-copyright {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.6;
}

.footer-powered {
    color: var(--color-text-light);
    margin-left: 4px;
}

/* ==========================================================================
   14.5 标签聚合页（/tags/）
   ========================================================================== */
.tags-cloud-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: var(--spacing-lg);
}

.tags-cloud-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.tags-cloud-item:hover {
    background: var(--color-bg);
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.tags-cloud-hash {
    font-size: var(--font-size-lg);
    font-weight: 700;
    font-family: var(--font-serif);
    flex-shrink: 0;
}

.tags-cloud-name {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tags-cloud-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ==========================================================================
   15. 搜索覆盖层
   ========================================================================== */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg-translucent);
    z-index: 1000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
}

.search-overlay.active {
    display: flex;
}

.search-container {
    width: 100%;
    max-width: 600px;
    padding: 0 var(--spacing-lg);
}

.search-form {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    border-bottom: 2px solid var(--color-text);
    padding-bottom: var(--spacing-md);
}

.search-form svg {
    width: 24px;
    height: 24px;
    color: var(--color-text-secondary);
}

.search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font-serif);
    font-size: var(--font-size-2xl);
    outline: none;
}

.search-input::placeholder {
    color: var(--color-text-light);
}

.search-close {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-close:hover {
    color: var(--color-text);
}

/* ==========================================================================
   16. 404 页面
   ========================================================================== */
.error-404 {
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-lg);
}

.error-404 h1 {
    font-size: 100px;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-light);
}

.error-404 h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-lg);
}

.error-404 p {
    font-family: var(--font-serif);
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
}

/* ==========================================================================
   16.5 阅读进度条
   ========================================================================== */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    z-index: 200;
    pointer-events: none;
}

.reading-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--color-primary);
    transition: width 0.1s linear;
}

/* ==========================================================================
   16.6 单篇文章：分类标签 / 副标题 / 正文布局
   ========================================================================== */
.single-post-categories {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin-bottom: var(--spacing-md);
}

.single-post-category {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.15s ease;
}

.single-post-category:hover {
    color: var(--color-text);
}

/* 逗号分隔符 */
.single-post-category:not(:last-child)::after {
    content: ',\00a0';
    color: var(--color-text-light);
}

.single-post-subtitle {
    font-family: var(--font-serif);
    font-size: var(--font-size-xl);
    line-height: 1.4;
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-lg) 0;
    font-weight: 400;
}

.btn-sm {
    font-size: var(--font-size-xs);
    padding: 6px 14px;
}

.author-bio-avatar--fallback {
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-on-primary);
    font-weight: 700;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    font-size: var(--font-size-xl);
    flex-shrink: 0;
}

/* 正文 + 互动栏容器 */
.single-post-body {
    position: relative;
}

.single-post-container--content {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    padding-top: var(--spacing-sm);
}

.single-post-container--content .post-engagement {
    order: 2;
    flex-shrink: 0;
}

.single-post-container--content .post-body-content {
    flex: 1;
    min-width: 0;
    order: 1;
}

/* ==========================================================================
   16.7 互动栏 — 圆形图标 + 文字标签（参考 biaodianfu 风格）
   ========================================================================== */
.post-engagement {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    z-index: 90;
}

.engagement-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 56px;
    height: 56px;
    border: 1px solid var(--color-border-light);
    border-radius: 50%;
    background: var(--color-bg);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1.2);
    text-decoration: none;
    padding: 0;
}

.engagement-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--color-primary-glow);
}

.engagement-btn:active {
    transform: translateY(0) scale(0.95);
}

.engagement-btn.is-active {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.engagement-btn svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.engagement-label {
    font-size: var(--font-size-2xs);
    font-family: var(--font-sans);
    line-height: 1;
    font-weight: 500;
}

.engagement-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-size: var(--font-size-2xs);
    font-weight: 700;
    font-family: var(--font-sans);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 3px var(--color-primary-glow-strong);
    pointer-events: none;
}

/* 点赞专用样式（爱心按钮） */
.engagement-clap svg {
    width: 24px;
    height: 24px;
}

/* 点赞激活态 + WP Claps 已评分状态 */
.engagement-clap.is-active svg,
.engagement-clap.has_rated svg {
    fill: var(--color-primary);
    stroke: var(--color-primary);
}

/* 已点赞时计数徽章保持绿色 */
.engagement-clap.has_rated .engagement-count {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

/* 点赞激活态：加背景光环 + 放大 */
.engagement-clap.is-active,
.engagement-clap.has_rated {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-tint);
}

/* 隐藏底部 WP Claps Applause 按钮（已由右侧互动栏接管） */
.pt-claps-applause {
    display: none !important;
}

/* 点赞动画 */
.engagement-clap.clap-animate {
    animation: clapPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes clapPop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.3); }
    60%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* 分享反馈提示 */
.share-feedback {
    margin: var(--spacing-lg) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    min-height: 20px;
    font-family: var(--font-sans);
}

/* ==========================================================================
   16.7.1 分享弹窗
   ========================================================================== */
.share-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.share-modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.share-modal {
    background: var(--color-bg);
    border-radius: 12px;
    width: 100%;
    max-width: 480px;
    margin: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transform: translateY(12px) scale(0.97);
    transition: transform 0.25s ease;
}

.share-modal-overlay.is-active .share-modal {
    transform: translateY(0) scale(1);
}

.share-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border-light);
}

.share-modal-title {
    font-family: var(--font-sans);
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.share-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.share-modal-close:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
}

.share-modal-body {
    padding: 20px;
}

.share-link-box {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.share-link-input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--color-border-light);
    border-radius: 6px;
    font-size: var(--font-size-sm);
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg-secondary);
    outline: none;
}

.share-link-copy {
    padding: 10px 18px;
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-size: var(--font-size-sm);
    font-family: var(--font-sans);
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}

.share-link-copy:hover {
    opacity: 0.88;
}

.share-link-copy.is-copied {
    background: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
}

.share-platforms {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.share-platform {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text);
    transition: background 0.15s ease;
}

.share-platform:hover {
    background: var(--color-bg-secondary);
}

.share-platform svg {
    width: 28px;
    height: 28px;
}

.share-platform span {
    font-size: var(--font-size-xs);
    font-family: var(--font-sans);
    color: var(--color-text-secondary);
}

@media (max-width: 480px) {
    .share-platforms {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 微信二维码弹窗 */
.share-platform-wechat {
    position: relative;
}

.wechat-qr-popup {
    display: none;
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    z-index: 10;
    text-align: center;
    white-space: nowrap;
}

.wechat-qr-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--color-bg);
}

.wechat-qr-popup.is-visible {
    display: block;
}

.wechat-qr-img {
    display: block;
    width: 140px;
    height: 140px;
    border-radius: 4px;
}

.wechat-qr-tip {
    margin: 8px 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

@media (max-width: 480px) {
    .wechat-qr-popup {
        bottom: auto;
        top: calc(100% + 12px);
    }
    .wechat-qr-popup::after {
        top: auto;
        bottom: 100%;
        border-top-color: transparent;
        border-bottom-color: var(--color-bg);
    }
}

/* ==========================================================================
   16.8.1 打赏弹窗
   ========================================================================== */
.donate-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.donate-modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.donate-modal {
    background: var(--color-bg);
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    margin: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transform: translateY(12px) scale(0.97);
    transition: transform 0.25s ease;
}

.donate-modal-overlay.is-active .donate-modal {
    transform: translateY(0) scale(1);
}

.donate-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border-light);
}

.donate-modal-title {
    font-family: var(--font-sans);
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.donate-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.donate-modal-close:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
}

.donate-modal-body {
    padding: 24px 20px;
}

.donate-modal-desc {
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0 0 20px;
    line-height: 1.5;
}

.donate-qr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.donate-qr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.donate-qr-item img {
    width: 100%;
    max-width: 160px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--color-border-light);
}

.donate-qr-item span {
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

@media (max-width: 480px) {
    .donate-qr-grid {
        gap: 12px;
    }
    .donate-qr-item img {
        max-width: 130px;
    }
}

/* ==========================================================================
   16.8.2 作者简介卡片社交链接
   ========================================================================== */
.author-bio-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.author-bio-social a {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: underline;
}

.author-bio-social a:hover {
    color: var(--color-primary);
}

/* ==========================================================================
/* ==========================================================================
   16.10 侧边栏：关于作者 / 热门文章（单用户）
   ========================================================================== */
.widget-about-author .widget-title,
.widget-popular-posts .widget-title {
    margin-bottom: var(--spacing-md);
}

.about-author-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.about-author-avatar-link {
    margin-bottom: var(--spacing-sm);
}

.about-author-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.about-author-avatar--fallback {
    width: 72px;
    height: 72px;
    font-size: var(--font-size-2xl);
    align-items: center;
    justify-content: center;
}

.about-author-name {
    font-family: var(--font-serif);
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.about-author-name:hover {
    color: var(--color-primary);
}

.about-author-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}

.about-author-bio {
    font-family: var(--font-serif);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-md);
}

.about-author-social {
    display: flex;
    gap: var(--spacing-sm);
}

.author-social-link {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    transition: all 0.15s ease;
}

.author-social-link:hover {
    background: var(--color-border);
    color: var(--color-text);
}

.author-social-link svg {
    width: 16px;
    height: 16px;
}

/* 热门文章列表 */
.popular-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.popular-post-item {
    border-bottom: 1px solid var(--color-border-light);
}

.popular-post-item:last-child {
    border-bottom: none;
}

.popular-post-link {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 8px;
    margin: 0 -8px;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
}

.popular-post-link:hover {
    background: var(--color-bg-secondary);
}

.popular-post-title {
    font-family: var(--font-serif);
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text);
}

.popular-post-link:hover .popular-post-title {
    color: var(--color-primary);
}

.popular-post-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.popular-post-comments {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.popular-post-comments svg {
    vertical-align: middle;
}

.popular-post-empty {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    padding: var(--spacing-md) 0;
}

/* ==========================================================================
   16.11 文章大纲导航（TOC）— Medium 风格侧边指示器
   ========================================================================== */

/* 容器：固定在内容区域右侧 */
.toc-wrapper {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    z-index: 100;
    pointer-events: none;
}

.toc-trigger {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    padding: 16px 10px;
    cursor: pointer;
    pointer-events: auto;
    border-radius: 6px 0 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toc-trigger-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.toc-trigger-dot {
    display: block;
    width: 12px;
    height: 2px;
    background: var(--color-text-light);
    opacity: 0.35;
    border-radius: 1px;
    transition: background 0.2s, opacity 0.2s, width 0.2s;
}

.toc-trigger-dot--indent {
    width: 8px;
    opacity: 0.25;
}

.toc-trigger:hover .toc-trigger-dot {
    opacity: 0.65;
}

/* 弹出面板 */
.toc-panel {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    max-height: 70vh;
    background: var(--color-bg);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    padding: 20px;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    overflow-y: auto;
    margin-right: 36px;
}

.toc-wrapper.is-expanded .toc-panel {
    opacity: 1;
    visibility: visible;
}

.toc-panel-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 6px 0;
}

.toc-article-title {
    font-family: var(--font-serif);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.4;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border-light);
}

/* 链接列表 */
.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-item {
    margin: 0;
}

.toc-link {
    display: block;
    padding: 6px 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: 12px;
    transition: color 0.15s, border-color 0.15s, background 0.1s;
    border-radius: 0 4px 4px 0;
}

.toc-link:hover {
    color: var(--color-text);
    background: var(--color-bg-secondary);
}

.toc-link.is-active {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    font-weight: 500;
    background: var(--color-primary-tint);
}

/* h3 缩进 */
.toc-item--h3 .toc-link {
    padding-left: 24px;
    font-size: var(--font-size-xs);
}

/* ==========================================================================
   17. 响应式设计
   ========================================================================== */

/* 中等屏幕：互动栏转为底部固定条 */
@media (max-width: 1100px) {
    .post-engagement {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        flex-direction: row;
        justify-content: center;
        gap: 24px;
        padding: 8px 16px;
        background: var(--color-bg-translucent);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--color-border-light);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04);
    }

    .post-engagement .engagement-btn {
        width: 48px;
        height: 48px;
        gap: 2px;
    }

    .post-engagement .engagement-label {
        font-size: 10px;
    }

    .single-post-body {
        padding-bottom: 76px;
    }

    .toc-wrapper {
        display: none;
    }
}

@media (max-width: 1280px) {
    .home-layout {
        grid-template-columns: 220px minmax(0, 1fr) 300px;
        gap: 32px;
    }
    .home-layout.is-sidebar-collapsed {
        grid-template-columns: 0 minmax(0, 1fr) 300px;
    }
}

@media (max-width: 1024px) {
    /* 隐藏左侧栏，中部 + 右栏双栏 */
    .home-layout,
    .home-layout.is-sidebar-collapsed,
    .home-layout--single,
    .home-layout--single.is-sidebar-collapsed {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 32px;
    }
    /* 单文章变体无右栏，直接单列 */
    .home-layout--single,
    .home-layout--single.is-sidebar-collapsed {
        grid-template-columns: minmax(0, 1fr);
    }
    .left-sidebar {
        display: none;
    }

    .widget-area {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-4xl: 32px;
        --font-size-3xl: 26px;
        --font-size-2xl: 22px;
        --font-size-xl: 20px;
    }

    /* 隐藏右栏，单列布局 */
    .home-layout,
    .home-layout.is-sidebar-collapsed,
    .home-layout--single,
    .home-layout--single.is-sidebar-collapsed {
        grid-template-columns: 1fr;
        gap: 0;
        padding: var(--spacing-md) var(--spacing-md) 0;
    }

    .widget-area {
        display: none;
    }

    .content-area {
        max-width: 100%;
        padding: 0;
    }

    /* Header 缩减内边距 */
    .site-header--minimal .header-inner {
        padding: 0 var(--spacing-md);
    }

    .header-search {
        max-width: 160px;
    }

    .header-write-label {
        display: none;
    }

    /* 文章卡片紧凑化 */
    .post-card {
        grid-template-columns: 1fr 100px;
        gap: var(--spacing-md);
        padding: var(--spacing-lg) 0;
    }

    .post-card-thumbnail {
        width: 100px;
        height: 80px;
    }

    .post-card-title {
        font-size: var(--font-size-lg);
    }

    .post-card-excerpt {
        font-size: var(--font-size-sm);
        -webkit-line-clamp: 2;
    }

    .posts-grid {
        gap: var(--spacing-lg);
    }

    .feed-tabs {
        gap: var(--spacing-md);
    }

    /* 单文章页优化 */
    .single-post-title {
        font-size: var(--font-size-3xl);
    }

    .single-post-subtitle {
        font-size: var(--font-size-md);
    }

    .single-post-container {
        padding: var(--spacing-md) 0 0;
    }

    .single-post-container--content {
        gap: 0;
    }

    .single-post-header {
        margin-bottom: var(--spacing-sm);
    }

    /* 正文字号适配移动端 */
    .post-content {
        font-size: var(--font-size-md);
        line-height: 1.75;
    }

    .post-content h2 { font-size: var(--font-size-xl); }
    .post-content h3 { font-size: var(--font-size-lg); }

    .post-content h2,
    .post-content h3,
    .post-content h4 {
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-sm);
    }

    .post-content p {
        margin-bottom: var(--spacing-md);
    }

    .post-content blockquote {
        font-size: var(--font-size-md);
        margin: var(--spacing-lg) 0;
    }

    .post-content ul,
    .post-content ol {
        padding-left: var(--spacing-lg);
        margin-bottom: var(--spacing-md);
    }

    .post-content img {
        margin: var(--spacing-md) auto;
    }

    /* 表格水平滚动 */
    .post-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: var(--font-size-sm);
    }

    /* 互动栏底部固定 */
    .engagement-btn {
        width: 40px;
        height: 40px;
    }

    .post-engagement {
        gap: 28px;
    }

    /* 推荐卡片间距收紧 */
    .related-posts {
        margin: var(--spacing-xl) 0 0;
    }

    .related-posts-grid {
        gap: var(--spacing-md);
    }

    .related-post-title {
        font-size: var(--font-size-sm);
        padding: 10px 12px 8px;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-3xl: 22px;
        --font-size-2xl: 20px;
    }

    .home-layout,
    .home-layout.is-sidebar-collapsed,
    .home-layout--single,
    .home-layout--single.is-sidebar-collapsed {
        padding: var(--spacing-sm) var(--spacing-sm) 0;
    }

    .site-header--minimal .header-inner {
        padding: 0 var(--spacing-sm);
    }

    /* 隐藏内联搜索，依赖搜索覆盖层 */
    .header-search {
        display: none;
    }

    .post-card {
        grid-template-columns: 1fr;
        padding: var(--spacing-md) 0;
    }

    .post-card-thumbnail {
        width: 100%;
        height: 180px;
        order: -1;
    }

    .post-card-title {
        font-size: var(--font-size-md);
    }

    .post-card-excerpt {
        font-size: var(--font-size-xs);
    }

    .post-card-footer {
        gap: var(--spacing-sm);
    }

    .header-actions .btn {
        display: none;
    }

    .single-post-title {
        font-size: var(--font-size-2xl);
    }

    .single-post-subtitle {
        font-size: var(--font-size-sm);
    }

    .post-content {
        font-size: var(--font-size-base);
    }

    .single-post-meta {
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .engagement-btn {
        width: 36px;
        height: 36px;
    }

    .engagement-btn svg {
        width: 18px;
        height: 18px;
    }

    .post-engagement {
        gap: 20px;
    }

    .related-posts-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   18. 动画效果
   ========================================================================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.post-card {
    animation: fadeIn 0.4s ease forwards;
}

.post-card:nth-child(2) { animation-delay: 0.1s; }
.post-card:nth-child(3) { animation-delay: 0.2s; }
.post-card:nth-child(4) { animation-delay: 0.3s; }
.post-card:nth-child(5) { animation-delay: 0.4s; }

/* ==========================================================================
   19. WordPress 核心样式兼容
   ========================================================================== */
.alignleft {
    float: left;
    margin-right: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.alignright {
    float: right;
    margin-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    max-width: 100%;
    margin-bottom: var(--spacing-lg);
}

.wp-caption-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: center;
    padding-top: var(--spacing-sm);
}

.sticky {
    background: var(--color-bg-secondary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-xl);
}

.gallery-caption {
    font-size: var(--font-size-sm);
}

.bypostauthor {
    background: var(--color-primary-light);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}

/* ==========================================================================
   21. 相关文章推荐（3 列图片 + 标题）
   ========================================================================== */

.related-posts {
    margin: 48px 0 0;
    padding: 0;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .related-posts-grid {
        grid-template-columns: 1fr;
    }
}

.related-post-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.related-post-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.related-post-thumbnail {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-bg-tertiary);
    position: relative;
}

.related-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-post-card:hover .related-post-thumbnail img {
    transform: scale(1.03);
}

.related-post-thumbnail--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    text-decoration: none;
}

.related-post-thumbnail-placeholder {
    font-family: var(--font-serif);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    padding: 0 16px;
    text-align: center;
    line-height: 1.4;
}

.related-post-title {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    padding: 12px 14px 10px;
}

.related-post-title a {
    color: var(--color-text);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s ease;
}

.related-post-title a:hover {
    color: var(--color-primary);
}