/* ============================================================
   Clash中文下载站 · 跨页面组件 components.css
   依赖 base.css 的设计令牌,不单独定义颜色。
   ============================================================ */

/* ---------- Tab 切换(role=tablist 配套) ---------- */
.tabs{
  display:inline-flex;flex-wrap:wrap;gap:6px;max-width:100%;
  background:var(--bg-panel-2);padding:6px;border-radius:16px;
  box-shadow:0 8px 22px var(--shadow-card);
}
.tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:11px;
  font-size:14px;font-weight:600;color:var(--text-muted);white-space:nowrap;
  transition:color .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.tab svg{width:15px;height:15px;flex:none}
.tab:hover{color:var(--text);background:var(--hover-bg)}
.tab.is-on{
  background:linear-gradient(180deg,var(--plate-1),var(--plate-2));color:var(--ink);
  box-shadow:0 6px 16px var(--glow-btn);
}
.tab-panels{margin-top:26px}
.tab-panel[hidden]{display:none}
.tab-panel.is-on{animation:tabIn .3s ease}
@keyframes tabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 长页分类跳转导航(toc) ---------- */
.toc-tabs{
  display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:4px 2px 12px;margin-bottom:10px;scrollbar-width:thin;
}
.toc-tabs a{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:12.5px;font-weight:500;color:var(--text-muted);
  background:var(--bg-panel-2);padding:9px 15px;border-radius:999px;
  box-shadow:0 4px 12px var(--shadow-cap);
  transition:color .2s ease,background-color .2s ease;
}
.toc-tabs a:hover{color:var(--accent);background:var(--bg-panel-2-soft)}

/* ---------- FAQ 折叠项(details/summary 原生实现) ---------- */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:var(--bg-panel-2);border-radius:16px;overflow:hidden;
  box-shadow:0 8px 22px var(--shadow-card);
  transition:box-shadow .25s ease;
}
.faq-item:hover{box-shadow:0 12px 28px var(--shadow-card),0 0 28px var(--glow-board)}
.faq-item summary{
  display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;
  padding:18px 20px;font-size:15px;font-weight:600;line-height:1.6;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-ic{
  flex:none;width:22px;height:22px;border-radius:7px;background:var(--win-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--accent);
}
.faq-ic::before{content:"+"}
.faq-item[open] .faq-ic::before{content:"−"}
.faq-a{padding:0 20px 20px 54px;color:var(--text-muted);font-size:14px;line-height:1.95}
.faq-a p{margin:0 0 .8em}
.faq-a p:last-child{margin-bottom:0}
.faq-a code{
  font-family:var(--font-mono);font-size:.88em;color:var(--accent);
  background:var(--win-2);padding:2px 7px;border-radius:7px;
}

/* ---------- 术语卡 ---------- */
.term-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.term-grid > *{min-width:0}
.term-card{
  background:var(--bg-panel-2);border-radius:18px;padding:22px;
  box-shadow:0 10px 26px var(--shadow-card);
  transition:transform .25s ease,box-shadow .25s ease;
}
.term-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px var(--shadow-card),0 0 30px var(--glow-board)}
.term-cat{
  display:inline-flex;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:1px;color:var(--ink);
  background:linear-gradient(180deg,var(--plate-1),var(--plate-2));
  padding:3px 9px;border-radius:6px;margin-bottom:12px;
  max-width:100%;overflow:hidden;white-space:nowrap;
}
.term-name{font-size:17px;font-weight:800;margin-bottom:8px}
.term-name .mono{color:var(--text-muted);font-size:12px;font-weight:500;margin-left:8px}
.term-def{font-size:13.5px;color:var(--text-muted);line-height:1.9}

