@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-web/style.css');

body, .md-typeset {
    /* 优先使用霞鹜文楷，没有则退化为系统字体 */
    font-family: "LXGW WenKai Screen", "Roboto", sans-serif !important;
}

/* 代码块保持等宽字体 */
code, kbd, pre {
    font-family: "JetBrains Mono", monospace !important;
}

/* 定义 - 绿色 */
.md-typeset .admonition.definition,
.md-typeset details.definition {
    border-color: #00b8d4;
}
.md-typeset .definition > .admonition-title,
.md-typeset .definition > summary {
    background-color: rgba(0, 184, 212, 0.1);
    border-color: #00b8d4;
}

/* 定理 - 蓝色 */
.md-typeset .admonition.theorem,
.md-typeset details.theorem {
    border-color: #5e72e4;
}
.md-typeset .theorem > .admonition-title,
.md-typeset .theorem > summary {
    background-color: rgba(94, 114, 228, 0.1);
    border-color: #5e72e4;
}
/* ==========================================================================
   极简本地播放器 (Simple Local Player)
   ========================================================================== */
/* ==========================================================================
   极简本地播放器 (固定版)
   ========================================================================== */

/* 1. 容器位置 (固定在右下角) */
.simple-player-floating {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999; 
}

/* 2. 按钮外观 */
.player-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    
    /* 居中图标 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 磨砂玻璃 */
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    
    /* 关键：鼠标放上去是手指形状，不再是十字箭头 */
    cursor: pointer; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.player-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.player-icon svg {
    stroke: #555;
    transition: stroke 0.3s;
}

