/* ==========================================================================
   Clash免费下载 · 跨页面组件(components.css)
   依赖 base.css 的设计令牌;本文件不新增颜色值。
   ========================================================================== */

/* ============ 通用徽章 / 标签(数据驱动文本,自带宽度防御) ============ */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--r-pill);
  font:600 11px/1.5 var(--font-mono);letter-spacing:.08em;
  max-width:100%;overflow:hidden;white-space:nowrap;
}
.badge-rec{
  color:var(--on-accent);
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  box-shadow:0 0 14px -2px var(--accent-55);
}
.badge-soft{color:var(--accent-2);border:1px solid var(--accent-28);background:var(--accent-08)}
.badge-eol{color:var(--warn);border:1px solid var(--warn);background:var(--warn-10)}
.badge-ok{color:var(--success);border:1px solid var(--success);background:var(--success-10)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:var(--r-pill);
  border:1px solid var(--border);background:transparent;color:var(--text-muted);
  font:500 12.5px/1.4 var(--font-display);cursor:pointer;
  max-width:100%;overflow:hidden;white-space:nowrap;
  transition:color .2s,border-color .2s,background-color .2s;
}
.chip:hover{color:var(--text);border-color:var(--accent-35)}
.chip.on{color:var(--accent-2);border-color:var(--accent-35);background:var(--accent-08)}

/* ============ 卡片悬浮工艺(发光描边 + 分层景深) ============ */
.hover-lift{transition:transform .25s var(--ease-out),box-shadow .3s,border-color .25s}
.hover-lift:hover{
  transform:translateY(-4px);border-color:var(--accent-28);
  box-shadow:0 22px 50px -24px var(--accent-28),inset 0 1px 0 var(--sheen);
}

