@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* 
 * 文件路径: docs/stylesheets/extra.css
 * 描述: 针对 MkDocs Material 主题的深度定制
 * 目标: 仅在亮色模式下应用“浙大蓝”与“护眼米色”
 */

/* 
 * 选择器 [data-md-color-scheme="default"] 确保这些改动
 * 仅在用户选择“亮色”或系统默认为“亮色”时生效。
 * 当用户切换到暗色模式时，这些设置会被自动忽略，从而保护暗色体验。
 */
[data-md-color-scheme="default"] {
  
  /* ==============================================
     主色调配置 (Primary Colors) - 浙大蓝 #003F88
     ============================================== */
  /* 
   * --md-primary-fg-color: 
   * 控制页眉(Header)、侧边栏激活项、链接文字等核心元素的颜色。
   */
  --md-primary-fg-color:        #003F88;
  
  /* 
   * --md-primary-fg-color--light:
   * 控制鼠标悬停(Hover)时的颜色，通常比主色稍亮。
   */
  --md-primary-fg-color--light: #0050AA; 
  
  /* 
   * --md-primary-fg-color--dark:
   * 控制被点击或激活状态的颜色，通常比主色稍暗。
   */
  --md-primary-fg-color--dark:  #002E66; 

  /* ==============================================
     背景色配置 (Background Colors) - 米黄色 #FAF7F0
     ============================================== */
  /* 
   * --md-default-bg-color:
   * 控制页面主体的背景颜色。
   */
  --md-default-bg-color:        #FAF7F0;
  
  /* 
   * --md-code-bg-color:
   * (可选) 调整行内代码块的背景色，使其与米色背景融合得更自然。
   * 使用半透明的深色，保持对比度。
   */
  --md-code-bg-color:           #f6f8fa;
  --md-code-fg-color:           #24292f;

  /* ==============================================
     强调色配置 (Accent Colors)
     ============================================== */
  /* 
   * --md-accent-fg-color:
   * 控制按钮、滑动条、高亮文本的颜色。建议与主色保持一致或互补。
   */
  --md-accent-fg-color:         #003F88;
}

/* 
 * 特殊修复：页眉背景
 * 在某些 Material 主题版本中，页眉背景可能需要显式指定
 * 才能正确应用自定义的 Hex 颜色值。
 */
[data-md-color-scheme="default"].md-header {
  background-color: var(--md-primary-fg-color);
}

/* 
 * 特殊修复：移动端导航栏
 * 确保移动端的标签页背景也同步为浙大蓝。
 */
[data-md-color-scheme="default"].md-tabs {
  background-color: var(--md-primary-fg-color);
}

/* --- 页脚定制开始 --- */

/* 强制页脚内部容器两端对齐 */
.md-footer-meta__inner {
    display: flex;
    justify-content: space-between!important; /* 覆盖默认样式 */
    align-items: center; /* 垂直居中 */
    flex-wrap: wrap; /* 移动端自动换行 */
}

/* 针对版权信息区域 */
.md-copyright {
    margin: 0!important;
    text-align: left;
}

/* 针对社交图标区域 */
.md-social {
    margin: 0!important;
    padding: 0;
    text-align: right;
}

/* 移动端适配：屏幕小于 40rem (约640px) 时，恢复堆叠布局，防止挤压 */
@media screen and (max-width: 40rem) {
   .md-footer-meta__inner {
        flex-direction: column-reverse; /* 图标在下，版权在上，或者反过来 */
        gap: 10px;
        justify-content: center!important;
    }
}
/* --- 页脚定制结束 --- */

/* ==============================================
   友链卡片样式 (Friend Links)
   ============================================== */
.friend-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.friend-card {
    display: flex;
    align-items: center;
    padding: 15px;
    border-radius: 12px;
    background: var(--md-default-bg-color, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none !important;
    color: inherit;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.friend-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 63, 136, 0.15);
    border-color: var(--md-primary-fg-color, #003F88);
}

.friend-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    flex-shrink: 0;
}

