/* ============================================================
   Clash官网 · clashlatest.com
   components.css —— 跨页面组件
   首屏告示牌 / 出发信息行特性区 / tab / toc / FAQ / 术语卡 /
   下载客户端卡 / 博客卡 / callout / 表格 / 正文排版 / dl-fab / 预览辅助
   ============================================================ */

/* ============================================================
   1. Hero 首屏(左文案 + 右侧翻页式航班告示牌)
   ============================================================ */
.hero{
  min-height:calc(100vh - var(--head-h) - 48px);
  display:flex;align-items:center;
}
.hero-inner{
  max-width:var(--wrap);width:100%;margin:0 auto;
  padding-top:32px;padding-bottom:32px;
  padding-inline:var(--gutter);
  display:grid;grid-template-columns:440px minmax(0,1fr);gap:56px;align-items:center;
}
.hero-inner > *{min-width:0;}

.hero-kicker{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;color:var(--c-accent);
  display:flex;align-items:center;gap:8px;margin-bottom:20px;
}
.hero-kicker::before{
  content:"";width:14px;height:3px;flex-shrink:0;
  background:var(--c-accent);border-radius:var(--radius-pill);
}
.hero-kicker span{color:var(--c-muted);}

.hero h1{
  font-family:var(--font-display);
  font-size:clamp(30px,4.6vw,44px);
  line-height:1.22;font-weight:700;
  letter-spacing:.01em;margin-bottom:18px;
}
.hero h1 .hl{color:var(--c-accent);}

.hero-desc{
  font-size:15px;line-height:1.85;color:var(--c-muted);margin-bottom:28px;
}
.hero-desc strong{color:var(--c-text);font-weight:600;}
.hero-desc b{color:var(--c-accent);font-weight:600;}

.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:26px;}

.hero-chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:12px;color:var(--c-muted);
  border:1px solid var(--c-border);border-radius:var(--radius-pill);
  padding:6px 13px;line-height:1;background:var(--c-panel);
  max-width:100%;overflow:hidden;
}
.chip-dot{width:6px;height:6px;border-radius:50%;background:var(--c-success);flex-shrink:0;}

/* ---------- 翻页式航班告示牌 ---------- */
.board{
  background:var(--c-bg);
  border:1px solid var(--c-border);
  border-radius:var(--radius-panel);
  box-shadow:var(--shadow-board);
  padding:20px;
}
.board-strip{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  color:var(--c-muted);
  padding-top:2px;padding-bottom:14px;padding-inline:4px;
}
.strip-l{display:flex;align-items:center;gap:9px;color:var(--c-text);}
.strip-dot{width:8px;height:8px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 2px var(--ink-45);flex-shrink:0;}

/* 字牌基元:小圆角 + 中缝横线 + 极轻内阴影(牌面厚度) */
.tile{
  position:relative;
  background:var(--c-panel);
  border-radius:var(--radius-tile);
  box-shadow:var(--shadow-tile);
}
.tile::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--ink-45);box-shadow:0 1px 0 var(--paper-03);z-index:2;
  pointer-events:none;
}

/* 顶行巨型字牌 CLASH */
.board-letters{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:18px;
}
.board-letters > *{min-width:0;}
.tile--letter{
  height:112px;display:flex;align-items:center;justify-content:center;
  background:var(--c-panel2);perspective:520px;
}
.tile--letter span{
  font-family:var(--font-display);font-size:70px;font-weight:700;line-height:1;
  color:var(--c-text);
}

/* 翻页微动画:上下对翻,错峰触发 */
.flap{display:inline-block;transform-origin:50% 50%;backface-visibility:hidden;}
.flap--l1{animation:flap-turn 5.4s ease-in-out infinite;animation-delay:1.2s;}
.flap--l2{animation:flap-turn 6.6s ease-in-out infinite;animation-delay:3.4s;}
.flap--f1{animation:flap-turn 7.2s ease-in-out infinite;animation-delay:4.8s;}
@keyframes flap-turn{
  0%,86%{transform:rotateX(0);}
  90%{transform:rotateX(-86deg);}
  94%{transform:rotateX(0);}
  100%{transform:rotateX(0);}
}
@media (prefers-reduced-motion:reduce){
  .flap{animation:none !important;}
}

