/* ==========================================================================
   Clash知识库 · 跨页面组件(components.css)
   依赖 base.css 的设计令牌;全部直角、1px 细线、无发光无投影。
   ========================================================================== */

/* ==========================================================================
   首屏装置:深夜药铺正墙(百子柜 + 悬方笺)——用户拍板稿,视觉严禁改动
   ========================================================================== */
.hero{
  position:relative;
  height:calc(100vh - 104px);
  min-height:740px;
  overflow:hidden;
  background:
    radial-gradient(860px 580px at 27% 40%, var(--wash-warm), var(--clear) 62%),
    radial-gradient(620px 460px at 82% 26%, var(--wash-red), var(--clear) 60%),
    linear-gradient(180deg, var(--sheen-soft), var(--clear) 32%),
    var(--bg);
}
.floor{
  position:absolute;
  left:0;right:0;bottom:0;
  height:118px;
  border-top:1px solid var(--border-soft);
  background:
    repeating-linear-gradient(90deg, var(--seam) 0 1px, transparent 1px 150px),
    linear-gradient(180deg, var(--floor-a), var(--floor-b));
  z-index:1;
}
.hero-grid{
  position:relative;
  z-index:2;
  height:100%;
  max-width:1440px;
  margin:0 auto;
  padding:0 52px;
  display:grid;
  grid-template-columns:minmax(0,58fr) minmax(0,42fr);
}
.stage{position:relative;min-width:0;}