/* ============ 隧道里程标 · 特性资料浏览器(data-tabs + 可选 data-autoplay) ============ */
.miles{display:grid;grid-template-columns:320px minmax(0,1fr);gap:26px;align-items:start}
.miles-tabs{display:flex;flex-direction:column;gap:10px}
.mile-tab{
  position:relative;display:flex;align-items:center;gap:14px;width:100%;
  padding:16px 18px;border-radius:var(--r-m);cursor:pointer;text-align:left;
  border:1px solid var(--border-soft);background:transparent;color:var(--text-muted);
  transition:color .2s,border-color .25s,background-color .25s;
}
.mile-tab::before{
  content:"";position:absolute;left:-1px;top:14px;bottom:14px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  box-shadow:0 0 12px var(--accent-55);
  transform:scaleY(0);transition:transform .3s var(--ease-out);
}
.mile-tab:hover{color:var(--text);border-color:var(--accent-18)}
.mile-tab.on{color:var(--text);background:var(--bg-panel);border-color:var(--accent-28)}
.mile-tab.on::before{transform:scaleY(1)}
.mile-code{font:600 12px/1 var(--font-mono);letter-spacing:.1em;color:var(--accent-2);flex:none}
.mile-name{font:600 15px/1.2 var(--font-display)}
.mile-progress{
  position:absolute;left:14px;right:14px;bottom:-1px;height:2px;border-radius:2px;overflow:hidden;
}
.mile-progress i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 8px var(--accent-55);
}
.miles-panels{min-width:0}
.mile-panel{
  display:none;position:relative;overflow:hidden;
  border:1px solid var(--accent-18);border-radius:var(--r-xl);
  background:linear-gradient(180deg,var(--bg-panel),var(--bg));
  box-shadow:0 34px 80px -36px var(--accent-28),inset 0 1px 0 var(--sheen);
  padding:36px;
}
.mile-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 240px at 18% 0%,var(--peach-20),transparent 65%);
}
.mile-panel>*{position:relative}
.mile-panel.on{display:block;animation:panelIn .35s var(--ease-out)}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mile-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.mile-head h3{margin:0;font-size:21px}
.mile-tag{
  font:600 11px/1 var(--font-mono);letter-spacing:.12em;color:var(--accent-2);
  padding:5px 10px;border:1px solid var(--accent-28);border-radius:var(--r-pill);background:var(--accent-08);
}
.mile-panel p{color:var(--text-muted);font-size:14.5px;line-height:1.9;margin:0 0 6px}
.mile-panel ul{list-style:none;margin:14px 0 0;padding:0}
.mile-panel li{position:relative;padding-left:22px;margin-bottom:8px;color:var(--text-muted);font-size:14px;line-height:1.8}
.mile-panel li::before{
  content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;flex:none;
  transform:rotate(45deg);background:var(--accent-2);box-shadow:0 0 6px var(--peach-55);
}
@media (max-width:900px){
  .miles{grid-template-columns:1fr}
  .miles-tabs{flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
  .mile-tab{flex:none;width:auto;min-width:152px}
  .mile-tab::before{left:14px;right:14px;top:auto;bottom:-1px;width:auto;height:3px;transform:scaleX(0)}
  .mile-tab.on::before{transform:scaleX(1)}
  .mile-progress{display:none}
  .mile-panel{padding:26px 22px}
}

/* ============ 平台胶囊 tab(下载页,data-tabs) ============ */
.os-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.os-tab{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 22px;border-radius:var(--r-pill);cursor:pointer;
  border:1px solid var(--border);background:var(--bg-panel);color:var(--text-muted);
  font:600 14px/1 var(--font-display);
  transition:color .2s,border-color .2s,background-color .2s,box-shadow .25s,transform .2s;
}
.os-tab svg{width:16px;height:16px;flex:none}
.os-tab:hover{color:var(--text);border-color:var(--accent-35);transform:translateY(-1px)}
.os-tab.on{
  color:var(--on-accent);border-color:transparent;
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  box-shadow:0 8px 26px -8px var(--accent-55);
}
.os-panel{display:none}
.os-panel.on{display:block;animation:panelIn .3s var(--ease-out)}

/* ============ 长页分类跳转导航(toc,纯锚点) ============ */
.toc-tabs{
  position:sticky;top:var(--header-h);z-index:40;
  display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:14px 0;margin-bottom:34px;
  background:var(--bg);border-bottom:1px solid var(--border-soft);
}
.toc-tabs a{
  flex:none;display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:var(--r-pill);
  border:1px solid var(--border-soft);color:var(--text-muted);
  font:500 13px/1 var(--font-display);
  transition:color .2s,border-color .2s,background-color .2s;
}
.toc-tabs a:hover{color:var(--text);border-color:var(--accent-35);background:var(--accent-08)}

/* ============ FAQ 折叠项(details/summary,零 JS) ============ */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{
  border:1px solid var(--border);border-radius:var(--r-m);
  background:var(--bg-panel);overflow:hidden;
  transition:border-color .25s,box-shadow .3s;
}
.faq-item[open]{border-color:var(--accent-28);box-shadow:0 12px 34px -18px var(--accent-28)}
.faq-item summary{
  display:flex;align-items:center;gap:14px;cursor:pointer;list-style:none;
  padding:18px 22px;font:600 15.5px/1.5 var(--font-display);color:var(--text);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .fx{
  margin-left:auto;flex:none;width:16px;height:16px;color:var(--accent-2);
  transition:transform .25s var(--ease-out);
}
.faq-item[open] summary .fx{transform:rotate(45deg)}
.faq-a{padding:0 22px 20px;color:var(--text-muted);font-size:14.5px;line-height:1.9}
.faq-a p{margin:0 0 .8em}
.faq-a p:last-child{margin-bottom:0}
.faq-item[open] .faq-a{animation:panelIn .3s var(--ease-out)}

/* ============ 术语卡 ============ */
.term-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.term-grid>*{min-width:0}
.term-card{padding:22px}
.term-code{font:600 11px/1 var(--font-mono);letter-spacing:.16em;color:var(--accent-2)}
.term-card h3{margin:10px 0 8px;font-size:17px}
.term-card p{margin:0;color:var(--text-muted);font-size:13.5px;line-height:1.85}
@media (max-width:960px){.term-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.term-grid{grid-template-columns:1fr}}

/* ============ 下载客户端卡片 ============ */
.dl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.dl-grid>*{min-width:0}
@media (max-width:760px){.dl-grid{grid-template-columns:1fr}}
.dl-card{display:flex;flex-direction:column;padding:26px}
.dl-card.rec{
  border-color:var(--accent-35);
  box-shadow:0 0 0 1px var(--accent-18),0 24px 60px -28px var(--accent-35),inset 0 1px 0 var(--sheen);
}
.dl-card.eol{opacity:.72}
.dl-head{display:flex;align-items:center;gap:14px}
.dl-icon{width:52px;height:52px;flex:none}
.dl-headtxt{min-width:0}
.dl-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;font-size:18px;font-weight:800}
/* 版本号槽位:默认隐藏,downloads.js 填值后加 .on 才显示(防空槽裸露) */
.dl-ver{display:none;align-items:center;padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--border);font:500 11px/1.4 var(--font-mono);letter-spacing:.06em;color:var(--text-muted)}
.dl-ver.on{display:inline-flex}
.dl-sub{margin:4px 0 0;font:500 11.5px/1.4 var(--font-mono);letter-spacing:.1em;color:var(--text-muted)}
.dl-desc{margin:14px 0 0;color:var(--text-muted);font-size:14px;line-height:1.85}
.dl-meta{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.dl-meta li{display:flex;gap:10px;font:500 12px/1.6 var(--font-mono);letter-spacing:.04em;color:var(--text-muted)}
.dl-meta li b{color:var(--text);font-weight:600}
.dl-meta li::before{
  content:"";width:4px;height:4px;margin-top:.55em;flex:none;transform:rotate(45deg);
  background:var(--accent);box-shadow:0 0 6px var(--accent-55);
}
.dl-actions{margin-top:auto;padding-top:20px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dl-alt{font:500 12.5px/1.5 var(--font-mono);color:var(--text-muted)}
.dl-alt:hover{color:var(--accent-2)}
/* 系统要求小表 */
.sysreq{margin-top:34px}
.sysreq h3{margin:0 0 12px;font-size:15px}
.sysreq .table-wrap{margin:0}

/* ============ 博客文章卡 ============ */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post-grid>*{min-width:0}
@media (max-width:960px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.post-grid{grid-template-columns:1fr}}
.post-card{display:flex;flex-direction:column;padding:24px}
.post-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;font:500 11.5px/1.5 var(--font-mono);letter-spacing:.08em;color:var(--text-muted)}
.post-tag{
  display:inline-flex;align-items:center;padding:4px 11px;border-radius:var(--r-pill);
  border:1px solid var(--accent-28);background:var(--accent-08);
  color:var(--accent-2);font:600 11px/1.5 var(--font-mono);letter-spacing:.06em;
  max-width:100%;overflow:hidden;white-space:nowrap;
}
.post-card h3{margin:0 0 10px;font-size:17.5px;line-height:1.5}
.post-card h3 a{color:var(--text)}
.post-card h3 a:hover{color:var(--accent-2)}
.post-card>p{margin:0 0 16px;color:var(--text-muted);font-size:13.5px;line-height:1.85}
.post-more{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font:600 12.5px/1 var(--font-mono);letter-spacing:.1em;color:var(--accent-2);
}
.post-more svg{width:14px;height:14px;flex:none;transition:transform .2s}
.post-more:hover svg{transform:translateX(4px)}

/* ============ 引用提示块 .callout ============ */
.callout{
  position:relative;margin:1.4em 0;padding:18px 22px 18px 24px;
  border:1px solid var(--border);border-radius:var(--r-m);
  background:var(--bg-panel);overflow:hidden;
}
.callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.callout-title{
  display:flex;align-items:center;gap:8px;margin:0 0 8px;
  font:600 11px/1 var(--font-mono);letter-spacing:.22em;color:var(--accent-2);
}
.callout p{margin:0 0 .6em;color:var(--text-muted);font-size:14px;line-height:1.85}
.callout p:last-child{margin-bottom:0}
.callout-warn{border-color:var(--warn)}
.callout-warn::before{background:var(--warn)}
.callout-warn .callout-title{color:var(--warn)}
.callout-error{border-color:var(--error)}
.callout-error::before{background:var(--error)}
.callout-error .callout-title{color:var(--error)}
.callout-success{border-color:var(--success)}
.callout-success::before{background:var(--success)}
.callout-success .callout-title{color:var(--success)}

/* ============ 数据表 ============ */
.table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
  border:1px solid var(--border);border-radius:var(--r-m);margin:1.4em 0;
  background:var(--bg-panel);
}
.data-table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px}
.data-table th{
  text-align:left;padding:12px 16px;
  font:600 11px/1.5 var(--font-mono);letter-spacing:.14em;color:var(--accent-2);
  background:var(--bg-panel2);border-bottom:1px solid var(--border);white-space:nowrap;
}
.data-table td{padding:12px 16px;border-bottom:1px solid var(--border-soft);color:var(--text-muted);line-height:1.7;vertical-align:top}
.data-table tr:last-child td{border-bottom:0}
.data-table td:first-child{color:var(--text);font-weight:600;white-space:nowrap}
/* 裸表防御:文章页可能输出不带 .table-wrap 的裸 table,直接变横滑块 */
.prose > .data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}

