/* 全站基础层：设计变量、重置、公共布局和首批通用组件。 */


:root{
  --bg:#fbfaf7;
  --panel:#fffdfa;
  --panel-2:#f7fbfe;
  --text:#15345b;
  --muted:#64748b;
  --muted-2:#8aa0b8;
  --border:#e7edf3;
  --accent:#0ea5e9;
  --accent-2:#2563eb;
  --soft-blue:#eaf6ff;
  --warm:#fff5e7;
  --shadow:0 18px 45px rgba(55,84,120,.08);
  --radius:18px;
  --max:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 50% 0%, rgba(219,234,254,.45), transparent 36rem),
    linear-gradient(180deg,#fbfaf7 0%,#f8fafc 100%);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif;
  line-height:1.72;
}
body.dark{
  --bg:#0f172a;--panel:#111c2e;--panel-2:#13233a;--text:#e6f0ff;--muted:#a8bad1;--muted-2:#7e91aa;--border:#243449;--accent:#38bdf8;--accent-2:#60a5fa;--soft-blue:#132b42;--warm:#1f2333;--shadow:0 18px 45px rgba(0,0,0,.22);
  background:linear-gradient(180deg,#0d1728 0%,#111827 100%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.site-header{height:86px;border-bottom:1px solid rgba(203,213,225,.45);backdrop-filter:blur(12px);background:rgba(251,250,247,.74);position:sticky;top:0;z-index:20}
body.dark .site-header{background:rgba(15,23,42,.78)}
.navbar{max-width:var(--max);margin:0 auto;height:100%;display:flex;align-items:center;padding:0 34px;gap:36px}
.logo{font-size:27px;font-weight:760;letter-spacing:.04em;color:#12345a}
body.dark .logo{color:#eaf6ff}
.header-icons{display:flex;gap:22px;align-items:center;color:#15345b}
.icon-btn{border:0;background:transparent;color:inherit;cursor:pointer;padding:6px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{background:var(--soft-blue);color:var(--accent-2)}
.container{max-width:var(--max);margin:0 auto;padding:34px}
.page-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:34px;align-items:start}
.sidebar{display:flex;flex-direction:column;gap:28px}
.hero-banner{
  border:1px solid var(--border);border-radius:var(--radius);min-height:300px;overflow:hidden;position:relative;background:var(--panel);box-shadow:var(--shadow);display:flex;align-items:center;padding:52px 58px;background-size:cover;background-position:center;
}
.hero-banner:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,253,250,.9),rgba(255,253,250,.52),rgba(255,253,250,.15));}
body.dark .hero-banner:before{background:linear-gradient(90deg,rgba(15,23,42,.78),rgba(15,23,42,.48),rgba(15,23,42,.18))}
.section{margin-top:34px}
.section-head{display:flex;align-items:center;gap:14px;margin:0 0 18px;color:#15345b}
.section-head h2{font-size:27px;margin:0;font-weight:760}
.section-icon{color:var(--accent);display:inline-flex}
.card{background:rgba(255,253,250,.83);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
body.dark .card{background:rgba(17,28,46,.82)}
.more{color:var(--accent-2);font-weight:650;font-size:14px}
.avatar{width:74px;height:74px;border-radius:50%;margin:0 auto 12px;object-fit:cover;background:#eaf6ff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #bfdbfe;border-radius:999px;padding:9px 18px;color:var(--accent-2);background:rgba(239,246,255,.72);font-weight:650}
.btn:hover{border-color:var(--accent);background:var(--soft-blue)}
.footer{max-width:var(--max);margin:34px auto 0;padding:26px 34px;text-align:center;color:var(--muted);border-top:1px solid rgba(203,213,225,.45)}
/* 归档页面 */
.page-hero{border:1px solid var(--border);border-radius:var(--radius);min-height:270px;padding:58px;background:var(--panel);background-size:cover;background-position:center;box-shadow:var(--shadow);position:relative;overflow:hidden;margin-bottom:34px}
.page-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,253,250,.86),rgba(255,253,250,.38))}
body.dark .page-hero:before{background:linear-gradient(90deg,rgba(15,23,42,.76),rgba(15,23,42,.32))}
.page-hero > *{position:relative}
.page-hero h1{font-size:58px;line-height:1;margin:0 0 20px}
.page-hero p{font-size:22px;margin:0;color:#334e68}
.toolbar-panel{padding:18px 24px;display:flex;gap:20px;align-items:center;margin-bottom:24px}
.searchbox{flex:1;border:1px solid var(--border);background:var(--panel);border-radius:14px;padding:13px 18px;color:var(--text);font-size:15px}
.pills{display:flex;gap:12px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:8px 17px;background:#f6f8fb;border:1px solid var(--border);color:#31506d;font-weight:650}
.pill.active{background:#e7f4ff;color:var(--accent-2);border-color:#c7e5fb}
.article-list{display:flex;flex-direction:column;gap:18px}
.post-card{display:grid;grid-template-columns:450px minmax(0,1fr);overflow:hidden;min-height:186px}
.post-thumb{height:100%;background:#e6f3fb;background-size:cover;background-position:center;min-height:186px}
.post-info{padding:24px 30px;display:flex;flex-direction:column;justify-content:center}
.post-info h2,.post-info h3{font-size:25px;margin:0 0 10px}
.post-info p{color:#506985;margin:0 0 18px}
.meta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;color:#64809d;font-size:14px}
.meta-row .views{margin-left:auto}
.tag{border:1px solid var(--border);background:#f8fafc;border-radius:999px;padding:4px 12px;color:#5b6f86}
.pagination{display:flex;justify-content:center;gap:12px;margin:28px 0}.pagination span,.pagination a{width:42px;height:42px;border-radius:12px;border:1px solid var(--border);display:grid;place-items:center}.pagination .active{background:var(--accent);color:white}
.featured-friends{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.featured-card{display:grid;grid-template-columns:130px minmax(0,1fr);gap:22px;padding:28px;align-items:center}
.all-friends{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.small-friend{display:grid;grid-template-columns:74px minmax(0,1fr);gap:16px;align-items:center;padding:18px}
.panel-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}.panel-two .card{padding:24px}
.activity-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.activity-list li{display:flex;justify-content:space-between;gap:18px;color:#405871}
/* Markdown 文章详情页 */
.article-shell{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;align-items:start}
.article-reader{padding:28px 34px}
.article-toc{padding:22px;position:sticky;top:110px;max-height:calc(100vh - 130px);overflow:auto}
.article-toc h3{margin:0 0 14px}
.article-toc nav ul{list-style:none;padding-left:0;margin:0}.article-toc nav li{margin:4px 0}.article-toc nav ul ul{padding-left:16px}.article-toc a{font-size:14px;color:#3e5a77}.article-toc a:hover{color:var(--accent-2)}
.markdown-body{font-size:17px;color:#263f5b}
.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4{line-height:1.35;color:#12345a;margin:1.35em 0 .65em}
.markdown-body h1{font-size:2.1em;border-bottom:1px solid var(--border);padding-bottom:.28em}
.markdown-body h2{font-size:1.62em;border-bottom:1px solid var(--border);padding-bottom:.26em}
.markdown-body h3{font-size:1.3em}.markdown-body p{margin:13px 0}.markdown-body a{color:var(--accent-2)}
.markdown-body code{background:#eef5fb;border:1px solid #dbe9f5;padding:2px 6px;border-radius:7px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.92em}
.markdown-body pre{background:#111827;color:#e5edf8;border-radius:14px;padding:18px;overflow:auto}
.markdown-body pre code{background:transparent;border:0;color:inherit;padding:0}.markdown-body blockquote{border-left:4px solid var(--accent);background:#eef7ff;color:#49657f;margin:18px 0;padding:12px 18px;border-radius:0 12px 12px 0}
.markdown-body table{border-collapse:collapse;width:100%;display:block;overflow:auto;margin:20px 0}.markdown-body th,.markdown-body td{border:1px solid var(--border);padding:9px 13px}.markdown-body th{background:#f3f7fb}.markdown-body img{border-radius:14px;margin:20px auto}.markdown-body hr{border:0;border-top:1px solid var(--border);margin:30px 0}.markdown-body ul,.markdown-body ol{padding-left:1.5em}