/* ---- 百子柜(家具,不是背景) ---- */
.cabinet{
  position:absolute;
  left:6px;right:34px;top:26px;bottom:118px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--border-strong);
  background:linear-gradient(180deg, var(--beam-a), var(--beam-b));
}
.cab-beam{
  position:relative;
  height:48px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid var(--frame-line);
  background:
    linear-gradient(180deg, var(--sheen), var(--shade)),
    repeating-linear-gradient(90deg, var(--grain) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, var(--beam-a), var(--beam-b));
}
.cab-beam::before,.cab-beam::after{
  content:"";
  position:absolute;
  top:50%;
  width:8px;height:8px;
  margin-top:-4px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--copper-hi), var(--copper) 55%, var(--copper-lo) 92%);
  border:1px solid var(--cavity-lo);
}
.cab-beam::before{left:16px;}
.cab-beam::after{right:16px;}
.cab-plaque{
  font-family:var(--font-display);
  font-size:13px;
  letter-spacing:.5em;
  color:var(--warn);
  background:var(--plaque-bg);
  border:1px solid var(--border);
  padding:7px 18px 7px 26px;
}
.cab-grid{
  flex:1;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-template-rows:repeat(5,1fr);
  gap:6px;
  padding:10px;
  background:linear-gradient(180deg, var(--cavity-hi), var(--cavity));
  border-bottom:1px solid var(--frame-line);
}
.drawer{
  position:relative;
  min-width:0;
  border:1px solid var(--wood-c);
  outline:1px solid var(--hairline);
  outline-offset:-5px;
  background:
    linear-gradient(180deg, var(--sheen), var(--shade)),
    repeating-linear-gradient(0deg, var(--grain) 0 1px, transparent 1px 7px),
    linear-gradient(150deg, var(--wood-a), var(--wood-b) 55%, var(--wood-c));
}
.drawer:nth-child(even){
  background:
    linear-gradient(180deg, var(--sheen-soft), var(--shade)),
    repeating-linear-gradient(0deg, var(--grain) 0 1px, transparent 1px 6px),
    linear-gradient(35deg, var(--wood-alt-a), var(--wood-alt-b) 55%, var(--wood-c));
}
.drawer:nth-child(3n){
  background:
    linear-gradient(180deg, var(--sheen), var(--shade)),
    repeating-linear-gradient(0deg, var(--grain) 0 1px, transparent 1px 8px),
    linear-gradient(160deg, var(--wood-x), var(--wood-b) 58%, var(--wood-c));
}
.pull{
  position:absolute;
  left:50%;bottom:9px;
  width:14px;height:14px;
  margin-left:-7px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, var(--copper-hi), var(--copper) 55%, var(--copper-lo) 92%);
  border:1px solid var(--cavity-lo);
}
.pull::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:var(--cavity);
  opacity:.65;
}
.dtag{
  position:absolute;
  top:7px;left:50%;
  transform:translateX(-50%);
  writing-mode:vertical-rl;
  font-family:var(--font-display);
  font-size:11.5px;
  letter-spacing:.1em;
  line-height:1;
  white-space:nowrap;
  color:var(--ink);
  background:linear-gradient(180deg, var(--tag-hi), var(--tag-lo)), var(--paper);
  border:1px solid var(--paper-edge);
  padding:8px 3px 10px;
}
.dtag::before{
  content:"";
  position:absolute;
  top:2px;left:50%;
  margin-left:-1.5px;
  width:3px;height:3px;
  border-radius:50%;
  background:var(--copper);
}
/* 正中滑出半截的那一格 */
.drawer.is-open{
  outline:none;
  border-color:var(--cavity-lo);
  background:linear-gradient(180deg, var(--cavity-lo), var(--cavity) 55%, var(--cavity-hi));
}
.drawer.is-open::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:22px;
  background:linear-gradient(180deg, var(--cave-top), var(--cave-clear));
}
.drawer.is-open::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, var(--cave-side), var(--cave-clear) 20% 80%, var(--cave-side));
}
.slip{
  position:absolute;
  width:34px;height:26px;
  border:1px solid var(--paper-edge);
  z-index:5;
  background:repeating-linear-gradient(180deg, transparent 0 6px, var(--slip-line) 6px 7px), var(--paper);
}
.slip-a{left:20%;top:33%;transform:rotate(-6deg);}
.slip-b{
  right:18%;top:38%;
  transform:rotate(5deg);
  background:repeating-linear-gradient(180deg, transparent 0 6px, var(--slip-line) 6px 7px), var(--paper-back);
}
.face{
  position:absolute;
  left:-1px;right:-1px;
  top:50%;
  height:96%;
  z-index:6;
  border:1px solid var(--border-strong);
  background:
    linear-gradient(180deg, var(--sheen), var(--shade)),
    repeating-linear-gradient(0deg, var(--grain) 0 1px, transparent 1px 7px),
    linear-gradient(150deg, var(--wood-x), var(--wood-b) 60%, var(--wood-c));
}
.face::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:7px;
  background:linear-gradient(180deg, var(--lip-a), var(--lip-b));
  border-bottom:1px solid var(--cavity-lo);
}
.cab-plinth{
  position:relative;
  height:16px;
  flex-shrink:0;
  margin:0 -6px 8px;
  border:1px solid var(--border-soft);
  border-bottom-color:var(--frame-line);
  background:linear-gradient(180deg, var(--beam-a), var(--beam-b));
}
.cab-plinth::before,.cab-plinth::after{
  content:"";
  position:absolute;
  top:100%;
  width:36px;height:8px;
  background:var(--cavity);
  border:1px solid var(--border-soft);
  border-top:none;
}
.cab-plinth::before{left:22px;}
.cab-plinth::after{right:22px;}

