/* =========================================
   Mizhaki's Blog - 样式表 (style.css)
   ========================================= */

/* 1. 全局变量定义：方便随时统一调整主题颜色与字体 */

/* 主题 1：复古米黄 (Retro / 经典浅色主题，默认) */
:root,
[data-theme="retro"],
[data-theme="light"] {
    --primary-color: #776d3e;       /* 主题色 */
    --primary-hover: #3f3b28;       /* 悬浮强调色 */
    --primary-glow: rgba(119, 109, 62, 0.38); /* 脉冲光晕色 */
    --primary-glow-box: rgba(119, 109, 62, 0.25);
    --bg-color: #f0e2be;            /* 页面底色（复古暖米色） */
    --card-bg: #fff6de;             /* 卡片背景色（米白） */
    --header-bg: #f0e2be;           /* 顶部导航背景色 */
    --hero-bg: linear-gradient(135deg, #d3caa1 0%, #ccc8a6 100%); /* 横幅背景渐变 */
    --hero-text: #050505;           /* 横幅文本色 */
    --quote-original-color: #1a1a1a;/* 名言原文颜色 */
    --quote-trans-color: #383428;   /* 名言译文颜色 */
    --quote-author-color: #554f3b;  /* 名言作者颜色 */
    --text-main: #1e293b;           /* 主要文字颜色（深黑灰） */
    --text-muted: #64748b;          /* 次要/元数据文字颜色（浅灰） */
    --border-color: #030d1a;        /* 边框分割线颜色 */
    --tag-bg: #e8f59e;              /* 标签背景色 */
    --tag-text: #4b4839;            /* 标签文字颜色 */
    --social-btn-bg: #faf8d7;       /* 社交按钮背景色 */
    --category-count-bg: #e3e4be;   /* 分类计数背景色 */
    --tag-item-bg: #f3f0d8;         /* 标签项背景色 */
    --blockquote-bg: #d8bca2;       /* 引用块背景色 */
    --code-inline-bg: #f5deae;      /* 行内代码背景色 */
    --code-inline-color: #ef4444;   /* 行内代码文字颜色 */
    --article-link-color: #374914;           /* 正文超链接文字颜色（深苔绿） */
    --article-link-bg: var(--tag-bg);       /* 正文超链接底色（复古浅绿 #e8f59e） */
    --article-link-underline: rgba(55, 73, 20, 0.45); /* 正文超链接下划线颜色 */
    --article-link-hover-color: #1b2606;    /* 正文超链接悬浮文字色 */
    --article-link-hover-bg: #d7ee68;       /* 正文超链接悬浮底色 */
    --article-link-hover-underline: #1b2606;/* 正文超链接悬浮下划线颜色 */
    --footer-bg: #575044;           /* 页脚背景色 */
    --footer-text: rgba(255, 255, 255, 0.75); /* 页脚文字颜色 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --radius-md: 12px;
    --radius-sm: 6px;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 主题 2：沉浸深色 (Dark Mode Palette) */
[data-theme="dark"] {
    --primary-color: #d6b258;       /* 典雅温润的琥珀金 */
    --primary-hover: #edd58c;       /* 悬浮金黄高亮 */
    --primary-glow: rgba(214, 178, 88, 0.42); /* 深色脉冲光晕色 */
    --primary-glow-box: rgba(214, 178, 88, 0.28);
    --bg-color: #121417;            /* 深色背景底色 (高级暗夜黑灰) */
    --card-bg: #1c1f26;             /* 卡片背景 (层次深色表面) */
    --header-bg: #16181e;           /* 顶部导航背景 */
    --hero-bg: linear-gradient(135deg, #181b22 0%, #222631 100%); /* 横幅深色渐变 */
    --hero-text: #f1f5f9;           /* 横幅浅色文字 */
    --quote-original-color: #f8fafc;/* 名言原文白皙典雅 */
    --quote-trans-color: #cbd5e1;   /* 名言译文温和浅灰 */
    --quote-author-color: #d6b258;  /* 名言作者金黄点缀 */
    --text-main: #e2e8f0;           /* 正文主要文字 */
    --text-muted: #94a3b8;          /* 次要文字颜色 */
    --border-color: #2d333f;        /* 深色柔和分割边框 */
    --tag-bg: #292e22;              /* 标签深橄榄底色 */
    --tag-text: #d6b258;            /* 标签琥珀金文字 */
    --social-btn-bg: #252a34;       /* 社交按钮底色 */
    --category-count-bg: #252a34;   /* 分类计数背景 */
    --tag-item-bg: #252a34;         /* 标签项背景 */
    --blockquote-bg: #24272f;       /* 引用块背景 */
    --code-inline-bg: #282c37;      /* 行内代码背景 */
    --code-inline-color: #f472b6;   /* 行内代码粉红高亮 */
    --article-link-color: #edd58c;           /* 正文超链接文字颜色（亮暖金琥珀） */
    --article-link-bg: rgba(214, 178, 88, 0.16); /* 正文超链接半透底色 */
    --article-link-underline: rgba(237, 213, 140, 0.45); /* 正文超链接下划线颜色 */
    --article-link-hover-color: #fff2c4;    /* 正文超链接悬浮文字色 */
    --article-link-hover-bg: rgba(214, 178, 88, 0.28); /* 正文超链接悬浮底色 */
    --article-link-hover-underline: #edd58c;/* 正文超链接悬浮下划线颜色 */
    --footer-bg: #0e1014;           /* 页脚深黑 */
    --footer-text: rgba(226, 232, 240, 0.7); /* 页脚浅灰文字 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
    --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.35);
    --radius-md: 12px;
    --radius-sm: 6px;
}

/* 主题 3：Material 3 (M3 / Material You 极简现代灵动风格) */
[data-theme="m3"] {
    --primary-color: #6750a4;       /* M3 基准紫罗兰原色 */
    --primary-hover: #533f85;       /* M3 悬浮深紫 */
    --primary-glow: rgba(103, 80, 164, 0.36); /* 脉冲淡紫光晕 */
    --primary-glow-box: rgba(103, 80, 164, 0.18);
    --bg-color: #fdf7ff;            /* M3 Surface 纯净淡雅粉紫底色 */
    --card-bg: #ffffff;             /* M3 Surface Container Lowest 纯白微浮表面 */
    --header-bg: rgba(245, 239, 248, 0.94); /* M3 Surface Container 带半透明毛玻璃 */
    --hero-bg: linear-gradient(135deg, #eaddff 0%, #d0bcff 100%); /* M3 Primary Container 活力渐变 */
    --hero-text: #21005d;           /* M3 On-Primary-Container 深紫文字 */
    --quote-original-color: #1d1b20;/* M3 On-Surface 深紫灰 */
    --quote-trans-color: #49454f;   /* M3 On-Surface-Variant 次要灰 */
    --quote-author-color: #6750a4;  /* M3 Primary 醒目标识 */
    --text-main: #1d1b20;           /* M3 On-Surface */
    --text-muted: #49454f;          /* M3 On-Surface-Variant */
    --border-color: #e6e0e9;        /* M3 Outline Variant 极柔细分界线 */
    --tag-bg: #e8def8;              /* M3 Secondary Container 薰衣草紫 */
    --tag-text: #1d192b;            /* M3 On-Secondary-Container */
    --social-btn-bg: #f3edf7;       /* M3 Surface Container */
    --category-count-bg: #e8def8;   /* M3 标签徽章底色 */
    --tag-item-bg: #f3edf7;         /* M3 标签云底色 */
    --blockquote-bg: #f7f2fa;       /* M3 引用块底色 */
    --code-inline-bg: #eaddff;      /* M3 行内代码底色 */
    --code-inline-color: #ba1a1a;   /* M3 Error 强调色 */
    --article-link-color: #533f85;           /* 正文超链接文字颜色（M3 优雅深紫） */
    --article-link-bg: var(--tag-bg);       /* 正文超链接底色（M3 薰衣草浅紫 #e8def8） */
    --article-link-underline: rgba(103, 80, 164, 0.4); /* 正文超链接下划线颜色 */
    --article-link-hover-color: #21005d;    /* 正文超链接悬浮文字色（M3 On-Primary Container） */
    --article-link-hover-bg: #d0bcff;       /* 正文超链接悬浮底色（M3 Primary Container） */
    --article-link-hover-underline: #21005d;/* 正文超链接悬浮下划线颜色 */
    --footer-bg: #f3edf7;           /* M3 浅色沉底表面 */
    --footer-text: #49454f;         /* M3 次要文字颜色 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px 1px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 14px -2px rgba(103, 80, 164, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 14px 28px -4px rgba(103, 80, 164, 0.14), 0 6px 12px -2px rgba(0, 0, 0, 0.06);
    --radius-md: 22px;              /* M3 经典大圆角 */
    --radius-sm: 12px;              /* M3 经典次级圆角 */
    --font-sans: 'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 系统偏好深色回退（当未显式设定 light 且系统开启暗色时） */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="retro"]):not([data-theme="light"]):not([data-theme="m3"]) {
        --primary-color: #d6b258;
        --primary-hover: #edd58c;
        --primary-glow: rgba(214, 178, 88, 0.42);
        --primary-glow-box: rgba(214, 178, 88, 0.28);
        --bg-color: #121417;
        --card-bg: #1c1f26;
        --header-bg: #16181e;
        --hero-bg: linear-gradient(135deg, #181b22 0%, #222631 100%);
        --hero-text: #f1f5f9;
        --quote-original-color: #f8fafc;
        --quote-trans-color: #cbd5e1;
        --quote-author-color: #d6b258;
        --text-main: #e2e8f0;
        --text-muted: #94a3b8;
        --border-color: #2d333f;
        --tag-bg: #292e22;
        --tag-text: #d6b258;
        --social-btn-bg: #252a34;
        --category-count-bg: #252a34;
        --tag-item-bg: #252a34;
        --blockquote-bg: #24272f;
        --code-inline-bg: #282c37;
        --code-inline-color: #f472b6;
        --article-link-color: #edd58c;
        --article-link-bg: rgba(214, 178, 88, 0.16);
        --article-link-underline: rgba(237, 213, 140, 0.45);
        --article-link-hover-color: #fff2c4;
        --article-link-hover-bg: rgba(214, 178, 88, 0.28);
        --article-link-hover-underline: #edd58c;
        --footer-bg: #0e1014;
        --footer-text: rgba(226, 232, 240, 0.7);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
        --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.35);
        --radius-md: 12px;
        --radius-sm: 6px;
    }
}

/* 主题切换时的平滑渐变过渡（通过 JS 临时挂载，避免初始加载卡顿） */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.28s ease, 
                border-color 0.28s ease, 
                color 0.28s ease, 
                box-shadow 0.28s ease !important;
    transition-delay: 0s !important;
}

/* 2. 基础重置样式 */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

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

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

img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
}

ul {
    list-style: none;
}

/* 3. 顶部导航栏 (Navbar) */
.site-header {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    overflow: visible;
    transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-logo {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
}

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

.site-logo:active {
    transform: scale(0.95);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.site-nav ul {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.site-nav a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
    display: inline-block;
    user-select: none;
}

.site-nav a:hover,
.site-nav a.active {
    color: var(--primary-color);
    background-color: var(--tag-bg);
    transform: translateY(-1px);
}

.site-nav a:active {
    transform: scale(0.92);
}

/* ==========================================================================
   主题切换下拉菜单组件 (Theme Switcher Dropdown)
   ========================================================================== */

/* 外部容器：支持悬浮展开 */
.theme-switcher-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* 顶部主题切换触发按钮 */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background-color: var(--card-bg);
    color: var(--text-main);
    cursor: pointer;
    user-select: none;
    outline: none;
    flex-shrink: 0;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease,
                box-shadow 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.theme-toggle-btn:hover,
.theme-switcher-wrapper:hover .theme-toggle-btn {
    background-color: var(--tag-bg);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px) rotate(12deg);
    box-shadow: var(--shadow-md);
}

.theme-toggle-btn:active {
    transform: scale(0.92);
}

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

.theme-toggle-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

/* 下拉菜单面板：鼠标悬浮时展开三个选项 */
.theme-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 168px;
    padding: 6px;
    border-radius: 14px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1),
                transform 0.2s cubic-bezier(0.2, 0, 0, 1),
                visibility 0.2s;
}

/* 保证鼠标从按钮移动至菜单时不会丢失 hover 状态的隐形连结层 */
.theme-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

/* 悬浮或聚焦时展示下拉菜单 */
.theme-switcher-wrapper:hover .theme-dropdown-menu,
.theme-switcher-wrapper:focus-within .theme-dropdown-menu,
.theme-dropdown-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* 菜单顶部说明小标题 */
.theme-dropdown-header {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 4px 8px 6px;
    user-select: none;
    border-bottom: 1px dashed var(--border-color);
    margin-bottom: 2px;
}

/* 菜单选项单项 */
.theme-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 8px;
    background-color: transparent;
    color: var(--text-main);
    font-size: 0.88rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.theme-menu-item:hover {
    background-color: var(--tag-bg);
    color: var(--primary-color);
    transform: translateX(2px);
}

.theme-menu-item:active {
    transform: scale(0.96);
}

.theme-menu-item.is-active {
    background-color: var(--tag-bg);
    color: var(--primary-color);
    font-weight: 600;
}

.theme-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.theme-menu-label {
    flex: 1;
    white-space: nowrap;
}

.theme-menu-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--primary-color);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-menu-item.is-active .theme-menu-check {
    opacity: 1;
    transform: scale(1);
}

