/* 引入免费且高级的思源黑体与宋体 */
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@300;400;700&family=Noto+Serif+SC:wght@700;900&display=swap');

:root {
    /* 核心色彩规范 (统一为 Miku 绿系) */
    --miku-primary: #39C5BB;     /* 初音绿 */
    --miku-hover: #26A69A;       /* 深绿交互色 */
    --miku-light: #E0F7F6;       /* 极淡绿背景 */
    --text-main: #2C3E50;        /* 主文字，深蓝灰，护眼且高级 */
    --text-sub: #78909C;         /* 辅助文字 */
    /* 毛玻璃特效参数 */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: 1px solid rgba(57, 197, 187, 0.3);
    --shadow-soft: 0 8px 30px rgba(57, 197, 187, 0.12);
    --radius-lg: 20px;
    --radius-md: 12px;
    --nav-height: 70px;
}

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

body {
    font-family: 'Noto Sans SC', sans-serif;
    color: var(--text-main);
    background-color: #f4f8fb;
    line-height: 1.6;
    overflow-x: hidden;
}

/* --- 统一的高清毛玻璃背景 --- */
.site-bg {
    position: fixed; inset: 0; z-index: -2;
    /* 请确保图片路径正确 */
    background-image: url('../changli.jpg'); 
    background-size: cover; background-position: center;
    filter: blur(8px); transform: scale(1.05);
}
.site-overlay {
    position: fixed; inset: 0; z-index: -1;
    background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(224,247,246,0.8) 100%);
}

/* --- 玻璃质感面板基础类 --- */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

/* ================= 导航栏 (Miku 风格) ================= */
.miku-header {
    position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-height);
    background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 50px; z-index: 1000;
    border-bottom: 3px solid var(--miku-primary);
    box-shadow: var(--shadow-soft);
}
.miku-logo a {
    font-family: 'ZCOOL KuaiLe', cursive; font-size: 24px;
    color: #333; text-decoration: none; display: flex; align-items: center; transition: 0.3s;
}
.miku-logo a::before {
    content: '\f001'; font-family: "Font Awesome 6 Free"; font-weight: 900;
    color: var(--miku-primary); margin-right: 10px; animation: bounce 2s infinite;
}
.miku-logo a:hover { color: var(--miku-primary); }

.miku-nav { display: flex; list-style: none; gap: 15px; height: 100%; align-items: center;}
.miku-nav > li { position: relative; height: 100%; display: flex; align-items: center;}
.miku-nav > li > a {
    text-decoration: none; color: #333; font-weight: 600; font-size: 15px;
    padding: 8px 16px; border-radius: 20px; transition: 0.3s; display: flex; align-items: center; gap: 6px;
}
.miku-nav > li > a i { color: var(--text-sub); transition: 0.3s; }
.miku-nav > li:hover > a { background: var(--miku-primary); color: #fff; transform: translateY(-2px); }
.miku-nav > li:hover > a i { color: #fff; }

/* 下拉菜单修复 (CSS 自动生成单个箭头) */
.miku-dropdown > a::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: 10px; margin-left: 4px; transition: 0.3s;
}
.miku-dropdown:hover > a::after { transform: rotate(180deg); }
.miku-dropdown::after { content: ''; position: absolute; top: 50px; left: 0; width: 100%; height: 25px; }

/* 下拉框本体 */
.dropdown-menu {
    position: absolute; top: 65px; left: 50%; transform: translateX(-50%) translateY(10px);
    background: #fff; min-width: 160px; border-radius: var(--radius-md); padding: 10px 0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
    border: 2px solid var(--miku-primary); /* 统一绿色边框 */
    opacity: 0; visibility: hidden; transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); text-align: center; list-style: none;
}
.dropdown-menu::before {
    content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px; background: #fff; 
    border-top: 2px solid var(--miku-primary); border-left: 2px solid var(--miku-primary); /* 统一绿色小三角 */
}
.miku-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.dropdown-menu li a { 
    display: block; padding: 12px 20px; color: var(--text-sub); text-decoration: none; 
    font-size: 14px; transition: 0.2s; white-space: nowrap;
}
/* 统一风格的 Hover 效果 */
.dropdown-menu li a:hover { 
    color: var(--miku-primary) !important; /* 统一绿色字体 */
    background: var(--miku-light) !important; /* 统一极淡绿背景 */
    font-weight: bold; 
    letter-spacing: 1px; 
}

@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ================= 1. 知识库模板布局 (Docs Layout) ================= */
.doc-container {
    display: flex; max-width: 1400px; margin: calc(var(--nav-height) + 30px) auto 40px;
    padding: 0 20px; gap: 30px; align-items: flex-start;
}

.doc-sidebar {
    width: 280px; flex-shrink: 0; padding: 25px 20px;
    position: sticky; top: calc(var(--nav-height) + 20px);
    max-height: calc(100vh - var(--nav-height) - 40px); overflow-y: auto;
}
.doc-sidebar::-webkit-scrollbar { display: none; }