/* ============ 步骤列表(CSS counter 序号圆标) ============ */
.steps{list-style:none;margin:1.6em 0;padding:0;counter-reset:step;display:flex;flex-direction:column;gap:14px}
.steps > li{
  counter-increment:step;position:relative;
  padding:20px 22px 20px 76px;
  border:1px solid var(--border);border-radius:var(--r-m);background:var(--bg-panel);
}
.steps > li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:20px;top:20px;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font:700 13px/1 var(--font-mono);color:var(--accent-2);
  border:1px solid var(--accent-28);background:var(--accent-08);
  box-shadow:0 0 14px -4px var(--accent-35);
}
.steps h3{margin:6px 0 8px;font-size:17px}
.steps p{margin:0;color:var(--text-muted);font-size:14px;line-height:1.85}
@media (max-width:640px){
  .steps > li{padding:18px 18px 18px 66px}
  .steps > li::before{left:16px;top:18px;width:34px;height:34px;font-size:12px}
}

/* ============ 面包屑(博客文章页) ============ */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:28px 0 32px;
  font:500 12.5px/1.6 var(--font-mono);color:var(--text-muted);
}
.crumbs a{color:var(--text-muted)}
.crumbs a:hover{color:var(--accent-2)}
.crumbs .sep{color:var(--border)}
.crumbs [aria-current="page"]{color:var(--accent-2)}