/* ---- 悬于柜上的药方笺 ---- */
.rx{
  position:absolute;
  top:30px;
  right:-24px;
  width:272px;
  transform:rotate(-2deg);
  z-index:9;
}
.rx-back{
  position:absolute;
  inset:0;
  transform:translate(6px,7px);
  background:var(--paper-back);
  border:1px solid var(--paper-edge);
}
.rx-note{
  position:relative;
  background:var(--paper);
  border:1px solid var(--paper-edge);
  padding:16px 20px 20px;
  color:var(--ink);
}
.rx-note::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--noise);
  background-size:140px 140px;
  opacity:.06;
  pointer-events:none;
}
.rx-note>*{position:relative;}
.rx-pin{
  position:absolute;
  top:-7px;left:50%;
  margin-left:-7px;
  width:14px;height:14px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, var(--copper-hi), var(--copper) 55%, var(--copper-lo) 92%);
  border:1px solid var(--cavity-lo);
  z-index:3;
}
.rx-head{display:flex;justify-content:space-between;align-items:baseline;}
.rx-head b{
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  letter-spacing:.3em;
  color:var(--ink);
}
.rx-head span{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.12em;
  color:var(--ink-faint);
}
.rx-rule{
  height:5px;
  margin:10px 0;
  border-top:1px solid var(--accent);
  border-bottom:1px solid var(--accent);
  opacity:.85;
}
.rx-list li a{
  display:flex;
  align-items:baseline;
  gap:9px;
  padding:4px 0;
  font-size:13.5px;
  line-height:1.5;
  letter-spacing:.02em;
  color:var(--ink);
  transition:color .15s ease;
}
.rx-list li a::before{
  content:"";
  flex-shrink:0;
  width:6px;height:6px;
  background:var(--accent);
  transform:translateY(-1px);
}
.rx-list li a:hover{color:var(--accent-dark);text-decoration:underline;text-underline-offset:4px;}
.rx-tear{border-top:1px dashed var(--tear);margin:10px 0 8px;}
.rx-foot{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.08em;
  color:var(--ink-faint);
}
.rx-seal{
  position:absolute;
  right:14px;bottom:-14px;
  width:46px;height:46px;
  background:var(--accent);
  border:1px solid var(--accent-dark);
  outline:1px solid var(--seal-ring);
  outline-offset:-4px;
  color:var(--paper);
  font-family:var(--font-display);
  font-size:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:rotate(3deg);
  opacity:.94;
  z-index:2;
}

/* ---- 右侧文案 ---- */
.hero-copy{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 8px 92px 34px;
}
.hero-copy h1{
  margin-top:20px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:60px;
  line-height:1.16;
  letter-spacing:.05em;
  color:var(--text);
}
.hero-copy h1 em{font-style:normal;color:var(--accent);}
.hero-copy h1 small{
  display:block;
  margin-top:12px;
  font-size:21px;
  font-weight:400;
  letter-spacing:.3em;
  color:var(--text-muted);
}
.desc{
  margin-top:18px;
  max-width:46ch;
  font-size:14.5px;
  line-height:1.95;
  color:var(--text-muted);
}
.desc strong{color:var(--warn);font-weight:600;}

/* ---- 底部下一区块边缘 ---- */
.peek{
  height:40px;
  border-top:1px solid var(--border);
  background:var(--bg-panel);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 52px;
  position:relative;
  z-index:3;
}
.peek b{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:13px;
  letter-spacing:.2em;
  color:var(--text);
}
.peek b::before{content:"";width:7px;height:7px;background:var(--accent);flex-shrink:0;}
.peek span{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--text-muted);
}

/* ---- 首屏窄屏兜底 ---- */
@media (max-width:1180px){
  .hero-grid{padding:0 32px;grid-template-columns:minmax(0,55fr) minmax(0,45fr);}
  .hero-copy h1{font-size:50px;}
  .peek{padding:0 32px;}
}
@media (max-width:980px){
  .hero{height:auto;min-height:0;}
  .hero-grid{grid-template-columns:1fr;padding:0 24px;}
  .floor{display:none;}
  .stage{height:540px;}
  .cabinet{bottom:20px;}
  .hero-copy{padding:40px 4px 64px;}
  .peek span:nth-child(2){display:none;}
}
@media (max-width:640px){
  .hero-grid{padding:0 16px;}
  .stage{height:480px;}
  .cabinet{left:0;right:0;}
  .rx{right:-6px;width:min(272px, 80vw);}
  .hero-copy h1{font-size:38px;}
  .hero-copy h1 small{font-size:16px;letter-spacing:.2em;}
  .peek{padding:0 16px;}
}

/* ==========================================================================
   抓药柜台:竖签 tab + 笺纸详情面板(特性区 / 下载页平台切换通用)
   ========================================================================== */
