/* ── CSS Variables ── */
:root {
    --bg: #fffef9;
    --bg-card: #ffffff;
    --bg-hover: #f5f3ee;
    --text: #333333;
    --text-secondary: #777777;
    --text-muted: #aaaaaa;
    --accent: #4f46e5;
    --accent-light: #eef2ff;
    --divider: #eeeeee;
    --shadow: 0 1px 3px rgba(0,0,0,.04);
    --shadow-hover: 0 4px 16px rgba(0,0,0,.08);
    --radius: 12px;
    --radius-lg: 20px;
    --max-w: 820px;
    --nav-h: 64px;
}

[data-theme="dark"] {
    --bg: #1a1a2e;
    --bg-card: #222240;
    --bg-hover: #2a2a4a;
    --text: #e0e0e0;
    --text-secondary: #9999bb;
    --text-muted: #666688;
    --accent: #818cf8;
    --accent-light: #1e1e3f;
    --divider: #333355;
    --shadow: 0 1px 3px rgba(0,0,0,.2);
    --shadow-hover: 0 4px 16px rgba(0,0,0,.4);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{
    font-family: "LXGW WenKai", "Noto Serif SC", Georgia, "Times New Roman", serif;
    background:var(--bg);color:var(--text);
    line-height:1.75;font-size:16px;font-weight:400;
    transition:background .3s,color .3s;
}
a{color:inherit}

/* ── Navbar ── */
.navbar{
    position:fixed;top:0;left:0;right:0;z-index:100;
    height:var(--nav-h);
    background:var(--bg);border-bottom:1px solid var(--divider);
    backdrop-filter:blur(8px);
    transition:background .3s,border-color .3s;
}
.navbar-inner{
    max-width:var(--max-w);margin:0 auto;padding:0 24px;
    display:flex;align-items:center;justify-content:space-between;
    height:100%;
}
.nav-logo{
    font-size:18px;font-weight:700;color:var(--text);
    text-decoration:none;letter-spacing:-.3px;
    display:flex;align-items:center;gap:6px;
}
.nav-logo:hover{color:var(--accent);transition:color .2s}
.nav-links{display:flex;align-items:center;gap:20px;list-style:none}
.nav-links a{
    font-size:15px;color:var(--text-secondary);text-decoration:none;
    transition:color .2s;padding:4px 0;
}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a.active{color:var(--accent);font-weight:600}
.nav-right{display:flex;align-items:center;gap:12px}
.theme-toggle{
    background:none;border:1px solid var(--divider);
    border-radius:20px;padding:6px 10px;cursor:pointer;
    color:var(--text-secondary);font-size:13px;
    display:flex;align-items:center;gap:4px;
    transition:all .2s;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}

/* ── Layout ── */
.main{max-width:var(--max-w);margin:0 auto;padding:0 24px}
.section{margin-top:100px}

/* ── Hero ── */
.hero{
    padding:calc(var(--nav-h) + 80px) 0 60px;
    text-align:center;
}
.hero-avatar{
    width:80px;height:80px;border-radius:50%;
    background:var(--accent-light);
    margin:0 auto 24px;
    display:flex;align-items:center;justify-content:center;
    font-size:36px;
}
.hero-name{font-size:48px;font-weight:700;letter-spacing:-1px;line-height:1.2;margin-bottom:8px}
.hero-tagline{font-size:18px;color:var(--accent);font-style:italic;margin-bottom:32px}
.hero-socials{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.hero-socials a{
    display:flex;align-items:center;gap:6px;
    padding:8px 18px;border-radius:20px;
    font-size:14px;color:var(--text-secondary);text-decoration:none;
    border:1px solid var(--divider);
    transition:all .2s;
}
.hero-socials a:hover{
    border-color:var(--accent);color:var(--accent);
    background:var(--accent-light);
}
.hero-socials svg{width:16px;height:16px}

/* ── 子页面顶部标题区 ── */
.page-header{
    padding:calc(var(--nav-h) + 64px) 0 0;
}
.page-header .section-label{
    display:inline-block;font-size:12px;font-weight:600;
    letter-spacing:1px;text-transform:uppercase;
    color:var(--accent);margin-bottom:8px;
}
.page-header .page-title{font-size:40px;font-weight:700;letter-spacing:-.5px;line-height:1.2}
.page-header .page-subtitle{font-size:16px;color:var(--text-secondary);margin-top:8px}
.page-header .page-divider{border:none;border-top:1px solid var(--divider);margin:32px 0 0}

/* ── Section Header ── */
.section-header{margin-bottom:40px}
.section-label{
    display:inline-block;font-size:12px;font-weight:600;
    letter-spacing:1px;text-transform:uppercase;
    color:var(--accent);margin-bottom:8px;
}
.section-title{font-size:36px;font-weight:700;letter-spacing:-.5px;line-height:1.2}
.section-subtitle{font-size:16px;color:var(--text-secondary);margin-top:8px}

/* ── Posts ── */
.posts-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.filter-tag{
    font-size:13px;padding:6px 14px;border-radius:20px;
    border:1px solid var(--divider);background:var(--bg-card);
    color:var(--text-secondary);cursor:pointer;
    transition:all .2s;white-space:nowrap;
}
.filter-tag:hover,.filter-tag.active{color:var(--accent);border-color:var(--accent);background:var(--accent-light)}

.posts-list{display:flex;flex-direction:column;gap:0}
.post-card{
    display:flex;align-items:flex-start;gap:24px;
    padding:24px 0;border-bottom:1px solid var(--divider);
    text-decoration:none;color:inherit;
    transition:all .2s;
}
.post-card:hover{padding-left:8px}
.post-card:hover .post-title{color:var(--accent)}
.post-cover{
    width:160px;height:100px;border-radius:var(--radius);
    background:var(--accent-light);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-size:40px;overflow:hidden;
}
.post-info{flex:1;min-width:0}
.post-title{font-size:20px;font-weight:600;line-height:1.4;margin-bottom:6px;transition:color .2s}
.post-desc{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:8px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-meta{font-size:13px;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.post-meta a{text-decoration:none}
.post-meta .category{color:var(--accent)}
.post-meta .category:hover{text-decoration:underline}
.post-tag{
    font-size:12px;color:var(--accent);background:var(--accent-light);
    padding:2px 10px;border-radius:12px;text-decoration:none;
    transition:all .2s;
}
.post-tag:hover{background:var(--accent);color:#fff}
.view-all{
    display:inline-block;margin-top:32px;padding:10px 24px;
    border-radius:24px;border:1px solid var(--divider);
    color:var(--text-secondary);text-decoration:none;
    font-size:14px;transition:all .2s;
}
.view-all:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}

/* ── 首页小红书卡片 ── */
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post-card-mini{
    background:var(--bg-card);border-radius:var(--radius);
    overflow:hidden;box-shadow:var(--shadow);
    text-decoration:none;color:inherit;
    transition:all .25s;display:flex;flex-direction:column;
}
.post-card-mini:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.post-card-cover{
    width:100%;aspect-ratio:4/3;background:var(--accent-light);
    display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.post-card-cover img{width:100%;height:100%;object-fit:cover}
.post-card-emoji{font-size:48px}
.post-card-body{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.post-card-title{
    font-size:15px;font-weight:600;line-height:1.45;color:var(--text);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.post-card-meta{font-size:12px;color:var(--text-muted)}
.post-card-meta a{text-decoration:none;color:var(--accent)}
.post-card-tags{display:flex;flex-wrap:wrap;gap:6px}

/* ── Projects ── */
.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.project-card{
    background:var(--bg-card);border-radius:var(--radius-lg);
    padding:28px;box-shadow:var(--shadow);
    text-decoration:none;color:inherit;
    transition:all .25s;display:flex;flex-direction:column;gap:12px;
}
.project-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.project-icon{
    width:44px;height:44px;border-radius:var(--radius);
    background:var(--accent-light);display:flex;
    align-items:center;justify-content:center;font-size:22px;
}
.project-name{font-size:18px;font-weight:600;line-height:1.3}
.project-desc{font-size:14px;color:var(--text-secondary);line-height:1.6}
.project-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.project-tags span{
    font-size:12px;padding:3px 10px;border-radius:12px;
    background:var(--accent-light);color:var(--accent);
}

/* ── Friends ── */
.friends-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.friend-card{
    display:flex;align-items:center;gap:12px;
    padding:16px 20px;border-radius:var(--radius);
    background:var(--bg-card);box-shadow:var(--shadow);
    text-decoration:none;color:inherit;
    transition:all .2s;
}
.friend-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.friend-avatar{
    width:40px;height:40px;border-radius:50%;
    background:var(--accent-light);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:18px;
}
.friend-name{font-size:15px;font-weight:500}
.friend-desc{font-size:12px;color:var(--text-muted)}

/* ── Markdown 正文 ── */
.markdown-body{font-size:16px;line-height:1.9;color:var(--text)}
.markdown-body h1,.markdown-body h2,.markdown-body h3,
.markdown-body h4,.markdown-body h5,.markdown-body h6{
    margin:1.6em 0 .6em;line-height:1.4;font-weight:700;
}
.markdown-body h1{font-size:1.8em}
.markdown-body h2{font-size:1.5em}
.markdown-body h3{font-size:1.25em}
.markdown-body p{margin:.8em 0}
.markdown-body ul,.markdown-body ol{margin:.8em 0;padding-left:1.6em}
.markdown-body li{margin:.3em 0}
.markdown-body blockquote{
    margin:.8em 0;padding:.4em 1em;
    border-left:3px solid var(--accent);
    background:var(--accent-light);color:var(--text-secondary);
    border-radius:0 8px 8px 0;
}
.markdown-body code{
    font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
    font-size:.9em;background:var(--bg-hover);
    padding:.15em .4em;border-radius:4px;
}
.markdown-body pre{
    background:var(--bg-hover);padding:16px;border-radius:var(--radius);
    overflow-x:auto;margin:.8em 0;
}
.markdown-body pre code{background:none;padding:0;font-size:.88em}
.markdown-body img{max-width:100%;border-radius:var(--radius)}
.markdown-body hr{border:none;border-top:1px solid var(--divider);margin:2em 0}
.markdown-body a{color:var(--accent);text-decoration:none}
.markdown-body a:hover{text-decoration:underline}

/* ── 文章详情页 ── */
.article-detail{padding:calc(var(--nav-h) + 64px) 0 0}
.article-detail .article-title{font-size:34px;font-weight:700;letter-spacing:-.5px;line-height:1.3;margin-bottom:16px}
.article-detail .article-meta{font-size:13px;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:32px}
.article-detail .article-meta a{text-decoration:none}
.article-detail .article-meta .category{color:var(--accent)}
.article-cover{width:100%;max-height:420px;object-fit:cover;border-radius:var(--radius);margin-bottom:24px;display:block}
.article-back{display:inline-block;margin-top:40px;color:var(--text-secondary);text-decoration:none;font-size:14px}
.article-back:hover{color:var(--accent)}

/* ── 分页 ── */
.pagination{display:flex;justify-content:center;gap:8px;margin-top:40px;flex-wrap:wrap}
.pagination a,.pagination span{
    padding:6px 14px;border-radius:20px;
    border:1px solid var(--divider);font-size:14px;
    text-decoration:none;color:var(--text-secondary);
    transition:all .2s;
}
.pagination a:hover{border-color:var(--accent);color:var(--accent)}
.pagination .current{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── 标签筛选提示条 ── */
.tag-filter-bar{
    margin-top:16px;padding:12px 16px;border-radius:var(--radius);
    background:var(--bg-card);border:1px solid var(--divider);
    font-size:13px;color:var(--text-secondary);
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.tag-filter-bar a{color:var(--accent);text-decoration:none;margin-left:auto}

/* ── 空状态 ── */
.empty{
    text-align:center;padding:60px 20px;color:var(--text-muted);
    font-size:15px;
}
.empty .empty-icon{font-size:48px;display:block;margin-bottom:12px}

/* ── Footer ── */
.footer{
    margin-top:120px;padding:48px 0;
    border-top:1px solid var(--divider);
    text-align:center;
}
.footer-inner{max-width:var(--max-w);margin:0 auto;padding:0 24px}
.footer-logo{font-size:18px;font-weight:700;margin-bottom:12px}
.footer-info{font-size:13px;color:var(--text-muted);line-height:1.8}
.footer-info span{font-weight:600;color:var(--accent)}
.footer-links{display:flex;justify-content:center;gap:16px;margin-top:16px;flex-wrap:wrap}
.footer-links a{font-size:13px;color:var(--text-muted);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--accent)}

/* ── Responsive ── */
@media(max-width:768px){
    .hero-name{font-size:36px}
    .hero-tagline{font-size:16px}
    .section-title{font-size:28px}
    .page-header .page-title{font-size:30px}
    .post-card{flex-direction:column;gap:16px}
    .post-cover{width:100%;height:180px}
    .nav-links{display:none}
    .projects-grid{grid-template-columns:1fr}
    .posts-grid{grid-template-columns:1fr}
    .friends-grid{grid-template-columns:repeat(2,1fr)}
    .section{margin-top:64px}
    .article-detail .article-title{font-size:26px}
}