/* 澄观嘉名 · 起名知识（列表页 / 详情页） */
/* ==================== 布局 ==================== */
.art-page{padding:30px 0 50px}
.art-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:28px;align-items:start;
}
.art-main{min-width:0;display:grid;gap:24px}

/* 面包屑右侧 CTA */
.crumbs-inner{flex-wrap:wrap}
.crumbs-cta{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  color:var(--zhuyin);font-family:var(--font-sans);font-size:12.5px;
}
.crumbs-cta .icon{width:14px;height:14px}
.crumbs-cta:hover{color:var(--zhuyin-light)}

/* ==================== 栏目说明 ==================== */
.art-intro{
  padding:26px 30px;border-radius:12px;
  background:var(--paper);border:1px solid var(--line);
}
.art-intro h1{
  font:900 30px/1.3 var(--font-serif);color:var(--chengqing);letter-spacing:.05em;
}
.art-intro p{margin-top:10px;font-size:14px;line-height:2;color:var(--ink-muted)}

/* ==================== 区块头 ==================== */
.art-block{
  padding:24px 28px;border-radius:12px;
  background:var(--paper);border:1px solid var(--line);
}
.art-block-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:18px;
}
.more-link{font-family:var(--font-sans);font-size:12.5px;color:var(--gutongjin)}
.more-link:hover{color:var(--zhuyin)}
.cat-filters{display:flex;flex-wrap:wrap;gap:7px}

