:root{
  --b:#2f5fe0; --b-d:#1f47b8; --b-l:#eef3ff;
  --g:#0e9f8e; --o:#e8703a; --r:#d64545;
  --ink:#1b1f26; --ink2:#39424f; --sub:#5b6472; --sub2:#8b95a3;
  --line:#e4e7ec; --line2:#f0f2f5;
  --bg:#f7f8fa; --card:#ffffff;
  --max:1120px;
  --r-s:8px; --r-m:12px; --r-l:16px;
  --sh:0 1px 2px rgba(20,30,50,.04), 0 4px 16px rgba(20,30,50,.04);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
a{color:var(--b); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; border-radius:var(--r-s)}
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
.narrow{max-width:780px}

/* 阅读进度 */
.progress{position:fixed; top:0; left:0; height:2px; width:0; background:var(--b); z-index:99; transition:width .1s}

/* 头部 */
.site-head{
  position:sticky; top:0; z-index:50; background:rgba(247,248,250,.86);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line);
}
.head-in{display:flex; align-items:center; gap:26px; height:64px}
.brand{display:flex; align-items:baseline; gap:7px; flex-shrink:0}
.brand-name{font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.2px}
.brand-sub{font-size:11px; color:var(--sub2); letter-spacing:.12em; border:1px solid var(--line); border-radius:4px; padding:1px 5px}
.main-nav{display:flex; gap:2px; flex:1; overflow:auto}
.main-nav a{color:var(--ink2); font-size:14px; padding:6px 11px; border-radius:var(--r-s); white-space:nowrap}
.main-nav a:hover{background:#eef1f6; text-decoration:none}
.main-nav a.on{color:var(--b); background:var(--b-l); font-weight:600}
.head-search{display:flex; align-items:center; background:#fff; border:1px solid var(--line); border-radius:999px; padding:3px 4px 3px 14px; flex-shrink:0}
.head-search input{border:0; outline:none; width:150px; font-size:13px; background:transparent; color:var(--ink)}
.head-search button{border:0; background:var(--b-l); color:var(--b); width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:14px}

/* Hero */
.hero{background:linear-gradient(160deg,#fff 0%,#f2f6ff 48%,#eef7f5 100%); border-bottom:1px solid var(--line); padding:64px 0 56px}
.hero h1{font-size:44px; line-height:1.28; margin:0 0 14px; letter-spacing:-1px; font-weight:800}
.hero h1 em{font-style:normal; color:var(--b); position:relative; white-space:nowrap}
.hero h1 em::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:8px; background:#d7e3ff; z-index:-1; border-radius:2px}
.hero-sub{color:var(--sub); font-size:16px; margin:0 0 26px; max-width:640px}
.hero-search{display:flex; gap:8px; max-width:520px; margin-bottom:22px}
.hero-search input{flex:1; padding:13px 18px; border:1px solid var(--line); border-radius:var(--r-m); font-size:14.5px; outline:none; background:#fff; box-shadow:var(--sh)}
.hero-search input:focus{border-color:#a9bdf7}
.hero-search button{padding:0 22px; border:0; border-radius:var(--r-m); background:var(--b); color:#fff; font-size:14.5px; cursor:pointer; font-family:inherit}
.hero-search button:hover{background:var(--b-d)}
.hero-stats{display:flex; gap:22px; color:var(--sub); font-size:13px}
.hero-stats b{color:var(--ink); font-size:15px}

/* 通用区块 */
.sec{padding:52px 22px}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px}
.sec-head h2{font-size:22px; margin:0 0 4px; letter-spacing:-.3px}
.sec-head p{margin:0; color:var(--sub); font-size:13.5px}
.more{font-size:13.5px; color:var(--b); white-space:nowrap}

/* 卡片 */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s}
.card:hover{transform:translateY(-3px); box-shadow:0 10px 28px rgba(20,30,50,.08); border-color:#d5dced; text-decoration:none}
.card-thumb{height:150px; background-size:cover; background-position:center; background-color:#eef3ff}
.card-body{padding:16px 18px 18px; display:flex; flex-direction:column; flex:1}
.card-cat{font-size:11.5px; color:var(--b); background:var(--b-l); padding:1px 8px; border-radius:4px; align-self:flex-start; margin-bottom:9px}
.card h3{font-size:16.5px; line-height:1.5; margin:0 0 8px; color:var(--ink); font-weight:650}
.card p{margin:0 0 12px; color:var(--sub); font-size:13.5px; line-height:1.65; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card-meta{margin-top:auto; font-size:12px; color:var(--sub2)}

/* 栏目卡 */
.cat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.cat-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-m); padding:18px 20px; display:flex; flex-direction:column; gap:4px; transition:border-color .15s, background .15s}
.cat-card:hover{border-color:#c3d2f8; background:#fbfcff; text-decoration:none}
.cat-card b{font-size:15.5px; color:var(--ink)}
.cat-card span{font-size:13px; color:var(--sub); line-height:1.6}
.cat-card i{font-style:normal; font-size:12px; color:var(--sub2); margin-top:4px}

/* 列表页 */
.page{padding-top:34px; padding-bottom:60px}
.crumbs{font-size:12.5px; color:var(--sub2); margin-bottom:18px; display:flex; gap:7px; flex-wrap:wrap}
.crumbs a{color:var(--sub)}
.crumbs b{color:var(--ink); font-weight:500; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.page-head{padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:8px}
.page-head h1{font-size:30px; margin:0 0 8px; letter-spacing:-.5px}
.page-head p{margin:0; color:var(--sub); font-size:14px}

.rows{display:flex; flex-direction:column}
.row{display:flex; gap:18px; padding:20px 0; border-bottom:1px solid var(--line2); color:inherit}
.row:hover{text-decoration:none}
.row:hover h3{color:var(--b)}
.row-thumb{width:150px; height:96px; flex-shrink:0; border-radius:var(--r-s); background-size:cover; background-position:center; background-color:#eef3ff}
.row-body{min-width:0}
.row-body h3{font-size:17px; margin:0 0 6px; line-height:1.5; transition:color .15s}
.row-body p{margin:0 0 8px; color:var(--sub); font-size:13.5px; line-height:1.6}
.row-meta{font-size:12px; color:var(--sub2)}

.pager{display:flex; align-items:center; justify-content:center; gap:18px; padding:32px 0}
.pager a{padding:7px 16px; border:1px solid var(--line); border-radius:999px; font-size:13.5px; background:#fff}
.pager a:hover{border-color:#b9c9f5; text-decoration:none}
.pager .off{color:#c3cbd6; padding:7px 16px; font-size:13.5px}
.pinfo{font-size:13px; color:var(--sub2)}
.empty{color:var(--sub); padding:40px 0; text-align:center}

/* 文章页 */
.post-wrap{padding-top:28px; padding-bottom:50px; max-width:1080px}
.post{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:44px 52px 40px; margin-bottom:28px}
.post-head{border-bottom:1px solid var(--line2); padding-bottom:22px; margin-bottom:30px}
.post-cat{font-size:12px; color:var(--b); background:var(--b-l); padding:2px 10px; border-radius:4px}
.post-head h1{font-size:34px; line-height:1.36; margin:14px 0 12px; letter-spacing:-.6px}
.post-sum{color:var(--sub); font-size:15.5px; margin:0 0 16px; line-height:1.7}
.post-meta{display:flex; gap:18px; font-size:12.5px; color:var(--sub2)}
.post-main{display:grid; grid-template-columns:1fr 200px; gap:44px; align-items:start}

.post-body{font-size:17px; line-height:1.9; color:#252b34; min-width:0}
.post-body h2{font-size:24px; margin:44px 0 14px; letter-spacing:-.4px; padding-top:6px}
.post-body h3{font-size:19px; margin:32px 0 10px}
.post-body h4{font-size:16.5px; margin:24px 0 8px; color:var(--ink2)}
.post-body p{margin:16px 0}
.post-body ul,.post-body ol{margin:16px 0; padding-left:24px}
.post-body li{margin:8px 0}
.post-body strong{font-weight:650; color:var(--ink)}
.post-body a{border-bottom:1px solid #c7d6fb}
.post-body blockquote{margin:24px 0; padding:14px 20px; background:#f7f9fd; border-left:3px solid var(--b); border-radius:0 var(--r-s) var(--r-s) 0; color:var(--ink2)}
.post-body blockquote p{margin:4px 0}
.post-body code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.9em; background:#f1f4f9; border:1px solid #e6eaf1; border-radius:4px; padding:1px 5px; color:#2b3440}
.post-body pre.code{background:#fbfcfe; border:1px solid var(--line); border-radius:var(--r-m); padding:18px 20px; overflow:auto; margin:22px 0; line-height:1.7}
.post-body pre.code code{background:none; border:0; padding:0; font-size:13.5px}
.post-body hr{border:0; border-top:1px solid var(--line); margin:36px 0}
.post-body .tbl{overflow:auto; margin:22px 0}
.post-body table{border-collapse:collapse; width:100%; font-size:14px}
.post-body th{background:#f7f9fc; text-align:left; padding:9px 12px; border:1px solid var(--line); font-weight:600; white-space:nowrap}
.post-body td{padding:9px 12px; border:1px solid var(--line); vertical-align:top}
.post-body th,.post-body td{word-break:keep-all; overflow-wrap:break-word}
.post-body img{margin:22px 0; border:1px solid var(--line)}

.toc{position:sticky; top:88px; font-size:13px; border-left:1px solid var(--line); padding-left:16px}
.toc-t{font-size:11.5px; color:var(--sub2); letter-spacing:.1em; margin-bottom:10px; font-weight:600}
.toc a{display:block; color:var(--sub); padding:4px 0; line-height:1.5}
.toc a:hover{color:var(--b); text-decoration:none}

.post-foot{margin-top:46px; padding-top:24px; border-top:1px solid var(--line2)}
.tags{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px}
.tags a{font-size:12.5px; color:var(--sub); background:#f2f4f8; padding:3px 10px; border-radius:999px}
.tags a:hover{background:var(--b-l); color:var(--b); text-decoration:none}
.nav-posts{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.np{display:block; border:1px solid var(--line); border-radius:var(--r-m); padding:14px 16px; background:#fcfdfe}
.np:hover{border-color:#c3d2f8; text-decoration:none}
.np i{display:block; font-style:normal; font-size:11.5px; color:var(--sub2); margin-bottom:4px}
.np b{font-size:13.5px; color:var(--ink); font-weight:500; line-height:1.5}
.np.right{text-align:right}

.related h2{font-size:19px; margin:0 0 18px}

/* 搜索 */
.search-big{display:flex; gap:8px; margin:22px 0 10px; max-width:520px}
.search-big input{flex:1; padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-m); font-size:14.5px; outline:none; background:#fff}
.search-big input:focus{border-color:#a9bdf7}
.search-big button{padding:0 22px; border:0; border-radius:var(--r-m); background:var(--b); color:#fff; cursor:pointer; font-family:inherit; font-size:14px}

/* 404 */
.nf{text-align:center; padding:70px 0 90px}
.nf-code{font-size:88px; font-weight:800; color:#e2e8f5; letter-spacing:-4px; line-height:1}
.nf h1{font-size:26px; margin:8px 0 10px}
.nf p{color:var(--sub); margin:0 0 24px}
.nf .search-big{margin:0 auto 20px}
.nf-links{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; font-size:13.5px}

/* 页脚 */
.site-foot{background:#fff; border-top:1px solid var(--line); margin-top:20px}
.foot-in{display:flex; justify-content:space-between; gap:30px; padding:38px 22px 26px; flex-wrap:wrap}
.foot-brand b{font-size:15px}
.foot-brand p{margin:6px 0 0; color:var(--sub2); font-size:13px}
.foot-links{display:flex; gap:18px; flex-wrap:wrap; font-size:13.5px; align-items:flex-start}
.foot-links a{color:var(--sub)}
.foot-bottom{display:flex; justify-content:space-between; gap:14px; padding:14px 22px 26px; color:var(--sub2); font-size:12px; flex-wrap:wrap; border-top:1px solid var(--line2); padding-top:18px}

/* 页脚搜索（仅手机显示） */
.foot-search{display:none; width:100%; gap:8px; margin-bottom:18px}
.foot-search input{flex:1; min-width:0; padding:11px 14px; border:1px solid var(--line); border-radius:var(--r-s); font-size:16px; outline:none; background:var(--bg); color:var(--ink); font-family:inherit}
.foot-search button{padding:0 16px; border:0; border-radius:var(--r-s); background:var(--b); color:#fff; font-size:14px; cursor:pointer; font-family:inherit; flex-shrink:0}

/* 触摸优化 */
a,button{-webkit-tap-highlight-color:transparent}
.post-body{overflow-wrap:break-word; word-break:break-word}
.post-body .tbl{-webkit-overflow-scrolling:touch}

/* 响应式 */
@media (max-width:980px){
  .post-main{grid-template-columns:1fr; gap:0}
  .toc{display:none}
  .grid-3,.cat-grid{grid-template-columns:repeat(2,1fr)}
  .post{padding:32px 26px}
}

@media (max-width:680px){
  /* 头部压成单行，导航横向滑动，搜索下沉到页脚 */
  .head-in{height:56px; padding:0; flex-wrap:nowrap; gap:0}
  .brand-name{font-size:16px}
  .brand-sub{display:none}
  .main-nav{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-left:6px}
  .main-nav::-webkit-scrollbar{display:none}
  .main-nav a{font-size:13.5px; padding:8px 10px}
  .head-search{display:none}
  .foot-search{display:flex}

  .wrap{padding:0 16px}

  .hero{padding:34px 0 30px}
  .hero h1{font-size:28px; letter-spacing:-.5px; line-height:1.32}
  .hero-sub{font-size:14.5px; margin-bottom:20px}
  .hero-search{margin-bottom:18px}
  .hero-search input{padding:12px 14px; font-size:16px}
  .hero-search button{padding:0 16px; font-size:14px}
  .hero-stats{gap:14px; font-size:12.5px; flex-wrap:wrap}

  .sec{padding:32px 16px}
  .sec-head{margin-bottom:16px}
  .sec-head h2{font-size:19px}
  .grid-3,.cat-grid{grid-template-columns:1fr; gap:14px}
  .card-thumb{height:132px}

  .row{gap:12px; padding:16px 0}
  .row-thumb{width:92px; height:70px}
  .row-body h3{font-size:15.5px; margin-bottom:4px}
  .row-body p{font-size:13px; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

  .page{padding-top:22px; padding-bottom:44px}
  .page-head h1{font-size:23px}
  .crumbs b{max-width:50%}
  .pager{gap:10px; padding:24px 0}

  .post-wrap{padding-top:12px; padding-bottom:36px}
  .post{padding:22px 16px 20px; border-radius:var(--r-m)}
  .post-head{padding-bottom:18px; margin-bottom:22px}
  .post-head h1{font-size:23px; line-height:1.42; margin:12px 0 10px}
  .post-sum{font-size:14.5px}
  .post-meta{gap:12px; font-size:12px; flex-wrap:wrap}
  .post-body{font-size:16.5px; line-height:1.85}
  .post-body h2{font-size:20px; margin:34px 0 12px}
  .post-body h3{font-size:17.5px; margin:26px 0 8px}
  .post-body h4{font-size:16px}
  .post-body ul,.post-body ol{padding-left:20px}
  .post-body blockquote{padding:12px 14px; margin:20px 0}
  .post-body pre.code{padding:14px; font-size:12.5px; border-radius:var(--r-s); margin:18px 0}
  /* 宽表格：横向滑动 + 右侧阴影提示还有内容 */
  .post-body .tbl{box-shadow:inset -10px 0 10px -10px rgba(20,30,50,.2)}
  .post-body table{font-size:12.5px; min-width:480px}
  .post-body th{white-space:normal; padding:8px 9px}
  .post-body td{padding:8px 9px}

  .nav-posts{grid-template-columns:1fr}
  .np.right{text-align:left}
  .search-big input{font-size:16px}
  .search-big button{padding:0 16px}

  .nf{padding:48px 0 60px}
  .nf-code{font-size:64px}
  .nf h1{font-size:21px}

  .foot-in{padding:28px 16px 20px; gap:18px}
  .foot-links{gap:14px}
  .foot-bottom{flex-direction:column; gap:6px; padding:14px 16px 22px}
}

@media (max-width:400px){
  .brand-name{font-size:15px}
  .main-nav a{font-size:13px; padding:7px 8px}
  .hero h1{font-size:24px}
  .hero-sub{font-size:14px}
  .sec{padding:28px 16px}
  .card-thumb{height:118px}
  .post-head h1{font-size:21px}
  .post-body{font-size:16px}
  .post-body h2{font-size:19px}
  .post-body pre.code{font-size:12px; padding:12px}
  .row-thumb{width:80px; height:62px}
}

/* 触摸屏：取消悬停位移，避免点击后卡片卡在浮起状态 */
@media (hover:none){
  .card:hover{transform:none; box-shadow:var(--sh); border-color:var(--line)}
  .cat-card:hover{background:#fff; border-color:var(--line)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  .progress{display:none}
}