/* ==========================================================================
   Clash测评 · components.css
   跨页面组件:tab 切换 / 分类跳转 toc / FAQ 折叠 / 术语卡 / 下载客户端卡 /
   点评瀑布流卡(星级+标签) / 博客文章卡 / callout / 面包屑 / 文末下载引导卡 /
   表格 / .dl-fab 常驻下载浮层 / 预览演示工具类
   ========================================================================== */

/* ---------- 1. Tab 切换(role=tablist 配套) ---------- */
.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tab-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:42px;
  padding:9px 20px;
  border-radius:var(--radius-pill);
  background:var(--bg-panel);
  color:var(--text-muted);
  font-size:14px;
  font-weight:600;
  transition:background-color .15s ease,color .15s ease;
}
.tab-btn:hover{color:var(--text)}
.tab-btn[aria-selected="true"]{
  background:var(--accent);
  color:var(--text);
  font-weight:800;
  box-shadow:var(--shadow-soft);
}
.tab-pane{display:none;margin-top:22px}
.tab-pane.is-on{display:block}

/* ---------- 2. 长页分类跳转导航(toc) ---------- */
.toc-tabs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-top:4px;
  padding-bottom:10px;
  scrollbar-width:thin;
}
.toc-tabs a{
  flex:none;
  font-size:13.5px;
  font-weight:600;
  padding:8px 16px;
  border-radius:var(--radius-pill);
  background:var(--bg-panel);
  color:var(--text-muted);
  transition:background-color .15s ease,color .15s ease;
  white-space:nowrap;
}
.toc-tabs a:hover{background:var(--bg-panel2);color:var(--accent-dark)}
.toc-tabs a.is-here{background:var(--accent);color:var(--text)}