.apothecary{
  display:grid;
  grid-template-columns:216px minmax(0,1fr);
  border:1px solid var(--border-strong);
  background:linear-gradient(180deg, var(--beam-a), var(--beam-b));
}
.tab-rail{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px 12px;
  border-right:1px solid var(--frame-line);
  background:
    linear-gradient(180deg, var(--sheen-soft), var(--shade)),
    repeating-linear-gradient(90deg, var(--grain) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, var(--beam-a), var(--beam-b));
}
.tab-slip{
  position:relative;
  align-self:center;
  writing-mode:vertical-rl;
  font-family:var(--font-display);
  font-size:14px;
  letter-spacing:.18em;
  line-height:1;
  color:var(--ink);
  background:linear-gradient(180deg, var(--tag-hi), var(--tag-lo)), var(--paper);
  border:1px solid var(--paper-edge);
  padding:16px 9px 28px;
  cursor:pointer;
  transition:border-color .15s ease;
}
.tab-slip::after{                     /* 签尾铜点拉手 */
  content:"";
  position:absolute;
  bottom:9px;left:50%;
  margin-left:-5px;
  width:10px;height:10px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, var(--copper-hi), var(--copper) 55%, var(--copper-lo) 92%);
  border:1px solid var(--cavity-lo);
}
.tab-slip:hover{border-color:var(--copper);}
.tab-slip.is-active{                  /* 当前签以赭红描边标出 */
  border-color:var(--accent);
  outline:1px solid var(--accent);
  outline-offset:1px;
}
.tab-sheets{
  position:relative;
  min-width:0;
  background:var(--paper);
  color:var(--ink);
}
.tab-sheets::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--noise);
  background-size:140px 140px;
  opacity:.06;
  pointer-events:none;
}
.tab-sheet{display:none;position:relative;padding:30px 34px;}
.tab-sheet.is-active{display:block;animation:sheet-in .28s ease;}   /* 仅平移换笺,无循环动效 */
@keyframes sheet-in{from{transform:translateX(14px);opacity:.4;}to{transform:none;opacity:1;}}
.tab-sheet h3{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:22px;
  letter-spacing:.06em;
  color:var(--ink);
}
.tab-sheet h3::before{content:"";width:7px;height:7px;background:var(--accent);flex-shrink:0;}
.tab-sheet p{margin-top:12px;font-size:14px;line-height:1.95;color:var(--ink-soft);max-width:64ch;}
.tab-sheet code{
  font-family:var(--font-mono);
  font-size:.88em;
  background:var(--tag-lo);
  border:1px solid var(--paper-edge);
  padding:2px 7px;
  color:var(--accent-dark);
  word-break:break-all;
}
.sheet-dose{                          /* 「剂量」式等宽标注 */
  margin-top:16px;
  border:1px dashed var(--tear);
  background:var(--tag-lo);
  padding:12px 16px;
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.8;
  color:var(--ink-soft);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  white-space:pre;
}
@media (max-width:860px){
  .apothecary{grid-template-columns:1fr;}
  .tab-rail{
    flex-direction:row;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-right:none;
    border-bottom:1px solid var(--frame-line);
    padding:12px;
  }
  .tab-slip{align-self:auto;flex-shrink:0;}
  .tab-sheet{padding:22px 20px;}
}

/* 横排等宽 tab 皮(下载页平台条等场景) */
.tabbar{
  display:flex;
  flex-wrap:wrap;
  border:1px solid var(--border);
  background:var(--bg-panel);
}
.tabbar [role="tab"]{
  padding:12px 20px;
  min-height:44px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.1em;
  color:var(--text-muted);
  border-right:1px solid var(--border);
  transition:color .15s ease,background .15s ease;
}
.tabbar [role="tab"]:hover{color:var(--text);background:var(--menu-hover);}
.tabbar [role="tab"].is-active{color:var(--paper);background:var(--accent);}
.tabpanel{display:none;}
.tabpanel.is-active{display:block;}