/* 按钮内三种图标的对应展示（根据当前 data-theme 自动适配） */
.theme-toggle-btn .theme-icon-moon,
.theme-toggle-btn .theme-icon-retro,
.theme-toggle-btn .theme-icon-m3 {
    display: none !important;
}

/* 1. 深色模式：展示月亮 */
[data-theme="dark"] .theme-toggle-btn .theme-icon-moon {
    display: block !important;
    color: var(--primary-color);
}

/* 2. 复古模式：展示古卷/羽毛笔 */
:root:not([data-theme="dark"]):not([data-theme="m3"]) .theme-toggle-btn .theme-icon-retro,
[data-theme="retro"] .theme-toggle-btn .theme-icon-retro,
[data-theme="light"] .theme-toggle-btn .theme-icon-retro {
    display: block !important;
    color: var(--primary-color);
}

/* 3. M3 模式：展示调色盘 */
[data-theme="m3"] .theme-toggle-btn .theme-icon-m3 {
    display: block !important;
    color: var(--primary-color);
}

/* ==========================================================================
   Material 3 (M3) 专属组件质感增强（圆润、柔光与现代交互）
   ========================================================================== */
[data-theme="m3"] .site-header {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(230, 224, 233, 0.9);
}

[data-theme="m3"] .hero-banner {
    width: calc(100% - 3rem);
    max-width: 1100px;
    margin: 1.5rem auto 2.5rem;
    border-radius: 28px;
    padding: 3.2rem 2rem;
    box-shadow: 0 8px 24px -4px rgba(103, 80, 164, 0.16);
}

