:root{--bg:#ffffff;--bg-soft:#f5f6f7;--bg-alt:#fafafb;--text:#0f1114;--text-2:#33363b;--meta:#6a6e75;--border:#e4e5e8;--border-strong:#d0d2d6;--red:#e2001a;--red-dark:#b30015;--radius:4px;--max-w:1180px;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.7}
a{color:inherit;text-decoration:none}
a:hover{color:var(--red)}
.wrap{max-width:var(--max-w);margin:0 auto;padding:0 20px}

/* header */
.site-header{border-bottom:1px solid var(--border);background:#fff;position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;gap:28px;height:60px}
.logo img{height:30px;display:block}
.main-nav{display:flex;gap:4px;flex-wrap:wrap;overflow-x:auto}
.nav-link{padding:6px 12px;font-size:14px;color:var(--text-2);border-radius:var(--radius);white-space:nowrap}
.nav-link:hover{color:var(--red);background:var(--bg-soft)}
.nav-link.active{color:var(--red);font-weight:600}

/* sections */
main{min-height:60vh;padding:32px 20px 64px}
.section-title{font-size:20px;margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid var(--text)}
.section-title small{font-size:13px;color:var(--meta);font-weight:400;margin-left:8px}

/* post grid */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.post-card{border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;background:#fff;transition:border-color .15s,box-shadow .15s;display:flex;flex-direction:column;gap:8px}
.post-card:hover{border-color:var(--red);box-shadow:0 2px 12px rgba(226,0,26,.08)}
.post-meta-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--meta)}
.post-cat{color:var(--red);font-weight:600;font-size:12px;letter-spacing:.02em}
time{font-size:12px;color:var(--meta)}
.views{font-size:12px;color:var(--meta)}
.post-card-title{font-size:17px;line-height:1.45;font-weight:600}
.post-card-title a:hover{color:var(--red)}
.post-card-excerpt{font-size:13.5px;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.tag-pill{display:inline-block;padding:2px 10px;border:1px solid var(--border);border-radius:999px;font-size:12px;color:var(--meta);background:var(--bg-alt)}
.tag-pill:hover{border-color:var(--red);color:var(--red)}
.tag-pill.small{padding:1px 8px;font-size:11px}
.tag-pill span{color:var(--meta);font-size:11px}
.tag-cloud{display:flex;gap:10px;flex-wrap:wrap}
.tag-cloud .tag-pill{padding:5px 16px;font-size:14px}

/* pagination */
.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:28px;font-size:13px;color:var(--meta);flex-wrap:wrap;gap:10px}
.pagination div{display:flex;gap:6px;flex-wrap:wrap}
.pagination a{padding:5px 12px;border:1px solid var(--border);border-radius:var(--radius);color:var(--text-2)}
.pagination a:hover,.pagination .pg.cur{border-color:var(--red);color:var(--red)}
.pagination .pg.cur{background:var(--red);color:#fff;border-color:var(--red)}

/* topic cards */
.topics{margin-top:48px}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.cat-card{border:1px solid var(--border);border-radius:var(--radius);padding:18px 16px;display:flex;flex-direction:column;gap:4px;background:var(--bg-alt);transition:border-color .15s}
.cat-card:hover{border-color:var(--red);background:#fff}
.cat-name{font-weight:600;font-size:15px}
.cat-cnt{font-size:12px;color:var(--meta)}
.cat-card.all{background:var(--text);color:#fff;border-color:var(--text)}
.cat-card.all .cat-cnt{color:#bbb}
.cat-card.all:hover{background:var(--red);border-color:var(--red)}

/* post full */
.post-full{max-width:760px;margin:0 auto}
.post-title{font-size:28px;line-height:1.4;margin:8px 0 24px}
.post-body{font-size:16px;color:var(--text-2)}
.post-body h2{font-size:21px;margin:28px 0 12px;color:var(--text)}
.post-body h3{font-size:18px;margin:22px 0 10px;color:var(--text)}
.post-body h4{font-size:16px;margin:18px 0 8px;color:var(--text)}
.post-body p{margin:12px 0}
.post-body ul,.post-body ol{margin:12px 0 12px 24px}
.post-body li{margin:4px 0}
.post-body code{background:var(--bg-soft);padding:1px 6px;border-radius:3px;font-size:14px;font-family:Consolas,Menlo,monospace}
.post-full .post-card-tags{margin-top:28px}
.post-source{margin-top:28px;padding:12px 16px;border-top:1px dashed var(--border);font-size:13px;color:var(--text-3,#999)}
.post-source a{color:var(--red,#e63946)}
.related{max-width:760px;margin:48px auto 0}
.rel-item{display:block;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;font-size:14px;font-weight:500}
.rel-item:hover{border-color:var(--red);color:var(--red)}

/* archive */
.archive-group{margin-bottom:28px}
.archive-ym{font-size:16px;margin-bottom:10px;color:var(--text)}
.archive-row{display:flex;gap:14px;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--border);font-size:14px}
.archive-row time{min-width:36px}
.archive-title{font-weight:500}
.archive-title:hover{color:var(--red)}

.empty{padding:60px 0;text-align:center;color:var(--meta)}

/* footer */
.site-footer{border-top:1px solid var(--border);background:var(--bg-alt);padding:40px 0 32px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.footer-col h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--meta);margin-bottom:12px}
.footer-col p{font-size:13px;color:var(--meta);line-height:1.6}
.footer-col a{display:block;font-size:13.5px;color:var(--text-2);margin-bottom:8px}
.footer-col a:hover{color:var(--red)}
.copy{margin-top:16px;font-size:12px}

@media(max-width:720px){
  .header-inner{flex-wrap:wrap;height:auto;padding:10px 0}
  .post-grid{grid-template-columns:1fr}
  .post-title{font-size:23px}
}