/* 全局变量 */
:root {
    --primary: #2c3e50;
    --accent: #e67e22;
    /* 👇 新增这一行 (对应 #e67e22 的 RGB 值)，千万别漏了！ */
    --accent-rgb: 230, 126, 34; 
    --bg: #fdfbf7; /* 暖白纸张色 */
    --card-bg: #ffffff;
    --text: #4a4a4a;
    --line-color: #e0e0e0;
}

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

body {
    /* background-color: #f3f4f6; */
    background: linear-gradient(to bottom, #eef2f3, #ffffff);
    font-family: 'Nunito', 'Noto Serif SC', sans-serif;
    color: var(--text);
    line-height: 1.6;
}

/* 1. 顶部 Hero 区域 */
.hero {
    position: relative;
    height: 60vh;
    background: url('https://picsum.photos/1920/1080?random=1') no-repeat center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-bottom: 60px;
    z-index: 1; 
}
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px; /* 渐变的高度 */
    /* 从透明渐变到刚才设置的 body 背景色 #f3f4f6 */
    background: linear-gradient(to bottom, transparent, #f3f4f6);
    z-index: -1; /* 放在文字后面，背景图前面 */
}

.hero .overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(3px);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    padding: 20px;
}

.avatar img {
    width: 120px; height: 120px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.8);
    object-fit: cover;
    margin-bottom: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.hero h1 { font-size: 2.5rem; margin-bottom: 10px; font-weight: 700; letter-spacing: 2px; }
.quote {
    font-family: 'Noto Serif SC', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 20px;
    
    /* 打字机效果核心 */
    display: inline-block;
    overflow: hidden; /* 隐藏溢出文字 */
    border-right: 2px solid rgba(255,255,255,0.8); /* 光标 */
    white-space: nowrap; /* 不换行 */
    animation: typing 3.5s steps(30, end), blink-caret 0.75s step-end infinite;
    max-width: 100%;
}
/* 打字动画 */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}
/* 光标闪烁动画 */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: rgba(255,255,255,0.8); }
}
.stats span { margin: 0 15px; font-size: 0.9rem; opacity: 0.8; }

/* 2. 时光轴核心布局 */
.timeline-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    padding-bottom: 100px;
}

/* 中间的线 */
.line {
    position: absolute;
    left: 120px; /* 左侧日期宽度的位置 */
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--line-color);
    z-index: 0;
}

/* 单条动态 */
.moment {
    display: flex;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
    /* 删掉了 opacity, transform, animation */
    /* 现在的动画全权交给 AOS 来接管 */
}


/* 左侧日期 */
.moment-date {
    width: 100px;
    text-align: right;
    padding-right: 20px;
    flex-shrink: 0;
    color: #999;
}
.moment-date .day { font-size: 1.8rem; font-weight: 700; color: var(--primary); line-height: 1; }
.moment-date .month { font-size: 0.9rem; text-transform: uppercase; }
.moment-date .year { font-size: 0.8rem; opacity: 0.6; }

/* 节点圆点 */
.moment-dot {
    position: absolute;
    left: 114px; /* 根据线的位置调整 */
    top: 10px;
    width: 14px;
    height: 14px;
    background: white;
    border: 3px solid var(--accent);
    border-radius: 50%;
    z-index: 2;
}

/* 右侧内容卡片 */
.moment-content {
    background: #ffffff; /* 纯白卡片 */
    padding: 25px;
    border-radius: 12px;
    
    /* 👇 这里的阴影改得更柔和、更深一点，制造悬浮感 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.08); 
    border: 1px solid rgba(255,255,255,0.5); /* 加个微弱的高光边框 */
    
    flex-grow: 1;
    margin-left: 40px;
    transition: transform 0.3s;
}
.moment-content:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

