@charset "UTF-8";

/* 1. 变量定义 */
:root { 
    --primary-color: #4a90e2; 
    --text-main: #000000; 
    --text-muted: #555555;
    --glass-bg: rgba(255, 255, 255, 0.85); 
    --glass-border: rgba(255, 255, 255, 0.4); 
    --shadow: 0 10px 40px 0 rgba(31, 38, 135, 0.15); 
    --code-bg: #f6f8fa; 
    --transition-speed: 0.3s;
}

.dark-mode {
    --text-main: rgba(255, 255, 255, 0.95); 
    --text-muted: rgba(255, 255, 255, 0.7);
    --glass-bg: rgba(25, 25, 30, 0.94); 
    --glass-border: rgba(255, 255, 255, 0.12);
    --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.7);
    --code-bg: #1e1e1e;
}

/* 2. 全局基础 */
body, html { 
    margin: 0; padding: 0; min-height: 100vh; 
    font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; 
    color: var(--text-main); 
    background-color: #f0f2f5; 
    transition: background-color var(--transition-speed), color var(--transition-speed);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; /* 防止横向滚动条 */
}

.dark-mode body, .dark-mode html { background-color: #080808 !important; }

.background { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: url('https://personalweb-1340173525.cos.ap-shanghai.myqcloud.com/bg.png') no-repeat center center fixed; 
    background-size: cover; z-index: -1; 
}

/* 3. 布局结构 - 核心锁定 */
.wrapper { 
    max-width: 1400px; margin: 0 auto; 
    display: grid; grid-template-columns: 260px 1fr 280px; 
    gap: 20px; padding: 40px 20px; 
    min-height: calc(100vh - 80px); 
    align-items: start; /* 关键：确保所有列从顶部开始，不拉伸 */
}

.main-content { animation: slideInUp 0.8s ease; min-width: 0; }

/* 4. 侧边栏 - 粘性定位强化 */
.sidebar { 
    position: sticky; top: 40px; 
    align-self: start; 
    height: fit-content; padding: 30px 20px; text-align: center; 
    animation: slideInLeft 0.8s ease; 
}

.extra-sidebar { 
    position: sticky; top: 40px; 
    align-self: start; /* 关键：确保右侧栏固定感 */
    height: fit-content; 
    display: flex; flex-direction: column; gap: 20px; 
    animation: slideInRight 0.8s ease; 
}

/* 5. 组件 */
.glass-card { 
    background: var(--glass-bg) !important; 
    backdrop-filter: blur(15px) saturate(180%); 
    -webkit-backdrop-filter: blur(15px) saturate(180%); 
    border-radius: 24px; border: 1px solid var(--glass-border); 
    box-shadow: var(--shadow); 
}

.content-card { 
    padding: 40px; min-height: 400px; max-width: 850px; margin: 0 auto; 
    overflow-wrap: break-word; font-size: 1.05em; line-height: 1.75; 
}

.extra-box { padding: 20px; position: relative; }
.extra-title { font-size: 0.95em; font-weight: bold; color: var(--primary-color); margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }

/* 6. 深色模式加亮 */
.dark-mode .content-card, .dark-mode .content-card p, .dark-mode .content-card li, .dark-mode .content-card h1, .dark-mode .content-card h2, .dark-mode .content-card h3, .dark-mode .extra-sidebar, .dark-mode .extra-box, .dark-mode .history-item, .dark-mode #cv-content p, .dark-mode .sidebar h2, .dark-mode .post-preview-card h3 {
    color: #fafafa !important; font-weight: 450;
}
.dark-mode .post-preview-card p, .dark-mode #clock-date, .dark-mode .history-year { color: var(--text-muted) !important; }

/* 7. 代码块 */
div.highlighter-rouge, div.highlighter-rouge div.highlight, div.highlighter-rouge pre.highlight, .highlight pre, pre, code {
    background-color: var(--code-bg) !important; color: var(--text-main) !important; border: 1px solid var(--glass-border); border-radius: 12px;
}
.dark-mode pre, .dark-mode .highlight, .dark-mode .highlight pre, .dark-mode code {
    background-color: #1e1e1e !important; color: #eeeeee !important;
}

/* 8. 导航与社交 */
.avatar { width: 100px; height: 100px; border-radius: 50%; border: 4px solid white; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 15px; transition: transform 0.5s; cursor: pointer; }
.avatar:hover { transform: rotate(360deg) scale(1.1); }
.social-links { display: flex; justify-content: center; gap: 15px; margin-bottom: 20px; }
.social-links a { color: var(--text-muted); font-size: 1.1em; transition: 0.3s; }
.dark-mode .social-links a { color: #ffffff !important; }

.nav-item { 
    display: flex; align-items: center; gap: 10px; padding: 10px 15px; margin: 5px 0; border-radius: 12px; 
    text-decoration: none; color: var(--text-main); background: rgba(255,255,255,0.1); transition: 0.3s; 
}
.dark-mode .nav-item { color: #ffffff !important; background: rgba(255,255,255,0.05) !important; }
.nav-item:hover { background: var(--primary-color) !important; color: white !important; transform: translateX(5px); }

/* 9. 主题按钮 */
#theme-toggle {
    position: fixed !important; top: 20px !important; right: 20px !important; left: unset !important;
    width: 45px; height: 45px; border-radius: 12px; background: var(--glass-bg); backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border); box-shadow: var(--shadow); cursor: pointer; z-index: 10005 !important;
    display: flex; align-items: center; justify-content: center; font-size: 1.2em; color: var(--primary-color);
}

/* 10. 响应式 */
@media (max-width: 1100px) { 
    .wrapper { grid-template-columns: 240px 1fr; } 
    .extra-sidebar { display: none; } 
}
@media (max-width: 850px) { 
    .wrapper { grid-template-columns: 1fr; padding: 20px 10px; } 
    .sidebar { position: relative; top: 0; width: 100%; box-sizing: border-box; } 
}