/* ============================================================
   Clash中文网 · 跨页面组件
   直角 / 细线 / 绢本面板;切换只改描边与底色明度,不做动效。
   ============================================================ */

/* ---------- 通用 tab 切换(role=tablist 配套,tabs.js 驱动) ---------- */
.tabs-bar{display:flex;flex-wrap:wrap;border:1px solid var(--line);background:var(--silk-panel)}
.tabs-bar .tab{
  flex:1 1 0;min-width:118px;position:relative;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 16px;background:transparent;border:none;border-right:1px solid var(--line);
  font-family:var(--font-body);font-size:13.5px;letter-spacing:.12em;color:var(--moon-dim);cursor:pointer;
}
.tabs-bar .tab:last-child{border-right:none}
.tabs-bar .tab:hover{color:var(--moon)}
.tabs-bar .tab.on{color:var(--moon);background:var(--silk-raised)}
.tabs-bar .tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--cinnabar)}
.tab-panel{display:none}
.tab-panel.on{display:block}
.tab-panels{margin-top:22px}

/* ---------- 星官名录:竖排特性 tab + 绢本详情面板 ---------- */
.feat{display:grid;grid-template-columns:232px minmax(0,1fr);border:1px solid var(--line);background:var(--silk-panel)}
.feat-tabs{display:flex;flex-direction:column;border-right:1px solid var(--line)}
.feat-tab{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:19px 22px;background:transparent;border:none;border-bottom:1px solid var(--moon-line-soft);
  font-family:var(--font-display);font-size:15px;letter-spacing:.14em;color:var(--moon-dim);
  cursor:pointer;text-align:left;transition:none;
}
.feat-tab:last-child{border-bottom:none}
.feat-tab:hover{color:var(--moon)}
.feat-tab.on{color:var(--moon);background:var(--silk-raised)}
.feat-tab.on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cinnabar);flex:none}
.feat-panel{min-height:300px}
.feat-panel-inner{padding:36px 38px}
.feat-title{font-size:21px;letter-spacing:.1em;margin-bottom:10px;display:flex;align-items:center;gap:12px}
.feat-title::before{content:"";width:8px;height:8px;background:var(--cinnabar);flex:none}
.feat-mono{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--moon-dim);margin-bottom:18px}
.feat-body{font-size:13.5px;line-height:2.05;color:var(--moon-dim);letter-spacing:.02em}
.feat-body p{margin-bottom:12px}
.feat-body p:last-child{margin-bottom:0}
.feat-body strong{color:var(--gold);font-weight:600}
@media (max-width:760px){
  .feat{grid-template-columns:1fr}
  .feat-tabs{flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch;border-right:none;border-bottom:1px solid var(--line)}
  .feat-tab{border-bottom:none;border-right:1px solid var(--moon-line-soft);white-space:nowrap;padding:14px 18px}
  .feat-tab:last-child{border-right:none}
  .feat-panel{min-height:0}
  .feat-panel-inner{padding:26px 22px}
}

/* ---------- 长页分类跳转导航(toc) ---------- */
.toc-tabs{
  position:sticky;top:14px;z-index:30;
  display:flex;flex-wrap:wrap;
  border:1px solid var(--line);background:var(--silk-panel);margin-bottom:44px;
}
.toc-tabs a{
  display:flex;align-items:center;gap:8px;padding:12px 18px;
  font-size:12.5px;letter-spacing:.1em;color:var(--moon-dim);
  border-right:1px solid var(--line);
}
.toc-tabs a:last-child{border-right:none}
.toc-tabs a::before{content:"";width:4px;height:4px;background:var(--line);flex:none}
.toc-tabs a:hover{color:var(--moon);background:var(--silk-raised)}
.toc-tabs a:hover::before{background:var(--cinnabar)}
@media (max-width:640px){
  .toc-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .toc-tabs a{white-space:nowrap}
}

/* ---------- FAQ 折叠项(details/summary,无需 JS) ---------- */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border:1px solid var(--line);border-top:none;background:var(--silk-panel)}
.faq-q{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:14px;
  padding:18px 22px;min-height:56px;
  font-family:var(--font-display);font-size:14.5px;letter-spacing:.06em;color:var(--moon);
}
.faq-q::-webkit-details-marker{display:none}
.faq-q::before{content:"";width:6px;height:6px;background:var(--cinnabar);flex:none}
.faq-q::after{content:"+";margin-left:auto;flex:none;font-family:var(--font-mono);font-size:14px;color:var(--moon-dim)}
.faq-q:hover{color:var(--gold)}
.faq-item[open] .faq-q::after{content:"−";color:var(--cinnabar)}
.faq-a{padding:2px 24px 22px 42px;font-size:13.5px;line-height:2;color:var(--moon-dim)}
.faq-a p{margin-bottom:10px}
.faq-a p:last-child{margin-bottom:0}