.moment-content h3 { margin-bottom: 10px; color: var(--primary); font-size: 1.2rem; }
.moment-content p { color: #666; font-size: 1rem; line-height: 1.7; margin-bottom: 15px; white-space: pre-line; }

/* 图片网格 (仿朋友圈) */
.gallery {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
/* 只有1张图时 */
.gallery.count-1 { grid-template-columns: 1fr; max-width: 60%; }
/* 2或4张图时 */
.gallery.count-2, .gallery.count-4 { grid-template-columns: repeat(2, 1fr); max-width: 80%; }
/* 3, 5-9张图时 */
.gallery.count-3, .gallery.count-5, .gallery.count-6, .gallery.count-7, .gallery.count-8, .gallery.count-9 {
    grid-template-columns: repeat(3, 1fr);
}

.gallery img {
    width: 100%;
    aspect-ratio: 1 / 1; /* 正方形裁切 */
    object-fit: cover;
    border-radius: 6px;
    cursor: zoom-in;
    transition: opacity 0.2s;
    background-color: #eee;

}
.gallery img:hover { 
    opacity: 0.75; 
}
/* 底部 */
footer { text-align: center; padding: 40px; color: #aaa; font-size: 0.9rem; border-top: 1px solid #eee; margin-top: 40px; }

/* Lightbox */
.lightbox {
    display: none; position: fixed; z-index: 1000;
    left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.9);
}
.lightbox-content {
    margin: auto; display: block;
    max-width: 90%; max-height: 90vh;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
}
.close {
    position: absolute; top: 20px; right: 35px;
    color: #f1f1f1; font-size: 40px; font-weight: bold;
    cursor: pointer;
}

/* 移动端适配 */
/* 移动端适配优化 (替换原有代码) */
@media (max-width: 600px) {
    /* 1. 把中间的竖线移到屏幕最左侧，腾出右边空间 */
    .line { 
        left: 20px; 
    }

    /* 2. 圆点跟随竖线移动 */
    .moment-dot { 
        left: 14px; /* (20px线的位置) - (14px圆点宽的一半) + (1px线宽) ≈ 14px */
        top: 5px;   /* 调整圆点高度，让它跟日期对齐 */
    }

    /* 3. 每一个时间块的布局调整 */
    .moment { 
        flex-direction: column; /* 上下排列：上面是日期，下面是卡片 */
        margin-left: 0; 
        margin-bottom: 40px;
        padding-left: 45px; /* 关键：给左侧腾出45px空间，放竖线和圆点 */
        position: relative;
    }

    /* 4. 日期栏优化：不再拥挤，文字变小一点 */
    .moment-date { 
        text-align: left; 
        width: 100%; 
        margin-bottom: 8px; 
        padding-left: 0; 
        display: flex; 
        align-items: baseline; 
        gap: 6px;
    }
    /* 防止日期数字过大遮挡 */
    .moment-date .day { font-size: 1.4rem; } 
    .moment-date .month { font-size: 0.8rem; }

    /* 5. 内容卡片填满剩余空间 */
    .moment-content { 
        margin-left: 0; 
        width: 100%; 
        padding: 15px; /* 手机上内边距稍微改小一点，省空间 */
    }

    /* 6. 图片网格优化：手机上强制最多显示2列，防止太小看不清 */
    .gallery {
        gap: 4px;
    }
    .gallery.count-1 { max-width: 100%; }
    /* 3张图以上也强制2列显示，视觉更好 */
    .gallery.count-3, .gallery.count-5, .gallery.count-6, 
    .gallery.count-7, .gallery.count-8, .gallery.count-9 {
        grid-template-columns: repeat(2, 1fr); 
    }
    
    /* 7. 顶部大图高度减小，避免手机上一屏全是图 */
    .hero { height: 40vh; }
    .hero h1 { font-size: 1.8rem; }
}

/* 音乐播放器悬浮球 */
.music-player {
    position: fixed;
    bottom: 30px;
    left: 30px; /* 放在左下角 */
    z-index: 999;
}
.music-icon {
    width: 50px; height: 50px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform 0.3s;
}
.music-icon:hover { transform: scale(1.1); }
.music-icon i { color: var(--primary); font-size: 20px; }
/* 旋转动画 (播放时) */
.music-icon.playing { animation: rotate 3s linear infinite; background: var(--accent); }
.music-icon.playing i { color: white; }
@keyframes rotate { 100% { transform: rotate(360deg); } }

/* 搜索框样式 */
.search-box {
    position: relative;
    max-width: 400px;
    margin: 0 auto 40px; /* 居中且底部留空 */
    z-index: 2;
}
.search-box input {
    width: 100%;
    padding: 12px 20px 12px 45px;
    border-radius: 30px;
    border: 1px solid #ddd;
    background: rgba(255,255,255,0.9);
    outline: none;
    transition: 0.3s;
    font-family: 'Nunito', sans-serif;
}
.search-box input:focus { box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: var(--accent); }
.search-box i {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    color: #999;
}

/* 回到顶部按钮 */
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px; height: 45px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0; pointer-events: none; /* 默认隐藏 */
    transition: 0.3s;
    z-index: 99;
}
#back-to-top.show { opacity: 1; pointer-events: all; }
#back-to-top:hover { background: var(--accent); transform: translateY(-3px); }
/* 修复 1: 独立的搜索区域，解决拥挤别扭的问题 */
.search-section {
    padding: 20px 0;
    background: transparent;
    position: relative;
    z-index: 10;
    margin-top: -30px; /* 让它稍微往上盖一点 header，产生悬浮感 */
}

.search-box {
    max-width: 400px;
    margin: 0 auto; /* 居中 */
    position: relative;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 加重阴影，让它更明显 */
    border-radius: 30px;
}
.search-box input {
    background: white; /* 确保背景是白的，不是透明的 */
}

/* 修复 2: 打字机效果优化 (自动适应宽度，无限循环播放) */
.quote-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.quote {
    font-family: 'Noto Serif SC', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: rgba(255,255,255,0.9);
    
    /* 核心修改：使用 fit-content 让光标紧贴文字 */
    width: fit-content;
    display: inline-block;
    overflow: hidden;
    border-right: 2px solid rgba(255,255,255,0.8);
    white-space: nowrap;
    margin: 0;
    /* 修改动画：5秒打字，无限循环(infinite)让你能看到效果 */
    animation: typing 4s steps(20, end) infinite alternate, blink-caret 0.75s step-end infinite;
}

/* 修复 3: 音乐播放器和回到顶部 (提高层级，确保不被遮挡) */
.music-player {
    position: fixed;
    bottom: 30px; 
    left: 30px;
    z-index: 9999; /* 层级极高 */
}
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999; /* 层级极高 */
    /* 注意：它默认是隐藏的，只有下滑才会出来！ */
}