/* ---------- 徽章 ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;letter-spacing:.5px;
  padding:4px 10px;border-radius:999px;
  max-width:100%;overflow:hidden;white-space:nowrap;
}
.badge--pick{
  background:linear-gradient(180deg,var(--plate-1),var(--plate-2));color:var(--ink);
  box-shadow:0 3px 10px var(--glow-btn);
}
.badge--rec{background:var(--tint-success);color:var(--success)}
.badge--eol{background:var(--tint-error);color:var(--error)}
.badge--plain{background:var(--hover-bg);color:var(--text-muted)}

/* ---------- 下载客户端卡片 ---------- */
.client-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.client-grid > *{min-width:0}
.client-card{
  display:flex;flex-direction:column;
  background:var(--bg-panel-2);border-radius:20px;padding:24px;
  box-shadow:0 12px 30px var(--shadow-card);
  transition:transform .25s ease,box-shadow .25s ease;
}
.client-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px var(--shadow-card),0 0 36px var(--glow-board)}
.client-card.is-eol{opacity:.78}
.client-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px}
.client-logo{width:56px;height:56px;flex:none}
.client-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.client-name{font-size:18px;font-weight:800;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.client-sub{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;color:var(--text-muted)}
/* 版本号占位:默认空且不可见,JS 填充后才显示 */
.ver-chip{
  flex:none;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--accent);
  background:var(--active-bg);padding:5px 10px;border-radius:8px;
  max-width:100%;overflow:hidden;white-space:nowrap;
}
.ver-chip:empty{display:none}
.ver-chip::before{content:"v"}
.client-desc{font-size:14px;color:var(--text-muted);line-height:1.9;margin-bottom:14px}
.client-meta{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.client-meta li{display:flex;gap:10px;font-size:12.5px;color:var(--text);min-width:0}
.client-meta .k{flex:none;width:64px;padding-top:1px;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;color:var(--text-muted)}
.client-actions{margin-top:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.client-more{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--text-muted);transition:color .2s ease;
}
.client-more svg{width:13px;height:13px;flex:none}
.client-more:hover{color:var(--accent)}

/* ---------- 博客文章卡 ---------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.post-grid > *{min-width:0}
.post-card{
  display:flex;flex-direction:column;
  background:var(--bg-panel-2);border-radius:18px;padding:24px;
  box-shadow:0 10px 26px var(--shadow-card);
  transition:transform .25s ease,box-shadow .25s ease;
}
.post-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px var(--shadow-card),0 0 30px var(--glow-board)}
.post-tag{
  align-self:flex-start;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:1px;
  color:var(--accent);background:var(--active-bg);padding:4px 10px;border-radius:7px;margin-bottom:14px;
  max-width:100%;overflow:hidden;white-space:nowrap;
}
.post-title{font-size:16.5px;font-weight:700;line-height:1.6;margin-bottom:10px}
.post-summary{
  font-size:13.5px;color:var(--text-muted);line-height:1.85;margin-bottom:16px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.post-meta{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:1px;color:var(--text-muted);
}
.post-meta svg{width:14px;height:14px;flex:none;color:var(--text-muted);transition:color .25s ease}
.post-card:hover .post-meta svg{color:var(--accent)}

/* ---------- 标签 chip ---------- */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--cap-bg);color:var(--text-muted);
  font-size:12.5px;font-weight:500;padding:8px 15px;border-radius:999px;
  box-shadow:0 4px 14px var(--shadow-cap);
  max-width:100%;overflow:hidden;white-space:nowrap;
  transition:color .2s ease;
}
a.chip:hover{color:var(--text)}
.chip .dot{width:6px;height:6px;border-radius:2px;background:var(--accent);flex:none}

/* ---------- callout 引用块 ---------- */
.callout{
  position:relative;margin:1.4em 0;padding:16px 20px 16px 22px;border-radius:14px;
  background:var(--glow-board);font-size:14px;line-height:1.9;color:var(--text);overflow:hidden;
}
.callout::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--plate-1),var(--plate-2));
}
.callout--warn{background:var(--tint-warn)}
.callout--warn::before{background:var(--warn)}
.callout--error{background:var(--tint-error)}
.callout--error::before{background:var(--error)}
.callout--success{background:var(--tint-success)}
.callout--success::before{background:var(--success)}
.callout p{margin:0 0 .6em}
.callout p:last-child{margin-bottom:0}
.callout-title{font-weight:700;margin-bottom:4px}

/* ---------- 数据表 ---------- */
.table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:16px;background:var(--bg-panel-2);
  box-shadow:0 10px 26px var(--shadow-card);margin:1.4em 0;
}
.data-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.data-table th{
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:1.5px;
  color:var(--text-muted);text-align:left;padding:14px 18px;white-space:nowrap;
}
.data-table td{padding:13px 18px;color:var(--text);vertical-align:top;line-height:1.8}
.data-table tbody tr:nth-child(even){background:var(--hover-bg)}
.data-table code{
  font-family:var(--font-mono);font-size:.9em;color:var(--accent);
  background:var(--win-2);padding:2px 7px;border-radius:7px;white-space:nowrap;
}
/* 裸表格防御:文章页未套 .table-wrap 的 table 自身横滑,不撑破页面 */
.prose > .data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}

/* ---------- 面包屑(博客文章页) ---------- */
.crumb{
  display:flex;flex-wrap:wrap;gap:8px;list-style:none;
  font-family:var(--font-mono);font-size:12px;color:var(--text-muted);
  padding-top:28px;margin-bottom:34px;
}
.crumb li{display:flex;align-items:center;gap:8px;min-width:0}
.crumb li + li::before{content:"/";color:var(--border)}
.crumb a{color:var(--text-muted);transition:color .2s ease}
.crumb a:hover{color:var(--accent)}
.crumb [aria-current]{color:var(--text)}

