/* ============================================================
   Clash官网2026 · 深空轨道控制台 设计系统
   components.css —— 跨页面组件
   ============================================================ */

/* ---------- 状态栏装饰条(静态事实,等宽,aria-hidden) ---------- */
.statline{
  border-top:1px solid var(--rail);
  border-bottom:1px solid var(--rail);
  background:var(--deck-1);
}
.statline-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px 36px;
  padding-top:13px;
  padding-bottom:13px;
}
.statline-row span{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.2em;
  color:var(--signal-dim);
  white-space:nowrap;
}
.statline-row b{color:var(--ember);font-weight:500}

/* ---------- Tab 组件(下载页平台切换 / 通用) ---------- */
.tabline{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  border-bottom:1px solid var(--rail);
  margin-bottom:clamp(24px,4vw,36px);
}
.tabline [role="tab"]{
  position:relative;
  padding:12px 20px;
  background:transparent;
  border:0;
  border-radius:var(--edge);
  color:var(--signal-dim);
  font-size:15px;
  cursor:pointer;
  white-space:nowrap;
}
.tabline [role="tab"]:hover{color:var(--signal)}
.tabline [role="tab"]::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:-1px;
  height:2px;
  background:var(--ember);
  transform:scaleX(0);
  transition:transform .2s ease;
}
.tabline [role="tab"][aria-selected="true"]{color:var(--signal)}
.tabline [role="tab"][aria-selected="true"]::after{transform:scaleX(1)}
.tabline .tab-code{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--ember);
  margin-right:8px;
}
.tab-pane{display:none}
.tab-pane.on{display:block}

/* ---------- 轨道刻度带(首页特性区:横贯轨道线 + 圆点站点) ---------- */
.orbit-track{position:relative;margin-bottom:clamp(30px,5vw,48px)}
.orbit-track::before{
  content:"";
  position:absolute;
  top:6px;
  left:0;
  right:0;
  height:1px;
  background:var(--rail);
}
.orbit-stations{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.orbit-stations>*{min-width:0}
.station{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
  padding:0;
  background:transparent;
  border:0;
  cursor:pointer;
  color:var(--signal-dim);
  text-align:center;
}
.station .dot{
  width:13px;
  height:13px;
  border-radius:50%;
  background:var(--ember);
  flex-shrink:0;
  transition:transform .2s ease,box-shadow .2s ease;
}
.station .st-code{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--signal-dim);
}
.station .st-name{
  font-size:14px;
  color:var(--signal-dim);
  line-height:1.4;
}
.station:hover .st-name{color:var(--signal)}
.station[aria-selected="true"] .dot{
  transform:scale(1.5);
  box-shadow:0 0 0 5px var(--ember-tint),0 0 18px var(--halo-strong);
}
.station[aria-selected="true"] .st-code{color:var(--ember)}
.station[aria-selected="true"] .st-name{color:var(--signal)}
/* 详情宽幅面板 */
.orbit-detail{
  background:var(--deck-1);
  border:1px solid var(--hairline);
  box-shadow:var(--panel-glow);
  padding:clamp(24px,4vw,40px);
}
.orbit-detail h3{margin-top:0}
.orbit-detail .spec-line{
  margin-top:18px;
  padding:12px 16px;
  background:var(--deck-2);
  border:1px solid var(--hairline);
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--signal-dim);
  overflow-x:auto;
  white-space:nowrap;
}
.orbit-detail .spec-line b{color:var(--ember);font-weight:500}
/* 窄屏退化:纵向轨道线时间轴 */
@media (max-width:720px){
  .orbit-track::before{
    top:0;
    bottom:0;
    left:6px;
    right:auto;
    width:1px;
    height:auto;
  }
  .orbit-stations{flex-direction:column;gap:4px}
  .station{
    flex-direction:row;
    align-items:center;
    gap:14px;
    width:100%;
    min-height:44px;
    padding-top:8px;
    padding-bottom:8px;
    text-align:left;
  }
  .station .st-name{font-size:15px}
}

/* ---------- 长页分类跳转导航(toc) ---------- */
.toc-rail{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:clamp(28px,4vw,44px);
  padding-bottom:16px;
  border-bottom:1px solid var(--rail);
}
.toc-rail a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border:1px solid var(--hairline);
  color:var(--signal-dim);
  font-size:13.5px;
  text-decoration:none;
  white-space:nowrap;
}
.toc-rail a .toc-code{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--ember);
}
.toc-rail a:hover{border-color:var(--ember);color:var(--signal)}

