/* ============================================================
   Clash配置教程 · 跨页面组件层
   机架单元条带 / 合成器面板 Hero / tab / 折叠 / 卡片 / 浮层
   ============================================================ */

/* ============ Hero:整块合成器面板 ============ */
.hero{
  height:calc(100vh - 104px);
  min-height:750px;
  padding:16px 24px 0;
  overflow-x:clip;
}
.panel{
  position:relative;
  height:100%;
  background:var(--panel);
  background-image:radial-gradient(circle, var(--silk-dot) 1px, transparent 1.3px);
  background-size:26px 26px;
  border:1px solid var(--edge);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.55), 0 3px 0 rgba(0,0,0,.35);
  padding:34px 56px 22px;
  display:flex;
  flex-direction:column;
}

/* 四角螺钉 */
.screw{position:absolute;width:16px;height:16px}
.screw--tl{top:10px;left:10px}
.screw--tr{top:10px;right:10px}
.screw--bl{bottom:10px;left:10px}
.screw--br{bottom:10px;right:10px}
.scrw-body{fill:var(--panel2);stroke:var(--metal-dark);stroke-width:1}
.scrw-slot{stroke:var(--metal-dark);stroke-width:1.6}

/* ---- 铭牌区 ---- */
.plate{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:48px;
  padding-bottom:22px;
  border-bottom:1px solid var(--border);
}
.plate-text{min-width:0}
.engrave{
  font-family:var(--font-display);
  font-size:72px;
  font-weight:800;
  letter-spacing:.13em;
  line-height:1.05;
  text-transform:uppercase;
  color:var(--text);
  text-shadow:0 1px 0 rgba(0,0,0,.55), 0 2px 2px rgba(0,0,0,.3);
  white-space:nowrap;
}
.model{
  display:block;
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  text-shadow:none;
}
.desc{
  margin-top:14px;
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
  max-width:760px;
}
.desc strong{
  color:var(--text);
  font-weight:600;
}

/* 双旋钮 */
.knobs{
  display:flex;
  gap:20px;
  flex-shrink:0;
  padding-top:6px;
}
.knob{display:block;width:112px;height:118px}
.knob-scale{
  fill:none;
  stroke:var(--metal-dark);
  stroke-width:5;
  stroke-dasharray:1.5 10.2;
}
.knob-cap{
  fill:var(--panel2);
  stroke:var(--border);
  stroke-width:1;
}
.knob-cap-inner{
  fill:none;
  stroke:var(--metal-dark);
  stroke-width:1;
}
.knob-ptr{stroke:var(--text);stroke-width:2;stroke-linecap:round}
.knob-hl{fill:var(--text);opacity:.12}
.knob-lbl{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.18em;
  fill:var(--muted);
  text-anchor:middle;
}

/* ---- 按键行 ---- */
.keys{
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:20px;
  padding-bottom:16px;
}
.chips{
  display:flex;
  gap:8px;
  margin-left:auto;
}
.chips li{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.05em;
  color:var(--muted);
  border:1px solid var(--border);
  background:var(--panel2);
  padding:5px 12px;
  border-radius:var(--radius);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}
.chips--start{margin-left:0;flex-wrap:wrap}

/* ---- 跳线插孔区 ---- */
.field{
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
}
.field svg{
  display:block;
  width:100%;
  height:100%;
  max-height:390px;
}
.lbl-head{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.22em;
  fill:var(--muted);
  text-anchor:middle;
}
.lbl{
  font-family:var(--font-mono);
  font-size:16px;
  font-weight:700;
  letter-spacing:.06em;
  fill:var(--text);
}
.lbl--end{text-anchor:end}
.lbl-sub{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  fill:var(--muted);
}
.lbl-sub--end{text-anchor:end}
.jack-outer{fill:var(--hole);stroke:var(--metal-dark);stroke-width:1.5}
.jack-mid{fill:none;stroke:var(--metal);stroke-width:1}
.jack-hole{fill:var(--hole);stroke:var(--metal-dark);stroke-width:1}
.ring--amber{fill:none;stroke:var(--amber);stroke-width:2}
.ring--teal{fill:none;stroke:var(--teal);stroke-width:2}
.ring--red{fill:none;stroke:var(--red);stroke-width:2}
.cable{fill:none;stroke-width:6;stroke-linecap:round}
.cable--amber{stroke:var(--amber)}
.cable--teal{stroke:var(--teal)}
.cable--red{stroke:var(--red)}
.cable-shadow{fill:none;stroke:var(--cable-shadow);stroke-width:6;stroke-linecap:round}
.sleeve{fill:var(--metal);stroke:var(--metal-dark);stroke-width:1}
.led--amber{fill:var(--amber)}
.led--teal{fill:var(--teal)}
.led--red{fill:var(--red)}