/* ---------- 上一篇 / 下一篇 ---------- */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
.post-nav > *{min-width:0}
.post-nav a{
  display:block;background:var(--bg-panel-2);border-radius:16px;padding:18px 20px;
  box-shadow:0 8px 22px var(--shadow-card);
  transition:transform .25s ease,box-shadow .25s ease;
}
.post-nav a:hover{transform:translateY(-3px);box-shadow:0 14px 30px var(--shadow-card),0 0 26px var(--glow-board)}
.post-nav .dir{font-family:var(--font-mono);font-size:10.5px;letter-spacing:2px;color:var(--text-muted);margin-bottom:8px}
.post-nav .t{font-size:14px;font-weight:700;line-height:1.6}
.post-nav .next{text-align:right}

/* ---------- 文末下载引导卡(博客文章页) ---------- */
.dl-cta{
  margin-top:48px;
  background:linear-gradient(160deg,var(--lb-1),var(--lb-2) 60%,var(--lb-3));
  border-radius:24px;padding:32px 30px;color:var(--ink);
  box-shadow:0 20px 50px var(--shadow-card),0 0 60px var(--glow-accent-mid);
}
.dl-cta h2{font-size:22px;font-weight:900;color:var(--ink);letter-spacing:.5px}
.dl-cta p{margin:10px 0 20px;color:var(--ink-soft);font-size:14.5px;line-height:1.9}
.dl-cta .btn-ghost{background:var(--win-2);color:var(--text)}
.dl-cta .btn-ghost svg{color:var(--text-muted)}

/* ---------- 右下角常驻下载浮层(仅博客文章页使用) ---------- */
.dl-fab{
  position:fixed;right:20px;bottom:20px;z-index:30;
  display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(180deg,var(--btn-1),var(--btn-2));color:var(--ink);
  font-size:14.5px;font-weight:800;letter-spacing:1px;
  padding:13px 22px;border-radius:999px;
  box-shadow:0 14px 34px var(--glow-btn),inset 0 1.5px 0 var(--hl-btn);
  transition:transform .22s ease,box-shadow .22s ease;
}
.dl-fab svg{width:16px;height:16px;flex:none}
.dl-fab:hover{transform:translateY(-3px);box-shadow:0 20px 44px var(--glow-btn-hover),inset 0 1.5px 0 var(--hl-btn)}

/* ---------- design-preview 演示页专用 ---------- */
.demo-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.demo-swatch .sw{height:64px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--edge-hl),0 8px 18px var(--shadow-cap)}
.demo-swatch .nm{font-family:var(--font-mono);font-size:11px;color:var(--text);margin-top:8px;letter-spacing:.5px}
.demo-swatch .hx{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);margin-top:2px}
.sw--bg{background:var(--bg)}
.sw--bg-panel{background:var(--bg-panel)}
.sw--bg-panel-2{background:var(--bg-panel-2)}
.sw--bg-panel-2-soft{background:var(--bg-panel-2-soft)}
.sw--border{background:var(--border)}
.sw--accent{background:var(--accent)}
.sw--accent-dark{background:var(--accent-dark)}
.sw--text{background:var(--text)}
.sw--text-muted{background:var(--text-muted)}
.sw--success{background:var(--success)}
.sw--warn{background:var(--warn)}
.sw--error{background:var(--error)}
.sw--ink{background:var(--ink)}
.sw--machine-1{background:var(--machine-1)}
.sw--lb-1{background:var(--lb-1)}
.sw--lb-2{background:var(--lb-2)}
.sw--win-1{background:var(--win-1)}
.sw--win-2{background:var(--win-2)}
.sw--btn-1{background:var(--btn-1)}
.sw--plate-1{background:var(--plate-1)}
.demo-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.demo-stack{display:flex;flex-direction:column;gap:14px}
.demo-note{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;color:var(--text-muted);margin-top:14px}
.demo-narrow{max-width:340px}

/* ---------- 组件响应式 ---------- */
@media (max-width:760px){
  .client-grid{grid-template-columns:1fr}
  .post-nav{grid-template-columns:1fr}
  .post-nav .next{text-align:left}
  .faq-a{padding-left:20px}
}
@media (max-width:560px){
  .dl-fab{right:14px;bottom:14px;padding:12px 18px;font-size:13.5px}
  .dl-cta{padding:26px 22px}
  .tabs{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab{flex:none}
}