/* ==========================================================================
   Clash Verge官网 · 跨页面组件层(components.css)
   依赖 base.css 的设计令牌;不在此处散落任何硬编码颜色
   ========================================================================== */

/* ============ 区块头 ============ */
.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-bottom:40px;
}
.sec-head-main{min-width:0}
.sec-kicker{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;color:var(--text-muted);
  margin-bottom:14px;
}
.sec-kicker::before{content:"";width:8px;height:8px;border:1px solid var(--border-strong);flex:none}
.sec-title{font-size:clamp(24px,3.4vw,36px);font-weight:800;letter-spacing:.01em;line-height:1.2}
.sec-sub{margin-top:12px;font-size:14px;line-height:1.85;color:var(--text-muted);max-width:620px}
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--text-muted);
  transition:color .2s ease;
}
.link-arrow::after{content:"→";transition:transform .2s ease,color .2s ease}
.link-arrow:hover{color:var(--accent)}
.link-arrow:hover::after{transform:translateX(5px);color:var(--accent)}

/* ============ Tab 切换(横向,role=tablist) ============ */
.tabs{min-width:0}
.tab-list{
  display:flex;gap:2px;
  border-bottom:1px solid var(--border-soft);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.tab-list::-webkit-scrollbar{display:none}
.tab-list [role="tab"]{
  position:relative;flex:none;
  padding:13px 18px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  color:var(--text-muted);cursor:pointer;white-space:nowrap;
  transition:color .2s ease;
}
.tab-list [role="tab"]::after{
  content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:2px;
  background:var(--accent);opacity:0;transform:scaleX(.4);
  transition:opacity .22s ease,transform .22s ease;
}
.tab-list [role="tab"]:hover{color:var(--text)}
.tab-list [role="tab"][aria-selected="true"]{color:var(--text)}
.tab-list [role="tab"][aria-selected="true"]::after{opacity:1;transform:scaleX(1)}
.tabs [role="tabpanel"]{padding-top:32px;min-width:0}
.tabs [role="tabpanel"][hidden]{display:none}

/* ============ 闸门铭牌资料架(竖直 tab + 详情面板;移动端手风琴) ============ */
.feature-rack{display:flex;gap:44px;align-items:flex-start;min-width:0}
.rack-tabs{width:252px;flex:none;display:flex;flex-direction:column;gap:8px}
.rack-tabs [role="tab"]{
  position:relative;display:flex;align-items:center;width:100%;min-height:52px;
  padding:0 16px;text-align:left;
  border:1px solid var(--border);background:transparent;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  color:var(--text-muted);cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.rack-tabs [role="tab"]::before{
  content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;
  background:var(--accent);opacity:0;transition:opacity .22s ease;
}
.rack-tabs [role="tab"]:hover{color:var(--text);border-color:var(--border-strong)}
.rack-tabs [role="tab"][aria-selected="true"]{
  color:var(--text);background:var(--bg-panel);border-color:var(--border-strong);
}
.rack-tabs [role="tab"][aria-selected="true"]::before{opacity:1}
.rack-panels{flex:1;min-width:0}
.rack-panels [role="tabpanel"]{
  background:var(--bg-panel);
  border:1px solid var(--border-soft);
  border-top:1px solid var(--border-strong);
  padding:28px 30px;
}
.rack-panels [role="tabpanel"][hidden]{display:none}
.feature-rack.tabs-ready .rack-panels [role="tabpanel"]:not([hidden]){animation:rack-fade .32s ease both}
@keyframes rack-fade{from{opacity:0}to{opacity:1}}
.rack-panel-title{font-size:20px;font-weight:700;color:var(--text);margin-bottom:12px}
.rack-panel-body{font-size:15px;line-height:1.9;color:var(--text-muted)}
.rack-panel-body p+p{margin-top:.9em}
.rack-panel-meta{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--border-soft);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--text-dim);
  display:flex;flex-wrap:wrap;gap:6px 18px;
}
@media (max-width:860px){
  .feature-rack{display:block}
  /* JS 就绪后:tab 被迁移进面板区,原 tablist 隐藏,退化为纵向手风琴 */
  .feature-rack.tabs-ready .rack-tabs{display:none}
  .feature-rack.tabs-ready .rack-panels>[role="tab"]{
    display:flex;align-items:center;width:100%;min-height:52px;
    padding:0 16px;margin-top:8px;text-align:left;position:relative;
    border:1px solid var(--border);background:transparent;
    font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--text-muted);
  }
  .feature-rack.tabs-ready .rack-panels>[role="tab"]::before{
    content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;
    background:var(--accent);opacity:0;transition:opacity .22s ease;
  }
  .feature-rack.tabs-ready .rack-panels>[role="tab"][aria-selected="true"]{
    color:var(--text);background:var(--bg-panel);border-color:var(--border-strong);
  }
  .feature-rack.tabs-ready .rack-panels>[role="tab"][aria-selected="true"]::before{opacity:1}
  .feature-rack.tabs-ready .rack-panels>[role="tabpanel"]{margin-bottom:8px}
  .feature-rack:not(.tabs-ready) .rack-tabs{width:auto;margin-bottom:16px}
  .feature-rack:not(.tabs-ready) .rack-panels [role="tabpanel"]{margin-bottom:16px}
}