/* ==========================================================================
   长页分类跳转导航(toc)
   ========================================================================== */
.toc-tabs{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  flex-wrap:wrap;
  background:var(--bg-panel);
  border:1px solid var(--border);
  margin-bottom:36px;
}
.toc-tabs a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:12px 18px;
  font-size:13px;
  letter-spacing:.05em;
  color:var(--text-muted);
  border-right:1px solid var(--border);
  transition:color .15s ease,background .15s ease;
}
.toc-tabs a:hover{color:var(--text);background:var(--menu-hover);}
.toc-tabs a.is-here{color:var(--warn);}

/* ==========================================================================
   FAQ 折叠项(原生 details/summary,无需 JS)
   ========================================================================== */
.faq-list{border:1px solid var(--border);border-bottom:none;}
.faq-item{border-bottom:1px solid var(--border);background:var(--bg-panel);}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:44px;
  padding:18px 22px;
  font-size:15px;
  letter-spacing:.02em;
  color:var(--text);
  transition:background .15s ease;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{background:var(--menu-hover);}
.faq-q{display:flex;align-items:baseline;gap:10px;min-width:0;}
.faq-q::before{content:"";width:7px;height:7px;background:var(--accent);flex-shrink:0;transform:translateY(-1px);}
.faq-fx{position:relative;width:14px;height:14px;flex-shrink:0;}
.faq-fx::before,.faq-fx::after{content:"";position:absolute;background:var(--copper);}
.faq-fx::before{left:0;right:0;top:6px;height:2px;}
.faq-fx::after{top:0;bottom:0;left:6px;width:2px;transition:opacity .15s ease;}
.faq-item[open] .faq-fx::after{opacity:0;}
.faq-item[open] summary{border-bottom:1px dashed var(--border);}
.faq-a{padding:16px 22px 20px;font-size:14px;line-height:1.9;color:var(--text-muted);}
.faq-a p{margin-bottom:.8em;}
.faq-a p:last-child{margin-bottom:0;}
.faq-a code{
  font-family:var(--font-mono);
  font-size:.88em;
  background:var(--chip-bg);
  border:1px solid var(--border);
  padding:2px 7px;
  color:var(--warn);
  word-break:break-all;
}
.faq-a a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;}
.faq-a a:hover{color:var(--warn);}

/* ==========================================================================
   术语卡
   ========================================================================== */
.term-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.term-grid>*{min-width:0;}
.term-card{background:var(--bg-panel);border:1px solid var(--border);padding:20px 22px;transition:border-color .15s ease;}
.term-card:hover{border-color:var(--border-strong);}
.term-card h3{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:17px;letter-spacing:.04em;}
.term-card h3 .tc{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--copper-hi);
  border:1px solid var(--border-strong);
  padding:2px 7px;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}
.term-card p{margin-top:10px;font-size:13.5px;line-height:1.85;color:var(--text-muted);}
.term-card p code{font-family:var(--font-mono);font-size:.9em;color:var(--warn);}

/* ==========================================================================
   徽章(首推/推荐/已停止维护等)
   ========================================================================== */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  padding:4px 9px;
  border:1px solid var(--border-strong);
  color:var(--text-muted);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  vertical-align:middle;
}
.badge-top{background:var(--accent);border-color:var(--accent-dark);color:var(--paper);}
.badge-rec{color:var(--warn);border-color:var(--warn);}
.badge-eol{color:var(--text-muted);border-color:var(--border);background:var(--chip-bg);}

/* ==========================================================================
   下载客户端卡片
   ========================================================================== */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.dl-grid>*{min-width:0;}