/* ---------- 3. FAQ 折叠项(原生 details) ---------- */
.faq-item{
  background:var(--bg);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
  margin-bottom:12px;
  overflow:hidden;
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:15px 20px;
  font-weight:700;
  font-size:15px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";
  margin-left:auto;
  flex-shrink:0;
  width:26px;height:26px;
  border-radius:50%;
  background:var(--bg-panel2);
  color:var(--accent-dark);
  font-weight:700;
  display:grid;
  place-items:center;
  transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-a{
  padding-top:0;
  padding-bottom:18px;
  padding-inline:20px;
  font-size:14px;
  line-height:1.8;
  color:color-mix(in srgb,var(--text) 76%,var(--bg));
}
.faq-a p{margin-bottom:.7em}
.faq-a p:last-child{margin-bottom:0}

/* ---------- 4. 术语卡 ---------- */
.term-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
}
.term-grid>*{min-width:0}
.term-card{
  background:var(--bg);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
  padding:18px 20px;
  scroll-margin-top:24px;
}
.term-head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.term-card h3{font-size:16px;font-weight:800}
.term-code{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  color:var(--accent-dark);
  background:var(--bg-panel2);
  border-radius:var(--radius-pill);
  padding:3px 10px;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.term-cat{
  margin-left:auto;
  font-size:11.5px;
  color:var(--text-muted);
  flex-shrink:0;
}
.term-card p{
  margin-top:9px;
  font-size:13.5px;
  line-height:1.75;
  color:color-mix(in srgb,var(--text) 78%,var(--bg));
}

/* ---------- 5. 徽章(下载卡等通用) ---------- */
.badge{
  display:inline-flex;
  align-items:center;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.03em;
  padding:4px 11px;
  border-radius:var(--radius-pill);
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.badge--top{background:var(--warn);color:var(--bg)}
.badge--rec{background:color-mix(in srgb,var(--success) 14%,var(--bg));color:var(--success)}
.badge--eol{background:var(--bg-panel);color:var(--text-muted)}

/* ---------- 6. 下载客户端卡 ---------- */
.client-card{
  position:relative;
  background:var(--bg);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:22px 24px;
  margin-bottom:16px;
  transition:transform .18s ease,box-shadow .18s ease;
  scroll-margin-top:24px;
}
.client-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.client-head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
/* 官方图标已归一化:只固定尺寸+禁缩,不加圆角/裁切/变形/底色 */
.client-ico{width:56px;height:56px;flex-shrink:0}
.client-name{font-size:19px;font-weight:800;line-height:1.3}
.client-site{
  font-size:13px;
  font-weight:700;
  color:var(--accent-dark);
}
.client-site:hover{color:var(--warn)}
.client-desc{
  margin-top:12px;
  font-size:13.5px;
  line-height:1.75;
  color:color-mix(in srgb,var(--text) 78%,var(--bg));
}
.client-meta{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
/* 版本号占位:默认空且不可见,由 downloads.js 在 latest 非空时填充 */
[data-cdnver]:empty{display:none}
.client-ver{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  color:var(--accent-dark);
  background:var(--bg-panel2);
  border-radius:var(--radius-pill);
  padding:4px 11px;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.client-actions{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.dl-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  background:var(--accent);
  color:var(--text);
  font-weight:800;
  font-size:14px;
  padding:11px 22px;
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-soft);
  transition:transform .15s ease,box-shadow .15s ease;
}
.dl-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.dl-btn svg{flex-shrink:0}
.dl-btn--alt{
  background:var(--bg-panel);
  box-shadow:none;
  font-weight:600;
}
.dl-btn--alt:hover{box-shadow:none;background:var(--bg-panel2)}

/* ---------- 7. 点评瀑布流(评测卡:星级+结论标签) ---------- */
.feed{
  max-width:var(--wrap);
  margin-top:34px;
  margin-inline:auto;
  padding-inline:var(--gutter);
  padding-bottom:60px;
}
.feed-head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:16px;
}
.feed-head h2{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:800;
}
.feed-head .feed-note{font-size:13px;color:var(--text-muted)}
.feed-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
}
.feed-grid>*{min-width:0}
.rev-card{
  position:relative;
  background:var(--bg);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:22px 24px 20px;
  transition:transform .18s ease,box-shadow .18s ease;
}
.rev-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.rev-badge{
  position:absolute;
  top:-10px;left:20px;
  background:var(--warn);
  color:var(--bg);
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  padding:5px 13px;
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-soft);
  letter-spacing:.04em;
  max-width:calc(100% - 40px);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.rev-top{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.rev-title{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:800;
  line-height:1.3;
  min-width:0;
}
.rev-score{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:26px;
  font-weight:700;
  color:var(--warn);
  line-height:1;
  flex-shrink:0;
}
.rev-score small{font-size:12px;color:var(--text-muted);font-weight:500}
.rev-stars{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:3px;
}
.rev-stars svg{display:block;flex-shrink:0}
.star-full{fill:var(--accent)}
.star-void{fill:var(--border)}
.rev-tags{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.tag{
  font-size:12.5px;
  font-weight:600;
  padding:5px 12px;
  border-radius:var(--radius-pill);
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.tag.t-green{background:color-mix(in srgb,var(--success) 12%,var(--bg));color:var(--success)}
.tag.t-yellow{background:var(--bg-panel2);color:var(--accent-dark)}
.tag.t-navy{background:color-mix(in srgb,var(--icon-ios) 10%,var(--bg));color:var(--icon-ios)}
.tag.t-orange{background:color-mix(in srgb,var(--warn) 11%,var(--bg));color:var(--warn)}
.rev-body{
  margin-top:11px;
  font-size:13.5px;
  line-height:1.75;
  color:color-mix(in srgb,var(--text) 78%,var(--bg));
}
.rev-meta{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.meta-chip{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-muted);
  background:var(--bg-panel);
  border-radius:var(--radius-pill);
  padding:4px 11px;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* ---------- 8. 博客文章卡 ---------- */
.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:16px;
}
.post-grid>*{min-width:0}
.post-card{
  display:flex;
  flex-direction:column;
  background:var(--bg);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:20px 22px;
  transition:transform .18s ease,box-shadow .18s ease;
}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.post-top{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.post-tag{
  font-size:11.5px;
  font-weight:700;
  padding:4px 11px;
  border-radius:var(--radius-pill);
  background:var(--bg-panel2);
  color:var(--accent-dark);
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.post-date{
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--text-muted);
}
.post-card h3{
  margin-top:10px;
  font-size:16px;
  font-weight:800;
  line-height:1.5;
}
.post-card h3 a:hover{color:var(--accent-dark)}
.post-sum{
  margin-top:8px;
  font-size:13px;
  line-height:1.75;
  color:var(--text-muted);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.post-more{
  margin-top:auto;
  padding-top:12px;
  font-size:13px;
  font-weight:700;
  color:var(--accent-dark);
}
.blog-filter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:20px;
}
.blog-filter button{
  min-height:40px;
  padding:8px 18px;
  border-radius:var(--radius-pill);
  background:var(--bg-panel);
  color:var(--text-muted);
  font-size:13.5px;
  font-weight:600;
  transition:background-color .15s ease,color .15s ease;
}
.blog-filter button:hover{color:var(--text)}
.blog-filter button.is-on{
  background:var(--accent);
  color:var(--text);
  font-weight:800;
  box-shadow:var(--shadow-soft);
}

/* ---------- 9. 面包屑(博客文章页) ---------- */
.crumbs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:1.4rem;
  font-size:13px;
  color:var(--text-muted);
}
.crumbs a{color:var(--text-muted)}
.crumbs a:hover{color:var(--accent-dark)}
.crumbs .crumb-sep{color:var(--border);flex-shrink:0}
.crumbs .crumb-cur{
  color:var(--text);
  font-weight:600;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* ---------- 10. Callout 引用块 ---------- */
.callout{
  display:flex;
  gap:12px;
  background:var(--bg-panel2);
  border-radius:var(--radius-md);
  padding:15px 18px;
  font-size:13.5px;
  line-height:1.75;
  margin-bottom:1.2em;
}
.callout::before{
  content:"!";
  flex-shrink:0;
  width:24px;height:24px;
  border-radius:50%;
  background:var(--accent);
  color:var(--text);
  font-weight:800;
  font-size:14px;
  display:grid;
  place-items:center;
  margin-top:2px;
}
.callout--ok{background:color-mix(in srgb,var(--success) 9%,var(--bg))}
.callout--ok::before{content:"✓";background:var(--success);color:var(--bg)}
.callout--warn{background:color-mix(in srgb,var(--warn) 9%,var(--bg))}
.callout--warn::before{background:var(--warn);color:var(--bg)}
.callout p{margin-bottom:.6em}
.callout p:last-child{margin-bottom:0}

/* ---------- 11. 表格 ---------- */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
  margin-bottom:1.2em;
}
.data-table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  font-size:13.5px;
  background:var(--bg);
}
.data-table th{
  text-align:left;
  font-weight:800;
  font-size:12.5px;
  background:var(--bg-panel2);
  color:var(--accent-dark);
  padding:11px 16px;
  white-space:nowrap;
}
.data-table td{
  padding:11px 16px;
  border-top:1px solid var(--border);
  color:color-mix(in srgb,var(--text) 82%,var(--bg));
}
.data-table td code{font-size:11.5px}
/* 防御:写手输出不带 .table-wrap 的裸表格时,防止撑破移动端 */
.prose>.data-table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  min-width:0;
}

/* ---------- 12. 文末下载引导卡(博客文章页) ---------- */
.post-dl-card{
  background:var(--accent);
  background-image:radial-gradient(120% 120% at 80% -20%,color-mix(in srgb,var(--accent-dark) 36%,var(--accent)) 0%,var(--accent) 60%);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:26px 28px;
  margin-top:44px;
}
.post-dl-card h2{
  font-size:20px;
  font-weight:900;
  margin:0 0 8px;
}
.post-dl-card p{
  font-size:13.5px;
  line-height:1.75;
  color:color-mix(in srgb,var(--text) 76%,var(--accent));
  margin-bottom:16px;
}
.post-dl-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.post-dl-actions .btn-main{font-size:15px;padding:13px 28px}
.post-dl-actions .btn-sub{font-size:14px;padding:13px 24px}

/* ---------- 13. 延伸阅读 / 上一篇下一篇 ---------- */
.related-box{margin-top:40px}
.related-box h2{font-size:18px;font-weight:800;margin-bottom:14px}
.post-nav{
  margin-top:24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.post-nav>*{min-width:0}
.post-nav a{
  display:block;
  background:var(--bg-panel);
  border-radius:var(--radius-md);
  padding:14px 18px;
  font-size:13.5px;
  font-weight:600;
  line-height:1.5;
  transition:background-color .15s ease;
}
.post-nav a:hover{background:var(--bg-panel2)}
.post-nav .nav-dir{
  display:block;
  font-size:11.5px;
  color:var(--text-muted);
  font-weight:500;
  margin-bottom:4px;
}
.post-nav .nav-next{text-align:right}

/* ---------- 14. .dl-fab 右下角常驻下载浮层 ---------- */
.dl-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:90;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  background:var(--accent);
  color:var(--text);
  font-weight:800;
  font-size:14px;
  padding:12px 22px;
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-lift);
  transition:transform .15s ease;
}
.dl-fab:hover{transform:translateY(-2px)}
.dl-fab svg{flex-shrink:0}
@media (max-width:640px){
  .dl-fab{
    right:12px;
    bottom:12px;
    padding:11px 18px;
    font-size:13px;
  }
}

/* ---------- 15. 预览演示工具类(design-preview 用) ---------- */
.swatch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px;
}
.swatch-grid>*{min-width:0}
.swatch{
  background:var(--bg);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.swatch-chip{height:64px}
.swatch-info{padding:10px 14px}
.swatch-info b{display:block;font-size:12.5px}
.swatch-info code{
  font-size:10.5px;
  background:none;
  padding:0;
  color:var(--text-muted);
}

/* ---------- 16. 组件响应式 ---------- */
@media (max-width:760px){
  .feed-grid{grid-template-columns:1fr}
  .post-nav{grid-template-columns:1fr}
  .post-nav .nav-next{text-align:left}
}
@media (max-width:640px){
  .client-card{padding:18px 16px}
  .rev-card{padding:18px 16px}
  .post-dl-card{padding:20px 18px}
  .term-grid{grid-template-columns:1fr}
  .data-table{min-width:460px}
}