/* ============ 长页分类跳转导航(toc) ============ */
.toc{
  position:sticky;top:0;z-index:6;
  background:var(--bg);
  border-bottom:1px solid var(--border-soft);
}
.toc-inner{
  display:flex;gap:2px;
  max-width:var(--wrap-max);margin-inline:auto;padding-inline:var(--gutter);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.toc-inner::-webkit-scrollbar{display:none}
.toc a{
  flex:none;padding:15px 14px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--text-muted);
  border-bottom:2px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.toc a:hover{color:var(--accent)}
.toc a.is-on{color:var(--text);border-bottom-color:var(--accent)}

/* ============ FAQ 折叠项 ============ */
.faq-list{border:1px solid var(--border-soft);background:var(--bg-panel)}
.faq-item{border-top:1px solid var(--border-soft)}
.faq-item:first-child{border-top:0}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:14px;
  padding:19px 20px;
  font-size:15px;font-weight:600;color:var(--text);line-height:1.6;
  transition:color .2s ease;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"";width:7px;height:7px;border:1px solid var(--border-strong);flex:none}
.faq-item summary::after{
  content:"";margin-left:auto;width:9px;height:9px;flex:none;
  border-right:1px solid var(--text-muted);border-bottom:1px solid var(--text-muted);
  transform:rotate(45deg);transition:transform .2s ease,border-color .2s ease;
}
.faq-item summary:hover{color:var(--accent)}
.faq-item[open] summary::after{transform:rotate(225deg);border-color:var(--accent)}
.faq-body{padding:0 20px 22px 41px;color:var(--text-muted);font-size:14px;line-height:1.9}
.faq-body p+p{margin-top:.8em}
.faq-body code{overflow-wrap:anywhere}

/* ============ 术语卡 ============ */
.term-card{
  background:var(--bg-panel);border:1px solid var(--border-soft);
  padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0;
  transition:border-color .2s ease;
}
.term-card:hover{border-color:var(--border-strong)}
.term-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.term-name{font-family:var(--font-mono);font-size:15px;letter-spacing:.04em;color:var(--text);overflow-wrap:anywhere}
.term-cat{
  display:inline-flex;align-items:center;padding:4px 8px;flex:none;
  border:1px solid var(--border);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--text-muted);
  max-width:100%;overflow:hidden;
}
.term-card p{color:var(--text-muted);font-size:14px;line-height:1.85}
.term-card p code{overflow-wrap:anywhere}

/* ============ 徽章 / 标签 ============ */
.badge{
  display:inline-flex;align-items:center;gap:7px;padding:5px 10px;flex:none;
  border:1px solid var(--border);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;color:var(--text-muted);
  max-width:100%;overflow:hidden;white-space:nowrap;
}
.badge::before{content:"";width:5px;height:5px;background:var(--text-dim);flex:none}
.badge-rec{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.badge-rec::before{background:var(--on-accent)}
.badge-line{border-color:var(--border-strong);color:var(--text)}
.badge-line::before{background:var(--accent)}
.badge-stop{color:var(--text-dim)}
.badge-stop::before{background:var(--text-dim)}
/* 通用小胶囊(与 hero-chips 同语言) */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips li{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
  border:1px solid var(--border);font-size:12px;letter-spacing:.06em;color:var(--text-muted);
  max-width:100%;overflow:hidden;
}
.chips li::before{content:"";width:5px;height:5px;background:var(--text-dim);flex:none}

/* ============ 下载客户端卡片 ============ */
.client-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.client-grid>*{min-width:0}
@media (max-width:760px){.client-grid{grid-template-columns:1fr}}
.client-card{
  position:relative;display:flex;flex-direction:column;min-width:0;
  background:var(--bg-panel);border:1px solid var(--border-soft);
  transition:border-color .2s ease;
}
.client-card:hover{border-color:var(--border-strong)}
.client-card-rec{border-color:var(--accent-dark)}
.client-head{display:flex;align-items:center;gap:16px;padding:22px 22px 0}
.client-icon{width:56px;height:56px;flex:none}
.client-id{min-width:0}
.client-name{font-size:17px;font-weight:700;color:var(--text);overflow-wrap:anywhere}
.client-vendor{
  margin-top:4px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;color:var(--text-dim);
}
.client-head .badge{margin-left:auto;align-self:flex-start}
.client-body{padding:14px 22px 0;color:var(--text-muted);font-size:14px;line-height:1.85;flex:1}
.client-meta{
  display:flex;flex-wrap:wrap;gap:6px 18px;
  margin-top:16px;padding:12px 22px;border-top:1px solid var(--border-soft);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--text-muted);
}
.client-meta span{display:inline-flex;align-items:center;gap:7px;min-width:0}
.client-meta span::before{content:"";width:4px;height:4px;background:var(--text-dim);flex:none}
.client-actions{display:flex;flex-wrap:wrap;gap:10px;padding:16px 22px 22px}
/* 版本号槽位:默认空且不可见,downloads.js 填充后加 .has-ver */
[data-cdnver]:empty{display:none}
.plate-value[data-cdnver]:empty{display:block}
.plate-value[data-cdnver]:empty::after{content:"—";color:var(--text-dim)}
.client-name [data-cdnver]{font-weight:500;color:var(--text-muted)}