@media (max-width: 768px) {
    [data-theme="m3"] .hero-banner {
        width: calc(100% - 1.5rem);
        padding: 2.5rem 1.25rem;
        border-radius: 20px;
    }
}

[data-theme="m3"] .site-nav a {
    border-radius: 9999px;
    padding: 0.35rem 0.95rem;
    font-weight: 500;
}

[data-theme="m3"] .site-nav a.active,
[data-theme="m3"] .site-nav a:hover {
    background-color: var(--tag-bg);
    color: var(--primary-color);
}

[data-theme="m3"] .card {
    border-radius: 24px;
    border: 1px solid var(--border-color);
}

[data-theme="m3"] .post-tag {
    border-radius: 8px;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
}

[data-theme="m3"] .social-btn,
[data-theme="m3"] .page-link {
    border-radius: 9999px;
}

[data-theme="m3"] .author-avatar {
    border: 4px solid var(--tag-bg);
}

[data-theme="m3"] .header-progress-bar {
    background: linear-gradient(90deg, #d0bcff 0%, #6750a4 100%);
    box-shadow: 0 0 12px rgba(103, 80, 164, 0.8);
}

/* 4. 博客主横幅/欢迎区 (Hero Banner) */
.hero-banner {
    background: var(--hero-bg);
    color: var(--hero-text);
    text-align: center;
    padding: 3.5rem 1.5rem;
    margin-bottom: 2.5rem;
    transition: background 0.3s ease, color 0.3s ease;
}

.hero-banner h1 {
    font-size: 2.2rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.hero-banner p {
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto;
}

/* 名言展示区（名言靠左、作者靠右，左右距离边界留出安全间距，淡入淡出与高度平滑过渡） */
.hero-banner .hero-quote-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 左右距离边界留出约200px左右距离，同时用最大宽度约束，使名言与作者横向视距适中不发散 */
    width: min(calc(100% - 400px), 780px);
    min-height: 130px;
    margin: 1.5rem auto 0;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
    text-align: left;
    cursor: pointer;
    user-select: none;
    opacity: 1;
    overflow: hidden;
    transition: opacity 0.22s ease-in-out, height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: "Playfair Display", "Georgia", "Baskerville", "Noto Serif SC", "Songti SC", "STKaiti", "KaiTi", serif;
}

.hero-banner .hero-quote-area.fade-out {
    opacity: 0;
}

/* 覆盖 .hero-banner p 的全局居中与外边距 */
.hero-banner .hero-quote-area p {
    margin: 0;
    max-width: 100%;
}

/* 1. 原文（靠左，艺术斜体衬线） */
.hero-banner .hero-quote-area .quote-original {
    font-family: "Playfair Display", "Georgia", "Baskerville", "Noto Serif SC", "Songti SC", serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--quote-original-color);
    line-height: 1.55;
    margin: 0;
    font-style: italic;
    text-align: left;
    letter-spacing: 0.02em;
    width: 100%;
}