/* ==================== 封面占位 ==================== */
.art-cover{
  display:grid;place-items:center;flex:none;
  width:100%;height:100%;border-radius:8px;
  font:700 17px/1.4 var(--font-serif);letter-spacing:.08em;
  text-align:center;
}
.cv-ink{color:var(--chengqing);background:linear-gradient(150deg,#E3E9E9,#C9D5D6)}
.cv-seal{color:var(--zhuyin);background:linear-gradient(150deg,#F5E4E1,#E6C9C4)}
.cv-gold{color:#8C6A34;background:linear-gradient(150deg,#F2E6CE,#DFC79B)}
.cv-jade{color:#3F7A62;background:linear-gradient(150deg,#DFEAE3,#C3D8CC)}

/* ==================== 热门文章 ==================== */
.hot-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px}
.hot-main{
  display:grid;grid-template-rows:150px auto;gap:12px;
  padding:14px;border-radius:10px;
  border:1px solid var(--line);background:var(--xuanbai);
  transition:transform .2s var(--ease-out),box-shadow .2s ease;
}
.hot-main:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.hot-main-body h3{
  display:flex;align-items:center;gap:8px;
  font:700 16px/1.6 var(--font-serif);color:var(--chengqing);
}
.hot-flag{
  flex:none;padding:1px 7px;border-radius:4px;
  background:var(--zhuyin);color:var(--xuanbai);
  font:500 10px/1.6 var(--font-sans);font-style:normal;
}
.hot-main-body p{
  margin-top:6px;font-size:12.5px;line-height:1.9;color:var(--ink-muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.hot-side{
  display:block;padding:16px 18px;border-radius:10px;
  border:1px solid var(--line);background:var(--xuanbai);
  transition:transform .2s var(--ease-out),border-color .2s ease;
}
.hot-side+.hot-side{margin-top:14px}
.hot-side:hover{transform:translateX(3px);border-color:var(--gutongjin)}
.hot-side h3{font:700 15px/1.6 var(--font-serif);color:var(--chengqing)}
.hot-side p{
  margin-top:6px;font-size:12.5px;line-height:1.9;color:var(--ink-muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ==================== 快捷表单 ==================== */
.art-form{
  padding:22px 28px;border-radius:12px;
  background:var(--xuanbai-dark);border:1px solid var(--line);
}
.art-form-tabs{display:flex;gap:10px;margin-bottom:16px}
.aft-tab,.art-form-tabs a{
  padding:7px 20px;border-radius:6px;cursor:pointer;
  font-family:var(--font-sans);font-size:13.5px;
  color:var(--ink-muted);background:var(--paper);
  border:1px solid var(--line);
}
.aft-tab.is-active{background:var(--chengqing);color:var(--xuanbai);border-color:var(--chengqing)}
.art-form-tabs a:hover{border-color:var(--gutongjin);color:var(--moxuan)}
.art-form-body{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center}
.aff-field{
  position:relative;
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-radius:6px;
  background:var(--paper);border:1px solid var(--line);
}
.aff-field label{
  flex:none;font-family:var(--font-sans);font-size:13px;color:var(--ink-muted);
}
.aff-field label::after{content:"："}
.aff-field input[type="text"],.aff-field input[type="datetime-local"]{
  flex:1;min-width:0;border:0;background:transparent;
  font-family:var(--font-serif);font-size:14px;color:var(--moxuan);
}
.aff-field input:focus{outline:none}

/* ==================== 文章列表 ==================== */
.art-list{display:grid;gap:0}
.art-item{
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;
  padding:20px 0;border-bottom:1px solid var(--line);
}
.art-item:first-child{padding-top:0}
.art-item:last-child{border-bottom:none;padding-bottom:0}
.ai-cover-link{display:block;height:92px}
.ai-body{min-width:0}
.ai-body h3{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font:700 17px/1.6 var(--font-serif);
}
.ai-cat{flex:none;font-family:var(--font-sans);font-size:12.5px;font-weight:400;color:var(--gutongjin)}
.ai-cat:hover{color:var(--zhuyin)}
.ai-title{color:var(--chengqing);transition:color .18s ease}
.ai-title:hover{color:var(--zhuyin)}
.ai-title.is-hot::after{
  content:"热";margin-left:7px;padding:1px 6px;border-radius:4px;
  background:var(--zhuyin);color:var(--xuanbai);
  font:500 10px/1.6 var(--font-sans);vertical-align:2px;
}
.ai-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ai-tags a{
  padding:2px 10px;border-radius:12px;
  background:rgba(43,74,79,.06);color:var(--chengqing);
  font-family:var(--font-sans);font-size:11.5px;
}
.ai-tags a:hover{background:rgba(183,62,62,.1);color:var(--zhuyin)}
.ai-lead{
  margin-top:9px;font-size:13px;line-height:1.95;color:var(--ink-muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ai-meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px}
.ai-meta span{font-family:var(--font-sans);font-size:11.5px;color:var(--ink-muted);opacity:.85}

/* ==================== 分页 ==================== */
.paging{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:26px}
.page-btn{
  min-width:38px;padding:8px 14px;border-radius:6px;
  font-family:var(--font-sans);font-size:13px;
  color:var(--ink-muted);background:var(--xuanbai);
  border:1px solid var(--line);cursor:pointer;
  transition:all .18s ease;
}
.page-btn:hover:not(:disabled){border-color:var(--gutongjin);color:var(--moxuan)}
.page-btn.is-current{
  background:var(--chengqing);color:var(--xuanbai);border-color:var(--chengqing);
}
.page-btn:disabled{opacity:.4;cursor:not-allowed}

/* ==================== 侧栏 ==================== */
.art-side{display:grid;gap:18px;position:sticky;top:140px}
.side-card{
  padding:20px 22px;border-radius:12px;
  background:var(--paper);border:1px solid var(--line);
}
.side-title{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font:700 16px/1.5 var(--font-serif);color:var(--chengqing);letter-spacing:.04em;
}
.side-title::before{
  content:"";width:3px;height:15px;border-radius:2px;flex:none;
  background:linear-gradient(180deg,var(--gutongjin-light),var(--gutongjin));
}
/* 工具专区卡：竖排色块 + 右侧大字水印图标 */
.side-tools{display:grid;gap:10px}
.side-zone{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;gap:3px;padding:13px 76px 13px 15px;
  border-radius:10px;
  transition:transform .18s var(--ease-out),box-shadow .18s ease;
}
.side-zone strong{
  display:flex;align-items:center;gap:3px;
  font:700 15px/1.6 var(--font-serif);letter-spacing:.04em;
  color:var(--sz-fg);
}
.side-zone strong .icon{width:13px;height:13px;stroke-width:2.4}
.sz-desc{
  font-family:var(--font-sans);font-size:11.5px;line-height:1.7;color:var(--ink-muted);
}
/* z-index:-1 让水印压在色块之上、文字之下；isolation 防止其溢出卡片层叠上下文 */
.sz-art{
  position:absolute;z-index:-1;right:4px;top:50%;transform:translateY(-50%);
  width:64px;height:64px;color:var(--sz-fg);opacity:.15;
}
.sz-art .icon{width:100%;height:100%;stroke-width:1.1}
.side-zone:hover{transform:translateX(2px);box-shadow:0 8px 20px rgba(43,74,79,.1)}
.side-zone:hover .sz-art{opacity:.26}
.sz-gold{--sz-fg:#96743F;background:linear-gradient(100deg,rgba(184,148,95,.22),rgba(184,148,95,.06))}
.sz-seal{--sz-fg:#B73E3E;background:linear-gradient(100deg,rgba(183,62,62,.16),rgba(183,62,62,.05))}
.sz-qing{--sz-fg:#2B4A4F;background:linear-gradient(100deg,rgba(43,74,79,.15),rgba(43,74,79,.05))}
.sz-jade{--sz-fg:#3F7A62;background:linear-gradient(100deg,rgba(63,122,98,.17),rgba(63,122,98,.05))}
.sz-azure{--sz-fg:#3A6480;background:linear-gradient(100deg,rgba(58,100,128,.16),rgba(58,100,128,.05))}
.sz-violet{--sz-fg:#6B5684;background:linear-gradient(100deg,rgba(107,86,132,.16),rgba(107,86,132,.05))}
/* 排行 */
.side-rank{display:grid;gap:11px;counter-reset:rk}
.side-rank li{display:flex;align-items:flex-start;gap:10px}
.rank-num{
  flex:none;width:19px;height:19px;border-radius:4px;
  display:inline-grid;place-items:center;
  background:var(--xuanbai-dark);color:var(--ink-muted);
  font:500 11px/1 var(--font-sans);font-style:normal;
}
.rank-num.rank-top{background:var(--zhuyin);color:var(--xuanbai)}
.side-rank a{
  font-size:13px;line-height:1.7;color:#4A433C;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.side-rank a:hover{color:var(--zhuyin)}
/* 专家卡 */
.se-body{display:flex;gap:14px}
.se-body img{width:64px;height:64px;border-radius:8px;object-fit:cover;flex:none}
.se-info{min-width:0}
.se-info strong{
  display:flex;align-items:center;gap:6px;
  font:700 16px/1.4 var(--font-serif);color:var(--chengqing);
}
.se-info strong .verify-badge{width:17px;height:17px}
.se-info strong .verify-badge .icon{width:10px;height:10px}
.se-info>span{
  display:block;margin-top:3px;
  font-family:var(--font-sans);font-size:11.5px;color:var(--gutongjin);
}
.se-info p{margin-top:6px;font-size:12.5px;line-height:1.8;color:var(--ink-muted)}
.se-btns{display:flex;gap:9px;margin-top:14px}
.se-btns .btn{flex:1;padding:8px 10px;font-size:12.5px}
/* 标签云 */
.side-tags{display:flex;flex-wrap:wrap;gap:7px}
.side-tags a{
  padding:4px 12px;border-radius:14px;
  background:var(--xuanbai);border:1px solid var(--line);
  font-family:var(--font-sans);font-size:12px;color:var(--ink-muted);
}
.side-tags a:hover{border-color:var(--gutongjin);color:var(--chengqing)}

/* ==================== 详情页 ==================== */
.post{
  padding:32px 36px;border-radius:12px;
  background:var(--paper);border:1px solid var(--line);
}
.post-title{
  font:900 clamp(23px,2.6vw,31px)/1.5 var(--font-serif);
  color:var(--chengqing);letter-spacing:.03em;
}
.post-meta{
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;
  margin-top:14px;padding-bottom:18px;border-bottom:1px solid var(--line);
}
.post-meta span{font-family:var(--font-sans);font-size:12.5px;color:var(--ink-muted)}
.post-meta a{color:var(--gutongjin)}
.post-meta a:hover{color:var(--zhuyin)}
.post-meta .pm-ask{
  margin-left:auto;padding:5px 16px;border-radius:16px;cursor:pointer;
  background:rgba(183,62,62,.08);color:var(--zhuyin);
}
.post-meta .pm-ask:hover{background:rgba(183,62,62,.14)}

/* 导读 */
.post-lead{
  margin-top:20px;padding:16px 20px;border-radius:8px;
  background:var(--xuanbai-dark);border-left:3px solid var(--gutongjin);
  font-size:14px;line-height:2;color:var(--ink-muted);
}

/* 正文 */
.post-body{margin-top:22px}
.post-body p{margin-bottom:17px;font-size:15px;line-height:2.15;color:#33302C}
.post-body h2{
  display:flex;align-items:center;gap:11px;
  margin:30px 0 15px;
  font:700 19px/1.6 var(--font-serif);color:var(--chengqing);letter-spacing:.03em;
}
.post-body h2::before{
  content:"";width:4px;height:18px;border-radius:2px;flex:none;
  background:linear-gradient(180deg,var(--gutongjin-light),var(--gutongjin));
}
.post-figure{
  margin:22px 0;padding:34px 20px;border-radius:10px;
  background:var(--xuanbai-dark);border:1px dashed var(--line-strong);
  text-align:center;
}
.post-figure span{
  display:block;font-family:var(--font-sans);font-size:12.5px;color:var(--ink-muted);
}
.post-figure span::before{content:"图 · ";color:var(--gutongjin)}

/* 正文对齐。
   编辑器把对齐写在 inline style 里，style 不在清洗白名单里会被删，
   所以 ArticleDetail 的 hook 先把 text-align 翻成 .pb-center / .pb-right。
   图片必须另给 margin：styles.css 的全局 img{display:block} 让图片成了块级元素，
   text-align 对它无效，只有 margin-inline:auto 才能把它推到中间。 */
.post-body .pb-center{text-align:center}
.post-body .pb-right{text-align:right}
.post-body .pb-center img{margin-left:auto;margin-right:auto}
.post-body .pb-right img{margin-left:auto;margin-right:0}
/* .post-figure 自带 text-align:center，同样因为 display:block 管不到图片 */
.post-body .post-figure img{margin-left:auto;margin-right:auto}
/* 图片尺寸由 width/height 属性带过来（hook 从 inline style 翻的）。
   height:auto 是必需的：窄屏下 styles.css 的 max-width:100% 会压窄图片，
   height 属性若还生效就会把图片拉变形。 */
.post-body img{height:auto}

/* 作者卡 */
.post-author{
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  margin-top:30px;padding:20px 24px;border-radius:10px;
  background:var(--xuanbai);border:1px solid var(--line);
}
.post-author img{width:70px;height:70px;border-radius:8px;object-fit:cover;flex:none}
.pa-info{flex:1;min-width:190px}
.pa-info strong{
  display:flex;align-items:center;gap:8px;
  font:700 17px/1.4 var(--font-serif);color:var(--chengqing);
}
.pa-role{
  display:inline-block;margin-top:4px;
  font-family:var(--font-sans);font-size:11.5px;color:var(--gutongjin);
}
.pa-info p{margin-top:7px;font-size:13px;line-height:1.9;color:var(--ink-muted)}
.pa-btns{display:flex;gap:10px}

/* Tag 行 */
.post-tags{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
}
.post-tags>b{
  font-family:var(--font-sans);font-size:12.5px;font-weight:500;color:var(--ink-muted);
}
.post-tags a{
  padding:3px 13px;border-radius:14px;
  background:var(--xuanbai);border:1px solid var(--line);
  font-family:var(--font-sans);font-size:12px;color:var(--ink-muted);
}
.post-tags a:hover{border-color:var(--gutongjin);color:var(--chengqing)}
.post-tags a.tag-hl{
  background:rgba(183,62,62,.08);border-color:transparent;color:var(--zhuyin);
}

/* 版权声明 */
.post-copyright{
  margin-top:18px;padding:14px 18px;border-radius:8px;
  background:var(--xuanbai-dark);
  font-family:var(--font-sans);font-size:12px;line-height:1.9;color:var(--ink-muted);
}
.post-copyright a{color:var(--gutongjin)}

/* 上下篇 */
.post-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;
}
.post-nav a,.post-nav span{
  display:block;padding:15px 18px;border-radius:10px;
  background:var(--paper);border:1px solid var(--line);
  font-size:13.5px;line-height:1.7;color:var(--chengqing);
  transition:all .18s ease;
}
.post-nav a:hover{border-color:var(--gutongjin);transform:translateY(-2px)}
.post-nav span{opacity:.5;cursor:default}
.pn-label{
  display:block;margin-bottom:5px;
  font-family:var(--font-sans);font-size:11.5px;color:var(--gutongjin);
}
.post-nav .pn-next{text-align:right}

/* 相关文章 */
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.related-grid a{
  display:flex;align-items:baseline;gap:8px;
  padding:8px 0;font-size:13.5px;line-height:1.7;color:#4A433C;
  border-bottom:1px dashed var(--line);
}
.related-grid a::before{content:"·";color:var(--gutongjin);font-weight:700}
.related-grid a:hover{color:var(--zhuyin)}

/* CTA 条 */
.post-cta{
  margin-top:24px;padding:26px 30px;border-radius:12px;text-align:center;
  background:linear-gradient(135deg,var(--chengqing),var(--chengqing-dark));
  color:var(--xuanbai);
}
.post-cta h3{font:700 20px/1.5 var(--font-serif);letter-spacing:.04em}
.post-cta p{margin:8px 0 18px;font-size:13.5px;line-height:1.9;opacity:.8}
.post-cta .btn-gold{padding:12px 34px}

/* ==================== 响应式 ==================== */
@media(max-width:1000px){
  .art-layout{grid-template-columns:1fr}
  .art-side{position:static;grid-template-columns:1fr 1fr;display:grid}
}
@media(max-width:820px){
  .hot-grid{grid-template-columns:1fr}
  .art-form-body{grid-template-columns:1fr}
  .art-side{grid-template-columns:1fr}
  .post{padding:24px 22px}
  .related-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .art-item{grid-template-columns:96px minmax(0,1fr);gap:14px}
  .ai-cover-link{height:70px}
  .art-cover{font-size:13px}
  .ai-body h3{font-size:15.5px}
  .art-intro,.art-block{padding:20px 18px}
  .post-nav{grid-template-columns:1fr}
  .post-nav .pn-next{text-align:left}
  .paging .page-btn{min-width:34px;padding:7px 10px;font-size:12px}
}