/* ============ 博客文章卡 ============ */
.post-card{
  display:flex;flex-direction:column;gap:12px;min-width:0;
  background:var(--bg-panel);border:1px solid var(--border-soft);
  padding:24px;
  transition:border-color .2s ease;
}
.post-card:hover{border-color:var(--border-strong)}
.post-meta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;color:var(--text-muted);
}
.post-tag{display:inline-flex;align-items:center;gap:7px;max-width:100%;overflow:hidden;white-space:nowrap}
.post-tag::before{content:"";width:5px;height:5px;background:var(--accent);flex:none}
.post-title{font-size:17px;font-weight:650;line-height:1.55;color:var(--text)}
.post-title a{transition:color .2s ease}
.post-title a:hover{color:var(--accent)}
.post-summary{font-size:14px;color:var(--text-muted);line-height:1.85}
.post-card .link-arrow{margin-top:auto;padding-top:8px}

/* ============ 引用块 .callout ============ */
.callout{
  border:1px solid var(--border-soft);border-left:2px solid var(--border-strong);
  background:var(--bg-panel);
  padding:16px 20px;margin:1.6em 0;
  color:var(--text-muted);font-size:14px;line-height:1.85;
}
.callout strong,.callout .callout-title{color:var(--text);font-weight:600}
.callout-title{display:block;margin-bottom:6px;font-size:13px;letter-spacing:.06em}
.callout-accent{border-left-color:var(--accent)}
.callout-warn{border-left-color:var(--warn)}
.callout-error{border-left-color:var(--error)}
.callout-ok{border-left-color:var(--success)}
.callout p+p{margin-top:.7em}

/* ============ 数据表 ============ */
.table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border-soft);
  margin:1.6em 0;
}
.data-table{width:100%;min-width:560px;font-size:14px}
.data-table th{
  font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.16em;
  color:var(--text-muted);text-align:left;
  padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg-panel);
  white-space:nowrap;
}
.data-table td{padding:12px 16px;border-bottom:1px solid var(--border-soft);color:var(--text-muted);line-height:1.7}
.data-table td:first-child{color:var(--text);font-family:var(--font-mono);font-size:13px;white-space:nowrap}
.data-table tr:last-child td{border-bottom:0}
.data-table .cell-ok{color:var(--success)}
.data-table .cell-warn{color:var(--warn)}
/* 裸表防御:文章里未包 .table-wrap 的 .data-table 自带横滑,min-width:0 必须带上 */
.prose>.data-table{
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
  max-width:100%;min-width:0;
  border:1px solid var(--border-soft);margin:1.6em 0;
}

/* ============ 终端窗口(真实配置/日志道具) ============ */
.termwin{
  border:1px solid var(--border);background:var(--bg-panel);
  box-shadow:0 24px 50px -24px var(--shadow-deep);
  margin:1.6em 0;min-width:0;
}
.termwin-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border-soft)}
.termwin-dot{width:8px;height:8px;border:1px solid var(--border-strong);flex:none}
.termwin-dot-fill{background:var(--text-dim);border-color:var(--text-dim)}
.termwin-dot-accent{background:var(--accent);border-color:var(--accent)}
.termwin-title{
  margin-left:8px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0;
}
.termwin pre{border:0;background:transparent;margin:0;padding:18px 20px}