/* ---------- 术语卡 ---------- */
.term-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.term-card{background:var(--silk-panel);border:1px solid var(--line);padding:22px;position:relative;min-width:0}
.term-card:hover{border-color:var(--gold-soft)}
.term-cat{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--cinnabar);
  margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.term-cat::before{content:"";width:12px;height:1px;background:var(--cinnabar);flex:none}
.term-name{font-family:var(--font-display);font-size:16px;color:var(--moon);letter-spacing:.05em;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.term-name code{font-size:11px;color:var(--gold)}
.term-def{margin-top:10px;font-size:13px;line-height:1.9;color:var(--moon-dim)}
@media (max-width:640px){.term-grid{grid-template-columns:1fr}}

/* ---------- 徽章(下载客户端卡片/对比页) ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  font-size:10.5px;letter-spacing:.16em;padding:5px 11px;
  border:1px solid var(--line);
  max-width:100%;overflow:hidden;white-space:nowrap;
}
.badge-rec{color:var(--moon);background:var(--cinnabar);border-color:var(--cinnabar-deep);font-family:var(--font-display)}
.badge-alt{color:var(--gold);border-color:var(--gold-soft)}
.badge-eol{color:var(--moon-dim);border-color:var(--line);background:var(--silk-raised)}

/* ---------- 下载客户端卡片 ---------- */
.client-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.client-card{display:flex;flex-direction:column;background:var(--silk-panel);border:1px solid var(--line);padding:24px;position:relative;min-width:0}
.client-card:hover{border-color:var(--gold-soft)}
.client-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.client-logo{width:52px;height:52px;flex:none}
.client-id{min-width:0}
.client-name{font-family:var(--font-display);font-size:17px;letter-spacing:.06em;color:var(--moon)}
.client-en{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--moon-dim);margin-top:4px}
.client-badges{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.client-desc{font-size:13px;line-height:1.95;color:var(--moon-dim);margin-bottom:16px;flex:1}
.client-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.client-meta span{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--moon-dim);
  border:1px solid var(--line);padding:4px 9px;max-width:100%;overflow:hidden;
}
.client-meta .client-ver{color:var(--gold);border-color:var(--gold-soft)}
.client-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.client-note{font-size:12px;color:var(--moon-dim);letter-spacing:.04em}
@media (max-width:640px){.client-grid{grid-template-columns:1fr}}

/* ---------- 博客文章卡 ---------- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.post-card{display:flex;flex-direction:column;background:var(--silk-panel);border:1px solid var(--line);padding:24px;position:relative;min-width:0}
.post-card:hover{border-color:var(--gold-soft)}
.post-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--moon-dim)}
.post-tag{
  display:inline-flex;align-items:center;max-width:100%;overflow:hidden;
  color:var(--gold);border:1px solid var(--gold-soft);padding:3px 9px;
  font-family:var(--font-body);font-size:11px;letter-spacing:.1em;
}
.post-title{font-size:17px;letter-spacing:.04em;line-height:1.7;margin-bottom:10px}
.post-title a:hover{color:var(--gold)}
.post-sum{font-size:13px;line-height:1.9;color:var(--moon-dim);flex:1;margin-bottom:16px}
.post-more{font-size:12px;letter-spacing:.14em;color:var(--moon-dim);display:inline-flex;align-items:center;gap:8px}
.post-more:hover{color:var(--moon)}
.post-more .arr{font-size:11px;opacity:.75}
@media (max-width:640px){.post-grid{grid-template-columns:1fr}}

/* ---------- 引用/提示块 ---------- */
.callout{
  border:1px solid var(--line);border-left:3px solid var(--cinnabar);
  background:var(--silk-panel);padding:18px 22px;margin:0 0 18px;
  font-size:13.5px;line-height:1.95;color:var(--moon-dim);
}
.callout strong{color:var(--moon);font-weight:600}
.callout p{margin-bottom:8px}
.callout p:last-child{margin-bottom:0}
.callout-warn{border-left-color:var(--warn)}
.callout-ok{border-left-color:var(--ok)}