/* 列头与航班行共用网格 */
.board-cols{
  display:grid;grid-template-columns:146px minmax(0,1fr) 172px 116px;gap:8px;
}
.board-cols > *{min-width:0;}
.board-colhead{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  color:var(--c-muted);
  padding-top:0;padding-bottom:10px;padding-inline:4px;
}
.board-colhead span{display:block;}

.board-rows{display:flex;flex-direction:column;gap:9px;}
.board-row{border-radius:4px;}
.board-row--on{outline:1px solid var(--c-accent);outline-offset:4px;}

.tile--dest{
  height:58px;display:flex;align-items:center;
  padding-inline:16px;
  font-family:var(--font-display);font-size:15px;font-weight:700;
  letter-spacing:.14em;color:var(--c-text);
  overflow:hidden;
}
.tile--flight{
  height:58px;display:flex;align-items:center;
  padding-inline:18px;perspective:420px;overflow:hidden;
}
.tile--flight span{
  font-family:var(--font-mono);font-size:14px;letter-spacing:.22em;color:var(--c-muted);white-space:nowrap;
}
.board-row--on .tile--flight span{color:var(--c-text);}
.tile--gate{
  height:58px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-inline:15px;
  transition:background .15s ease;overflow:hidden;
}
.tile--gate:hover{background:var(--c-panel2);}
.gate-code{
  font-family:var(--font-display);font-size:19px;font-weight:700;
  letter-spacing:.08em;color:var(--c-text);flex-shrink:0;
}
.gate-act{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--c-muted);white-space:nowrap;
}
.tile--gate:hover .gate-act{color:var(--c-accent);}
.board-row--on .gate-code{color:var(--c-accent);}
.board-row--on .gate-act{color:var(--c-accent);}
.tile--lamp{
  height:58px;display:flex;align-items:center;gap:9px;
  padding-inline:14px;overflow:hidden;
}
.lamp-dot{
  width:8px;height:8px;border-radius:50%;background:var(--c-accent);
  box-shadow:0 0 0 2px var(--ink-45);flex-shrink:0;
}
.lamp-txt{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;color:var(--c-accent);white-space:nowrap;
}

.board-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  color:var(--c-muted);
  padding-top:15px;padding-bottom:2px;padding-inline:4px;
}
.board-foot .foot-key{color:var(--c-accent);}

/* ---------- 下一区块边缘(peek,首屏底部暗示可滚动) ---------- */
.peek{
  border-top:1px solid var(--c-border);
  background:var(--c-panel);
  padding-top:22px;padding-bottom:64px;
}
.peek-inner{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);}
.peek-kicker{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;color:var(--c-muted);
  display:flex;align-items:center;gap:10px;
}
.peek-kicker::before{
  content:"";width:14px;height:3px;flex-shrink:0;
  background:var(--c-accent);border-radius:var(--radius-pill);
}
.peek h2{
  font-family:var(--font-display);font-size:22px;font-weight:700;
  letter-spacing:.02em;margin-top:12px;
}

/* Hero 响应式 */
@media (max-width:1240px){
  .hero-inner{grid-template-columns:400px minmax(0,1fr);gap:40px;}
  .tile--letter{height:96px;}
  .tile--letter span{font-size:56px;}
}
@media (max-width:1080px){
  .hero{min-height:0;}
  .hero-inner{
    grid-template-columns:minmax(0,1fr);gap:44px;
    padding-top:56px;padding-bottom:64px;
  }
  .board{max-width:760px;}
}
@media (max-width:760px){
  .board{padding:14px;}
  .board-letters{gap:6px;margin-bottom:14px;}
  .tile--letter{height:64px;}
  .tile--letter span{font-size:36px;}
  .board-cols{grid-template-columns:96px minmax(0,1fr) 118px 86px;gap:6px;}
  .tile--dest{height:50px;font-size:12px;letter-spacing:.08em;padding-inline:10px;}
  .tile--flight{height:50px;padding-inline:10px;}
  .tile--flight span{font-size:11px;letter-spacing:.12em;}
  .tile--gate{height:50px;padding-inline:10px;}
  .gate-code{font-size:15px;}
  .gate-act{font-size:10px;letter-spacing:.06em;}
  .tile--lamp{height:50px;padding-inline:9px;gap:6px;}
  .lamp-txt{font-size:9px;letter-spacing:.14em;}
  .board-colhead{font-size:9px;letter-spacing:.12em;}
  .board-strip{font-size:10px;letter-spacing:.08em;}
  .strip-r{display:none;}
  .board-foot{flex-direction:column;align-items:flex-start;gap:6px;font-size:10px;}
}
@media (max-width:560px){
  .ch-flight{display:none;}
  .tile--flight{display:none;}
  .board-cols{grid-template-columns:92px minmax(0,1fr) 82px;}
}