/* 2 & 3. 译文区域与每一句译文（全部靠左，人文宋体） */
.hero-banner .hero-quote-area .quote-translations {
    margin-top: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
    width: 100%;
}

.hero-banner .hero-quote-area .quote-trans-item {
    font-family: "Noto Serif SC", "Songti SC", "STKaiti", "KaiTi", "Georgia", serif;
    font-size: 0.98rem;
    color: var(--quote-trans-color);
    line-height: 1.5;
    margin: 0;
    text-align: left;
    letter-spacing: 0.015em;
    width: 100%;
}

/* 作者署名（靠右排列，与名言正文形成典雅对齐） */
.hero-banner .hero-quote-area .quote-author {
    font-family: "Noto Serif SC", "Songti SC", "Playfair Display", "Georgia", serif;
    font-size: 0.88rem;
    color: var(--quote-author-color);
    text-align: right;
    margin-top: 0.6rem;
    margin-bottom: 0;
    font-weight: 500;
    letter-spacing: 0.02em;
    width: 100%;
    display: block;
}

/* 字体自适应：长名言紧凑排版，保持高度稳定一致 */
.hero-banner .hero-quote-area.quote-dense .quote-original {
    font-size: 1.1rem;
    line-height: 1.4;
}

.hero-banner .hero-quote-area.quote-dense .quote-translations {
    gap: 0.15rem;
}

