@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600&display=swap');

/* ══ 微信设计系统 ══════════════════════════════════════════ */
:root {
  --wx-green:     #07C160;
  --wx-green-d:   #06AD56;
  --wx-green-bg:  #EDFAF3;
  --wx-green-bd:  #B7E5CF;
  --wx-blue:      #576B95;   /* 微信链接色 */

  --bg:           #F7F7F7;   /* 微信灰底 */
  --bg-card:      #FFFFFF;
  --bg-hover:     #F2F2F2;

  --t1:           #191919;   /* 主文字 */
  --t2:           #353535;
  --t3:           #888888;
  --t4:           #C4C4C4;

  --line:         #E5E5E5;   /* 微信分割线 */
  --line2:        #EFEFEF;

  /* 分类色 */
  --c-tech:  #576B95;
  --c-data:  #C07A1A;
  --c-algo:  #07C160;
  --c-life:  #9B6BB5;
  --c-misc:  #909090;

  --nav-h:  44px;   /* 微信导航栏标准高度 */
  --side-w: 300px;
  --r:      6px;
  --font:   -apple-system, BlinkMacSystemFont, 'PingFang SC',
            'Helvetica Neue', 'Microsoft YaHei', sans-serif;
  --serif:  'Noto Serif SC', Georgia, serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--t1);font-family:var(--font);line-height:1.6}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit}
img{display:block;max-width:100%}

/* ══ 顶栏：微信绿色导航栏风格 ═══════════════════════════════ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav-h);
  background:var(--wx-green);
  display:flex;align-items:center;
  padding:0 16px;gap:10px;
  box-shadow:0 1px 0 rgba(0,0,0,.1);
}
.topbar-logo{
  display:flex;align-items:center;gap:8px;
  font-size:.92rem;font-weight:600;
  color:#fff;cursor:pointer;flex-shrink:0;
  letter-spacing:-.01em;
}
.logo-icon{
  width:28px;height:28px;border-radius:7px;
  background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.logo-icon svg{width:15px;height:15px;}
.topbar-spacer{flex:1}
.topbar-search{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.25);
  border-radius:6px;padding:5px 11px;
  font-size:.78rem;color:rgba(255,255,255,.85);
  cursor:text;transition:background .15s;
  min-width:120px;
}
.topbar-search:hover{background:rgba(255,255,255,.26);}
.topbar-search svg{width:13px;height:13px;flex-shrink:0;opacity:.85;}
.topbar-search kbd{
  font-family:inherit;font-size:.65rem;
  background:rgba(255,255,255,.18);border:none;
  border-radius:3px;padding:0 4px;color:rgba(255,255,255,.75);
}
.topbar-about{
  font-size:.8rem;color:rgba(255,255,255,.9);
  cursor:pointer;padding:4px 9px;border-radius:5px;
  transition:background .13s;flex-shrink:0;
}
.topbar-about:hover{background:rgba(255,255,255,.18);}
.search-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.4);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:70px;
}
.search-panel{
  width:460px;max-width:92vw;background:var(--bg-card);
  border-radius:10px;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.15);
}
.search-head{
  display:flex;align-items:center;gap:8px;
  padding:12px 14px;border-bottom:1px solid var(--line);
  background:var(--bg-card);
}
.search-head svg{width:15px;height:15px;color:var(--t3);flex-shrink:0}
.search-head input{
  flex:1;border:none;outline:none;font:inherit;
  font-size:.9rem;color:var(--t1);background:transparent;
}
.search-head input::placeholder{color:var(--t3)}
.search-body{max-height:320px;overflow-y:auto}
.s-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;cursor:pointer;
  border-bottom:1px solid var(--line2);transition:background .1s;
}
.s-item:last-child{border-bottom:none}
.s-item:hover{background:var(--bg)}
.s-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.s-title{font-size:.86rem;font-weight:500;margin-bottom:2px}
.s-meta{font-size:.73rem;color:var(--t3)}
.s-empty{padding:28px;text-align:center;font-size:.82rem;color:var(--t3)}
.search-foot{
  padding:7px 14px;border-top:1px solid var(--line);
  background:var(--bg);font-size:.7rem;color:var(--t4);display:flex;gap:10px;
}
.search-foot kbd{
  border:1px solid var(--line);border-radius:3px;
  padding:0 4px;background:var(--bg-card);font-family:inherit;font-size:.68rem;
}

/* ══ 布局 ══ */
.layout{display:flex;padding-top:var(--nav-h);min-height:100vh}