/* ============================================================
   2. 出发信息行特性区(featuresLayout:逐行航班条,展开详情)
   用法:.fboard > .frow(button.frow-head + div.frow-panel)
   页面脚本负责:同一时刻只展开一行,切换 .frow--open 与 aria-expanded
   ============================================================ */
.fboard{border-top:1px solid var(--c-border);}
.frow{border-bottom:1px solid var(--c-border);}
.frow-head{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto 20px;
  gap:16px;align-items:center;
  width:100%;
  padding-top:18px;padding-bottom:18px;padding-inline:6px;
  text-align:left;
  transition:background .15s ease;
}
.frow-head > *{min-width:0;}
.frow-head:hover{background:var(--c-panel);}
.frow-gate{
  width:56px;height:44px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.06em;
  color:var(--c-text);
}
.frow-name{
  font-family:var(--font-display);
  font-size:clamp(17px,2.2vw,22px);
  font-weight:700;letter-spacing:.06em;
  color:var(--c-text);
}
.frow--open .frow-name{color:var(--c-accent);}
.frow-note{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  color:var(--c-muted);text-align:right;white-space:nowrap;overflow:hidden;max-width:100%;
}
.frow-lamp{
  width:8px;height:8px;border-radius:50%;
  background:var(--c-border);flex-shrink:0;justify-self:center;
  transition:background .15s ease;
}
.frow--open .frow-lamp{background:var(--c-accent);box-shadow:0 0 0 2px var(--ink-45);}
.frow-panel{
  display:none;
  padding-top:0;padding-bottom:22px;padding-left:86px;padding-right:6px;
  color:var(--c-muted);font-size:14px;line-height:1.9;
  max-width:760px;
}
.frow--open .frow-panel{display:block;}

@media (max-width:640px){
  .frow-head{grid-template-columns:48px minmax(0,1fr) 14px;gap:12px;}
  .frow-note{display:none;}
  .frow-gate{width:44px;height:38px;font-size:13px;}
  .frow-panel{padding-left:6px;}
}

/* ============================================================
   3. Tab 切换(tabs.js 驱动;role=tablist / role=tab / data-hash)
   ============================================================ */
.tabbar{display:flex;flex-wrap:wrap;gap:8px;}
.tab{
  position:relative;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;
  color:var(--c-muted);
  background:var(--c-panel);
  border-radius:var(--radius-tile);
  box-shadow:var(--shadow-tile);
  padding:12px 18px;line-height:1;
  transition:color .15s ease,background .15s ease;
}
.tab:hover{color:var(--c-text);}
.tab[aria-selected="true"]{
  color:var(--c-accent);
  background:var(--c-panel2);
  outline:1px solid var(--c-accent);
  outline-offset:2px;
}
.tab-panel{display:none;}
.tab-panel.on{display:block;}
.tab-panels{margin-top:28px;}

/* ============================================================
   4. 长页分类跳转导航(toc,纯锚点)
   ============================================================ */
.toc-tabs{
  display:flex;gap:8px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}
.toc-tabs a{
  flex-shrink:0;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  color:var(--c-muted);
  border:1px solid var(--c-border);border-radius:var(--radius-pill);
  padding:9px 16px;line-height:1;
  background:var(--c-panel);
  transition:color .15s ease,border-color .15s ease;
}
.toc-tabs a:hover{color:var(--c-text);border-color:var(--c-muted);}

/* ============================================================
   5. FAQ 折叠项(details/summary)
   ============================================================ */
.faq-item{
  background:var(--c-panel);
  border:1px solid var(--c-border);
  border-radius:var(--radius-tile);
  box-shadow:var(--shadow-tile);
}
.faq-item + .faq-item{margin-top:10px;}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;
  font-size:15px;font-weight:600;color:var(--c-text);line-height:1.6;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{
  content:"";width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--c-border);
  transition:background .15s ease;
}
.faq-item[open] summary::before{
  background:var(--c-accent);
  box-shadow:0 0 0 2px var(--ink-45);
}
.faq-body{
  padding-top:0;padding-bottom:18px;padding-left:38px;padding-right:18px;
  color:var(--c-muted);font-size:14px;line-height:1.9;
}
.faq-body p + p{margin-top:10px;}

