:root {  
    --page-bg: #3D444C;        
    --card-bg: #4A525A;        
    --header-bg: #575F67;      
    --border: rgba(255, 255, 255, 0.1);  
    --text-main: #FFFFFF;  
    --text-dim: #BDC3C7;  
    --accent-blue: #5FB3B3;  
}  
  
/* --- 基础布局：Footer 触底 --- */  
html, body { margin: 0; padding: 0; }  
body {  
    background-color: var(--page-bg);  
    color: var(--text-dim);  
    font-family: 'Fira Code', 'Consolas', 'PingFang SC', monospace;  
    display: flex;   
    flex-direction: column;   
    min-height: 100vh;  
    line-height: 1.6;  
    -webkit-font-smoothing: antialiased;  
}  
  
* { box-sizing: border-box; }  
  
/* --- 1. 顶部导航 --- */  
header.site-nav {  
    flex-shrink: 0;   
    background: var(--header-bg);   
    border-bottom: 1px solid var(--border);  
    height: 60px;   
    position: sticky;   
    top: 0;   
    z-index: 1000;  
}  
.nav-inner {  
    max-width: 1000px;   
    margin: 0 auto;   
    height: 100%;  
    display: flex;   
    justify-content: space-between;   
    align-items: center;   
    padding: 0 20px;  
}  
.logo {   
    color: var(--text-main);   
    text-decoration: none;   
    letter-spacing: 1.5px;   
    font-size: 13px;   
    font-weight: 300;   
}  
/* 导航菜单 */  
.nav-menu {  
    display: flex;  
    gap: 20px;  
    align-items: center;  
}  
  
.nav-menu a {  
    color: var(--text-dim);  
    text-decoration: none;  
    font-size: 12px;  
    transition: color 0.3s;  
    opacity: 0.7;  
}  
  
.nav-menu a:hover,  
.nav-menu a.current {  
    color: var(--accent-blue);  
    opacity: 1;  
}
/* --- 2. 主体容器 (自适应核心) --- */  
.container {    
    flex: 1 0 auto;    
    max-width: 1000px;    
    margin: 40px auto 0 auto;    
    display: flex;    
    gap: 30px;    
    padding: 0 20px;    
    width: 100%;    
    align-items: flex-start;  
}  
  
.content-stream {  
    flex: 1;  
    min-width: 0;  
}  
  
.sidebar {    
    flex: 0 0 280px;  
    min-width: 280px;    
    position: sticky;    
    top: 80px;    
    height: fit-content;    
}    
    
.side-list li a {    
    display: flex;    
    justify-content: space-between;    
    width: 100%;    
    color: inherit;    
    text-decoration: none;    
}  
  
.post-title a {    
    color: var(--text-main);    
    text-decoration: none;    
    transition: color 0.3s;    
}    
    
.post-title a:hover {    
    color: var(--accent-blue);    
}    
    
.window-card:hover .post-title a {    
    color: var(--accent-blue);    
}  
  
.page-navigator {    
    display: flex;    
    justify-content: space-between;    
    align-items: center;    
    padding: 30px 0;    
    margin-top: auto;    
    border-top: 1px solid var(--border);    
    list-style: none;    
}    
    
.page-navigator li {    
    display: inline-block;    
}    
    
.page-navigator li a {    
    color: var(--text-dim);    
    text-decoration: none;    
    font-size: 12px;    
    padding: 8px 12px;    
    transition: color 0.3s;    
}    
    
.page-navigator li.current a {    
    color: var(--text-main);    
    position: relative;    
}    
    
.page-navigator li.current a::after {    
    content: "";    
    width: 4px;    
    height: 4px;    
    background: var(--accent-blue);    
    border-radius: 50%;    
    position: absolute;    
    bottom: 0;    
    left: 50%;    
    transform: translateX(-50%);    
    box-shadow: 0 0 8px var(--accent-blue);    
}    
    
.page-navigator li.prev a,    
.page-navigator li.next a {    
    font-size: 11px;    
    letter-spacing: 1.5px;    
    opacity: 0.5;    
}    
    
.page-navigator li a:hover {    
    color: var(--accent-blue);    
    opacity: 1;    
}  
  
/* 文章内容区域 */    
.post-content {    
    overflow: visible;    
    word-wrap: break-word;    
    word-break: break-word;    
    line-height: 1.8;    
}    
    
/* 代码块样式 */    
.post-content pre {    
    background: rgba(0, 0, 0, 0.2);    
    padding: 15px;    
    border-radius: 4px;    
    overflow-x: auto;    
    white-space: pre-wrap;  
    word-wrap: break-word;    
    max-height: none;  
    margin: 1em 0;    
}    
    
.post-content code {    
    font-family: 'Fira Code', 'Consolas', monospace;    
    font-size: 13px;    
    color: var(--text-main);    
}    
    
/* 段落间距 */    
.post-content p {    
    margin: 1em 0;    
}    
    
/* 标题样式 */    
.post-content h1,    
.post-content h2,    
.post-content h3 {    
    color: var(--accent-blue);    
    margin: 1.5em 0 0.5em;    
}  
  