/* 3. 暗色模式适配 */
[data-md-color-scheme="slate"] .player-icon {
    background: rgba(46, 48, 62, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-md-color-scheme="slate"] .player-icon svg {
    stroke: #ddd;
}

/* 4. 旋转动画 */
.player-icon.playing {
    animation: rotate-player 3s linear infinite;
    border-color: #e67e96; 
}
.player-icon.playing svg {
    stroke: #e67e96;
}

@keyframes rotate-player {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 5. 移动端适配 (稍微抬高，避免挡住底部操作条) */
@media (max-width: 768px) {
    .simple-player-floating {
        bottom: 80px;
        right: 15px;
    }
}
/* ==========================================================================
   2. 全局背景图 (核心修复)
   ========================================================================== */

/* 重要：路径 ../assets/ 指的是从 stylesheets 文件夹向上一级找到 assets 文件夹
   请确保文件名完全匹配
*/


/* ==========================================================================
   3. 磨砂玻璃容器 (让文字清晰)
   ========================================================================== */

/* 正文区域 */
/* ==========================================================================
   3. 磨砂玻璃容器 (修复版：侧边栏自动高度适配)
   ========================================================================== */

/* 1. 正文区域 (中间的文章) - 保持不变 */
.md-content {
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 16px; 
    padding: 20px;
    margin-top: 20px; margin-bottom: 20px;
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* 2. 侧边栏 (左侧导航 + 右侧 TOC) - 强制卡片化 */
.md-sidebar__scrollwrap {
    /* 背景与磨砂 */
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    
    /* 布局间距 */
    padding: 12px;
    margin: 20px 0;
    
    /* --- 核心修复 (解决太长/不适配问题) --- */
    
    /* 1. 强制覆盖 JS 设置的高度，让高度随内容自动收缩 */
    height: auto !important; 
    min-height: 0 !important;
    
    /* 2. 限制最大高度为屏幕高度的 75%，防止顶天立地 */
    max-height: 75vh !important; 
    
    /* 3. 内容超出时显示滚动条 */
    overflow-y: auto !important;
}

/* 3. 清除外层轨道的干扰 */
.md-sidebar {
    background: none !important;
    box-shadow: none !important;
    /* 让侧边栏容器不要强制撑满 */
    height: auto !important; 
}

/* 4. 隐藏侧边栏滚动条 (美观) */
.md-sidebar__scrollwrap::-webkit-scrollbar {
    width: 0 !important; display: none;
}
.md-sidebar__scrollwrap {
    scrollbar-width: none; -ms-overflow-style: none;
}

/* 5. 暗色模式适配 */
[data-md-color-scheme="slate"] .md-content,
[data-md-color-scheme="slate"] .md-sidebar__scrollwrap {
    background-color: rgba(30, 32, 48, 0.85) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
/* ==========================================================================
   4. 首页名片卡 (保留左侧介绍，去除了右侧文章列表样式)
   ========================================================================== */


/* ==========================================================================
   5. 主题切换平滑过渡 (修复版 - 仅针对核心容器)
   ========================================================================== */

/* 只对 body、内容卡片、侧边栏、标题栏应用过渡 
   避免对所有 DOM 元素使用通配符 *
*/

.md-content, 
.md-sidebar, 
.md-header, 
.md-footer,
.md-nav {
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* 伪元素背景图过渡 (之前定义的) */
body::before, 
body::after {
    transition: opacity 0.6s ease-in-out;
}

/* SVG 图标填充色过渡 */
svg {
    transition: fill 0.3s ease, stroke 0.3s ease;
}

/* ==========================================================================
   背景图淡入淡出效果 (通过伪元素实现)
   ========================================================================== */
html, body {
    background: none !important; /* 这一行至关重要，防止白色底色遮挡背景图 */
    background-color: transparent !important;
}
/* 核心：将 body 设为相对定位，为伪元素做准备 */
body {
    position: relative; 
    min-height: 100vh; 
    overflow-x: hidden; 
}

/* 伪元素基类：全屏覆盖，固定不动 */
body::before,
body::after {
    content: '';
    position: fixed; /* 固定在视口 */
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1; /* 确保背景在所有内容之下 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.6s ease-in-out; /* 淡入淡出过渡时间 */
    pointer-events: none; /* 确保不影响鼠标事件 */
}

body::before {
    opacity: 1; /* 默认显示亮色伪元素 */
}
body::after {
    opacity: 0; /* 默认隐藏暗色伪元素 */
}

/* 当切换到暗色模式时 */
body[data-md-color-scheme="slate"]::before {
    opacity: 0; /* 亮色背景淡出 */
}

body[data-md-color-scheme="slate"]::after {
    opacity: 1; /* 暗色背景淡入 */
}

/* ==========================================
   打字机特效
   ========================================== */
.typing-container {
    display: inline-block;
}

.typing-text {
    overflow: hidden; /* 隐藏溢出部分 */
    border-right: 2px solid #e67e96; /* 光标颜色 */
    white-space: nowrap; /* 不换行 */
    margin: 0 auto;
    letter-spacing: 0.1em; /* 字间距 */
    
    /* 动画：打字(2秒) + 光标闪烁 */
    animation: 
        typing 2s steps(8, end), /* 这里的 steps(9) 对应你的字数(9个字)，请根据字数调整 */
        blink-caret 0.75s step-end infinite;
}

/* 打字动画：宽度从0变到100% */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* 光标闪烁动画 */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #e67e96 }
}

/* 开启 3D 硬件加速，防止倾斜时模糊 */
/* 开启 3D 硬件加速，防止倾斜时模糊 */

/* ==========================================
   首页名片卡 (3D 特效修复版)
   ========================================== */
.profile-card {
    flex: 0 0 280px;
    background-color: var(--md-default-bg-color);
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.05);
    /* overflow: hidden; <--- 罪魁祸首在这里，把它删了 */
    
    /* --- 3D 核心设置 --- */
    transform-style: preserve-3d;
    z-index: 10;
    
    /* ✅ 关键修改：
       1. 移除了 transform 0s !important (让 JS 库接管动画)
       2. 加入 will-change 提升性能
    */
    transition: box-shadow 0.3s ease; 
    will-change: transform;
    
    /* 确保没有 animation 干扰 */
    animation: none !important; 
}

/* 悬停时的阴影增强 (让浮动感更强) */
.profile-card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
}

/* 暗色模式适配 */
[data-md-color-scheme="slate"] .profile-card {
    background-color: #2e303e;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* 让内部元素产生位移 (增强 3D 层次感) */
.avatar-wrapper {
    transform: translateZ(50px); /* 头像浮得最高 */
}
.profile-info {
    transform: translateZ(30px); /* 文字浮在中间 */
}
.visitor-badge, .stats-row, .action-buttons {
    transform: translateZ(20px); /* 按钮浮得低一点 */
}


/* ==========================================
   自定义滚动条 (Webkit内核: Chrome, Edge, Safari)
   ========================================== */

/* 滚动条整体宽度 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* 滚动条轨道 (背景) */
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

/* 滚动条滑块 (手指捏住的部分) */
::-webkit-scrollbar-thumb {
    background: #0e55c0; /* 你的主题粉色 */
    border-radius: 4px;
}

/* 鼠标悬停在滑块上时 */
::-webkit-scrollbar-thumb:hover {
    background: #0c3779; /* 加深一点 */
}

/* 暗色模式适配 */
[data-md-color-scheme="slate"] ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}
[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
    background: #0e55c0;
}

/* ==========================================
   正文链接交互动画 (修复版：防止误伤首页按钮)
   ========================================== */

/* 关键：在 :not() 里把 .btn-main 和 .btn-text 加进去 */
.md-typeset a:not(.md-button):not(.headerlink):not(.md-content__button):not(.btn-main) {
    text-decoration: none; 
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px; /* 初始宽度 */
    transition: background-size 0.3s;
    color: var(--md-accent-fg-color); /* 使用主题色 */
}

/* 悬停效果 */
.md-typeset a:not(.md-button):not(.headerlink):not(.md-content__button):hover {
    background-size: 100% 2px; /* 悬停时画线 */
}

/* ==========================================
   Mac 风格代码块 (Mac-style Code Block)
   ========================================== */
.md-typeset pre > code {
    position: relative;
    margin-top: 24px; /* 给上面留出放圆点的位置 */
    border-radius: 8px; /* 圆角 */
}

/* 伪元素画出红黄绿三个点 */
.md-typeset pre > code::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fc625d; /* 红色点 */
    box-shadow: 
        20px 0 #fdbc40, /* 黄色点 */
        40px 0 #35cd4b; /* 绿色点 */
    z-index: 10;
}

/* 调整代码块背景容器，包裹住圆点 */
.highlight {
    background-color: var(--md-code-bg-color);
    border-radius: 8px;
    padding-top: 10px;
}

/* ==========================================
   全屏封面 (Hero Cover) 样式
   ========================================== */

/* 1. 封面容器：占满屏幕高度，减去顶部导航栏高度 */
.landing-cover {
    position: relative;
    width: 100vw;
    height: calc(100vh - 60px); /* 减去 header 高度，防止溢出 */
    
    /* 强制突破 MkDocs 容器限制，全宽显示 */
    margin-left: 50%;
    transform: translateX(-50%);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* 背景图设置 (这里你可以换一张更震撼的大图) */
    /* 如果不设，它会复用 body 的背景，也很和谐 */
    /* background-image: url('../assets/hero_bg.jpg'); */
    /* background-size: cover; background-position: center; */
}

/* 2. 封面内容微调 */
.cover-title {
    font-size: 3rem !important; /* 超大标题 */
    font-weight: 800 !important;
    margin-bottom: 1rem !important;
    /* 渐变文字效果 */
    background: linear-gradient(to right, #e67e96, #5e72e4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.cover-slogan {
    font-size: 1.5rem !important;
    color: var(--md-default-fg-color--light);
    font-style: italic;
    margin-bottom: 3rem !important;
}

/* 3. 按钮组间距 */
.cover-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* 4. 向下滚动箭头动画 */
.scroll-down-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--md-default-fg-color--light);
    animation: bounce 2s infinite;
    cursor: pointer;
    opacity: 0.7;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

/* ==========================================
   调整下方内容布局
   ========================================== */
/* 给下方的内容加一点上边距，防止紧贴封面 */
.hero-layout {
    margin-top: 60px !important;
    padding-bottom: 40px; /* 底部留白 */
}

/* ==========================================================================
   6. 首页大屏特效 (宽松版 - 这里的数字控制间距)
   ========================================================================== */

/* 1. 浮空的英雄大标题 (Z弟弟的数理秘密花园) */
.home-hero-title {
    font-size: 3rem !important; /* 稍微再大一点 */
    font-weight: 800 !important;
    
    /* --- 关键修改：加大间距 --- */
    margin-top: 200px !important;    /* 顶部留空：原60px -> 改为120px (往下挪) */
    margin-bottom: 40px !important;  /* 两行字中间的空隙：原20px -> 改为40px */
    
    text-align: center;
    line-height: 1.2;
    
    /* 渐变色文字 */
    background: linear-gradient(to right, #e67e96, #5e72e4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* 文字投影 */
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));
    
    /* 进场动画 */
    animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 2. 浮空的副标题 (按理来讲...) */
.home-hero-subtitle {
    font-size: 1.5rem !important;
    text-align: center;
    font-style: italic;
    
    /* --- 关键修改：加大底部间距 --- */
    margin-bottom: 200px !important; /* 下方留空：原50px -> 改为100px (离磨砂卡片更远) */
    
    /* 亮色模式字色 */
    color: #444; 
    text-shadow: 0 2px 10px rgba(255,255,255, 0.8);
    
    animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s backwards;
}

/* 暗色模式适配 */
[data-md-color-scheme="slate"] .home-hero-subtitle {
    color: #ddd;
    text-shadow: 0 2px 10px rgba(0,0,0, 0.8);
}

/* 3. 手动构建的磨砂玻璃盒子 */
.home-glass-wrapper {
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    padding: 40px;
    margin: 80px auto 60px auto !important; /* 底部增加一点外边距，防止贴底 */
    max-width: 1100px; 
    
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    
    animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s backwards;
}

/* 暗色模式下的磨砂盒子 */
[data-md-color-scheme="slate"] .home-glass-wrapper {
    background-color: rgba(30, 32, 48, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .home-hero-title { 
        font-size: 2rem !important; 
        margin-top: 80px !important;    /* 移动端稍微紧凑一点，不然首屏全是空白 */
        margin-bottom: 30px !important; 
    }
    .home-hero-subtitle { 
        font-size: 1.1rem !important; 
        margin-bottom: 60px !important; 
    }
    .home-glass-wrapper { padding: 20px; }
}
/* ==========================================
   首页卡片样式 (紧凑精致版)
   ========================================== */
.recent-post-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important; /* 卡片间距从 15px -> 12px */
    margin-top: 20px;
}

.post-card-item {
    display: block !important;
    width: 100% !important;
    margin: 0 !important; 
    padding: 0 !important;
}

.post-card-link {
    display: block !important;
    text-decoration: none !important;
    
    /* 卡片外观 */
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px; /* 圆角稍小一点 */
    padding: 12px 16px;  /* 内边距缩小，更紧凑 */
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.post-card-link:hover {
    transform: translateY(-2px);
    background: rgba(230, 126, 150, 0.1);
    border-color: rgba(230, 126, 150, 0.4);
    box-shadow: 0 4px 12px rgba(230, 126, 150, 0.15);
}

/* 标题 */
.post-card-title {
    display: flex !important;
    align-items: center; 
    gap: 6px;
    
    /* 字号从 1.15rem -> 1.0rem */
    font-size: 1.0rem !important; 
    font-weight: 700 !important;
    color: var(--md-default-fg-color) !important;
    margin-bottom: 4px !important; /* 间距减小 */
}
.post-card-title .icon { font-size: 0.9rem; } /* 图标也缩小 */

/* 日期 */
.post-card-meta {
    display: flex !important;
    align-items: center; 
    gap: 5px;
    
    /* 字号从 0.85rem -> 0.75rem */
    font-size: 0.75rem !important; 
    color: rgba(0, 0, 0, 0.55) !important;
    margin-bottom: 8px !important; /* 间距减小 */
    font-family: "JetBrains Mono", monospace;
    font-weight: 500;
}
.post-card-meta .icon { font-size: 0.75rem; }

/* 预览文字 */
.post-card-preview {
    display: block !important;
    
    /* 字号从 0.95rem -> 0.85rem */
    font-size: 0.85rem !important; 
    color: rgba(0, 0, 0, 0.7) !important;
    line-height: 1.5 !important; /* 行高微调 */
    
    /* 多行省略 */
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 暗色模式适配 */
[data-md-color-scheme="slate"] .post-card-link {
    background: rgba(30, 32, 48, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}
[data-md-color-scheme="slate"] .post-card-meta {
    color: rgba(255, 255, 255, 0.55) !important;
}
[data-md-color-scheme="slate"] .post-card-preview {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ==========================================
   图片美化与图注
   ========================================== */
   
/* 1. 图片容器：居中、加阴影、圆角 */
.md-content img {
    display: block;
    margin: 20px auto; /* 上下留白，水平居中 */
    max-width: 90%;    /* 防止太宽 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 柔和阴影 */
    transition: transform 0.3s;
}

/* 悬停轻微放大 */
.md-content img:hover {
    transform: scale(1.01);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* 2. 自动图注 (利用 title 属性) */
/* 语法：![Alt](image.jpg "这里是图注") */
.md-content img[title] + em {
    display: none; /* 隐藏默认的 em */
}

/* 利用伪元素显示 title 内容 - 需要一点 trick，
   但 MkDocs Material 默认并不直接把 title 渲染成紧跟的元素。
   最简单的方法是：在图片下面手动写一行斜体字，或者使用下面的 CSS 居中你的斜体说明 */

.md-content em {
    display: block;
    text-align: center;
    font-size: 0.85em;
    color: gray;
    margin-top: -10px; /* 紧贴图片底部 */
    margin-bottom: 25px;
}

/* ==========================================
   移动端数学公式横向滚动
   ========================================== */
.md-typeset .MathJax {
    overflow-x: auto;      /* 超出范围允许滚动 */
    overflow-y: hidden;    /* 隐藏垂直滚动条 */
    max-width: 100%;       /* 限制最大宽度 */
    padding-bottom: 4px;   /* 预留滚动条位置 */
}

/* 针对块级公式 (Display Math) */
mjx-container[display="true"] {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
}

/* ==========================================
   页脚净化
   ========================================== */
/* 隐藏 "Made with..." 这一行 */
.md-footer-copyright__text .md-footer-copyright__citation {
    display: none;
}

/* 调整版权文字居中 */
.md-footer-copyright {
    text-align: center;
    width: 100%;
}