/* 个人技术分享 · 全站共用样式（由 index.html 内联样式抽取并扩展） */
/* ===== 配色 tokens（Product Teal 预设）===== */
:root{
  --page-bg:#FFFFFF;
  --page-surface:#F6F9F8;
  --page-surface-muted:#EDF3F1;
  --page-text:#171D1C;
  --page-text-secondary:#3A4442;
  --page-text-muted:#6A7573;
  --page-text-disabled:#9BA5A3;
  --page-border:#DEE6E4;
  --page-brand:#12B886;
  --page-brand-hover:#0EA375;
  --page-brand-active:#0B8360;
  --page-brand-soft:#ECFBF5;
  --page-brand-soft-strong:#D5F5EA;
  --page-brand-text:#0A6B50;

  /* 兼容变量 */
  --bg:#FFFFFF;
  --bg2:#F6F9F8;
  --rule:#DEE6E4;
  --ink:#171D1C;
  --muted:#6A7573;
  --text-secondary:#3A4442;
  --text-disabled:#9BA5A3;
  --accent:#12B886;
  --accent-hover:#0EA375;
  --accent-active:#0B8360;
  --accent-soft:#ECFBF5;
  --accent2:#228BE6;

  /* 语义色 */
  --success:#52C41A;
  --info:#6A7573;
  --reminder:#FF7A45;
  --warning:#FAAD14;
  --danger:#FF4D4F;

  /* 结构 tokens */
  --radius:8px;
  --radius-card:12px;
  --radius-full:999px;
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px;
  --sp-20:20px; --sp-24:24px; --sp-32:32px; --sp-48:48px;
  --font-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --weight-regular:400; --weight-medium:500; --weight-strong:600;
  --wrap:1040px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--page-bg);
  color:var(--page-text);
  font:var(--weight-regular) 14px/20px var(--font-sans);
}
img{max-width:100%;height:auto}
a{color:var(--page-brand-text);text-decoration:none;border-bottom:1px solid transparent}
a:hover{color:var(--page-brand-hover);border-bottom-color:currentColor}
a:focus-visible,button:focus-visible{outline:2px solid var(--page-brand);outline-offset:2px;border-radius:var(--radius)}
h1,h2,h3{margin:0;font-weight:var(--weight-strong);line-height:1.35}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
code,.mono{font-family:var(--font-mono);font-size:13px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--sp-24)}

/* ===== 顶部导航 ===== */
.topbar{border-bottom:1px solid var(--page-border);background:var(--page-bg)}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);min-height:56px}
.brand{display:flex;align-items:center;gap:var(--sp-8);font:var(--weight-strong) 15px/1 var(--font-sans)}
.brand__dot{width:10px;height:10px;border-radius:var(--radius-full);background:var(--page-brand);flex:0 0 auto}
.nav{display:flex;gap:var(--sp-16);font-size:13px}
.nav a{color:var(--page-text-muted)}
.nav a:hover{color:var(--page-brand-text)}

/* ===== 开场（contained 模式，单一浅色底）===== */
.report-intro{background:var(--page-brand-soft);border-bottom:1px solid var(--page-border)}
.report-intro__content{padding:var(--sp-48) var(--sp-24)}
.eyebrow{margin:0 0 var(--sp-12);color:var(--page-brand-text);font-size:12px;letter-spacing:.08em}
.report-intro h1{font-size:32px;line-height:1.25;letter-spacing:-.01em}
.report-intro__summary{max-width:62ch;margin-top:var(--sp-16);color:var(--page-text-secondary);font-size:15px;line-height:26px}
.tags{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-top:var(--sp-20)}
.tags li{padding:3px 10px;border:1px solid var(--page-border);border-radius:var(--radius-full);background:var(--page-bg);color:var(--page-text-secondary);font-size:12px}

/* ===== 区块 ===== */
main{padding-bottom:var(--sp-48)}
section{padding-top:var(--sp-48)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-16);margin-bottom:var(--sp-20)}
.sec-head h2{font-size:18px}
.sec-head .hint{color:var(--page-text-muted);font-size:12px}

/* ===== 文章列表（分隔线行，不用重卡片）===== */
.posts{border-top:1px solid var(--page-border)}
.post{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:var(--sp-16);align-items:start;padding:var(--sp-16) 0;border-bottom:1px solid var(--page-border)}
.post time{color:var(--page-text-muted);font:var(--weight-regular) 12px/20px var(--font-mono);padding-top:2px}
.post h3{font-size:15px;font-weight:var(--weight-medium)}
.post p{margin-top:var(--sp-4);color:var(--page-text-muted);font-size:13px;line-height:20px}
.post .tag{align-self:start;padding:2px 8px;border-radius:var(--radius);background:var(--page-surface-muted);color:var(--page-text-secondary);font-size:12px;white-space:nowrap}