/* ---- 下一区块边缘(机架单元条带) ---- */
.next-peek{
  height:72px;
  margin-top:14px;
  margin-left:24px;
  margin-right:24px;
  border:1px solid var(--border);
  background:var(--panel);
  display:flex;
  align-items:center;
  gap:14px;
  padding-left:24px;
  padding-right:24px;
}
.np-led{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--teal);
  flex-shrink:0;
}
.np-unit{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--muted);
  flex-shrink:0;
}
.np-title{
  font-size:14px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--text);
}
.np-note{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted);
}

/* Hero 响应式 */
@media (max-width:1100px){
  .hero{height:auto;min-height:0;padding-left:var(--gutter);padding-right:var(--gutter)}
  .panel{padding:28px 28px 20px}
  .plate{flex-direction:column;gap:20px}
  .engrave{font-size:clamp(30px,7vw,56px);white-space:normal}
  .field svg{height:auto;max-height:none}
}
@media (max-width:640px){
  .knobs{display:none}
  .keys{flex-wrap:wrap}
  .keys .key{width:100%;justify-content:center}
  .chips{margin-left:0;flex-wrap:wrap}
  .field{display:none}
  .next-peek{
    height:auto;
    margin-left:var(--gutter);
    margin-right:var(--gutter);
    padding-top:12px;
    padding-bottom:12px;
    padding-left:16px;
    padding-right:16px;
    flex-wrap:wrap;
    gap:10px;
  }
  .np-note{margin-left:0;width:100%}
}

/* ============ 状态栏装饰条(首页可选段,静态事实) ============ */
.statline{
  border:1px solid var(--border);
  background:var(--panel);
  display:flex;
  flex-wrap:wrap;
}
.statline span{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--muted);
  padding:10px 18px;
  border-right:1px solid var(--border);
  max-width:100%;
  overflow:hidden;
}
.statline span:last-child{border-right:0}

/* ============ 机架单元浏览器(tab 切换) ============ */
.rk{
  display:grid;
  grid-template-columns:240px 1fr;
  border:1px solid var(--border);
}
.rk > *{min-width:0}
.rk-list{
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border-right:1px solid var(--border);
}
.rk-tab{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:48px;
  padding:14px 16px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.1em;
  color:var(--muted);
  text-align:left;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--border);
  cursor:pointer;
}
.rk-tab:hover{color:var(--text)}
.rk-tab.is-live{
  color:var(--text);
  background:var(--panel2);
}
.rk-tab.is-live .led-dot{background:var(--teal)}
.rk-tab.is-live[data-led="amber"] .led-dot{background:var(--amber)}
.rk-tab.is-live[data-led="red"] .led-dot{background:var(--red)}
.rk-panels{background:var(--panel2)}
.rk-panel{
  display:none;
  position:relative;
  padding:26px 28px 28px;
}
.rk-panel.is-live{display:block}
.rk-panel[hidden]{display:none}
.rk-no{
  position:absolute;
  top:16px;
  right:20px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--muted);
}
.rk-panel h3{
  font-size:17px;
  letter-spacing:.03em;
  margin-bottom:12px;
  padding-right:56px;
}
.rk-panel p{
  font-size:14px;
  line-height:1.85;
  color:var(--text-soft);
}
@media (max-width:760px){
  .rk{grid-template-columns:1fr}
  .rk-list{
    flex-direction:row;
    overflow-x:auto;
    border-right:0;
    border-bottom:1px solid var(--border);
  }
  .rk-tab{
    width:auto;
    flex-shrink:0;
    border-bottom:0;
    border-right:1px solid var(--border);
  }
  .rk-panel{padding:20px 16px 24px}
}

