/* =========================================================
   Miku Theme Global CSS - 初音未来清爽主题
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@300;400;700&display=swap');

:root {
    /* 核心配色：初音绿与霜白 */
    --miku-primary: #39C5BB;     /* 初音标志绿 */
    --miku-light: #E0F7F6;       /* 极淡绿背景 */
    --miku-hover: #26A69A;       /* 深绿交互色 */
    --sakura-pink: #FFB7C5;      /* 樱花粉点缀 */
    
    /* 文本配色 */
    --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;
}

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

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

/* --- 全局背景 (视频或图片) --- */
.site-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -2; object-fit: cover;
    background-size: cover; background-position: center;
}
/* 遮罩层，让背景变淡，凸显前景内容 */
.site-overlay {
    position: fixed; inset: 0; z-index: -1;
    background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(224,247,246,0.8) 100%);
    backdrop-filter: blur(5px); /* 微微模糊背景 */
}

/* ================= 导航栏 (二次元弹跳风格) ================= */
.miku-header {
    position: fixed; top: 0; width: 100%; height: 70px;
    background: var(--glass-bg); backdrop-filter: blur(12px);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 5%; z-index: 1000;
    border-bottom: 2px solid var(--miku-primary);
    box-shadow: var(--shadow-soft);
}

.miku-logo a {
    font-family: 'Ma Shan Zheng', cursive; font-size: 28px;
    color: var(--miku-primary); text-decoration: none;
    display: flex; align-items: center; gap: 8px; transition: 0.3s;
}
.miku-logo a:hover { transform: scale(1.05); text-shadow: 0 0 10px var(--miku-primary); }

.miku-nav { display: flex; list-style: none; gap: 20px; align-items: center; height: 100%; margin: 0; }
.miku-nav > li { position: relative; height: 100%; display: flex; align-items: center; }

.miku-nav > li > a {
    text-decoration: none; color: var(--text-main); font-weight: 700;
    padding: 8px 16px; border-radius: 20px; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: flex; align-items: center; gap: 6px;
}

/* 悬停动画：二次元弹跳 */
.miku-nav > li:hover > a {
    background: var(--miku-primary); color: white;
    transform: translateY(-3px); box-shadow: 0 4px 12px rgba(57,197,187,0.4);
}

/* 下拉菜单修复与美化 */
.miku-dropdown::after {
    content: ''; position: absolute; top: 50px; left: 0; width: 100%; height: 20px; background: transparent; display: none;
}
.miku-nav > li:hover::after { display: block; }

.dropdown-menu {
    position: absolute; top: 65px; left: 50%;
    transform: translateX(-50%) scaleY(0); transform-origin: top center;
    background: white; min-width: 150px; border-radius: var(--radius-md);
    padding: 10px 0; opacity: 0; visibility: hidden;
    box-shadow: var(--shadow-soft); border: 2px solid var(--miku-primary);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* 果冻弹跳效果 */
}

/* 顶部小三角 */
.dropdown-menu::before {
    content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 10px; height: 10px; background: white;
    border-top: 2px solid var(--miku-primary); border-left: 2px solid var(--miku-primary);
}

.miku-nav > li:hover .dropdown-menu {
    opacity: 1; visibility: visible; transform: translateX(-50%) scaleY(1);
}

.dropdown-menu li a {
    display: block; padding: 10px 20px; color: var(--text-sub);
    text-decoration: none; font-size: 14px; font-weight: 600; text-align: center;
    transition: all 0.2s;
}
.dropdown-menu li a:hover {
    color: var(--miku-primary); background: var(--miku-light);
    padding-left: 25px; /* 向右滑动的交互感 */
}

/* ================= 页面通用布局 (不再使用 calc 计算) ================= */
.page-layout {
    display: flex; max-width: 1200px; margin: 100px auto 40px;
    gap: 30px; padding: 0 20px; align-items: flex-start;
}

/* 左侧边栏 (粘性悬浮) */
.glass-sidebar {
    width: 260px; flex-shrink: 0;
    background: var(--glass-bg); backdrop-filter: blur(15px);
    border: var(--glass-border); border-radius: var(--radius-lg);
    padding: 24px; box-shadow: var(--shadow-soft);
    position: sticky; top: 90px; /* 完美解决随页面滚动的问题 */
}

.sidebar-title {
    font-size: 18px; color: var(--miku-primary); font-weight: 700;
    margin-bottom: 20px; text-align: center; border-bottom: 2px dashed var(--miku-light); padding-bottom: 10px;
}

.sidebar-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sidebar-list a {
    display: block; padding: 10px 15px; text-decoration: none;
    color: var(--text-sub); border-radius: var(--radius-md); font-weight: 600; transition: 0.3s;
}
.sidebar-list a:hover, .sidebar-list a.active {
    background: var(--miku-light); color: var(--miku-primary); transform: translateX(5px);
}

/* 右侧主内容区 */
.glass-main {
    flex: 1; background: var(--glass-bg); backdrop-filter: blur(15px);
    border: var(--glass-border); border-radius: var(--radius-lg);
    padding: 40px; box-shadow: var(--shadow-soft); min-height: 80vh;
}

.glass-main h1 { color: var(--miku-primary); font-size: 32px; margin-bottom: 20px; }
.glass-main h2 { color: var(--text-main); font-size: 24px; margin: 30px 0 15px; border-left: 4px solid var(--miku-primary); padding-left: 10px; }
.glass-main p { margin-bottom: 15px; color: #475569; }

/* ================= 二次元 Toast 提示框 ================= */
#miku-toast {
    position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
    background: var(--miku-primary); color: white; padding: 12px 30px;
    border-radius: 30px; font-weight: bold; box-shadow: 0 10px 30px rgba(57,197,187,0.4);
    z-index: 9999; transition: top 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#miku-toast.show { top: 85px; }

/* 响应式 */
@media (max-width: 768px) {
    .page-layout { flex-direction: column; }
    .glass-sidebar { width: 100%; position: relative; top: 0; }
    .miku-nav { display: none; } /* 移动端应单独做汉堡菜单 */
    .miku-header { padding: 0 20px; }
}