/* ============ 状态栏装饰条(静态事实,aria-hidden) ============ */
.statusbar{border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);background:var(--bg-panel)}
.statusbar-inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch}
.statusbar .st{
  flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 18px;border-left:1px solid var(--border-soft);
  font:500 11.5px/1 var(--font-mono);letter-spacing:.14em;color:var(--text-muted);white-space:nowrap;
}
.statusbar .st:first-child{border-left:0}
.statusbar .st b{color:var(--accent-2);font-weight:600}
.statusbar .st i{width:4px;height:4px;flex:none;transform:rotate(45deg);background:var(--accent);box-shadow:0 0 6px var(--accent-55)}

/* ============ 快速上手预览(首页三步) ============ */
.qs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:qs}
.qs-grid>*{min-width:0}
@media (max-width:900px){.qs-grid{grid-template-columns:1fr}}
.qs-card{position:relative;padding:26px;counter-increment:qs;overflow:hidden}
.qs-card::before{
  content:"0" counter(qs);
  position:absolute;top:14px;right:20px;
  font:800 34px/1 var(--font-mono);color:var(--accent-18);
}
.qs-card h3{margin:0 0 10px;font-size:17px}
.qs-card p{margin:0;color:var(--text-muted);font-size:13.5px;line-height:1.85}
.qs-more{margin-top:26px}

/* ============ 文末下载引导卡(博客文章页) ============ */
.dl-guide{
  margin:2.6em 0;padding:38px 30px;text-align:center;
  border:1px solid var(--accent-18);border-radius:var(--r-xl);
  background:
    radial-gradient(420px 200px at 50% 0%,var(--accent-12),transparent 70%),
    linear-gradient(180deg,var(--bg-panel),var(--bg));
  box-shadow:0 30px 70px -34px var(--accent-28),inset 0 1px 0 var(--sheen);
}
.dl-guide h2{margin:0 0 10px;font-size:clamp(20px,2.4vw,26px)}
.dl-guide p{margin:0 auto;max-width:520px;color:var(--text-muted);font-size:14px;line-height:1.85}
.dl-guide .row-flex{justify-content:center;margin-top:24px}

/* ============ 右下角常驻下载浮层 .dl-fab ============ */
.dl-fab{
  position:fixed;right:22px;bottom:22px;z-index:70;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:var(--r-pill);
  color:var(--on-accent);font:700 14px/1 var(--font-display);letter-spacing:.02em;
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  box-shadow:0 0 0 1px var(--peach-30),0 16px 40px -10px var(--accent-55);
  transition:transform .2s,box-shadow .25s;
}
.dl-fab:hover{transform:translateY(-3px);color:var(--on-accent);box-shadow:0 0 0 1px var(--peach-55),0 22px 50px -12px var(--accent-55)}
.dl-fab svg{width:16px;height:16px;flex:none}
@media (max-width:640px){.dl-fab{right:14px;bottom:14px;padding:12px 18px;font-size:13px}}
/* 设计预览里的静态展示模式 */
.fab-demo .dl-fab{position:static}

/* ============ 设计预览专用辅助(design-preview.html) ============ */
.demo-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.swatch{border:1px solid var(--border);border-radius:var(--r-m);overflow:hidden;background:var(--bg-panel)}
.swatch i{display:block;height:64px;border-bottom:1px solid var(--border-soft)}
.swatch b{display:block;padding:10px 12px 2px;font:600 12px/1.4 var(--font-mono);color:var(--text)}
.swatch span{display:block;padding:0 12px 12px;font:500 11px/1.5 var(--font-mono);color:var(--text-muted)}
.c-bg{background:var(--bg)}
.c-bg-panel{background:var(--bg-panel)}
.c-bg-panel2{background:var(--bg-panel2)}
.c-border{background:var(--border)}
.c-accent{background:var(--accent)}
.c-accent-2{background:var(--accent-2)}
.c-accent-dark{background:var(--accent-dark)}
.c-peach{background:var(--peach-bright)}
.c-text{background:var(--text)}
.c-text-muted{background:var(--text-muted)}
.c-success{background:var(--success)}
.c-warn{background:var(--warn)}
.c-error{background:var(--error)}
.demo-note{
  padding:10px 16px;margin:0 0 18px;
  border:1px dashed var(--border);border-radius:var(--r-m);
  color:var(--text-muted);font:500 12px/1.7 var(--font-mono);
}
.demo-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}