/* ============ 长页分类跳转导航(toc) ============ */
.toc-tabs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-top:4px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
  margin-bottom:28px;
}
.toc-tabs a{
  flex-shrink:0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--muted);
  border:1px solid var(--border);
  background:var(--panel);
  padding:8px 14px;
  white-space:nowrap;
}
.toc-tabs a:hover{
  color:var(--text);
  border-color:var(--edge);
}

/* ============ FAQ 折叠项 ============ */
.fold{
  border:1px solid var(--border);
  background:var(--panel);
  margin-bottom:10px;
}
.fold summary{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:15px 18px;
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  list-style:none;
}
.fold summary::-webkit-details-marker{display:none}
.fold-mk{
  font-family:var(--font-mono);
  font-size:15px;
  color:var(--muted);
  flex-shrink:0;
  transition:transform .15s ease;
}
.fold[open] .fold-mk{transform:rotate(45deg)}
.fold-body{
  border-top:1px solid var(--border);
  padding:14px 18px 18px;
  font-size:14px;
  line-height:1.85;
  color:var(--text-soft);
}
.fold-body p + p{margin-top:.8em}

/* ============ 徽章 / 标签 ============ */
.tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--muted);
  border:1px solid var(--border);
  background:var(--panel2);
  padding:3px 9px;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}
.tag .led-dot{width:5px;height:5px}
.tag--prime{color:var(--text)}
.tag--prime .led-dot{background:var(--amber)}
.tag--reco{color:var(--text)}
.tag--reco .led-dot{background:var(--teal)}
.tag--eol .led-dot{background:var(--red)}

/* ============ 下载客户端卡片 ============ */
.dl-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  border:1px solid var(--border);
  background:var(--panel);
  padding:22px 24px;
  min-width:0;
}
.dl-head{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.dl-ico{
  width:52px;
  height:52px;
  flex-shrink:0;
}
.dl-name{
  font-size:17px;
  font-weight:700;
  letter-spacing:.02em;
}
.dl-ver{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
}
.dl-ver:empty{display:none}
.dl-meta{
  font-size:13px;
  line-height:1.75;
  color:var(--muted);
}
.dl-meta a{
  color:var(--text);
  border-bottom:1px solid var(--metal);
}
.dl-acts{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:auto;
}

/* ============ 博客文章卡 ============ */
.post-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  border:1px solid var(--border);
  background:var(--panel);
  padding:20px 22px;
  min-width:0;
}
.post-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
}
.post-card h3{
  font-size:16px;
  line-height:1.5;
  letter-spacing:.01em;
}
.post-card h3 a:hover{color:var(--text-soft)}
.post-card p{
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
}
.post-more{
  margin-top:auto;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--text);
}

/* ============ 术语卡 ============ */
.term-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:12px;
}
.term-grid > *{min-width:0}
.term-card{
  border:1px solid var(--border);
  background:var(--panel);
  padding:18px 20px;
}
.term-head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.term-name{
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:700;
  letter-spacing:.04em;
}
.term-cat{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted);
  border:1px solid var(--border);
  padding:2px 8px;
  flex-shrink:0;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
}
.term-card p{
  margin-top:10px;
  font-size:13px;
  line-height:1.8;
  color:var(--text-soft);
}

/* ============ Callout 引用块 ============ */
.callout{
  border:1px solid var(--border);
  border-left:3px solid var(--metal);
  background:var(--panel);
  padding:14px 18px;
  margin-top:18px;
  margin-bottom:18px;
  font-size:14px;
  line-height:1.85;
  color:var(--text-soft);
}
.callout-t{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--text);
  margin-bottom:7px;
}
.callout--tip .callout-t .led-dot{background:var(--teal)}
.callout--warn .callout-t .led-dot{background:var(--amber)}
.callout--danger .callout-t .led-dot{background:var(--red)}

/* ============ 面包屑(博客文章页) ============ */
.crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
  margin-top:1.4rem;
}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--text)}
.crumbs .sep{color:var(--metal-dark)}