/* ============================================================
   6. 术语卡
   ============================================================ */
.term-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:12px;
}
.term-grid > *{min-width:0;}
.term-card{
  background:var(--c-panel);
  border:1px solid var(--c-border);
  border-radius:var(--radius-tile);
  box-shadow:var(--shadow-tile);
  padding:18px;
}
.term-name{
  font-family:var(--font-display);font-size:15px;font-weight:700;
  letter-spacing:.03em;color:var(--c-text);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.term-tag{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  color:var(--c-muted);
  border:1px solid var(--c-border);border-radius:var(--radius-pill);
  padding:4px 9px;line-height:1;
  max-width:100%;overflow:hidden;
}
.term-desc{margin-top:10px;font-size:13px;line-height:1.85;color:var(--c-muted);}

/* ============================================================
   7. 下载客户端卡片(登机牌式)
   ============================================================ */
.dl-card{
  background:var(--c-panel);
  border:1px solid var(--c-border);
  border-radius:var(--radius-panel);
  box-shadow:var(--shadow-tile);
  padding:22px;
}
.dl-card + .dl-card{margin-top:14px;}
.dl-card--first{border-color:var(--c-accent);}
.dl-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.dl-logo{width:52px;height:52px;flex-shrink:0;display:block;}
.dl-name{
  font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:.03em;
}
.dl-ver{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--c-muted);
}
.dl-ver:empty{display:none;}
.dl-desc{margin-top:12px;font-size:14px;line-height:1.85;color:var(--c-muted);}
.dl-acts{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px;}

/* 徽章:首推 / 推荐 / 已停止维护 */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  border-radius:var(--radius-pill);
  padding:5px 11px;line-height:1;
  white-space:nowrap;max-width:100%;overflow:hidden;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.badge--first{color:var(--c-bg);background:var(--c-accent);font-weight:700;}
.badge--first::before{background:var(--c-bg);}
.badge--reco{color:var(--c-success);border:1px solid var(--c-success);}
.badge--reco::before{background:var(--c-success);}
.badge--eol{color:var(--c-muted);border:1px solid var(--c-border);}
.badge--eol::before{background:var(--c-error);}

/* 系统要求小表 / 通用数据表 */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.data-table{width:100%;min-width:480px;font-size:13px;line-height:1.7;}
.data-table th{
  text-align:left;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  color:var(--c-muted);font-weight:400;
  border-bottom:1px solid var(--c-border);
  padding:10px 14px;
}
.data-table td{
  border-bottom:1px solid var(--c-border);
  padding:12px 14px;color:var(--c-text);
}
.data-table td:first-child{color:var(--c-muted);}
/* 防御:写手可能输出不带 .table-wrap 的裸表格 */
.prose > .data-table{
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
  max-width:100%;min-width:0;
}

/* ============================================================
   8. 博客文章卡
   ============================================================ */
.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px;
}
.post-grid > *{min-width:0;}
.post-card{
  display:flex;flex-direction:column;gap:12px;
  background:var(--c-panel);
  border:1px solid var(--c-border);
  border-radius:var(--radius-panel);
  box-shadow:var(--shadow-tile);
  padding:20px;
  transition:border-color .15s ease;
}
.post-card:hover{border-color:var(--c-accent);}
.post-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--c-muted);
}
.post-tag{
  color:var(--c-accent);
  border:1px solid var(--c-accent);border-radius:var(--radius-pill);
  padding:4px 10px;line-height:1;
  max-width:100%;overflow:hidden;
}
.post-title{
  font-size:16px;font-weight:700;line-height:1.55;color:var(--c-text);
}
.post-card:hover .post-title{color:var(--c-accent);}
.post-sum{font-size:13px;line-height:1.85;color:var(--c-muted);}
.post-more{
  margin-top:auto;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--c-muted);
}
.post-card:hover .post-more{color:var(--c-accent);}