/* ══ 侧边栏：完全微信设置页/通讯录风格 ══════════════════════ */
.sidebar{
  width:var(--side-w);flex-shrink:0;
  background:var(--bg);           /* 微信灰底 */
  border-right:1px solid var(--line);
  position:sticky;top:var(--nav-h);
  height:calc(100vh - var(--nav-h));
  overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;
  scrollbar-width:none;
}
.sidebar::-webkit-scrollbar{display:none}

/* 个人信息：微信「我」页面风格 */
.sb-profile{
  background:var(--bg-card);
  padding:16px 14px;
  display:flex;align-items:center;gap:12px;
  cursor:pointer;
  transition:background .12s, box-shadow .15s;
  border-bottom:8px solid var(--bg);
}
.sb-profile:hover{
  background:#F5FBF7;
  box-shadow:inset 3px 0 0 var(--wx-green);
}
.sb-avatar{
  width:50px;height:50px;border-radius:8px; /* 微信头像方形圆角 */
  background:var(--wx-green-bg);
  border:1px solid var(--wx-green-bd);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;flex-shrink:0;overflow:hidden;
}
.sb-avatar img{width:100%;height:100%;object-fit:cover}
.sb-info{flex:1;min-width:0}
.sb-name{
  font-size:.95rem;font-weight:600;color:var(--t1);
  margin-bottom:3px;
}
.sb-bio{
  font-size:.73rem;color:var(--t3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sb-arrow{color:var(--t4);font-size:.8rem;margin-left:auto;flex-shrink:0}


/* 导航组：微信设置项风格 */
.sb-group{
  background:var(--bg-card);
  margin-bottom:8px;  /* 微信组间距 */
}
.sb-group-label{
  font-size:.68rem;color:var(--t3);
  padding:8px 14px 4px;
}
.sb-nav-item{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--line2);
  cursor:pointer;color:var(--t1);font-size:.86rem;
  transition:background .12s, box-shadow .12s;position:relative;
  background:var(--bg-card);
}
.sb-nav-item:last-child{border-bottom:none}
.sb-nav-item:hover{
  background:#F5FBF7;
  box-shadow:inset 3px 0 0 var(--wx-green);
}
/* 选中：左侧绿线，微信标准选中态 */
.sb-nav-item.active{background:#F5FBF7}
.sb-nav-item.active::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--wx-green);
}
/* 左侧彩色小图标（仿微信菜单图标） */
.sb-nav-icon{
  width:30px;height:30px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;flex-shrink:0;
}
.sb-nav-label{flex:1}
.sb-nav-n{
  font-size:.72rem;color:var(--t3);
  background:var(--line2);border-radius:99px;
  padding:1px 7px;
}
.sb-nav-item.active .sb-nav-n{
  background:var(--wx-green-bg);color:var(--wx-green-d);
}
.sb-nav-arrow{color:var(--t4);font-size:.75rem;margin-left:2px}


/* ══ 内容区 ══════════════════════════════════════════════ */
.content{flex:1;min-width:0;padding:8px 24px 60px}

/* 文章列表页标题行 */
.posts-header{
  display:flex;align-items:baseline;gap:10px;
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.posts-header-title{
  font-size:.92rem;font-weight:700;
  color:var(--t1);letter-spacing:-.01em;
}
.posts-header-count{
  font-size:.75rem;color:var(--t3);
}

/* ══ 文章卡片 ══════════════════════════════════════════ */
.post-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
}
@media(max-width:1300px){.post-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:960px) {.post-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px) {.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px) {.post-grid{grid-template-columns:1fr}}

/* ── 卡片容器 ── */
.card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:8px;
  cursor:pointer;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  border-color:var(--wx-green);
}