/* ============ 正文排版(教程/文章) ============ */
.prose{
  font-size:15px;
  line-height:1.9;
  color:var(--text-soft);
}
.prose > *{min-width:0}
.prose p{margin-top:0;margin-bottom:1.1em}
.prose h2{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:21px;
  letter-spacing:.03em;
  color:var(--text);
  border:1px solid var(--border);
  background:var(--panel);
  padding:11px 16px;
  margin-top:2.2em;
  margin-bottom:1em;
}
.prose h2::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--teal);
  flex-shrink:0;
}
.prose h3{
  font-size:17px;
  color:var(--text);
  margin-top:1.8em;
  margin-bottom:.6em;
}
.prose ul{margin-bottom:1.1em}
.prose ul > li{
  position:relative;
  padding-left:20px;
  margin-bottom:8px;
}
.prose ul > li::before{
  content:"–";
  position:absolute;
  left:0;
  color:var(--metal);
}
.prose ol{
  counter-reset:step;
  margin-bottom:1.1em;
}
.prose ol > li{
  counter-increment:step;
  position:relative;
  padding-left:46px;
  margin-bottom:12px;
}
.prose ol > li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:2px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--border);
  background:var(--panel2);
  padding:2px 6px;
}
.prose pre{
  background:var(--hole);
  border:1px solid var(--border);
  padding:16px 18px;
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1.7;
  margin-top:1.2em;
  margin-bottom:1.2em;
}
.prose blockquote{
  border-left:3px solid var(--metal);
  background:var(--panel);
  padding:10px 18px;
  color:var(--muted);
  margin-top:1.2em;
  margin-bottom:1.2em;
}
.prose a{
  color:var(--text);
  border-bottom:1px solid var(--metal);
}
.prose a:hover{border-bottom-color:var(--text)}

/* ============ 表格 ============ */
.table-wrap{
  border:1px solid var(--border);
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin-top:1.2em;
  margin-bottom:1.2em;
}
.data-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:13px;
}
.data-table th{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:400;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:left;
  color:var(--muted);
  background:var(--panel2);
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.data-table td{
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  color:var(--text-soft);
  vertical-align:top;
}
.data-table tr:last-child td{border-bottom:0}
/* 防御:后台写手可能输出不带 .table-wrap 的裸表格 */
.prose > .data-table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  min-width:0;
}

/* ============ 文末下载引导卡 ============ */
.guide-card{
  border:1px solid var(--edge);
  background:var(--panel);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
  padding:26px 28px;
  margin-top:36px;
  margin-bottom:36px;
}
.guide-card .guide-t{
  font-size:19px;
  letter-spacing:.02em;
  margin-bottom:10px;
}
.guide-card p{
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
}
.guide-acts{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}
@media (max-width:640px){
  .guide-card{padding:20px 16px}
}

/* ============ 右下角常驻下载浮层 ============ */
.dl-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:80;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.05em;
  background:var(--text);
  color:var(--bg);
  border:1px solid var(--text);
  box-shadow:0 3px 0 var(--key-shadow);
  padding:12px 18px;
  transition:transform .12s ease;
}
.dl-fab:hover{transform:translateY(-1px)}
.dl-fab svg{
  width:15px;
  height:15px;
  flex-shrink:0;
}
@media (max-width:640px){
  .dl-fab{
    right:12px;
    bottom:12px;
    padding:11px 14px;
    font-size:12px;
  }
}

/* ============ 色板样例(design-preview 用) ============ */
.swatch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;
}
.swatch-grid > *{min-width:0}
.swatch{
  border:1px solid var(--border);
  background:var(--panel);
}
.swatch-chip{
  height:64px;
  border-bottom:1px solid var(--border);
}
.swatch-name{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--muted);
  padding:8px 10px;
  overflow-wrap:anywhere;
}
.swatch-chip--bg{background:var(--bg)}
.swatch-chip--panel{background:var(--panel)}
.swatch-chip--panel2{background:var(--panel2)}
.swatch-chip--hole{background:var(--hole)}
.swatch-chip--border{background:var(--border)}
.swatch-chip--edge{background:var(--edge)}
.swatch-chip--metal{background:var(--metal)}
.swatch-chip--metal-dark{background:var(--metal-dark)}
.swatch-chip--text{background:var(--text)}
.swatch-chip--text-soft{background:var(--text-soft)}
.swatch-chip--muted{background:var(--muted)}
.swatch-chip--amber{background:var(--amber)}
.swatch-chip--teal{background:var(--teal)}
.swatch-chip--red{background:var(--red)}
.swatch-chip--accent-dark{background:var(--accent-dark)}