.sidebar-title { font-size: 18px; color: var(--miku-primary); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px dashed var(--miku-light); display: flex; align-items: center; gap: 8px;}
.sidebar-list { list-style: none; }
.sidebar-list li { margin-bottom: 8px; }
.sidebar-list a {
    display: flex; align-items: center; gap: 10px; padding: 10px 15px;
    color: var(--text-main); text-decoration: none; font-size: 15px; font-weight: 600;
    border-radius: var(--radius-md); transition: 0.3s;
}
.sidebar-list a i { color: var(--text-sub); font-size: 14px; transition: 0.3s;}
.sidebar-list a:hover, .sidebar-list a.active {
    background: var(--miku-light); color: var(--miku-hover); transform: translateX(5px);
}
.sidebar-list a:hover i, .sidebar-list a.active i { color: var(--miku-primary); }

.doc-content { flex: 1; padding: 40px 50px; min-height: 80vh; }
.doc-title { font-family: 'Noto Serif SC', serif; font-size: 36px; color: var(--text-main); margin-bottom: 15px; }
.doc-meta { display: flex; gap: 10px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,0.05); }
.tag { background: var(--miku-light); color: var(--miku-hover); padding: 4px 12px; border-radius: 6px; font-size: 13px; font-weight: bold; }
.tag.original { background: linear-gradient(135deg, #39C5BB, #26A69A); color: white; }

.article-body h2 { font-size: 24px; color: var(--text-main); margin: 40px 0 20px; padding-left: 12px; border-left: 5px solid var(--miku-primary); }
.article-body p { font-size: 16px; color: var(--text-main); line-height: 1.8; margin-bottom: 16px; }
.article-body ul, .article-body ol { margin: 0 0 16px 25px; color: var(--text-main); line-height: 1.8; }
.callout { background: rgba(57,197,187,0.05); border: 1px solid rgba(57,197,187,0.2); border-left: 4px solid var(--miku-primary); border-radius: var(--radius-md); padding: 20px; margin: 20px 0; }
.callout p:last-child { margin-bottom: 0; }

/* ================= 2. 资源站模板布局 (Hub Layout) ================= */
.blog-layout {
    display: flex; max-width: 1300px; margin: calc(var(--nav-height) + 30px) auto 40px;
    padding: 0 20px; gap: 30px; align-items: flex-start;
}
.hub-content { flex: 1; width: 100%; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.resource-card {
    background: #fff; border: var(--glass-border); border-radius: var(--radius-lg);
    padding: 25px; text-decoration: none; color: var(--text-main); transition: 0.3s;
    display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-soft);
}
.resource-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(57,197,187,0.3); border-color: var(--miku-primary); }
.resource-card i { font-size: 32px; color: var(--miku-primary); margin-bottom: 10px; }
.resource-card h3 { font-size: 20px; color: var(--text-main); }
.resource-card p { font-size: 14px; color: var(--text-sub); }

/* ================= 3. 个人简历模板布局 (Resume Layout) ================= */
.resume-container { max-width: 900px; margin: calc(var(--nav-height) + 40px) auto; padding: 0 20px; }
.resume-header { display: flex; align-items: center; gap: 30px; padding: 40px; margin-bottom: 30px; }
.resume-avatar { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; border: 4px solid white; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.resume-title h1 { font-family: 'Noto Serif SC', serif; font-size: 42px; color: var(--text-main); margin-bottom: 5px; }
.resume-title p { font-size: 18px; color: var(--miku-hover); font-weight: bold; }

.resume-section { padding: 40px; margin-bottom: 30px; }
.resume-section h2 { font-size: 24px; color: var(--miku-primary); margin-bottom: 25px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 10px; }
.timeline-item { position: relative; padding-left: 20px; border-left: 2px solid var(--miku-light); margin-bottom: 25px; }
.timeline-item::before { content: ''; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--miku-primary); border: 2px solid white; }
.timeline-item h3 { font-size: 18px; color: var(--text-main); }
.timeline-item .date { font-size: 14px; color: var(--text-sub); margin-bottom: 8px; font-weight: bold; }
.skills-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.skill-tag { background: var(--miku-light); color: var(--miku-hover); padding: 8px 18px; border-radius: 30px; font-size: 14px; font-weight: bold; border: 1px solid rgba(57,197,187,0.2); }

/* ================= 响应式 ================= */
@media (max-width: 900px) {
    .miku-header { padding: 0 20px; }
    .miku-nav { display: none; }
    .doc-container, .blog-layout { flex-direction: column; }
    .doc-sidebar { width: 100%; position: relative; top: 0; max-height: none; }
    .doc-content { padding: 30px 20px; }
    .resume-header { flex-direction: column; text-align: center; }
}