/* ── 封面图区域 ── */
.card-cover-wrap{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#F0F0F0;
  position:relative;
  flex-shrink:0;
}
.card-cover-wrap img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}
.card:hover .card-cover-wrap img{
  transform:scale(1.03);
}
/* 无封面时的占位色块 */
.card-cover-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:2.2rem;opacity:.55;
}

/* ── 分类角标（叠在封面图左上角） ── */
.card-cat-badge{
  position:absolute;top:10px;left:10px;
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:99px;
  font-size:.68rem;font-weight:600;
  color:#fff;
  backdrop-filter:blur(4px);
  letter-spacing:.01em;
}

/* ── 卡片内容区 ── */
.card-body{
  padding:8px 10px 8px;
  flex:1;display:flex;flex-direction:column;
  gap:5px;
}

/* 标题 */
.card-title{
  font-size:.9rem;
  font-weight:600;
  line-height:1.4;
  color:var(--t1);
  letter-spacing:-.01em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 摘要 */
.card-excerpt{
  font-size:.75rem;
  color:var(--t3);
  line-height:1.55;
  flex:1;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ── 底部 meta 行 ── */
.card-footer{
  display:flex;
  align-items:center;
  gap:5px;
  padding-top:7px;
  border-top:1px solid var(--line2);
  margin-top:auto;
}
.card-date{
  font-size:.71rem;
  color:var(--t4);
}
.card-dot{
  width:3px;height:3px;border-radius:50%;
  background:var(--t4);flex-shrink:0;
}
.card-tag{
  font-size:.71rem;
  color:var(--t4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:80px;
}
.card-rt{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:3px;
  background:var(--wx-green-bg);
  color:var(--wx-green-d);
  padding:2px 8px;
  border-radius:99px;
  font-size:.68rem;font-weight:500;
  border:1px solid var(--wx-green-bd);
  flex-shrink:0;
}

/* ══ 文章详情 ══════════════════════════════════════════ */

/* 外层让文章居中、最大宽度 */
.article{
  max-width:780px;
  margin:0 auto;           /* 居中关键 */
  width:100%;
}

.art-back{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.8rem;color:var(--wx-blue);cursor:pointer;
  margin-bottom:16px;padding:6px 12px;
  border:1px solid var(--line);border-radius:5px;
  background:var(--bg-card);transition:all .13s;
}
.art-back:hover{border-color:var(--wx-green);color:var(--wx-green)}

/* 头部卡片 */
.art-header{
  background:var(--bg-card);
  border:1px solid var(--line);border-radius:10px;
  padding:24px 28px 20px;margin-bottom:10px;
}
.art-cat-row{display:flex;align-items:center;gap:6px;margin-bottom:12px}
.art-cat-dot{width:7px;height:7px;border-radius:50%}
.art-cat-name{font-size:.76rem;font-weight:600}

.art-title{
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.6vw,1.9rem);
  font-weight:600;line-height:1.32;
  color:var(--t1);margin-bottom:16px;
  letter-spacing:-.02em;
}

/* 作者栏 */
.art-author-bar{
  display:flex;align-items:center;gap:10px;
  padding:12px 0 0;border-top:1px solid var(--line2);
}
.art-author-avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--wx-green-bg);border:1px solid var(--wx-green-bd);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;overflow:hidden;
}
.art-author-avatar img{width:100%;height:100%;object-fit:cover}
.art-author-info{flex:1}
.art-author-name{font-size:.82rem;font-weight:600;color:var(--t1)}
.art-author-meta{font-size:.73rem;color:var(--t3);margin-top:2px}
.art-meta-tags{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto}
.art-meta-tag{
  background:var(--wx-green-bg);color:var(--wx-green-d);
  padding:2px 9px;border-radius:99px;
  font-size:.7rem;border:1px solid var(--wx-green-bd);
}

/* 正文卡片 */
.art-body-wrap{
  background:var(--bg-card);
  border:1px solid var(--line);border-radius:10px;
  padding:28px 32px 32px;
}

/* 正文 */
.art-body{
  font-size:.96rem;line-height:1.92;
  color:var(--t1);word-break:break-word;
}
.art-body>*+*{margin-top:1.05em}