/* 修复 4: 懒加载的视觉反馈 (可选，给未加载的图片加个灰色背景) */
.gallery img {
    background-color: #eee; /* 图片还没刷出来时显示灰色 */
    min-height: 100px;      /* 占位高度 */
}
/* 底部悬浮备案号样式 */
.login-footer {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    color: rgba(255, 255, 255, 0.5); /* 半透明白色，不抢眼 */
    font-size: 0.8rem;
    z-index: 10;
}

.login-footer a {
    color: inherit; /* 跟随父元素颜色 */
    text-decoration: none;
    transition: 0.3s;
}

.login-footer a:hover {
    color: rgba(255, 255, 255, 1); /* 鼠标放上去变亮 */
    text-decoration: underline;
}

/* =========================================
   📂 藏经阁 (典藏卡片版 - 美化样式)
   ========================================= */

/* 网格布局：稍微放宽一点间距 */
.resource-grid-compact {
    display: grid;
    /* 最小宽度调大到 160px，让横向卡片有足够空间 */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
    padding-top: 10px;
}

/* --- 全新雅致卡片样式 --- */
.resource-card-elegant {
    /* 布局：Flex 横向排列 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: flex-start;
    text-align: left; /* 文字靠左 */
    
    /* 配色与质感 */
    background: #fff; /* 纯净白背景 */
    border: 1px solid rgba(0,0,0,0.06); /* 极淡的边框 */
    border-radius: 12px; /* 更大的圆角 */
    padding: 12px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 更顺滑的动画 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.04); /* 默认微弱阴影，增加浮起感 */
    position: relative;
    overflow: hidden;
}

/* 悬停效果：高级感 */
.resource-card-elegant:hover {
    transform: translateY(-3px); /* 轻微上浮 */
    box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.15); /* 悬停时带主题色的柔光阴影 */
    border-color: rgba(var(--accent-rgb), 0.3); /* 边框微亮 */
}
/* (可选) 给卡片加一个极其微弱的暖色背景渐变 */
.resource-card-elegant::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.05) 0%, rgba(255,255,255,0) 50%);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 0;
}
.resource-card-elegant:hover::before {
    opacity: 1;
}


/* --- 左侧图标区域 --- */
.icon-wrapper {
    flex-shrink: 0; /* 防止图标被挤压 */
    width: 42px;
    height: 42px;
    /* 图标背景：使用淡淡的主题色，非常显高级 */
    background: rgba(var(--accent-rgb), 0.1); 
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px; /* 图标和文字的间距 */
    position: relative;
    z-index: 1;
}

.icon-wrapper i {
    /* 图标颜色：直接使用你的主题色，统一视觉 */
    color: var(--accent); 
    font-size: 20px; /* 大小适中 */
    opacity: 0.9;
}

/* --- 右侧文字区域 --- */
.file-info {
    flex-grow: 1; /* 占据剩余空间 */
    overflow: hidden; /* 超出隐藏 */
    position: relative;
    z-index: 1;
}

/* 文件名 */
.file-info .name {
    font-size: 0.85rem;
    /* 字体颜色：使用暖深灰色，不再是突兀的纯黑 */
    color: #5a4d44; 
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 6px;
    
    /* 单行显示，超出省略，保持整洁 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 元信息 (PDF标签 和 大小) */
.file-info .meta {
    display: flex;
    align-items: center;
    font-size: 0.7rem;
    color: #998a7b; /* 暖浅灰色 */
}

/* PDF 小标签 */
.meta .format {
    /* 使用主题色作为背景的小标签 */
    background: var(--accent);
    color: #fff;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.6rem;
    margin-right: 8px;
    letter-spacing: 0.5px;
}