/* 博客标签筛选条 */
.tag-bar{display:flex;flex-wrap:wrap;gap:8px;}
.tag-btn{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  color:var(--c-muted);
  border:1px solid var(--c-border);border-radius:var(--radius-pill);
  padding:9px 16px;line-height:1;
  max-width:100%;overflow:hidden;white-space:nowrap;
  transition:color .15s ease,border-color .15s ease;
}
.tag-btn:hover{color:var(--c-text);border-color:var(--c-muted);}
.tag-btn.on{color:var(--c-accent);border-color:var(--c-accent);}

/* 面包屑(博客文章页) */
.crumbs{
  margin-top:20px;
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;
  color:var(--c-muted);
}
.crumbs a:hover{color:var(--c-text);}
.crumbs .sep{color:var(--c-border);}
.crumbs .cur{color:var(--c-text);overflow-wrap:anywhere;}

/* ============================================================
   9. 正文排版(.prose)与 callout
   ============================================================ */
.prose{max-width:820px;font-size:15px;line-height:1.95;color:var(--c-text);}
.prose h2{
  font-family:var(--font-display);
  font-size:clamp(19px,2.4vw,24px);
  letter-spacing:.02em;
  margin-top:2.4em;margin-bottom:.8em;
  padding-bottom:.5em;
  border-bottom:1px solid var(--c-border);
}
.prose h3{font-size:17px;margin-top:1.8em;margin-bottom:.7em;}
.prose p{margin-bottom:1.1em;color:var(--paper-82);}
.prose ul,.prose ol{margin-bottom:1.1em;color:var(--paper-82);}
.prose li{margin-bottom:.45em;}
.prose li::marker{color:var(--c-accent);}
.prose a{color:var(--c-accent);border-bottom:1px solid var(--c-accent-dark);}
.prose a:hover{color:var(--c-text);border-bottom-color:var(--c-text);}
.prose strong{color:var(--c-text);}
.prose code{
  font-size:.88em;color:var(--c-accent);
  background:var(--c-panel);
  border:1px solid var(--c-border);border-radius:4px;
  padding:2px 6px;
  overflow-wrap:break-word;
}
.prose pre{
  background:var(--c-panel);
  border:1px solid var(--c-border);border-radius:var(--radius-tile);
  box-shadow:var(--shadow-tile);
  padding:16px 18px;
  margin-bottom:1.3em;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  font-size:13px;line-height:1.75;
}
.prose pre code{background:none;border:0;padding:0;color:var(--c-text);}
.prose blockquote{
  border-left:3px solid var(--c-accent);
  background:var(--c-panel);
  border-radius:0 var(--radius-tile) var(--radius-tile) 0;
  padding:14px 18px;
  margin-bottom:1.3em;
  color:var(--c-muted);
}
.prose img{border-radius:var(--radius-tile);}

/* callout:琥珀提示 / 绿色可行 / 红色警示 */
.callout{
  display:block;
  border-left:3px solid var(--c-accent);
  background:var(--c-panel);
  border-radius:0 var(--radius-tile) var(--radius-tile) 0;
  padding:14px 18px;
  margin:1.3em 0;
  font-size:14px;line-height:1.85;color:var(--c-muted);
}
.callout strong{color:var(--c-text);}
.callout--ok{border-left-color:var(--c-success);}
.callout--warn{border-left-color:var(--c-warn);}
.callout--err{border-left-color:var(--c-error);}

/* 步骤列表(教程页,自定义计数圆标) */
.steps{list-style:none;counter-reset:step;padding-left:0;}
.steps > li{
  counter-increment:step;
  position:relative;
  padding-left:52px;
  margin-bottom:2em;
  min-width:0;
}
.steps > li::before{
  content:counter(step);
  position:absolute;left:0;top:0;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:15px;font-weight:700;
  color:var(--c-accent);
  background:var(--c-panel2);
  border-radius:var(--radius-tile);
  box-shadow:var(--shadow-tile);
}
.steps > li > h3{margin-top:0;padding-top:6px;}

/* 命令展示框(信任背书区等) */
.cmd-box{
  display:flex;align-items:center;gap:12px;
  background:var(--c-panel);
  border:1px solid var(--c-border);border-radius:var(--radius-tile);
  box-shadow:var(--shadow-tile);
  padding:14px 16px;
}
.cmd-box code{
  flex:1;min-width:0;
  font-size:13px;color:var(--c-text);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  white-space:nowrap;display:block;
}
.cmd-copy{
  flex-shrink:0;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  color:var(--c-muted);
  border:1px solid var(--c-border);border-radius:var(--radius-tile);
  padding:8px 13px;line-height:1;
  transition:color .15s ease,border-color .15s ease;
}
.cmd-copy:hover{color:var(--c-accent);border-color:var(--c-accent);}