.dl-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--bg-panel);
  border:1px solid var(--border);
  padding:22px;
  transition:border-color .15s ease;
}
.dl-card:hover{border-color:var(--border-strong);}
.dl-card.is-top{border-color:var(--accent);}
.dl-head{display:flex;align-items:center;gap:14px;min-width:0;}
.dl-head img{width:52px;height:52px;flex-shrink:0;}   /* 官方图标已归一化,禁加圆角/缩放/底色 */
.dl-title{min-width:0;}
.dl-title h3{font-size:18px;letter-spacing:.03em;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.dl-sub{margin-top:5px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--text-muted);}
.dl-desc{margin-top:14px;flex:1;font-size:13.5px;line-height:1.85;color:var(--text-muted);}
.dl-desc a{color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;}
.dl-desc a:hover{color:var(--warn);}
.dl-meta{margin-top:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--text-muted);}
.dl-ver{display:none;}                                 /* 版本槽默认空且不可见,由 downloads.js 填充 */
.dl-ver.has-ver{display:inline;}
.dl-actions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;}

/* ==========================================================================
   博客文章卡
   ========================================================================== */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.post-grid>*{min-width:0;}
.post-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  padding:24px;
  transition:border-color .15s ease;
}
.post-card:hover{border-color:var(--border-strong);}
.post-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--text-muted);}
.post-tag{
  color:var(--warn);
  border:1px solid var(--border-strong);
  padding:2px 8px;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
}
.post-card h3{font-size:19px;line-height:1.5;letter-spacing:.03em;}
.post-card h3 a{transition:color .15s ease;}
.post-card h3 a:hover{color:var(--warn);}
.post-card p{font-size:13.5px;line-height:1.85;color:var(--text-muted);}
.post-more{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  letter-spacing:.06em;
  color:var(--accent);
  transition:color .15s ease;
}
.post-more:hover{color:var(--accent-dark);}

/* ==========================================================================
   callout 引用块(笺纸批注)
   ========================================================================== */
.callout{
  border:1px solid var(--border);
  border-left:4px solid var(--copper);
  background:var(--bg-panel);
  padding:16px 20px;
  margin:0 0 1.4em;
  font-size:14px;
  line-height:1.9;
  color:var(--text);
}
.callout-title{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px;letter-spacing:.03em;margin-bottom:6px;}
.callout-title::before{content:"";width:8px;height:8px;background:var(--copper);flex-shrink:0;}
.callout p{margin-bottom:.6em;}
.callout p:last-child{margin-bottom:0;}
.callout code{
  font-family:var(--font-mono);
  font-size:.88em;
  background:var(--chip-bg);
  border:1px solid var(--border);
  padding:2px 7px;
  color:var(--warn);
  word-break:break-all;
}
.callout-warn{border-left-color:var(--warn);background:linear-gradient(0deg, var(--wash-warm), var(--wash-warm)), var(--bg-panel);}
.callout-warn .callout-title::before{background:var(--warn);}
.callout-danger{border-left-color:var(--error);background:linear-gradient(0deg, var(--wash-err), var(--wash-err)), var(--bg-panel);}
.callout-danger .callout-title::before{background:var(--error);}
.callout-ok{border-left-color:var(--success);background:linear-gradient(0deg, var(--wash-ok), var(--wash-ok)), var(--bg-panel);}
.callout-ok .callout-title::before{background:var(--success);}

/* ==========================================================================
   .dl-fab 右下角常驻下载引导(仅博客文章页使用;演示页加 .is-static 内联展示)
   ========================================================================== */
.dl-fab{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:80;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--accent);
  border:1px solid var(--accent-dark);
  color:var(--paper);
  padding:13px 20px;
  font-size:14px;
  letter-spacing:.06em;
  transition:background .15s ease;
}
.dl-fab:hover{background:var(--accent-dark);}
.dl-fab svg{width:16px;height:16px;flex-shrink:0;}
.dl-fab.is-static{position:static;}   /* 仅 design-preview 演示用,正式页面勿加 */

/* ==========================================================================
   文末下载引导卡(博客文章页约定:.cta-card)
   ========================================================================== */