/* ---------- 数据表 ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);background:var(--silk-panel);max-width:100%;margin-bottom:18px}
.data-table{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
.data-table th{
  text-align:left;font-family:var(--font-display);font-weight:400;font-size:13px;letter-spacing:.14em;color:var(--gold);
  padding:13px 16px;border-bottom:1px solid var(--line);background:var(--silk-raised);white-space:nowrap;
}
.data-table td{padding:13px 16px;border-bottom:1px solid var(--moon-line-soft);color:var(--moon-dim);vertical-align:top;line-height:1.8}
.data-table tr:last-child td{border-bottom:none}
.data-table td:first-child{color:var(--moon);white-space:nowrap}
/* 裸表格防御:正文里未包 .table-wrap 的表格自身可横滑,不撑破版面 */
.prose>.data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}

/* ---------- 面包屑(博客文章页) ---------- */
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding-top:30px;margin-bottom:30px;
  font-size:12px;letter-spacing:.1em;color:var(--moon-dim);
}
.crumb a{color:var(--moon-dim)}
.crumb a:hover{color:var(--moon)}
.crumb .sep{color:var(--line);user-select:none}
.crumb [aria-current="page"]{color:var(--moon)}

/* ---------- 步骤序号(教程) ---------- */
.steps{counter-reset:step}
.steps>li{
  counter-increment:step;position:relative;min-width:0;
  padding:22px 24px 22px 78px;margin-bottom:14px;
  background:var(--silk-panel);border:1px solid var(--line);
}
.steps>li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:22px;top:22px;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;color:var(--cinnabar);
  border:1px solid var(--cinnabar);background:var(--cinnabar-wash);
}
.steps h3{font-size:16px;letter-spacing:.08em;margin-bottom:8px}
.steps p{font-size:13.5px;line-height:2;color:var(--moon-dim);margin-bottom:8px}
.steps p:last-child{margin-bottom:0}
@media (max-width:560px){
  .steps>li{padding:18px 18px 18px 66px}
  .steps>li::before{left:16px;top:18px;width:32px;height:32px;font-size:11px}
}

/* ---------- 文末下载引导卡(博客文章页) ---------- */
.dl-cta{
  border:1px solid var(--line);background:var(--silk-panel);
  padding:30px 32px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.dl-cta-main{flex:1;min-width:240px}
.dl-cta-title{font-family:var(--font-display);font-size:19px;letter-spacing:.08em;color:var(--moon);margin-bottom:8px;display:flex;align-items:center;gap:12px}
.dl-cta-title::before{content:"";width:8px;height:8px;background:var(--cinnabar);flex:none}
.dl-cta-desc{font-size:13px;line-height:1.9;color:var(--moon-dim)}
.dl-cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- 右下角常驻下载引导(博客文章页必有) ---------- */
.dl-fab{
  position:fixed;right:22px;bottom:22px;z-index:65;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--cinnabar);color:var(--moon);
  border:1px solid var(--cinnabar-deep);
  font-family:var(--font-display);font-size:13.5px;letter-spacing:.16em;
  padding:14px 22px;
}
.dl-fab::after{content:"";position:absolute;inset:3px;border:1px solid var(--moon-line-seal);pointer-events:none}
.dl-fab:hover{background:var(--cinnabar-deep)}
.dl-fab svg{flex:none}
@media (max-width:640px){.dl-fab{right:14px;bottom:14px;padding:12px 18px;font-size:12.5px}}

/* ---------- 设计速查色板(仅 design-preview 使用) ---------- */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.swatch{border:1px solid var(--line);background:var(--silk-panel);min-width:0}
.swatch-color{height:64px;border-bottom:1px solid var(--line)}
.swatch-meta{padding:10px 12px}
.swatch-name{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;color:var(--moon);word-break:break-all}
.swatch-val{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--moon-dim);margin-top:3px}
.sw-silk{background:var(--silk)}
.sw-silk-panel{background:var(--silk-panel)}
.sw-silk-raised{background:var(--silk-raised)}
.sw-line{background:var(--line)}
.sw-cinnabar{background:var(--cinnabar)}
.sw-cinnabar-deep{background:var(--cinnabar-deep)}
.sw-moon{background:var(--moon)}
.sw-moon-dim{background:var(--moon-dim)}
.sw-gold{background:var(--gold)}
.sw-ok{background:var(--ok)}
.sw-warn{background:var(--warn)}
.sw-bad{background:var(--bad)}

/* ---------- 预览页分组排距(仅 design-preview 使用) ---------- */
.demo-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.demo-col{display:grid;gap:22px}
.demo-note{margin-top:14px}