/* ---------- FAQ 折叠项 ---------- */
.faq-item{
  background:var(--deck-1);
  border:1px solid var(--hairline);
  box-shadow:var(--panel-glow);
  margin-bottom:14px;
}
.faq-item summary{
  display:flex;
  align-items:center;
  gap:14px;
  padding:17px 22px;
  cursor:pointer;
  list-style:none;
  font-weight:600;
  color:var(--signal);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{
  content:"+";
  font-family:var(--font-mono);
  font-size:17px;
  color:var(--ember);
  flex-shrink:0;
  width:18px;
  text-align:center;
}
.faq-item[open] summary::before{content:"−"}
.faq-item[open] summary{border-bottom:1px solid var(--rail-soft)}
.faq-body{
  padding-top:16px;
  padding-bottom:20px;
  padding-inline:22px;
  color:var(--signal-dim);
}
.faq-body p{margin-bottom:.9em}
.faq-body p:last-child{margin-bottom:0}

/* ---------- 术语卡 ---------- */
.term-card{
  background:var(--deck-1);
  border:1px solid var(--hairline);
  box-shadow:var(--panel-glow);
  padding:22px 24px;
}
.term-card .term-head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
}
.term-card .term-name{
  margin:0;
  font-size:18px;
}
.term-card .term-code{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--ember);
}
.term-card p{margin:0;color:var(--signal-dim);font-size:14.5px}

/* ---------- 徽章 ---------- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 11px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  border:1px solid var(--hairline);
  color:var(--signal-dim);
  white-space:nowrap;
}
.badge--prime{
  border-color:var(--ember);
  color:var(--ember);
  background:var(--ember-tint);
}
.badge--ok{border-color:var(--ok);color:var(--ok)}
.badge--warn{border-color:var(--warn);color:var(--warn)}
.badge--dead{border-color:var(--err);color:var(--err)}

/* ---------- 下载客户端卡片 ---------- */
.dl-card{
  background:var(--deck-1);
  border:1px solid var(--hairline);
  box-shadow:var(--panel-glow);
  padding:clamp(20px,3vw,28px);
  margin-bottom:18px;
}
.dl-card--prime{border-color:var(--ember)}
.dl-card .dl-head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:12px;
}
.dl-card .dl-head img{flex-shrink:0}
.dl-card .dl-name{margin:0;font-size:20px}
.dl-card .dl-ver{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--signal-dim);
}
.dl-card .dl-desc{color:var(--signal-dim);font-size:14.5px;margin-bottom:16px}
.dl-card .dl-actions{display:flex;flex-wrap:wrap;gap:10px}
.dl-card .dl-site{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--ember);
}
/* 系统要求小表 */
.sys-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  margin:1.4em 0;
}
.sys-table th,.sys-table td{
  border:1px solid var(--hairline);
  padding:10px 14px;
  text-align:left;
  vertical-align:top;
}
.sys-table th{
  background:var(--deck-2);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  font-weight:500;
  color:var(--signal-dim);
}
.sys-table td{color:var(--signal-dim)}
.table-scroll{overflow-x:auto;margin:1.4em 0}
.table-scroll .sys-table{margin:0;min-width:520px}

/* ---------- 博客文章卡 ---------- */
.post-card{
  display:flex;
  flex-direction:column;
  background:var(--deck-1);
  border:1px solid var(--hairline);
  box-shadow:var(--panel-glow);
  padding:24px 26px;
  transition:border-color .18s ease;
}
.post-card:hover{border-color:var(--ember)}
.post-card .post-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:14px;
}
.post-card .post-date{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--signal-dim);
}
.post-card .post-title{
  margin:0 0 12px;
  font-size:18px;
  line-height:1.45;
}
.post-card .post-title a{color:var(--signal);text-decoration:none}
.post-card .post-title a:hover{color:var(--ember)}
.post-card .post-sum{
  margin:0 0 16px;
  color:var(--signal-dim);
  font-size:14px;
  line-height:1.75;
}
.post-card .post-more{
  margin-top:auto;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.1em;
  color:var(--ember);
  text-decoration:none;
}
.post-card .post-more:hover{color:var(--ember-deep)}
/* 标签筛选按钮组(博客列表页) */
.tag-rail{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:clamp(24px,4vw,36px);
}
.tag-rail button{
  padding:7px 16px;
  background:transparent;
  border:1px solid var(--hairline);
  color:var(--signal-dim);
  font-size:13.5px;
  cursor:pointer;
}
.tag-rail button:hover{color:var(--signal);border-color:var(--rail)}
.tag-rail button.on{
  border-color:var(--ember);
  color:var(--ember);
  background:var(--ember-tint);
}