.cta-card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--paper-edge);
  color:var(--ink);
  padding:28px;
}
.cta-card::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--noise);
  background-size:140px 140px;
  opacity:.06;
  pointer-events:none;
}
.cta-card>*{position:relative;}
.cta-card h2,.cta-card h3{color:var(--ink);font-size:22px;letter-spacing:.06em;display:flex;align-items:center;gap:10px;}
.cta-card h2::before,.cta-card h3::before{content:"";width:7px;height:7px;background:var(--accent);flex-shrink:0;}
.cta-card p{margin-top:10px;font-size:14px;line-height:1.9;color:var(--ink-soft);max-width:60ch;}
.cta-card .btn-ghost{border-color:var(--ink-faint);color:var(--ink);}
.cta-card .btn-ghost:hover{border-color:var(--ink);background:var(--tag-lo);}

/* ==========================================================================
   命令展示框(等宽 + 复制按钮)
   ========================================================================== */
.cmd-box{
  display:flex;
  align-items:stretch;
  border:1px solid var(--border-strong);
  background:var(--cavity);
  max-width:100%;
  margin:0 0 1.4em;
}
.cmd-box code{
  flex:1;
  min-width:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:14px 16px;
  font-family:var(--font-mono);
  font-size:13px;
  line-height:1.6;
  color:var(--warn);
  white-space:nowrap;
}
.cmd-box button{
  flex-shrink:0;
  border-left:1px solid var(--border);
  padding:14px 18px;
  min-height:44px;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--text-muted);
  transition:color .15s ease,background .15s ease;
}
.cmd-box button:hover{color:var(--text);background:var(--menu-hover);}

/* ==========================================================================
   数据表格(含裸表防御)
   ========================================================================== */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  margin:0 0 1.4em;
}
.data-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px;}
.data-table th{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--text-muted);
  text-align:left;
  padding:12px 16px;
  border-bottom:1px solid var(--border-strong);
  background:var(--chip-bg);
  white-space:nowrap;
}
.data-table td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:top;line-height:1.7;}
.data-table tr:last-child td{border-bottom:none;}
.data-table code{font-family:var(--font-mono);font-size:.9em;color:var(--warn);}
/* 裸表格防御:正文里未套 .table-wrap 的表格自行横滑,不撑破页面 */
.prose > .data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0;}

/* ==========================================================================
   色板(design-preview 专用展示件)
   ========================================================================== */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.swatches>*{min-width:0;}
.sw{border:1px solid var(--border);background:var(--bg-panel);padding:10px;display:flex;flex-direction:column;gap:6px;}
.sw-chip{display:block;height:44px;border:1px solid var(--border-strong);}
.sw code{font-size:11px;color:var(--text);word-break:break-all;}
.sw i{font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--text-muted);}
.sw-c-bg{background:var(--bg);}
.sw-c-bg-panel{background:var(--bg-panel);}
.sw-c-paper{background:var(--paper);}
.sw-c-paper-back{background:var(--paper-back);}
.sw-c-border{background:var(--border);}
.sw-c-border-strong{background:var(--border-strong);}
.sw-c-border-soft{background:var(--border-soft);}
.sw-c-accent{background:var(--accent);}
.sw-c-accent-dark{background:var(--accent-dark);}
.sw-c-text{background:var(--text);}
.sw-c-text-muted{background:var(--text-muted);}
.sw-c-success{background:var(--success);}
.sw-c-warn{background:var(--warn);}
.sw-c-error{background:var(--error);}
.sw-c-wood-a{background:var(--wood-a);}
.sw-c-wood-b{background:var(--wood-b);}
.sw-c-wood-c{background:var(--wood-c);}
.sw-c-wood-x{background:var(--wood-x);}
.sw-c-beam-a{background:var(--beam-a);}
.sw-c-beam-b{background:var(--beam-b);}
.sw-c-cavity{background:var(--cavity);}
.sw-c-copper-hi{background:var(--copper-hi);}
.sw-c-copper{background:var(--copper);}
.sw-c-copper-lo{background:var(--copper-lo);}
.sw-c-ink{background:var(--ink);}
.sw-c-ink-soft{background:var(--ink-soft);}
.sw-c-ink-faint{background:var(--ink-faint);}
.sw-c-floor-a{background:var(--floor-a);}