.hero-banner .hero-quote-area.quote-dense .quote-trans-item {
    font-size: 0.9rem;
    line-height: 1.4;
}

.hero-banner .hero-quote-area.quote-dense .quote-author {
    margin-top: 0.35rem;
    font-size: 0.85rem;
}

/* 移动端与平板响应式适配 */
@media (max-width: 850px) {
    .hero-banner .hero-quote-area {
        width: 92%;
        min-height: 135px;
        padding: 0.5rem 0.5rem;
    }
}



/* 5. 页面主体容器（左右两栏布局） */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

/* 左侧主要文章列表 */
.main-content {
    flex: 1;
    min-width: 0; /* 防止子元素溢出 flex 容器 */
}

/* 右侧侧边栏 */
.sidebar {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* 6. 卡片通用样式 */
.card {
    background-color: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* 7. 文章卡片样式 */
.post-card {
    margin-bottom: 1.5rem;
}

.post-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.post-tag {
    background-color: var(--tag-bg);
    color: var(--tag-text);
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-weight: 500;
    font-size: 0.75rem;
}

.post-title {
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.post-title a {
    color: var(--text-main);
}

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

.post-excerpt {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.88rem;
}

.read-more {
    color: var(--primary-color);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.read-more:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* 8. 侧边栏小组件 (Widget) */
.widget-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--tag-bg);
    position: relative;
}

.widget-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 35px;
    height: 2px;
    background-color: var(--primary-color);
}

/* 作者个人卡片 */
.author-card {
    text-align: center;
    position: relative;
    overflow: hidden; /* 头像放大时贴合卡片圆角内胆，不向外溢出 */
    isolation: isolate; /* 防止子元素 GPU 变换突破父级圆角裁切 */
    transform: translateZ(0); /* 开启独立合成层，杜绝掉帧 */
}

.author-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    border: 3px solid var(--tag-bg);
    object-fit: cover;
    position: relative;
    z-index: 2;
    transform-origin: center center;
    will-change: transform, border-radius;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.author-name {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    position: relative;
    z-index: 1;
}

.author-bio {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.social-btn {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    font-size: 0.82rem;
    background-color: var(--social-btn-bg);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    transition: all 0.2s;
}

.social-btn:hover {
    background-color: var(--primary-color);
    color: #ffffff;
}

/* 分类列表 */
.category-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--border-color);
    font-size: 0.92rem;
}

.category-list li:last-child {
    border-bottom: none;
}