/* ---------- callout 引用块 ---------- */
.callout{
  display:flex;
  gap:14px;
  margin:1.6em 0;
  padding:16px 20px;
  background:var(--deck-1);
  border:1px solid var(--hairline);
  border-left:2px solid var(--ember);
}
.callout .co-mark{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--ember);
  flex-shrink:0;
  padding-top:2px;
}
.callout .co-body{color:var(--signal-dim);font-size:14.5px}
.callout .co-body p{margin-bottom:.8em}
.callout .co-body p:last-child{margin-bottom:0}
.callout--warn{border-left-color:var(--warn)}
.callout--warn .co-mark{color:var(--warn)}
.callout--err{border-left-color:var(--err)}
.callout--err .co-mark{color:var(--err)}

/* ---------- 面包屑(博客文章页) ---------- */
.crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin-top:1.6rem;
  margin-bottom:1.2rem;
  font-size:13px;
  color:var(--signal-dim);
}
.crumbs a{color:var(--signal-dim);text-decoration:none}
.crumbs a:hover{color:var(--ember)}
.crumbs .crumb-sep{color:var(--hairline);flex-shrink:0}
.crumbs .crumb-now{
  color:var(--signal);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:46ch;
}

/* ---------- 文末下载引导卡 ---------- */
.post-dl-card{
  margin-top:clamp(36px,5vw,52px);
  padding:clamp(24px,4vw,36px);
  background:var(--deck-2);
  border:1px solid var(--ember);
  box-shadow:0 0 26px var(--halo);
}
.post-dl-card h2{margin-top:0;font-size:22px}
.post-dl-card p{color:var(--signal-dim)}
.post-dl-card .dl-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

/* ---------- 延伸阅读 / 上下篇 ---------- */
.related-block{margin-top:clamp(36px,5vw,52px)}
.post-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:clamp(24px,4vw,36px);
}
.post-nav>*{min-width:0}
.post-nav a{
  display:block;
  padding:16px 20px;
  border:1px solid var(--hairline);
  color:var(--signal-dim);
  font-size:14px;
  text-decoration:none;
}
.post-nav a:hover{border-color:var(--ember);color:var(--signal)}
.post-nav .pn-dir{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--ember);
  margin-bottom:6px;
}
@media (max-width:640px){
  .post-nav{grid-template-columns:1fr}
}

/* ---------- 右下角常驻下载浮层 .dl-fab ---------- */
.dl-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:70;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:12px 20px;
  background:var(--ember);
  border:1px solid var(--signal);
  color:var(--void);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 0 24px var(--halo-strong);
}
.dl-fab:hover{background:var(--ember-deep);color:var(--void)}
.dl-fab svg{flex-shrink:0}
@media (max-width:640px){
  .dl-fab{right:12px;bottom:12px;padding:11px 16px;font-size:13px}
}

/* ---------- 快速上手预览(步骤编号圆标) ---------- */
.step-list{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:orbit-step;
}
.step-list>li{
  counter-increment:orbit-step;
  display:flex;
  gap:18px;
  margin-bottom:22px;
}
.step-list .step-no{
  flex-shrink:0;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--ember);
  color:var(--ember);
  font-family:var(--font-mono);
  font-size:14px;
}
.step-list .step-no::before{content:counter(orbit-step,decimal-leading-zero)}
.step-list h3,.step-list h4{margin:0 0 6px;font-size:17px}
.step-list p{margin:0;color:var(--signal-dim);font-size:14.5px}

/* ---------- 复制命令框 ---------- */
.cmd-box{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  background:var(--deck-2);
  border:1px solid var(--hairline);
}
.cmd-box code{
  flex:1;
  min-width:0;
  overflow-x:auto;
  white-space:nowrap;
  background:transparent;
  border:0;
  padding:0;
  color:var(--signal);
  font-size:13px;
}
.cmd-box button{
  flex-shrink:0;
  padding:7px 15px;
  background:transparent;
  border:1px solid var(--rail);
  color:var(--signal-dim);
  font-size:12.5px;
  cursor:pointer;
}
.cmd-box button:hover{border-color:var(--ember);color:var(--ember)}