/* 文章内容链接样式 */  
.post-content a {  
    color: var(--accent-blue);  
    text-decoration: none;  
    border-bottom: 1px solid rgba(95, 179, 179, 0.3);  
    transition: all 0.3s;  
    word-break: break-all;  
}  
  
.post-content a:hover {  
    border-bottom-color: var(--accent-blue);  
    opacity: 0.8;  
}  
  
/* 图片响应式 */    
.post-content img {    
    max-width: 100%;    
    height: auto;    
}  
  
/* 文章上下篇导航 */  
.post-nav {  
    display: flex;  
    justify-content: space-between;  
    margin: 30px 0;  
    gap: 15px;  
}  
  
.post-nav-item {  
    flex: 1;  
    padding: 15px;  
    background: var(--card-bg);  
    border: 1px solid var(--border);  
    border-radius: 4px;  
    transition: all 0.3s;  
    text-align: center;  
}  
  
.post-nav-item:hover {  
    border-color: var(--accent-blue);  
}  
  
.post-nav-item a {  
    color: var(--text-main);  
    text-decoration: none;  
    font-size: 13px;  
    transition: color 0.3s;  
    display: inline-flex;  
    align-items: center;  
    gap: 8px;  
    border: none;  
    border-bottom: none;  
}  
  
.post-nav-item a:hover {  
    color: var(--accent-blue);  
}  
  
/* 上一篇:图标在前 */  
.post-nav-prev a::before {  
    content: "←";  
    font-size: 16px;  
    color: var(--accent-blue);  
    transition: all 0.3s;  
    opacity: 0.6;  
    display: inline-block;  
    vertical-align: middle;  
    line-height: 1;  
}  
  
.post-nav-prev a:hover::before {  
    transform: translateX(-3px) translateY(-1px);  
    opacity: 1;  
}  
  
/* 下一篇:图标在后 */  
.post-nav-next a::after {  
    content: "→";  
    font-size: 16px;  
    color: var(--accent-blue);  
    transition: all 0.3s;  
    opacity: 0.6;  
    display: inline-block;  
    vertical-align: middle;  
    line-height: 1;  
}  
  
.post-nav-next a:hover::after {  
    transform: translateX(3px) translateY(-1px);  
    opacity: 1;  
}
  
.nav-empty {  
    color: var(--text-dim);  
    opacity: 0.3;  
    font-size: 12px;  
}  
  
/* --- 3. Window Card 样式 --- */  
.window-card {  
    background: var(--card-bg);   
    border: 1px solid var(--border);   
    border-radius: 4px;  
    margin-bottom: 25px;   
    overflow: hidden;   
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);  
    transition: all 0.3s ease;  
}  
  
.window-card:hover {   
    transform: translateY(-4px);   
    border-color: var(--accent-blue);   
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);   
}  
  
.card-header {  
    background: var(--header-bg);   
    padding: 8px 15px;  
    display: flex;   
    justify-content: space-between;   
    align-items: center;   
    border-bottom: 1px solid var(--border);  
}  
  
.window-dots { display: flex; gap: 6px; }  
.dot {   
    width: 8px;   
    height: 8px;   
    background-color: #FFF;   
    border-radius: 50%;   
    opacity: 0.3;   
    transition: 0.3s;   
}  
.dot:nth-child(1) { opacity: 0.9; }  
.dot:nth-child(2) { opacity: 0.6; }  
.window-card:hover .dot { opacity: 1; }  
  
.card-body { padding: 25px; }  
.post-title {   
    margin: 0 0 12px 0;   
    color: var(--text-main);   
    font-weight: 300;   
    font-size: 19px;   
    transition: color 0.3s;   
}  
.window-card:hover .post-title { color: var(--accent-blue); }  
  
/* --- 4. 博客分页 (左侧流末尾) --- */  
.pagination-console {  
    margin-top: auto;   
    padding: 30px 0;  
    display: flex;   
    justify-content: space-between;   
    align-items: center;  
    border-top: 1px solid var(--border);  
}  
  
.pg-btn {   
    text-decoration: none;   
    color: var(--text-dim);   
    font-size: 11px;   
    letter-spacing: 1.5px;   
    opacity: 0.5;   
    transition: 0.3s;   
}  
.pg-btn:hover { color: var(--accent-blue); opacity: 1; }  
  
.pg-numbers { display: flex; gap: 15px; }  
.pg-link {   
    text-decoration: none;   
    color: var(--text-dim);   
    font-size: 12px;   
    display: flex;   
    flex-direction: column;   
    align-items: center;   
    transition: 0.3s;   
}  
.pg-link::after {   
    content: "";   
    width: 4px;   
    height: 4px;   
    background: transparent;   
    border-radius: 50%;   
    margin-top: 4px;   
    transition: 0.3s;   
}  
.pg-link.active { color: var(--text-main); }  
.pg-link.active::after {   
    background: var(--accent-blue);   
    box-shadow: 0 0 8px var(--accent-blue);   
}  
.pg-link:hover { color: var(--accent-blue); }  
  