.category-count {
    background-color: var(--category-count-bg);
    color: var(--text-muted);
    font-size: 0.75rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

/* 标签云 */
.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-item {
    font-size: 0.82rem;
    background-color: var(--tag-item-bg);
    border: 1px solid var(--border-color);
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    transition: all 0.2s;
}

.tag-item:hover {
    background-color: var(--primary-color);
    color: #faf9f6;
    border-color: var(--primary-color);
}

/* 9. 分页导航 (Pagination) */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--text-main);
    transition: all 0.2s;
}

.page-link:hover,
.page-link.active {
    background-color: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}

/* 10. 文章详情页样式 (post.html 专用组件) */
.article-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.article-title {
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.article-content {
    font-size: 1.05rem;
    line-height: 1.8;
}

.article-content h2 {
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border-color);
}

.article-content h3 {
    font-size: 1.25rem;
    margin: 1.5rem 0 0.75rem;
}

.article-content p {
    margin-bottom: 1.25rem;
    text-indent: 2em;
}

.article-content blockquote {
    border-left: 4px solid var(--primary-color);
    background-color: var(--blockquote-bg);
    padding: 0.8rem 1.2rem;
    margin: 1.5rem 0;
    color: var(--text-muted);
    font-style: italic;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.article-content pre {
    background-color: #1e293b;
    color: #f8fafc;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    margin: 1.5rem 0;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 0.9rem;
}

.article-content code {
    background-color: var(--code-inline-bg);
    color: var(--code-inline-color);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.88em;
    font-family: Consolas, Monaco, monospace;
}

.article-content pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

/* ==========================================================================
   Pygments 语法高亮配色 (One Dark 现代深色配色)
   ========================================================================== */
.article-content pre .hll { background-color: #2c313c; }
.article-content pre .c, .article-content pre .ch, .article-content pre .cm, .article-content pre .cp, .article-content pre .cpf, .article-content pre .c1, .article-content pre .cs { color: #7f848e; font-style: italic; }
.article-content pre .k, .article-content pre .kd, .article-content pre .kn, .article-content pre .kp, .article-content pre .kr { color: #c678dd; font-weight: 600; }
.article-content pre .kt, .article-content pre .kc { color: #e5c07b; }
.article-content pre .s, .article-content pre .sa, .article-content pre .sb, .article-content pre .sc, .article-content pre .dl, .article-content pre .sd, .article-content pre .s2, .article-content pre .se, .article-content pre .sh, .article-content pre .si, .article-content pre .sx, .article-content pre .sr, .article-content pre .s1, .article-content pre .ss { color: #98c379; }
.article-content pre .m, .article-content pre .mb, .article-content pre .mf, .article-content pre .mh, .article-content pre .mi, .article-content pre .il, .article-content pre .mo { color: #d19a66; }
.article-content pre .na, .article-content pre .nc, .article-content pre .nd, .article-content pre .nf, .article-content pre .fm { color: #61afef; }
.article-content pre .nb, .article-content pre .bp { color: #e5c07b; }
.article-content pre .nt, .article-content pre .nv, .article-content pre .vc, .article-content pre .vg, .article-content pre .vi, .article-content pre .vm { color: #e06c75; }
.article-content pre .o, .article-content pre .ow { color: #56b6c2; }
.article-content pre .p, .article-content pre .pm { color: #abb2bf; }
.article-content pre .gh, .article-content pre .gu { color: #abb2bf; font-weight: bold; }

/* Markdown 表格美化 */
.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}
.article-content th, .article-content td {
    border: 1px solid var(--border-color);
    padding: 0.65rem 1rem;
    text-align: left;
}
.article-content th {
    background-color: var(--card-bg-subtle, rgba(0, 0, 0, 0.04));
    font-weight: 600;
}
.article-content tr:nth-child(even) td {
    background-color: var(--table-zebra, rgba(0, 0, 0, 0.015));
}

/* Markdown 无序与有序列表 */
.article-content ul, .article-content ol {
    margin: 1rem 0 1.5rem 2rem;
    padding-left: 0;
}
.article-content li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

/* Markdown 正文超链接样式 (支持多主题背景高亮、精致下划线与交互动效) */
.article-content a {
    color: var(--article-link-color);
    background-color: var(--article-link-bg);
    text-decoration: underline;
    text-decoration-color: var(--article-link-underline);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    font-weight: 500;
    padding: 0.1em 0.35em;
    margin: 0 0.12em;
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: color 0.2s ease, background-color 0.2s ease, text-decoration-color 0.2s ease;
}

.article-content a:hover {
    color: var(--article-link-hover-color);
    background-color: var(--article-link-hover-bg);
    text-decoration-color: var(--article-link-hover-underline);
}

/* 当超链接直接包含图片时不应用文字高亮底色和下划线 */
.article-content a:has(img) {
    background: none;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

/* 11. 页脚 (Footer) */
.site-footer {
    background-color: var(--footer-bg);
    border-top: 1px solid var(--border-color);
    text-align: center;
    padding: 2rem 1.5rem;
    font-size: 0.88rem;
    color: var(--footer-text);
    margin-top: auto;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.site-footer a {
    color: var(--primary-color);
}

/* 12. 响应式布局设计 (适配手机与平板) */
@media (max-width: 768px) {
    .site-nav {
        gap: 0.75rem;
    }

    .site-nav ul {
        gap: 0.85rem;
    }

    .container {
        flex-direction: column;
        padding: 0 1rem 2rem;
    }

    .sidebar {
        width: 100%;
    }

    .hero-banner {
        padding: 2.5rem 1rem;
    }

    .hero-banner h1 {
        font-size: 1.75rem;
    }

    .article-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .header-inner {
        padding: 0.75rem 1rem;
    }

    .site-logo {
        font-size: 1.15rem;
    }

    .site-nav {
        gap: 0.5rem;
    }

    .site-nav ul {
        gap: 0.4rem;
    }

    .site-nav a {
        padding: 0.2rem 0.35rem;
        font-size: 0.88rem;
    }

    .theme-toggle-btn {
        width: 32px;
        height: 32px;
    }

    .theme-toggle-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* ==========================================================================
   13. 活力动效系统 (Animations & Micro-interactions)
   ========================================================================== */

/* 1. 顶部导航加载与过渡进度条 (Header Progress Bar) */
.header-progress-bar {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--tag-bg) 0%, #b8a24c 60%, var(--primary-color) 100%);
    box-shadow: 0 0 10px rgba(184, 162, 76, 0.85), 0 0 3px rgba(119, 109, 62, 0.6);
    opacity: 0;
    pointer-events: none;
    z-index: 101;
    transition: width 0.35s cubic-bezier(0.1, 0.8, 0.2, 1), opacity 0.2s ease;
    border-radius: 0 3px 3px 0;
}

.header-progress-bar.loading {
    opacity: 1;
    width: 78%;
}

.header-progress-bar.finishing {
    opacity: 1;
    width: 100%;
    transition: width 0.18s ease-out, opacity 0.25s ease 0.12s;
}

.header-progress-bar.pulse {
    opacity: 1;
    animation: progressBarPulse 0.45s ease-out forwards;
}

@keyframes progressBarPulse {
    0% { width: 0%; opacity: 1; }
    50% { width: 100%; opacity: 1; }
    100% { width: 100%; opacity: 0; }
}

/* 2. 卡片与分页入场动画关键帧：淡入 + 弹性上浮 (Fade-in & Spring Slide-up) */
@keyframes cardEntrance {
    0% {
        opacity: 0;
        transform: translateY(28px) scale(0.98);
    }
    65% {
        opacity: 0.92;
        transform: translateY(-2px) scale(1.002);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 3. 卡片退场动画关键帧：淡出 + 稍向下沉 (Fade-out) */
@keyframes cardExit {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(16px) scale(0.985);
    }
}

/* 4. 锚点聚焦高亮脉冲：轻微上浮 + 柔和主题光晕呼吸 */
@keyframes cardHighlightPulse {
    0% {
        transform: translateY(0);
        box-shadow: var(--shadow-md);
    }
    35% {
        transform: translateY(-5px);
        box-shadow: 0 0 0 3px var(--primary-glow), 0 12px 24px -4px var(--primary-glow-box);
    }
    100% {
        transform: translateY(0);
        box-shadow: var(--shadow-md);
    }
}

/* 5. 导航按钮点击微弹回弹反馈 */
@keyframes headerClickPop {
    0% { transform: scale(1); }
    40% { transform: scale(0.93); }
    100% { transform: scale(1); }
}

.btn-clicked-pop {
    animation: headerClickPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 6. 卡片入场动效（通过 .card-is-entering 激活，彻底避免锚点脉冲移除后意外重放导致卡片闪烁消失） */
.card.card-is-entering,
.pagination.card-is-entering {
    animation: cardEntrance 0.65s cubic-bezier(0.16, 1, 0.3, 1) backwards !important;
    will-change: transform, opacity;
}

/* 默认错峰延时规则 (纯 CSS 保底，无需 JS 也能丝滑错落呈现) */
.main-content .post-card:nth-of-type(1) { animation-delay: 0.06s; }
.main-content .post-card:nth-of-type(2) { animation-delay: 0.14s; }
.main-content .post-card:nth-of-type(3) { animation-delay: 0.22s; }
.main-content .post-card:nth-of-type(4) { animation-delay: 0.30s; }
.main-content .pagination { animation-delay: 0.22s; }

.sidebar .card:nth-of-type(1) { animation-delay: 0.10s; }
.sidebar .card:nth-of-type(2) { animation-delay: 0.18s; }
.sidebar .card:nth-of-type(3) { animation-delay: 0.26s; }
.sidebar .card:nth-of-type(4) { animation-delay: 0.34s; }

/* 详情页文章主体卡片入场延时 */
.main-content > .card:only-of-type {
    animation-delay: 0.08s;
}

/* JS 动态注入的精准阶梯延时变量优先 */
.card[style*="--card-delay"],
.pagination[style*="--card-delay"] {
    animation-delay: var(--card-delay) !important;
}

/* 7. 卡片退场类名 (点击 header 跳转刷新时触发淡出) */
.card.card-is-exiting,
.pagination.card-is-exiting {
    animation: cardExit 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

/* 8. 锚点定位通用聚焦脉冲动效（用于普通文章卡片等） */
.card.card-highlight-pulse {
    animation: cardHighlightPulse 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* 9. “关于我”作者专属特写变焦动效 (Hero Avatar Spotlight) */

/* 9.1 作者卡片主体浮动与浅绿外框光晕 */
@keyframes authorCardSpotlight {
    0% {
        transform: translate3d(0, 0, 0);
        border-color: var(--border-color);
        box-shadow: var(--shadow-md);
    }
    28% {
        transform: translate3d(0, -6px, 0);
        border-color: var(--tag-bg);
        box-shadow: 0 0 0 3px var(--tag-bg), 0 16px 32px -4px var(--primary-glow-box);
    }
    71% {
        transform: translate3d(0, -6px, 0);
        border-color: var(--tag-bg);
        box-shadow: 0 0 0 3px var(--tag-bg), 0 16px 32px -4px var(--primary-glow-box);
    }
    100% {
        transform: translate3d(0, 0, 0);
        border-color: var(--border-color);
        box-shadow: var(--shadow-md);
    }
}

/* 9.2 头像连带外框放大充满整张卡片：极致丝滑的单段贝塞尔插值，杜绝多段断点导致的掉帧顿挫感 */
@keyframes avatarSpotlight {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        border-radius: 50%;
        border-color: var(--tag-bg);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
    /* 阶段一：平滑单向展开（耗时约 0.58s），border-radius 自动连续高刷插值，自然呈现圆 -> 柔和圆角矩形 */
    43% {
        transform: translate3d(0, var(--avatar-spotlight-y, 44px), 0) scale(var(--avatar-spotlight-scale, 3.4));
        border-radius: 8px;
        border-color: var(--tag-bg);
        box-shadow: 0 0 16px var(--tag-bg);
    }
    /* 阶段二：满版特写定格展示（耗时约 0.38s） */
    71% {
        transform: translate3d(0, var(--avatar-spotlight-y, 44px), 0) scale(var(--avatar-spotlight-scale, 3.4));
        border-radius: 8px;
        border-color: var(--tag-bg);
        box-shadow: 0 0 16px var(--tag-bg);
    }
    /* 阶段三：丝滑缩回正圆形，自然恢复 */
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        border-radius: 50%;
        border-color: var(--tag-bg);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

/* 9.3 卡片文本与按钮在特写期间优雅淡出避让，头像归位后回弹复现 */
@keyframes authorTextSpotlight {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    16% {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
    71% {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* 激活专属动效类名 */
.author-card.author-spotlight {
    animation: authorCardSpotlight 1.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.author-card.author-spotlight .author-avatar {
    animation: avatarSpotlight 1.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 10;
}

.author-card.author-spotlight .author-name,
.author-card.author-spotlight .author-bio,
.author-card.author-spotlight .social-links {
    animation: authorTextSpotlight 1.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 10. 无障碍优雅降级：当用户系统开启“减少动效”时平滑直显 */
@media (prefers-reduced-motion: reduce) {
    .card,
    .pagination,
    .site-logo,
    .site-nav a,
    .header-progress-bar,
    .author-card,
    .author-avatar,
    .author-name,
    .author-bio,
    .social-links {
        animation: none !important;
        transition: none !important;
    }
}