/* ============================================================
   10. 文末下载引导卡(博客文章页)
   ============================================================ */
.dl-cta{
  margin-top:56px;
  background:var(--c-panel);
  border:1px solid var(--c-accent);
  border-radius:var(--radius-panel);
  box-shadow:var(--shadow-board);
  padding:28px;
}
.dl-cta h2{
  font-family:var(--font-display);font-size:20px;letter-spacing:.02em;
  margin-bottom:10px;
}
.dl-cta p{font-size:14px;line-height:1.85;color:var(--c-muted);margin-bottom:18px;}
.dl-cta-acts{display:flex;flex-wrap:wrap;gap:12px;}

/* 延伸阅读 / 上一篇下一篇 */
.post-nav{
  margin-top:32px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}
.post-nav a{
  display:block;
  background:var(--c-panel);
  border:1px solid var(--c-border);border-radius:var(--radius-tile);
  padding:16px 18px;
  font-size:13px;line-height:1.6;color:var(--c-muted);
  transition:border-color .15s ease,color .15s ease;
}
.post-nav a:hover{border-color:var(--c-accent);color:var(--c-text);}
.post-nav .dir{
  display:block;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  color:var(--c-muted);margin-bottom:8px;
}
@media (max-width:560px){
  .post-nav{grid-template-columns:minmax(0,1fr);}
}

/* ============================================================
   11. 右下角常驻下载浮层 .dl-fab
   本站抽签 dlFab=null:除博客文章页外一律不放;组件照常交付。
   ============================================================ */
.dl-fab{
  position:fixed;right:20px;bottom:20px;z-index:80;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--c-accent);color:var(--c-bg);
  font-size:14px;font-weight:700;letter-spacing:.02em;
  padding:13px 20px;
  border-radius:var(--radius-btn);
  box-shadow:var(--shadow-btn);
  transition:transform .15s ease,background .15s ease;
}
.dl-fab:hover{background:var(--c-accent-dark);transform:translateY(-1px);}
.dl-fab svg{width:15px;height:15px;display:block;flex-shrink:0;}
.dl-fab .ico{fill:none;stroke:var(--c-bg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
@media (max-width:640px){
  .dl-fab{right:14px;bottom:14px;padding:12px 17px;font-size:13px;}
}

/* ============================================================
   12. 平台快速入口网格(首页下载入口区)
   ============================================================ */
.os-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:12px;
}
.os-grid > *{min-width:0;}
.os-cell{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--c-panel);
  border-radius:var(--radius-tile);
  box-shadow:var(--shadow-tile);
  padding:18px;
  position:relative;overflow:hidden;
  transition:background .15s ease;
}
.os-cell::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:var(--ink-45);box-shadow:0 1px 0 var(--paper-03);
  pointer-events:none;
}
.os-cell:hover{background:var(--c-panel2);}
.os-name{
  font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.1em;
  position:relative;z-index:3;
}
.os-go{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--c-muted);
  position:relative;z-index:3;white-space:nowrap;
}
.os-cell:hover .os-go{color:var(--c-accent);}

/* ============================================================
   13. design-preview 专用轻量辅助(正式页面不依赖)
   ============================================================ */
.swatch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:12px;
}
.swatch-grid > *{min-width:0;}
.swatch{
  border:1px solid var(--c-border);
  border-radius:var(--radius-tile);
  overflow:hidden;
  background:var(--c-panel);
}
.swatch-chip{height:64px;}
.swatch-info{
  padding:10px 12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  color:var(--c-muted);line-height:1.7;
}
.swatch-info b{display:block;color:var(--c-text);font-weight:400;}
.sw-bg{background:var(--c-bg);}
.sw-panel{background:var(--c-panel);}
.sw-panel2{background:var(--c-panel2);}
.sw-border{background:var(--c-border);}
.sw-accent{background:var(--c-accent);}
.sw-accent-dark{background:var(--c-accent-dark);}
.sw-text{background:var(--c-text);}
.sw-muted{background:var(--c-muted);}
.sw-success{background:var(--c-success);}
.sw-error{background:var(--c-error);}