/* --- 5. 侧边栏列表 --- */  
.side-list { list-style: none; padding: 0; margin: 0; }  
.side-list li {  
    padding: 8px 12px;   
    border-bottom: 1px solid rgba(255,255,255,0.05);  
    display: flex;   
    justify-content: space-between;   
    font-size: 12px;  
    transition: 0.2s;   
    border-left: 2px solid transparent;  
}  
.side-list li:hover {   
    border-left-color: var(--accent-blue);   
    background: rgba(255,255,255,0.03);   
    color: var(--text-main);   
}  
  
/* 评论样式 */  
/* 评论样式 */  
#comments .comment-list {  
    list-style: none;  
    padding: 0;  
    margin: 0;  
}  
  
#comments .comment-body {  
    display: flex;  
    gap: 15px;  
    padding: 20px 0;  
    border-bottom: 1px solid rgba(255,255,255,0.05);  
}  
  
#comments .comment-avatar img {  
    border-radius: 4px;  
    width: 48px;  
    height: 48px;  
}  
  
#comments .comment-main {  
    flex: 1;  
    min-width: 0;  
}  
  
#comments .comment-meta {  
    display: flex;  
    align-items: center;  
    gap: 10px;  
    margin-bottom: 8px;  
}  
  
#comments .comment-author {  
    font-size: 14px;  
    color: var(--text-main);  
    font-style: normal;  
    font-weight: 500;  
}  
  
/* 管理员标识 */  
.author-badge {  
    display: inline-block;  
    padding: 2px 8px;  
    background: var(--accent-blue);  
    color: var(--text-main);  
    font-size: 10px;  
    border-radius: 3px;  
    font-weight: normal;  
    letter-spacing: 0.5px;  
}  
  
/* 用户标识 */  
.user-badge {  
    display: inline-block;  
    padding: 2px 8px;  
    background: rgba(255, 255, 255, 0.1);  
    color: var(--text-dim);  
    font-size: 10px;  
    border-radius: 3px;  
    font-weight: normal;  
    letter-spacing: 0.5px;  
}  
  
#comments .comment-time {  
    font-size: 11px;  
    color: var(--text-dim);  
    opacity: 0.6;  
}  
  
#comments .comment-content {  
    font-size: 13px;  
    line-height: 1.6;  
    color: var(--text-dim);  
    margin-bottom: 8px;  
}  
  
#comments .comment-content p {  
    margin: 0.5em 0;  
}  
  
#comments .comment-awaiting {  
    display: block;  
    font-size: 11px;  
    color: var(--accent-blue);  
    opacity: 0.7;  
    margin-bottom: 8px;  
}  
  
#comments .comment-reply a {  
    font-size: 11px;  
    color: var(--text-dim);  
    text-decoration: none;  
    opacity: 0.5;  
    transition: all 0.3s;  
}  
  
#comments .comment-reply a:hover {  
    color: var(--accent-blue);  
    opacity: 1;  
}  
  
/* 子评论 */  
#comments .comment-children {  
    margin-left: 63px;  
    margin-top: 15px;  
}  
  
#comments .comment-children .comment-list {  
    border-left: 2px solid rgba(255, 255, 255, 0.05);  
    padding-left: 20px;  
}  
  
/* 管理员评论高亮 */  
#comments .comment-by-author {  
    background: rgba(95, 179, 179, 0.05);  
    margin: 0 -15px;  
    padding: 20px 15px;  
    border-radius: 4px;  
}
  
/* --- 6. 站点页脚 --- */  
footer.site-footer {  
    flex-shrink: 0;   
    background: var(--header-bg);   
    border-top: 1px solid var(--border);  
    padding: 40px 20px;   
    font-size: 10px;   
    color: var(--text-dim);   
    opacity: 0.3;  
}  
  
/* 页脚链接样式 */  
footer.site-footer a {  
    color: var(--text-dim);  
    text-decoration: none;  
    transition: color 0.3s;  
}  
  
footer.site-footer a:hover {  
    color: var(--accent-blue);  
}  
  
.footer-inner {   
    max-width: 1000px;   
    margin: 0 auto;   
    display: flex;   
    justify-content: space-between;   
    align-items: center;   
}  
  
/* --- 7. 响应式断点 --- */  
@media (max-width: 850px) {  
    .container { flex-direction: column; margin-top: 20px; }  
    .sidebar { position: static; width: 100%; order: 2; margin-bottom: 40px; }  
    .content-stream { order: 1; width: 100%; }  
    .footer-inner { flex-direction: column; gap: 15px; text-align: center; }  
    .comment-form-grid { grid-template-columns: 1fr;  gap: 12px;  }  
    .comment-login-info {flex-direction: column; gap: 10px;  text-align: center; }  
}  
  
@media (max-width: 480px) {  
    .pg-numbers { display: none; }  
    .pagination-console { justify-content: space-around; }  
    .post-title { font-size: 17px; }  
    .form-group input,  
    .form-group textarea { padding: 10px; font-size: 14px; }  
    .comment-submit {padding: 10px 20px; font-size: 14px; }  
    .form-group textarea { min-height: 100px; }  
}