.friend-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.friend-name {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--md-primary-fg-color, #003F88);
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-desc {
    font-size: 0.85em;
    color: #666;
    line-height: 1.4;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 暗色模式适配 */
[data-md-color-scheme="slate"] .friend-card {
    background: #131c31;
    border-color: rgba(59, 130, 246, 0.1);
}

[data-md-color-scheme="slate"] .friend-card:hover {
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-md-color-scheme="slate"] .friend-name {
    color: #60a5fa;
}

[data-md-color-scheme="slate"] .friend-desc {
    color: #94a3b8;
}

/* 移动端适配 */
@media screen and (max-width: 600px) {
    .friend-links {
        grid-template-columns: 1fr;
    }
    
    .friend-card {
        padding: 12px;
    }
    
    .friend-avatar {
        width: 50px;
        height: 50px;
    }
}

/* ==============================================
   全局 UI 优化 - 科技感增强
   ============================================== */

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* 标题排版增强 - 给标题更多个性 */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
    font-family: "Playfair Display", "Noto Serif SC", serif;
    line-height: 1.3;
}

.md-typeset h1 {
    font-size: 2em;
    margin-bottom: 0.8em;
}

.md-typeset h2 {
    font-size: 1.5em;
    margin-top: 2em;
}

/* 优化链接过渡效果 */
a {
    transition: color 0.25s ease, opacity 0.25s ease, border-color 0.25s ease;
}

/* 侧边栏优化 */
.md-nav__link {
    transition: all 0.2s ease;
}

.md-nav__link:hover {
    padding-left: 8px;
}

.md-nav__item--active > .md-nav__link {
    font-weight: 600;
}

/* 搜索框优化 */
.md-search__input {
    border-radius: 8px !important;
    transition: all 0.3s ease;
}

.md-search__input:focus {
    box-shadow: 0 0 0 3px rgba(0, 63, 136, 0.2);
}

/* 内容卡片化效果 */
.md-content {
    padding-top: 1.5rem;
}

/* 代码块增强 */
.highlight {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.highlight code {
    font-family: "JetBrains Mono", "Fira Code", monospace !important;
}

/* 亮色模式行内代码 */
[data-md-color-scheme="default"] .md-typeset code {
    background: #f6f8fa;
    color: #24292f;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}

/* Admonition 美化 */
.admonition {
    border-radius: 8px !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-left-width: 4px !important;
}

/* 亮色模式 Admonition 配色 */
[data-md-color-scheme="default"] .admonition.note {
    border-left-color: #0969da;
    background: rgba(9, 105, 218, 0.04);
}

[data-md-color-scheme="default"] .admonition.tip,
[data-md-color-scheme="default"] .admonition.success {
    border-left-color: #1a7f37;
    background: rgba(26, 127, 55, 0.04);
}

[data-md-color-scheme="default"] .admonition.warning {
    border-left-color: #9a6700;
    background: rgba(154, 103, 0, 0.04);
}

[data-md-color-scheme="default"] .admonition.danger,
[data-md-color-scheme="default"] .admonition.failure {
    border-left-color: #cf222e;
    background: rgba(207, 34, 46, 0.04);
}

[data-md-color-scheme="default"] .admonition.info,
[data-md-color-scheme="default"] .admonition.abstract {
    border-left-color: #8250df;
    background: rgba(130, 80, 223, 0.04);
}

[data-md-color-scheme="default"] .admonition.question {
    border-left-color: #0550ae;
    background: rgba(5, 80, 174, 0.04);
}

[data-md-color-scheme="default"] .admonition.example {
    border-left-color: #57606a;
    background: rgba(87, 96, 106, 0.04);
}

[data-md-color-scheme="default"] .admonition.quote {
    border-left-color: #6e7781;
    background: rgba(110, 119, 129, 0.04);
}

/* 表格美化 */
.md-typeset table:not([class]) {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.md-typeset table:not([class]) th {
    background: rgba(0, 63, 136, 0.08);
}

/* 页脚美化 */
.md-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* ----- 修复无序/有序列表显示与 Obsidian 风格高亮 ----- */
.md-typeset ul,
.md-typeset ol {
    margin-left: 1.5em !important;
    padding-left: 1em !important;
    list-style-type: disc !important; /* 强制显示圆点 */
}

.md-typeset li {
    display: list-item !important; /* 确保列表项表现为列表 */
}

/* pymdownx.mark 将渲染为 <mark> 或 .pymdownx-mark, 统一样式 */
.md-typeset mark,
.md-typeset .pymdownx-mark {
    background-color: #fff59d; /* 柔和的荧光黄 */
    color: #000;
    padding: 0 0.18em;
    border-radius: 2px;
}

/* 小屏幕时微调列表缩进 */
@media screen and (max-width: 600px) {
    .md-typeset ul,
    .md-typeset ol {
        margin-left: 1.2em !important;
    }
}

/* ==============================================
   暗色模式 - "Midnight Sapphire" 深海蓝宝石配色
   设计理念：深邃的海军蓝底色，以浙大蓝的暗色回响为主色，
   琥珀金点缀温暖感，确保标题与正文的高可读性。
   ============================================== */
[data-md-color-scheme="slate"] {
    --md-default-bg-color: #0b1120;
    --md-default-fg-color: #e2e8f0;
    --md-default-fg-color--light: #94a3b8;
    --md-default-fg-color--lighter: #64748b;
    --md-primary-fg-color: #3b82f6;
    --md-primary-fg-color--light: #60a5fa;
    --md-primary-bg-color: #0f172a;
    --md-accent-fg-color: #f59e0b;
    --md-typeset-color: #e2e8f0;
    --md-typeset-a-color: #60a5fa;
    
    /* 代码相关颜色 */
    --md-code-bg-color: #0f1a2e;
    --md-code-fg-color: #e2e8f0;
    --md-code-hl-color: rgba(59, 130, 246, 0.12);

    /* 自定义扩展变量 */
    --md-surface-color: #131c31;
    --md-border-color: #1e3050;
    --md-heading-color: #f8fafc;
}

/* 页眉 - 深邃蓝夜渐变 */
[data-md-color-scheme="slate"] .md-header {
    background: #172033 !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

[data-md-color-scheme="slate"] .md-header .md-header__title,
[data-md-color-scheme="slate"] .md-header .md-header__topic,
[data-md-color-scheme="slate"] .md-header .md-header__title .md-ellipsis,
[data-md-color-scheme="slate"] .md-header .md-header__topic .md-ellipsis,
[data-md-color-scheme="slate"] .md-header .md-logo,
[data-md-color-scheme="slate"] .md-header .md-header__button,
[data-md-color-scheme="slate"] .md-header .md-header__button .md-icon,
[data-md-color-scheme="slate"] .md-header .md-header__option .md-icon,
[data-md-color-scheme="slate"] .md-header [data-md-component="palette"] .md-icon,
[data-md-color-scheme="slate"] .md-header .md-source,
[data-md-color-scheme="slate"] .md-header .md-source__repository,
[data-md-color-scheme="slate"] .md-header .md-source .md-source__repository .md-ellipsis,
[data-md-color-scheme="slate"] .md-header .md-source__fact {
    color: #ffffff !important;
}

/* 导航标签页 */
[data-md-color-scheme="slate"] .md-tabs {
    background: #172033 !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

[data-md-color-scheme="slate"] .md-tabs__link {
    color: #e2e8f0 !important;
    transition: all 0.3s ease;
}

[data-md-color-scheme="slate"] .md-tabs__link:hover,
[data-md-color-scheme="slate"] .md-tabs__link--active {
    color: #ffffff !important;
}

[data-md-color-scheme="slate"] .md-tabs__link::after {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

/* 侧边栏美化 */
[data-md-color-scheme="slate"] .md-sidebar {
    background: #0b1120;
    border-right: 1px solid rgba(59, 130, 246, 0.06);
}

[data-md-color-scheme="slate"] .md-nav__link {
    color: #94a3b8;
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
    color: #e2e8f0;
}

[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link {
    color: #60a5fa;
    font-weight: 600;
}

/* 内容区域 */
[data-md-color-scheme="slate"] .md-content {
    background: #0b1120;
}

/* 代码块美化 - 蓝调边框 */
[data-md-color-scheme="slate"] .highlight {
    background: #0f1a2e;
    border: 1px solid #1e3050;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

[data-md-color-scheme="slate"] .highlight:hover {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.08);
}

/* Admonition 卡片美化 - 各类型独立配色 */
[data-md-color-scheme="slate"] .admonition {
    background: #131c31;
    border: 1px solid #1e3050;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-md-color-scheme="slate"] .admonition.note {
    border-left: 4px solid #388bfd;
    background: rgba(56, 139, 253, 0.05);
}

[data-md-color-scheme="slate"] .admonition.note > .admonition-title {
    background: rgba(56, 139, 253, 0.1);
}

[data-md-color-scheme="slate"] .admonition.tip,
[data-md-color-scheme="slate"] .admonition.success {
    border-left: 4px solid #3fb950;
    background: rgba(63, 185, 80, 0.05);
}

[data-md-color-scheme="slate"] .admonition.tip > .admonition-title,
[data-md-color-scheme="slate"] .admonition.success > .admonition-title {
    background: rgba(63, 185, 80, 0.1);
}

[data-md-color-scheme="slate"] .admonition.warning {
    border-left: 4px solid #d29922;
    background: rgba(210, 153, 34, 0.05);
}

[data-md-color-scheme="slate"] .admonition.warning > .admonition-title {
    background: rgba(210, 153, 34, 0.1);
}

[data-md-color-scheme="slate"] .admonition.danger,
[data-md-color-scheme="slate"] .admonition.failure {
    border-left: 4px solid #f85149;
    background: rgba(248, 81, 73, 0.05);
}

[data-md-color-scheme="slate"] .admonition.danger > .admonition-title,
[data-md-color-scheme="slate"] .admonition.failure > .admonition-title {
    background: rgba(248, 81, 73, 0.1);
}

[data-md-color-scheme="slate"] .admonition.info,
[data-md-color-scheme="slate"] .admonition.abstract {
    border-left: 4px solid #a371f7;
    background: rgba(163, 113, 247, 0.05);
}

[data-md-color-scheme="slate"] .admonition.info > .admonition-title,
[data-md-color-scheme="slate"] .admonition.abstract > .admonition-title {
    background: rgba(163, 113, 247, 0.1);
}

[data-md-color-scheme="slate"] .admonition.question {
    border-left: 4px solid #a5d6ff;
    background: rgba(165, 214, 255, 0.05);
}

[data-md-color-scheme="slate"] .admonition.question > .admonition-title {
    background: rgba(165, 214, 255, 0.1);
}

[data-md-color-scheme="slate"] .admonition.example {
    border-left: 4px solid #8b949e;
    background: rgba(139, 148, 158, 0.05);
}

[data-md-color-scheme="slate"] .admonition.example > .admonition-title {
    background: rgba(139, 148, 158, 0.1);
}

[data-md-color-scheme="slate"] .admonition.quote {
    border-left: 4px solid #6e7681;
    background: rgba(110, 118, 129, 0.05);
}

/* 表格美化 */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
    background: #131c31;
    border: 1px solid #1e3050;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
    background: rgba(59, 130, 246, 0.1);
    color: #e2e8f0;
    border-bottom: 1px solid #1e3050;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
    border-color: #1e3050;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover {
    background: rgba(59, 130, 246, 0.05);
}

/* 链接样式 - 蓝调优雅 */
[data-md-color-scheme="slate"] .md-typeset a {
    color: #60a5fa;
    text-decoration: none;
    transition: all 0.25s ease;
    border-bottom: 1px solid transparent;
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
    color: #93c5fd;
    border-bottom-color: rgba(96, 165, 250, 0.4);
}

/* 行内代码 - 深海蓝底 */
[data-md-color-scheme="slate"] .md-typeset code {
    background: rgba(59, 130, 246, 0.08);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.15);
}

/* 页脚美化 */
[data-md-color-scheme="slate"] .md-footer {
    background: #080e1a;
    border-top: 1px solid rgba(59, 130, 246, 0.1);
}

[data-md-color-scheme="slate"] .md-footer-meta {
    background: transparent;
}

/* 搜索框美化 */
[data-md-color-scheme="slate"] .md-search__input {
    background: #131c31;
    border: 1px solid #1e3050;
    color: #e2e8f0;
}

[data-md-color-scheme="slate"] .md-search__input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

[data-md-color-scheme="slate"] .md-search__input::placeholder {
    color: #64748b;
}

/* 选中文本颜色 */
[data-md-color-scheme="slate"] ::selection {
    background: rgba(59, 130, 246, 0.35);
    color: #fff;
}

/* 按钮美化 */
[data-md-color-scheme="slate"] .md-button {
    background: #131c31;
    border: 1px solid #1e3050;
    color: #e2e8f0;
}

[data-md-color-scheme="slate"] .md-button:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.4);
}

[data-md-color-scheme="slate"] .md-button--primary {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    border-color: transparent;
    color: #fff;
}

[data-md-color-scheme="slate"] .md-button--primary:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

/* ==============================================
   首页特殊处理 - 隐藏不必要元素
   ============================================== */
/* 首页隐藏右侧目录 */
.md-content--home .md-sidebar--secondary {
    display: none;
}

/* 首页内容区全宽 */
.md-content--home .md-content__inner {
    max-width: none;
    margin: 0;
}

/* 首页隐藏正文第一个 H1 */
.md-content--home .md-content__inner > h1:first-of-type {
    display: none !important;
}

/* 首页显式辅助标题：仅用于结构，不参与视觉展示 */
.home-title-hidden {
    display: none !important;
}

/* 首页兜底：仅在首页隐藏正文第一个 H1（由 ui-perf.js 注入 body.is-homepage） */
body.is-homepage .md-content__inner > h1:first-of-type {
    display: none !important;
}

/* 首页兜底：如果正文含 hero-section，隐藏自动注入的首个 H1 */
.md-content__inner:has(.hero-section) > h1:first-of-type {
    display: none !important;
}

/* ==============================================
   暗色模式标题可读性增强 - 梯度高亮
   ============================================== */
[data-md-color-scheme="slate"] .md-typeset h1 {
    color: #f8fafc !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.15);
}

[data-md-color-scheme="slate"] .md-typeset h2 {
    color: #f1f5f9 !important;
    font-weight: 600;
    padding-bottom: 0.3em;
    border-bottom: 2px solid rgba(59, 130, 246, 0.15);
}

[data-md-color-scheme="slate"] .md-typeset h3 {
    color: #e2e8f0 !important;
    font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
    color: #cbd5e1 !important;
    font-weight: 600;
}

/* 暗色模式 strong/bold 高亮 - 琥珀金 */
[data-md-color-scheme="slate"] .md-typeset strong {
    color: #f59e0b;
    font-weight: 700;
}

/* 暗色模式 blockquote 优化 */
[data-md-color-scheme="slate"] .md-typeset blockquote {
    border-left: 4px solid rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.04);
    color: #94a3b8;
}

/* 暗色模式分割线 */
[data-md-color-scheme="slate"] .md-typeset hr {
    border-color: rgba(59, 130, 246, 0.12);
}

/* ==============================================
   亮色模式标题装饰 - 浙大蓝增强
   ============================================== */
[data-md-color-scheme="default"] .md-typeset h1 {
    color: #003F88;
    font-weight: 700;
    letter-spacing: -0.02em;
}

[data-md-color-scheme="default"] .md-typeset h2 {
    color: #002E66;
    font-weight: 600;
    padding-bottom: 0.3em;
    border-bottom: 2px solid rgba(0, 63, 136, 0.12);
}

[data-md-color-scheme="default"] .md-typeset h3 {
    color: #003F88;
    font-weight: 600;
}

/* 亮色模式 strong 使用暖金色强调 */
[data-md-color-scheme="default"] .md-typeset strong {
    color: #92400e;
    font-weight: 700;
}

/* 亮色模式 blockquote 温暖化 */
[data-md-color-scheme="default"] .md-typeset blockquote {
    border-left: 4px solid rgba(0, 63, 136, 0.3);
    background: rgba(0, 63, 136, 0.03);
}

/* 亮色模式链接悬停下划线 */
[data-md-color-scheme="default"] .md-typeset a:hover {
    border-bottom: 1px solid rgba(0, 63, 136, 0.3);
}

/* ==============================================
   Obsidian 风格块引用链接样式
   ============================================== */
/* 块锚点标记 */
.block-anchor {
    position: relative;
}

.block-anchor::before {
    content: '';
    display: block;
    height: 0;
    margin-top: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 块引用链接样式 */
a.block-link {
    color: var(--md-accent-fg-color, #003F88);
    text-decoration: none;
    background: rgba(0, 63, 136, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.9em;
    transition: all 0.2s ease;
}

a.block-link:hover {
    background: rgba(0, 63, 136, 0.15);
    color: var(--md-primary-fg-color, #003F88);
}

/* 块高亮效果 */
.block-highlight {
    animation: block-flash 2s ease-out;
}

@keyframes block-flash {
    0% { background-color: rgba(0, 63, 136, 0.3); }
    100% { background-color: transparent; }
}

/* 暗色模式适配 */
[data-md-color-scheme="slate"] a.block-link {
    background: rgba(100, 181, 246, 0.15);
    color: #64b5f6;
}

[data-md-color-scheme="slate"] a.block-link:hover {
    background: rgba(100, 181, 246, 0.25);
}

[data-md-color-scheme="slate"] .block-highlight {
    animation: block-flash-dark 2s ease-out;
}

@keyframes block-flash-dark {
    0% { background-color: rgba(100, 181, 246, 0.3); }
    100% { background-color: transparent; }
}

/* =============================================================
   Focused UI Sync Layer (Light + Dark)
   Scope: fonts, texture, fade-in, glass nav, hover-lift,
          custom scrollbar, desktop tabs + active state,
          about button, mobile hamburger menu panel.
   ============================================================= */

/* Fonts */
html, body {
    font-family: "Inter", "Noto Sans SC", "Segoe UI", sans-serif;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
    font-family: "Playfair Display", "Noto Serif SC", serif;
}

.md-header,
.md-tabs,
.md-nav,
.md-button,
.md-typeset code,
.md-typeset pre code {
    font-family: "Inter", "Noto Sans SC", "Segoe UI", sans-serif;
}

.md-typeset code,
.md-typeset pre code,
.md-tabs__link,
.md-nav__link {
    font-family: "JetBrains Mono", "Fira Code", monospace;
}

/* Texture background */
[data-md-color-scheme="default"] body {
    background-color: #fafaf9;
    background-image: radial-gradient(rgba(214, 211, 209, 0.55) 1px, transparent 1px);
    background-size: 44px 44px;
}

[data-md-color-scheme="slate"] body {
    background-color: #0b1120;
    background-image: radial-gradient(rgba(148, 163, 184, 0.14) 1px, transparent 1px);
    background-size: 46px 46px;
}

/* Fade-in animation */
.md-content__inner {
    animation: pageFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Glass nav effect */
.md-header,
.md-tabs {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-md-color-scheme="default"] .md-header,
[data-md-color-scheme="default"] .md-tabs {
    background: rgba(250, 250, 249, 0.85) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

[data-md-color-scheme="default"] .md-header .md-header__title,
[data-md-color-scheme="default"] .md-header .md-header__topic,
[data-md-color-scheme="default"] .md-header .md-header__title .md-ellipsis,
[data-md-color-scheme="default"] .md-header .md-header__topic .md-ellipsis,
[data-md-color-scheme="default"] .md-header .md-logo,
[data-md-color-scheme="default"] .md-header .md-header__button,
[data-md-color-scheme="default"] .md-header .md-header__button .md-icon,
[data-md-color-scheme="default"] .md-header .md-header__option .md-icon,
[data-md-color-scheme="default"] .md-header [data-md-component="palette"] .md-icon,
[data-md-color-scheme="default"] .md-header .md-source,
[data-md-color-scheme="default"] .md-header .md-source__repository,
[data-md-color-scheme="default"] .md-header .md-source .md-source__repository .md-ellipsis,
[data-md-color-scheme="default"] .md-header .md-source__fact {
    color: #292524 !important;
}

[data-md-color-scheme="default"] .md-header .md-header__button:hover,
[data-md-color-scheme="default"] .md-header .md-header__button:hover .md-icon,
[data-md-color-scheme="default"] .md-header .md-header__option:hover .md-icon,
[data-md-color-scheme="default"] .md-header .md-logo:hover,
[data-md-color-scheme="default"] .md-header .md-source:hover,
[data-md-color-scheme="default"] .md-header .md-source:hover .md-source__repository,
[data-md-color-scheme="default"] .md-header .md-source:hover .md-source__fact {
    color: #1e3a8a !important;
}

[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
    background: rgba(11, 17, 32, 0.8) !important;
    border-bottom: 1px solid rgba(96, 165, 250, 0.18);
}

/* Hover lift behavior */
.md-button,
.friend-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.25s ease;
}

.md-button:hover,
.friend-card:hover {
    transform: translateY(-3px);
}

[data-md-color-scheme="default"] .md-button:hover,
[data-md-color-scheme="default"] .friend-card:hover {
    box-shadow: 0 12px 30px -10px rgba(15, 23, 42, 0.2);
}

[data-md-color-scheme="slate"] .md-button:hover,
[data-md-color-scheme="slate"] .friend-card:hover {
    box-shadow: 0 14px 34px -12px rgba(30, 58, 138, 0.45);
}

/* Custom scrollbar */
[data-md-color-scheme="default"] ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[data-md-color-scheme="default"] ::-webkit-scrollbar-track {
    background: transparent;
}

[data-md-color-scheme="default"] ::-webkit-scrollbar-thumb {
    background: #a8a29e;
    border-radius: 3px;
}

[data-md-color-scheme="default"] ::-webkit-scrollbar-thumb:hover {
    background: #78716c;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-track {
    background: rgba(2, 6, 23, 0.7);
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 3px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Desktop tabs + active state */
.md-tabs__list {
    gap: 0.2rem;
}

.md-tabs__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2rem;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    transition: color 0.25s ease;
}

.md-tabs__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.2rem;
    width: 0;
    height: 2px;
    transition: width 0.3s ease;
}

[data-md-color-scheme="default"] .md-tabs__link {
    color: #57534e;
}

[data-md-color-scheme="default"] .md-tabs__link:hover,
[data-md-color-scheme="default"] .md-tabs__link--active {
    background: rgba(255, 255, 255, 0.65);
}

[data-md-color-scheme="default"] .md-tabs__link::after {
    background: linear-gradient(90deg, #1e3a8a, #2563eb);
}

[data-md-color-scheme="default"] .md-tabs__link:hover,
[data-md-color-scheme="default"] .md-tabs__link--active {
    color: #0f172a;
}

[data-md-color-scheme="slate"] .md-tabs__link {
    color: #94a3b8;
}

[data-md-color-scheme="slate"] .md-tabs__link:hover,
[data-md-color-scheme="slate"] .md-tabs__link--active {
    background: rgba(30, 41, 59, 0.55);
}

[data-md-color-scheme="slate"] .md-tabs__link::after {
    background: linear-gradient(90deg, #60a5fa, #93c5fd);
}

[data-md-color-scheme="slate"] .md-tabs__link:hover,
[data-md-color-scheme="slate"] .md-tabs__link--active {
    color: #e2e8f0;
}

.md-tabs__link:hover::after,
.md-tabs__link--active::after {
    width: 100%;
}

/* Mobile hamburger menu panel */
@media screen and (max-width: 76.1875em) {
    [data-md-color-scheme="default"] .md-nav--primary {
        background: rgba(250, 250, 249, 0.96);
        border-right: 1px solid #e7e5e4;
        box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.35);
    }

    [data-md-color-scheme="default"] .md-nav--primary .md-nav__title {
        background: #fafaf9;
        border-bottom: 1px solid #e7e5e4;
    }

    [data-md-color-scheme="slate"] .md-nav--primary {
        background: rgba(11, 17, 32, 0.96);
        border-right: 1px solid rgba(96, 165, 250, 0.2);
        box-shadow: 0 20px 45px -20px rgba(30, 58, 138, 0.5);
    }

    [data-md-color-scheme="slate"] .md-nav--primary .md-nav__title {
        background: #0b1120;
        border-bottom: 1px solid rgba(96, 165, 250, 0.18);
        color: #e2e8f0;
    }

    .md-header__button[for="__drawer"] {
        border-radius: 8px;
        transition: background-color 0.2s ease;
    }

    [data-md-color-scheme="default"] .md-header__button[for="__drawer"]:hover {
        background: rgba(231, 229, 228, 0.8);
    }

    [data-md-color-scheme="slate"] .md-header__button[for="__drawer"]:hover {
        background: rgba(51, 65, 85, 0.5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .md-content__inner,
    .md-button,
    .friend-card,
    .admonition,
    .highlight,
    .md-typeset table:not([class]),
    .md-tabs__link,
    .md-tabs__link::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* =============================================================
   Final Conflict Fix Layer (highest priority)
   Goal: stabilize AboutMe typography, color, composition and CTA
   ============================================================= */

/* Keep heading hierarchy visible and consistent */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
    font-family: "Playfair Display", "Noto Serif SC", serif;
}

/* AboutMe composition */
.about-me-shell {
    max-width: 58rem;
    margin: 0 auto;
    padding: clamp(0.8rem, 2vw, 1.5rem) 0;
}

.about-me-panel {
    border-radius: 1.5rem;
    border: 1px solid rgba(214, 211, 209, 0.9);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 50px rgba(28, 25, 23, 0.07);
    text-align: center;
    padding: clamp(1.4rem, 3.5vw, 2.8rem);
}

[data-md-color-scheme="slate"] .about-me-panel {
    border-color: rgba(96, 165, 250, 0.22);
    background: rgba(11, 17, 32, 0.82);
    box-shadow: 0 18px 48px rgba(2, 6, 23, 0.45);
}

.about-me-mark {
    width: 5.2rem;
    height: 5.2rem;
    margin: 0 auto 1.1rem auto;
    border-radius: 999px;
    border: 1px solid #d6d3d1;
    background: #fafaf9;
    color: #1c1917;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Playfair Display", "Noto Serif SC", serif;
    font-size: 2rem;
    line-height: 1;
    box-shadow: 0 0 0 11px rgba(239, 246, 255, 0.65);
}

[data-md-color-scheme="slate"] .about-me-mark {
    border-color: rgba(148, 163, 184, 0.4);
    background: #0f172a;
    color: #f8fafc;
    box-shadow: 0 0 0 11px rgba(30, 58, 138, 0.23);
}

.about-me-subtitle {
    margin: 0.2rem 0 0.9rem 0;
    font-family: "Cinzel", "Cormorant Garamond", serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.76rem;
    font-weight: 500;
    color: #1e3a8a;
}

[data-md-color-scheme="slate"] .about-me-subtitle {
    color: #93c5fd;
}

.about-me-title {
    margin: 0;
    font-family: "Cormorant Garamond", "Playfair Display", "Noto Serif SC", serif;
    font-size: clamp(2.05rem, 4.2vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -0.012em;
    text-wrap: balance;
    color: #1c1917;
}

[data-md-color-scheme="slate"] .about-me-title {
    color: #f8fafc;
    text-shadow: 0 0 28px rgba(96, 165, 250, 0.15);
}

.about-me-lead {
    max-width: 46rem;
    margin: 0.9rem auto;
    font-size: clamp(1.08rem, 2.05vw, 1.32rem);
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: #57534e;
    font-family: "Cormorant Garamond", "Noto Serif SC", serif;
}

[data-md-color-scheme="slate"] .about-me-lead {
    color: #cbd5e1;
}

.about-me-email {
    display: inline-block;
    margin-top: 1.2rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e7e5e4;
    font-family: "Cormorant Garamond", "Playfair Display", "Noto Serif SC", serif !important;
    font-size: clamp(1.25rem, 2.45vw, 2.05rem) !important;
    font-style: normal;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    text-transform: lowercase !important;
    font-feature-settings: "kern" 1, "liga" 1;
    color: #0f172a !important;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
    transition: color 0.25s ease, transform 0.25s ease;
}

.about-me-email:hover {
    color: #1e3a8a !important;
    transform: translateY(-1px);
}

[data-md-color-scheme="slate"] .about-me-email {
    border-top-color: rgba(148, 163, 184, 0.25);
    color: #e2e8f0 !important;
}

[data-md-color-scheme="slate"] .about-me-email:hover {
    color: #93c5fd !important;
}