/* ===== 项目卡片 ===== */
.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-20)}
.card{border:1px solid var(--page-border);border-radius:var(--radius-card);background:var(--page-surface);padding:var(--sp-20);display:flex;flex-direction:column;gap:var(--sp-12)}
.card h3{font-size:15px}
.card p{color:var(--page-text-muted);font-size:13px;line-height:20px}
.card .meta{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-top:auto}
.card .meta span{padding:2px 8px;border:1px solid var(--page-border);border-radius:var(--radius);background:var(--page-bg);color:var(--page-text-secondary);font-size:12px}
.card .go{font-size:13px}

/* ===== 关注方向（分隔线行）===== */
.topics{border-top:1px solid var(--page-border)}
.topics li{display:grid;grid-template-columns:180px minmax(0,1fr);gap:var(--sp-16);padding:var(--sp-12) 0;border-bottom:1px solid var(--page-border)}
.topics b{font-weight:var(--weight-medium)}
.topics span{color:var(--page-text-muted);font-size:13px}

/* ===== 关于 ===== */
.about{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--sp-32)}
.about p{color:var(--page-text-secondary);line-height:24px}
.about p+p{margin-top:var(--sp-12)}
.facts{border-left:1px solid var(--page-border);padding-left:var(--sp-20)}
.facts dt{color:var(--page-text-muted);font-size:12px}
.facts dd{margin:var(--sp-4) 0 var(--sp-16)}
.facts dd:last-child{margin-bottom:0}

/* ===== 页脚 ===== */
.site-foot{margin-top:var(--sp-48);border-top:1px solid var(--page-border);background:var(--page-surface);color:var(--page-text-muted);font-size:12px;line-height:20px}
.site-foot .wrap{padding-top:var(--sp-24);padding-bottom:var(--sp-24);display:grid;gap:var(--sp-8)}
.site-foot a{color:var(--page-text-secondary)}
.site-foot a:hover{color:var(--page-brand-text)}
.legal{display:flex;flex-wrap:wrap;gap:var(--sp-16)}

@media (max-width:820px){
  .projects{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .facts{border-left:0;padding-left:0;border-top:1px solid var(--page-border);padding-top:var(--sp-16)}
  .post{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
  .post .tag{justify-self:start}
  .topics li{grid-template-columns:1fr;gap:var(--sp-4)}
  .report-intro h1{font-size:26px}
  .report-intro__content{padding:var(--sp-32) var(--sp-20)}
  .wrap{padding:0 var(--sp-20)}
}
@media print{
  .topbar,.site-foot{background:#fff}
  .report-intro{background:#fff}
  a{color:inherit;border:0}
  section{padding-top:24px;break-inside:avoid}
}

/* ===== 文章页（posts/*.html 共用）===== */
.article{max-width:820px;padding-top:var(--sp-48);padding-bottom:var(--sp-48)}
.article h1{font-size:28px;line-height:1.35;letter-spacing:-.01em;margin-bottom:var(--sp-12)}
.post-meta{color:var(--page-text-muted);font-size:12px;margin-bottom:var(--sp-32)}
.prose{color:var(--page-text-secondary);font-size:15px;line-height:27px}
.prose h2{color:var(--page-text);font-size:18px;margin:var(--sp-32) 0 var(--sp-12)}
.prose h3{color:var(--page-text);font-size:15px;margin:var(--sp-24) 0 var(--sp-8)}
.prose p{margin:0 0 var(--sp-16)}
.prose ul,.prose ol{margin:0 0 var(--sp-16);padding-left:22px;list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:var(--sp-8)}
.prose code{font-family:var(--font-mono);font-size:13px;background:var(--page-surface-muted);padding:1px 5px;border-radius:4px;color:var(--page-text)}
.prose pre{background:var(--page-surface);border:1px solid var(--page-border);border-radius:var(--radius);padding:var(--sp-16);overflow-x:auto;margin:0 0 var(--sp-16)}
.prose pre code{background:none;padding:0;font-size:12.5px;line-height:20px}
.prose blockquote{margin:0 0 var(--sp-16);padding-left:var(--sp-16);border-left:2px solid var(--page-border);color:var(--page-text-muted)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 var(--sp-16);font-size:14px}
.prose th,.prose td{border-bottom:1px solid var(--page-border);padding:var(--sp-8);text-align:left;vertical-align:top}
.prose th{color:var(--page-text);font-weight:var(--weight-medium);background:var(--page-surface)}
.back{margin-top:var(--sp-48);padding-top:var(--sp-20);border-top:1px solid var(--page-border);font-size:13px}
.post h3 a{color:inherit}
.post h3 a:hover{color:var(--page-brand-text)}
@media (max-width:820px){.article{padding-top:var(--sp-32)}.article h1{font-size:22px}}