.art-body h2{
  font-size:1.12rem;font-weight:700;
  margin:1.9em 0 .6em;padding-left:11px;
  border-left:3px solid var(--wx-green);
  color:var(--t1);
}
.art-body h3{
  font-size:1.01rem;font-weight:600;
  margin:1.5em 0 .5em;color:var(--t2);
}
.art-body h4{font-size:.95rem;font-weight:600;margin:1.2em 0 .4em;color:var(--t3)}
.art-body p{margin-bottom:0}
.art-body a{color:var(--wx-blue);border-bottom:1px solid rgba(87,107,149,.25)}
.art-body a:hover{border-bottom-color:var(--wx-blue)}
.art-body strong{font-weight:600;color:var(--t1)}
.art-body em{font-style:italic;color:var(--t2)}

.art-body pre{
  background:#1A1A1A;border-radius:8px;
  padding:0;margin:1.3em 0;overflow:hidden;
  border:1px solid #2A2A2A;
}
.art-body pre::before{
  content:'● ● ●';display:block;padding:8px 14px;
  background:#252525;border-bottom:1px solid #2A2A2A;
  font-size:.68rem;color:#555;letter-spacing:4px;
}
.art-body pre code{
  display:block;padding:14px 16px;
  font-family:'Fira Code','Cascadia Code',ui-monospace,monospace;
  font-size:.83rem;line-height:1.68;color:#D4D4D4;
}
.art-body p code{
  background:#F2F2F2;color:#C7254E;
  padding:2px 6px;border-radius:4px;
  font-family:'Fira Code',ui-monospace,monospace;font-size:.84em;
}
.art-body blockquote{
  border-left:4px solid var(--wx-green);background:var(--wx-green-bg);
  margin:1.3em 0;padding:10px 16px;
  border-radius:0 8px 8px 0;
}
.art-body blockquote p{color:var(--t2);font-style:italic;margin-bottom:0}
.art-body img{
  border-radius:8px;border:1px solid var(--line);
  margin:1.3em auto;display:block;max-width:100%;
}
.art-body ul,.art-body ol{padding-left:1.5em;margin:0}
.art-body li{margin-bottom:.35em}
.art-body ul>li::marker{color:var(--wx-green)}
.art-body table{width:100%;border-collapse:collapse;margin:1.3em 0;font-size:.88rem}
.art-body thead tr{background:var(--wx-green-bg)}
.art-body th{
  font-weight:600;padding:9px 12px;
  border:1px solid var(--wx-green-bd);
  color:var(--wx-green-d);text-align:left;
}
.art-body td{padding:8px 12px;border:1px solid var(--line2)}
.art-body tr:nth-child(even) td{background:#FAFAFA}
.art-body hr{border:none;border-top:1px solid var(--line);margin:1.8em 0}


/* ══ 首页 ════════════════════════════════════════════════ */


/* 文章卡片区 */
.home-articles{
  background: var(--bg-card);
  border-radius: 8px;
  padding: 4px 16px 8px;
  margin-top: 16px;
}

/* 年份块 */
.home-section{ margin-top: 28px; }
.home-section:first-child{ margin-top: 20px; }

.home-section-year{
  font-size: .78rem;
  font-weight: 700;
  color: var(--t2);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 0;
  letter-spacing: .02em;
}

/* ══ 公众号风格文章列表 ══════════════════════════════════════ */
.mp-list{ list-style:none; margin:0; padding:0; }

.mp-item{
  display: flex;
  align-items: center;
  gap: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--line2);
  cursor: pointer;
  transition: background .12s;
  border-radius: 0;
}
.mp-item:last-child{ border-bottom: none; }
.mp-item:hover{ background: var(--bg-hover); border-radius: 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.mp-item:hover .mp-title{ color: var(--wx-green-d); }

/* 左侧文字区 */
.mp-body{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 标题 */
.mp-title{
  font-size: .95rem;
  font-weight: 600;
  color: var(--t1);
  line-height: 1.45;
  letter-spacing: -.01em;
  transition: color .13s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 摘要 */
.mp-excerpt{
  font-size: .76rem;
  color: var(--t3);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* meta 行 */
.mp-meta{
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.mp-cat{
  font-size: .68rem;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 99px;
  border: 1px solid;
  line-height: 1.6;
  flex-shrink: 0;
}
.mp-dot{
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--t4);
  flex-shrink: 0;
}
.mp-date, .mp-rt{
  font-size: .72rem;
  color: var(--t4);
  white-space: nowrap;
}



/* 查看更多 */
.home-more{
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line2);
}
.home-more-link{
  font-size: .82rem;
  font-weight: 500;
  color: var(--wx-green-d);
  cursor: pointer;
  transition: color .13s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.home-more-link:hover{ color: var(--wx-green); }

/* ══ 文章热力图 ═══════════════════════════════════════════ */
.heatmap-wrap{
  margin: 16px 0 0;
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.heatmap-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.heatmap-title{
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t1);
}
.heatmap-legend{
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .73rem;
  color: var(--t1);
}
.heatmap-legend-cell{
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* 月份标签行 */
.heatmap-months{
  display: flex;
  gap: 0;
  margin-bottom: 4px;
  padding-left: 22px; /* 对齐星期标签宽度 */
}
.heatmap-month-label{
  font-size: .62rem;
  color: var(--t4);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 主图：星期标签 + 格子 */
.heatmap-body{
  display: flex;
  gap: 6px;
}
.heatmap-weekdays{
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: space-around;
  padding-top: 0;
}
.heatmap-weekday{
  font-size: .62rem;
  color: var(--t1);
  height: 11px;
  line-height: 11px;
  width: 16px;
  text-align: right;
}

/* 格子容器（每列=一周，7行=7天）*/
.heatmap-grid-wrap{
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.heatmap-fade-left{
  position: absolute;
  left: 0; top: 0; bottom: 4px;
  width: 40px;
  background: linear-gradient(to right, var(--bg-card), transparent);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .2s;
}
.heatmap-grid{
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.heatmap-grid::-webkit-scrollbar{ display:none; }
.heatmap-grid.dragging{
  cursor: grabbing;
  scroll-behavior: auto;
}
.heatmap-week{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.heatmap-cell{
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--line2);
  flex-shrink: 0;
  cursor: default;
  position: relative;
  transition: transform .1s;
}
.heatmap-cell:hover{ transform: scale(1.3); z-index:10; }
.heatmap-cell[data-count="0"]{ background: var(--line2); }
.heatmap-cell[data-count="1"]{ background: #bbf7d0; }
.heatmap-cell[data-count="2"]{ background: #4ade80; }
.heatmap-cell[data-count="3"]{ background: #16a34a; }
.heatmap-cell[data-count="4"]{ background: #166534; }

/* tooltip */
.heatmap-cell::after{
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--t1);
  color: #fff;
  font-size: .65rem;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 100;
}
.heatmap-cell:hover::after{ opacity: 1; }

/* 底部总结行 */
.heatmap-summary{
  margin-top: 10px;
  font-size: .73rem;
  color: var(--t3);
}
.heatmap-summary b{ color: var(--t1); font-weight: 600; }

/* ══ Loading ══ */
.loading{display:flex;align-items:center;justify-content:center;gap:5px;padding:80px}
.ld{
  width:7px;height:7px;border-radius:50%;
  background:var(--wx-green);opacity:.3;
  animation:ld .7s ease-in-out infinite;
}
.ld:nth-child(2){animation-delay:.14s}
.ld:nth-child(3){animation-delay:.28s}
@keyframes ld{0%,80%,100%{opacity:.25;transform:scale(.85)}40%{opacity:1;transform:scale(1)}}
.empty{text-align:center;padding:60px;color:var(--t3);font-size:.82rem;grid-column:1/-1}

/* ══ 移动端 ══ */
@media(max-width:680px){
  .sidebar{display:none}
  .content{padding:10px 10px 50px}
  .topbar{padding:0 12px}
  .art-body-wrap{padding:16px 16px 20px}
  .art-header{padding:16px 16px 14px}
}

/* ══ 侧边栏社交链接 ══════════════════════════════════════════ */
.sb-links{
  background:var(--bg-card);
  border-bottom:8px solid var(--bg);
}
.sb-link-item{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--line2);
  cursor:pointer;text-decoration:none;
  color:var(--t1);font-size:.86rem;
  transition:background .12s, box-shadow .12s;
}
.sb-link-item:last-child{border-bottom:none}
.sb-link-item:hover{
  background:#F5FBF7;
  box-shadow:inset 3px 0 0 var(--wx-green);
}
.sb-link-icon{
  width:30px;height:30px;border-radius:7px;
  background:#F3F3F3;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--t2);
}
.sb-link-icon svg{width:16px;height:16px;}
.sb-link-item span:nth-child(2){flex:1}
.sb-link-arrow{color:var(--t4);font-size:.75rem}

/* ══ 关于页 v2：左右非对称布局 ═══════════════════════════════ */
.about2{
  display:flex;
  gap:48px;
  align-items:flex-start;
  max-width:900px;
  margin:0 auto;
  padding:48px 0 100px;
}

/* ── 左栏：sticky 身份区 ── */
.about2-left{
  width:220px;
  flex-shrink:0;
  position:sticky;
  top:calc(var(--nav-h) + 32px);
}
.about2-avatar{
  width:80px;height:80px;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:16px;
  background:var(--line2);
}
.about2-avatar img{width:100%;height:100%;object-fit:cover}
.about2-name{
  font-size:1.05rem;font-weight:700;
  color:var(--t1);letter-spacing:-.02em;
  margin-bottom:4px;
}
.about2-role{
  font-size:.72rem;color:var(--wx-green-d);
  font-weight:500;margin-bottom:6px;
  line-height:1.5;
}
.about2-slogan{
  font-size:.72rem;color:var(--t3);
  font-style:italic;line-height:1.55;
  margin-bottom:18px;
}
.about2-tags{
  display:flex;flex-wrap:wrap;gap:4px;
  margin-bottom:20px;
}
.about2-tag{
  font-size:.65rem;padding:2px 8px;
  border:1px solid var(--line);border-radius:99px;
  color:var(--t3);background:transparent;
}
.about2-links{
  display:flex;flex-direction:column;gap:8px;
}
.about2-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.75rem;color:var(--t3);
  text-decoration:none;
  transition:color .13s;
}
.about2-link:hover{color:var(--t1)}
.about2-link svg{width:14px;height:14px;flex-shrink:0}

/* ── 右栏：内容流 ── */
.about2-right{
  flex:1;
  min-width:0;
  padding-top:4px;
}
.about2-bio{
  font-size:.92rem;
  line-height:2;
  color:var(--t2);
  white-space:pre-line;
  margin-bottom:32px;
  letter-spacing:.01em;
}
.about2-quote{
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:600;
  color:var(--t1);
  letter-spacing:.02em;
  padding:20px 0 20px 20px;
  border-left:2px solid var(--wx-green);
  margin-bottom:48px;
  font-style:italic;
}

/* Timeline 极简 */
.about2-timeline{
  display:flex;flex-direction:column;
  gap:0;
}
.about2-tl-item{
  display:flex;
  gap:32px;
  padding:18px 0;
  border-bottom:1px solid var(--line2);
  align-items:flex-start;
}
.about2-tl-item:last-child{border-bottom:none}
.about2-tl-year{
  font-size:.72rem;font-weight:700;
  color:var(--t4);letter-spacing:.08em;
  flex-shrink:0;width:36px;
  padding-top:2px;
}
.about2-tl-body{flex:1}
.about2-tl-title{
  font-size:.88rem;font-weight:600;
  color:var(--t1);margin-bottom:3px;
}
.about2-tl-desc{
  font-size:.78rem;color:var(--t3);
  line-height:1.6;
}

/* 移动端：竖排 */
@media(max-width:680px){
  .about2{flex-direction:column;gap:32px;padding:20px 0 60px}
  .about2-left{position:static;width:100%}
  .about2-avatar{width:64px;height:64px}
}