/* ============ 行链接列表(首页下载入口 / 下一区块边缘) ============ */
.next-peek{
  position:relative;
  padding-inline:var(--page-pad);
  padding-bottom:90px;
  background:var(--bg);
}
.peek-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:16px;padding-bottom:18px;
  border-bottom:1px solid var(--border-soft);
}
.peek-title{
  font-size:17px;font-weight:650;letter-spacing:.02em;
  display:flex;align-items:center;gap:12px;
}
.peek-title::before{content:"";width:8px;height:8px;border:1px solid var(--border-strong);flex:none}
.peek-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--text-muted)}
.peek-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:20px;padding-bottom:20px;
  border-bottom:1px solid var(--border-soft);
  transition:color .2s ease;
}
.peek-row:hover{color:var(--accent)}
.row-main{display:flex;align-items:baseline;gap:18px;min-width:0;flex-wrap:wrap}
.row-name{font-size:15px;font-weight:600}
.row-spec{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--text-muted)}
.row-arrow{color:var(--text-muted);flex:none;transition:transform .2s ease,color .2s ease}
.peek-row:hover .row-arrow{transform:translateX(6px);color:var(--accent)}
@media (max-width:860px){
  .next-peek{padding-inline:var(--gutter);padding-bottom:64px}
}

/* ============ 文末下载引导卡(博客文章页) ============ */
.dl-guide{
  border:1px solid var(--border);border-top:2px solid var(--accent);
  background:var(--bg-panel);
  padding:28px;
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;
  margin:2.4em 0;
}
.dl-guide-main{flex:1;min-width:240px}
.dl-guide-title{font-size:18px;font-weight:700;color:var(--text)}
.dl-guide-desc{margin-top:8px;color:var(--text-muted);font-size:14px;line-height:1.85}
.dl-guide-actions{display:flex;flex-wrap:wrap;gap:12px;flex:none}

/* ============ 右下角常驻下载浮层(博客文章页必有;本站主页面不放) ============ */
.dl-fab{
  position:fixed;right:18px;bottom:18px;z-index:40;
  display:inline-flex;align-items:center;gap:10px;
  height:46px;padding:0 16px;
  background:var(--bg-panel2);border:1px solid var(--border-strong);
  color:var(--text);font-size:13px;font-weight:600;letter-spacing:.04em;
  box-shadow:0 18px 40px -18px var(--shadow-deep);
  transition:border-color .2s ease,color .2s ease;
}
.dl-fab svg{width:14px;height:14px;flex:none}
.dl-fab:hover{border-color:var(--accent);color:var(--accent)}

/* ============ 设计预览 / 工具页专用演示类 ============ */
.demo-label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;color:var(--text-dim);
  margin-bottom:14px;text-transform:uppercase;
}
.demo-block{border:1px solid var(--border-soft);background:var(--bg-panel);padding:24px;min-width:0}
.demo-block+.demo-block{margin-top:16px}
.demo-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.demo-grid{display:grid;gap:16px}
.demo-grid>*{min-width:0}
.demo-grid-2{grid-template-columns:repeat(2,1fr)}
.demo-grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.demo-grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.demo-grid-2,.demo-grid-3{grid-template-columns:1fr}}
.demo-contain{
  position:relative;height:150px;
  border:1px dashed var(--border-strong);
  transform:translateZ(0);overflow:hidden;
}
.demo-note{margin-top:10px;font-size:12px;color:var(--text-dim);line-height:1.8}
/* 色板 */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.swatches>*{min-width:0}
.swatch{border:1px solid var(--border-soft);background:var(--bg-panel);padding:12px;display:flex;flex-direction:column;gap:10px}
.swatch .sw-chip{height:44px;border:1px solid var(--border-soft)}
.swatch .sw-name{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--text-muted);overflow-wrap:anywhere}
.sw-bg{background:var(--bg)}
.sw-bg-panel{background:var(--bg-panel)}
.sw-bg-panel2{background:var(--bg-panel2)}
.sw-border{background:var(--border)}
.sw-border-strong{background:var(--border-strong)}
.sw-accent{background:var(--accent)}
.sw-accent-dark{background:var(--accent-dark)}
.sw-accent-bright{background:var(--accent-bright)}
.sw-on-accent{background:var(--on-accent)}
.sw-text{background:var(--text)}
.sw-text-muted{background:var(--text-muted)}
.sw-text-dim{background:var(--text-dim)}
.sw-success{background:var(--success)}
.sw-warn{background:var(--warn)}
.sw-error{background:var(--error)}