/* ============================================================
   clashservice.com · Clash下载中文网
   components.css —— 跨页面组件:
   首屏运单装置 / 舱单明细表 / tab / toc / FAQ / 术语卡 /
   客户端卡 / 文章卡 / callout / 正文排版 / dl-fab / 色板演示
   ============================================================ */

/* ================ Hero 文案区 ================ */
.hero{
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - var(--head-h) - 56px);
}
.hero-copy{
  text-align:center;
  padding:30px var(--gutter) 22px;
}
.hero-kicker{
  display:inline-block;
  font-family:var(--ft-mono);
  font-size:12px;
  letter-spacing:0.22em;
  border:var(--rule-2);
  background:var(--paper-lift);
  padding:4px 14px;
  margin-bottom:14px;
  text-transform:uppercase;
}
.hero-kicker b{color:var(--stamp);font-weight:700;}
.hero-copy h1{
  font-size:clamp(40px,3.8vw,56px);
  line-height:1.14;
  letter-spacing:0.01em;
}
/* 双色强调词:货运红字 + 油墨黑粗下划(钢印感) */
.hero-copy h1 em,
em.h-accent{
  font-style:normal;
  color:var(--stamp);
  border-bottom:6px solid var(--ink);
}
.lede{
  margin:14px auto 0;
  max-width:860px;
  font-size:17px;
  line-height:1.7;
  color:var(--ink-soft);
}
.lede strong{color:var(--ink);font-weight:900;}

/* 关键词 chips 行(左缘红方块状态点) */
.chips{
  margin-top:16px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  padding-inline:var(--gutter);
}
.chips a{
  font-family:var(--ft-mono);
  font-size:13px;
  border:var(--rule-2);
  background:var(--paper-lift);
  padding:5px 12px 5px 10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  overflow:hidden;
}
.chips a::before{
  content:"";
  width:8px;
  height:8px;
  background:var(--stamp);
  flex:0 0 auto;
}
.chips a:hover{background:var(--paper-deep);}

/* ================ 全宽事实徽标带 ================ */
.facts-band{
  border-top:var(--rule-3);
  border-bottom:var(--rule-3);
  background:var(--paper-lift);
}
.facts-inner{
  max-width:var(--wrap-max);
  margin:0 auto;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}
.fact{
  font-family:var(--ft-mono);
  font-size:13px;
  letter-spacing:0.05em;
  padding:11px 26px;
  border-left:2px solid var(--ink);
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.fact:first-child{border-left:none;}
.fact b{color:var(--stamp-deep);font-weight:700;}
.fact .lbl{color:var(--ink-soft);}

/* ================ 巨型空运运单卡(首屏装置) ================ */
.bill-stage{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:44px var(--gutter) 34px;
  /* 出血装饰(唛头大字/橡皮章/倾斜卡)横向裁掉,纵向照旧出血 */
  overflow-x:clip;
}
.waybill-tilt{
  transform:rotate(2deg);
  position:relative;
}
.waybill{
  width:min(880px,62vw);
  border:var(--rule-3);
  background:var(--ink);
  display:grid;
  grid-template-rows:auto auto auto auto;
  gap:2px;
  position:relative;
}
.wb-row{
  display:grid;
  gap:2px;
  background:var(--ink);
}
.wb-row>*{min-width:0;}
.wb-cell{
  background:var(--paper-lift);
  padding:12px 16px;
}

/* 行一:AWB 抬头 + TRACKING NO. */
.wb-head{grid-template-columns:1fr 320px;}
.awb-title{
  font-family:var(--ft-mono);
  font-weight:700;
  font-size:20px;
  letter-spacing:0.14em;
}
.awb-sub{
  font-family:var(--ft-mono);
  font-size:11px;
  color:var(--ink-soft);
  letter-spacing:0.1em;
  margin-top:4px;
}
.awb-sub b{color:var(--stamp-deep);font-weight:700;}
.wb-label{
  display:block;
  font-family:var(--ft-mono);
  font-size:10px;
  letter-spacing:0.2em;
  color:var(--ink-soft);
  text-transform:uppercase;
  margin-bottom:6px;
}
.tracking-no{
  font-family:var(--ft-mono);
  font-weight:700;
  font-size:19px;
  letter-spacing:0.06em;
}
.tracking-no b{color:var(--stamp-deep);}

/* 行二:DESTINATION 栏头 */
.wb-destlabel{grid-template-columns:1fr;}
.wb-destlabel .wb-cell{
  background:var(--paper-deep);
  padding:7px 16px;
  font-family:var(--ft-mono);
  font-size:11px;
  letter-spacing:0.24em;
  font-weight:700;
  text-transform:uppercase;
}
.wb-destlabel .wb-cell b{color:var(--stamp);}

/* 行三:五平台目的地格 */
.wb-dest{grid-template-columns:repeat(5,1fr);}
.dest-cell{
  position:relative;
  display:block;
  padding:14px 14px 12px;
}
.dest-cell::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:transparent;
}
.dest-cell:hover{background:var(--paper-deep);}
.dest-cell:hover::before{background:var(--stamp);}
.dest-code{
  font-family:var(--ft-mono);
  font-weight:700;
  font-size:24px;
  letter-spacing:0.04em;
  line-height:1;
  display:block;
}
.dest-name{
  display:block;
  font-family:var(--ft-display);
  font-weight:900;
  font-size:14px;
  margin-top:6px;
}
.dest-note{
  display:block;
  font-family:var(--ft-mono);
  font-size:10.5px;
  color:var(--ink-soft);
  margin-top:5px;
  line-height:1.5;
}
.dest-slot{
  display:block;
  font-family:var(--ft-mono);
  font-size:10px;
  color:var(--ink-soft);
  letter-spacing:0.16em;
  margin-bottom:8px;
}

/* 行四:签收栏(主按钮 + 条形码) */
.wb-sign{grid-template-columns:56px 1fr 250px;}
.sign-label{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper-deep);
}
.sign-label span{
  writing-mode:vertical-rl;
  font-family:var(--ft-mono);
  font-size:10px;
  letter-spacing:0.3em;
  font-weight:700;
  text-transform:uppercase;
}
.sign-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:18px 20px;
}
.barcode-cell{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding:14px 18px;
}
.barcode-wrap{position:relative;display:block;}
.barcode-wrap svg{display:block;width:100%;height:46px;}
.barcode-wrap svg rect{fill:var(--ink);}
.barcode-wrap::after{
  content:"";
  position:absolute;
  left:-6px;
  right:-6px;
  top:50%;
  height:2px;
  background:var(--stamp);
}
.barcode-text{
  font-family:var(--ft-mono);
  font-size:10px;
  letter-spacing:0.34em;
  text-align:center;
  color:var(--ink-soft);
}

/* 橡皮章「已分流」 */
.stamp{
  position:absolute;
  top:-34px;
  right:-38px;
  width:148px;
  height:148px;
  border:3px solid var(--stamp);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:rotate(-12deg);
  opacity:0.86;
  mix-blend-mode:multiply;
  pointer-events:none;
}
.stamp-inner{
  width:118px;
  height:118px;
  border:2px solid var(--stamp);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}
.stamp-cn{
  font-family:var(--ft-display);
  font-weight:900;
  font-size:30px;
  color:var(--stamp);
  letter-spacing:0.08em;
}
.stamp-en{
  font-family:var(--ft-mono);
  font-size:9px;
  letter-spacing:0.26em;
  color:var(--stamp);
  font-weight:700;
}
.stamp-line{
  width:64px;
  height:2px;
  background:var(--stamp);
}

/* 唛头钢印「下载」出血大字 */
.mark-xl{
  position:absolute;
  left:-36px;
  bottom:-46px;
  font-family:var(--ft-display);
  font-weight:900;
  font-size:clamp(120px,11vw,168px);
  line-height:1;
  letter-spacing:0.08em;
  color:var(--stamp);
  opacity:0.15;
  transform:rotate(-7deg);
  pointer-events:none;
  user-select:none;
}

/* 卡片角落舱单小注 */
.corner-note{
  position:absolute;
  right:14px;
  bottom:-26px;
  font-family:var(--ft-mono);
  font-size:10px;
  letter-spacing:0.2em;
  color:var(--ink-soft);
  transform:rotate(2deg);
}

/* ================ 下一区块露头条 ================ */
.next-peek{
  border-top:var(--rule-3);
  background:var(--paper-deep);
  padding-top:16px;
  padding-bottom:40px;
}
.peek-inner{
  max-width:var(--wrap-max);
  margin:0 auto;
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.peek-tag{
  font-family:var(--ft-mono);
  font-size:11px;
  letter-spacing:0.2em;
  border:var(--rule-2);
  background:var(--paper-lift);
  padding:4px 10px;
  flex-shrink:0;
}
.peek-title{
  font-family:var(--ft-display);
  font-weight:900;
  font-size:18px;
}
.peek-note{
  font-family:var(--ft-mono);
  font-size:12px;
  color:var(--ink-soft);
  margin-left:auto;
}

/* ================ 舱单明细表(核心特性区) ================ */
.manifest{
  border:var(--rule-3);
  background:var(--paper-lift);
}
.manifest-head{
  display:grid;
  grid-template-columns:110px 220px 1fr 130px;
  background:var(--paper-deep);
  border-bottom:var(--rule-2);
}
.manifest-head span{
  font-family:var(--ft-mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  padding:9px 16px;
  border-left:2px solid var(--ink);
  min-width:0;
}
.manifest-head span:first-child{border-left:none;}
.manifest-row{
  position:relative;
  display:grid;
  grid-template-columns:110px 220px 1fr 130px;
  border-top:var(--rule-2);
}
.manifest-row:first-of-type{border-top:none;}
.manifest-row>*{min-width:0;}
.manifest-row>*+*{border-left:2px solid var(--ink);}
.manifest-row::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:transparent;
  z-index:1;
}
.manifest-row:hover{background:var(--paper-deep);}
.manifest-row:hover::before{background:var(--stamp);}
.mf-no{
  font-family:var(--ft-mono);
  font-weight:700;
  font-size:14px;
  padding:16px;
}
.mf-name{
  font-family:var(--ft-display);
  font-weight:900;
  font-size:17px;
  padding:16px;
}
.mf-desc{
  font-size:14px;
  line-height:1.8;
  padding:16px;
}
.mf-status{padding:16px;}

/* ================ 状态戳 / 徽章 ================ */
.seal{
  display:inline-block;
  font-family:var(--ft-mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.08em;
  border:2px solid currentColor;
  padding:3px 8px;
  color:var(--ink);
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
}
.seal-ok{color:var(--sig-ok);}
.seal-warn{color:var(--sig-warn);}
.seal-err{color:var(--sig-err);}
.seal-red{color:var(--stamp-deep);}
.seal-soft{color:var(--ink-soft);}

.badge{
  display:inline-block;
  font-family:var(--ft-mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.1em;
  padding:4px 10px;
  border:var(--rule-2);
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
}
.badge-prime{background:var(--stamp);color:var(--paper-lift);}
.badge-reco{background:var(--paper-deep);color:var(--ink);}
.badge-retired{
  background:transparent;
  color:var(--ink-soft);
  border-color:var(--ink-soft);
}

/* ================ 长页分类跳转导航(toc) ================ */
.toc-tabs{
  display:flex;
  flex-wrap:wrap;
  border:var(--rule-2);
  background:var(--paper-lift);
}
.toc-tabs a{
  font-family:var(--ft-mono);
  font-size:13px;
  font-weight:700;
  padding:10px 16px;
  border-right:2px solid var(--ink);
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.toc-tabs a::before{
  content:"";
  width:7px;
  height:7px;
  background:var(--stamp);
  flex-shrink:0;
}
.toc-tabs a:hover{background:var(--paper-deep);}

/* ================ tab 组件(role=tablist) ================ */
.tabset{
  border:var(--rule-3);
  background:var(--paper-lift);
}
.tab-rail{
  display:flex;
  flex-wrap:wrap;
  background:var(--paper-deep);
  border-bottom:var(--rule-3);
}
.tab-rail [role="tab"]{
  position:relative;
  appearance:none;
  background:transparent;
  border:none;
  border-right:2px solid var(--ink);
  font-family:var(--ft-mono);
  font-weight:700;
  font-size:14px;
  letter-spacing:0.04em;
  padding:12px 20px;
  min-height:44px;
  cursor:pointer;
}
.tab-rail [role="tab"]::after{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  bottom:-3px;
  height:4px;
  background:transparent;
}
.tab-rail [role="tab"]:hover::after{background:var(--ink);}
.tab-rail [role="tab"][aria-selected="true"]{
  background:var(--paper-lift);
  color:var(--stamp-deep);
}
.tab-rail [role="tab"][aria-selected="true"]::after{background:var(--stamp);}
.tab-panel{padding:22px;}
.tab-panel[hidden]{display:none;}

/* ================ FAQ 折叠项 ================ */
.qa{
  border:var(--rule-2);
  background:var(--paper-lift);
}
.qa+.qa{margin-top:12px;}
.qa summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  cursor:pointer;
  font-family:var(--ft-display);
  font-weight:900;
  font-size:15px;
  list-style:none;
}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::before{
  content:"Q";
  font-family:var(--ft-mono);
  font-weight:700;
  font-size:12px;
  color:var(--paper-lift);
  background:var(--ink);
  padding:2px 7px;
  flex-shrink:0;
}
.qa summary:hover{background:var(--paper-deep);}
.qa[open] summary{
  border-bottom:var(--rule-2);
  background:var(--paper-deep);
}
.qa[open] summary::before{background:var(--stamp);}
.qa-body{
  padding:14px 16px;
  font-size:14px;
  line-height:1.85;
}
.qa-body p+p{margin-top:.7em;}

/* ================ 术语卡 ================ */
.term-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}
.term-grid>*{min-width:0;}
.term-slip{
  border:var(--rule-2);
  background:var(--paper-lift);
}
.term-slip:hover{background:var(--paper-deep);}
.term-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:12px 14px;
  border-bottom:2px solid var(--ink);
  flex-wrap:wrap;
}
.term-code{
  font-family:var(--ft-mono);
  font-weight:700;
  font-size:12px;
  color:var(--stamp-deep);
  letter-spacing:0.1em;
  flex-shrink:0;
}
.term-name{
  font-family:var(--ft-display);
  font-weight:900;
  font-size:16px;
}
.term-desc{
  padding:12px 14px;
  font-size:13.5px;
  line-height:1.8;
  color:var(--ink-soft);
}

/* ================ 下载客户端卡 ================ */
.client-card{
  border:var(--rule-3);
  background:var(--paper-lift);
}
.client-card+.client-card{margin-top:20px;}
.cc-head{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:14px 18px;
  border-bottom:var(--rule-2);
}
.cc-icon{
  width:56px;
  height:56px;
  flex-shrink:0;
}
.cc-title{min-width:0;}
.cc-name{
  font-family:var(--ft-display);
  font-weight:900;
  font-size:19px;
  display:block;
}
.cc-meta{
  font-family:var(--ft-mono);
  font-size:12px;
  color:var(--ink-soft);
  display:block;
  margin-top:3px;
}
.cc-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-left:auto;
}
.cc-body{
  padding:16px 18px;
  font-size:14px;
  line-height:1.8;
}
.cc-body p+p{margin-top:.6em;}
.cc-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  padding:0 18px 18px;
}
.cc-ver{
  font-family:var(--ft-mono);
  font-weight:700;
  font-size:13px;
  color:var(--stamp-deep);
}
/* 版本号槽位防呆:默认空/隐藏,由 downloads.js 填充后才显示 */
[data-cdnver]:empty{display:none;}
[data-cdnver][hidden]{display:none;}

/* ================ 博客文章卡 ================ */
.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:18px;
}
.post-grid>*{min-width:0;}
.post-card{
  position:relative;
  border:var(--rule-2);
  background:var(--paper-lift);
  display:flex;
  flex-direction:column;
}
.post-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:transparent;
}
.post-card:hover{background:var(--paper-deep);}
.post-card:hover::before{background:var(--stamp);}
.pc-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 16px;
  border-bottom:2px solid var(--ink);
  font-family:var(--ft-mono);
  font-size:11px;
  color:var(--ink-soft);
}
.pc-tag{
  font-weight:700;
  color:var(--stamp-deep);
  border:2px solid var(--stamp-deep);
  padding:2px 7px;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  flex-shrink:1;
}
.pc-date{white-space:nowrap;flex-shrink:0;}
.pc-title{
  font-family:var(--ft-display);
  font-weight:900;
  font-size:16.5px;
  line-height:1.5;
  padding:14px 16px 0;
}
.pc-sum{
  padding:10px 16px 16px;
  font-size:13.5px;
  line-height:1.75;
  color:var(--ink-soft);
}

/* 上一篇/下一篇 */
.post-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:var(--ink);
  border:var(--rule-2);
}
.post-nav>*{min-width:0;}
.post-nav a,
.post-nav span{
  display:block;
  background:var(--paper-lift);
  padding:14px 16px;
  font-size:13.5px;
  line-height:1.6;
}
.post-nav a:hover{background:var(--paper-deep);}
.post-nav .pn-dir{
  display:block;
  font-family:var(--ft-mono);
  font-size:10px;
  letter-spacing:0.2em;
  color:var(--ink-soft);
  text-transform:uppercase;
  margin-bottom:6px;
}

/* 面包屑(文章页) */
.crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-family:var(--ft-mono);
  font-size:12px;
  color:var(--ink-soft);
  margin-top:1.4rem;
  margin-bottom:1.2rem;
}
.crumbs a:hover{color:var(--stamp-deep);}

/* ================ callout 引用块 ================ */
.callout{
  border:var(--rule-2);
  border-left:6px solid var(--ink);
  background:var(--paper-lift);
  padding:14px 16px;
  font-size:14px;
  line-height:1.8;
}
.callout+.callout{margin-top:12px;}
.callout-label{
  display:block;
  font-family:var(--ft-mono);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.callout-red{border-left-color:var(--stamp);}
.callout-red .callout-label{color:var(--stamp-deep);}
.callout-ok{border-left-color:var(--sig-ok);}
.callout-ok .callout-label{color:var(--sig-ok);}
.callout-warn{border-left-color:var(--sig-warn);}
.callout-warn .callout-label{color:var(--sig-warn);}
.callout-err{border-left-color:var(--sig-err);}
.callout-err .callout-label{color:var(--sig-err);}

/* ================ 正文排版(教程/文档/文章) ================ */
.prose{max-width:860px;}
.prose h2{
  font-size:clamp(20px,2.4vw,26px);
  border-left:6px solid var(--stamp);
  padding-left:14px;
  margin-top:2.2em;
  margin-bottom:.8em;
}
.prose h3{
  font-size:clamp(16px,2vw,19px);
  margin-top:1.6em;
  margin-bottom:.6em;
}
.prose p{margin-bottom:1em;font-size:15px;line-height:1.9;}
.prose ul{list-style:square;padding-left:1.5em;margin-bottom:1em;}
.prose ol{list-style:decimal;padding-left:1.5em;margin-bottom:1em;}
.prose li{margin-bottom:.45em;line-height:1.85;font-size:15px;}
.prose a{
  color:var(--stamp-deep);
  border-bottom:2px solid var(--stamp);
}
.prose code{
  font-family:var(--ft-mono);
  font-size:.9em;
  background:var(--paper-deep);
  border:1px solid var(--ink);
  padding:1px 6px;
}
.prose pre{
  background:var(--ink);
  color:var(--paper-lift);
  border:var(--rule-3);
  padding:16px 18px;
  font-size:13px;
  line-height:1.7;
  margin-bottom:1.2em;
  overflow-x:auto;
}
.prose pre code{
  background:transparent;
  border:none;
  padding:0;
  color:inherit;
}
.prose blockquote{
  border:var(--rule-2);
  border-left:6px solid var(--ink);
  background:var(--paper-lift);
  padding:14px 16px;
  margin-bottom:1.2em;
  color:var(--ink-soft);
}
/* 裸表格防御:写手可能输出不带 .table-wrap 的裸 .data-table */
.prose > .data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0;}

/* 步骤列表(格口编号章) */
.step-list{
  list-style:none;
  counter-reset:st;
  padding-left:0;
}
.step-list>li{
  counter-increment:st;
  position:relative;
  padding-left:64px;
  margin-bottom:30px;
  min-height:44px;
}
.step-list>li::before{
  content:counter(st,decimal-leading-zero);
  position:absolute;
  left:0;
  top:0;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  font-family:var(--ft-mono);
  font-weight:700;
  font-size:15px;
  background:var(--stamp);
  color:var(--paper-lift);
  border:var(--rule-3);
}
.step-title{
  display:block;
  font-family:var(--ft-display);
  font-weight:900;
  font-size:17px;
  margin-bottom:6px;
}

/* ================ 数据表格 ================ */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:var(--rule-3);
  background:var(--paper-lift);
}
.data-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  background:var(--paper-lift);
}
.data-table th{
  font-family:var(--ft-mono);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  background:var(--paper-deep);
  text-align:left;
}
.data-table th,
.data-table td{
  border:2px solid var(--ink);
  padding:10px 14px;
  font-size:14px;
  line-height:1.6;
}

/* ================ 文末下载引导卡 ================ */
.dispatch-endcard{
  border:var(--rule-3);
  background:var(--paper-lift);
  margin-top:48px;
}
.dispatch-endcard .panel-strip b{color:var(--stamp);}
.dec-body{padding:20px;}
.dec-title{
  font-family:var(--ft-display);
  font-weight:900;
  font-size:20px;
  margin-bottom:8px;
}
.dec-text{
  font-size:14px;
  line-height:1.8;
  color:var(--ink-soft);
  margin-bottom:16px;
}
.dec-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* ================ 右下角常驻下载浮层 ================ */
.dl-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:80;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--stamp);
  color:var(--paper-lift);
  border:var(--rule-3);
  font-family:var(--ft-display);
  font-weight:900;
  font-size:15px;
  letter-spacing:0.04em;
  padding:12px 18px;
}
.dl-fab:hover{background:var(--stamp-deep);}
.dl-fab:active{transform:translate(2px,2px);}
.dl-fab svg{
  display:block;
  width:16px;
  height:16px;
  flex-shrink:0;
}
/* design-preview 演示用:让浮层脱离固定定位 */
.fab-demo .dl-fab{position:static;}

/* ================ 色板演示(design-preview 用) ================ */
.swatch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:14px;
}
.swatch-grid>*{min-width:0;}
.swatch{
  border:var(--rule-2);
  background:var(--paper-lift);
}
.swatch-chip{
  height:74px;
  border-bottom:var(--rule-2);
}
.swatch-meta{
  padding:10px 12px;
  font-family:var(--ft-mono);
  font-size:12px;
  line-height:1.6;
}
.sw-paper{background:var(--paper);}
.sw-paper-lift{background:var(--paper-lift);}
.sw-paper-deep{background:var(--paper-deep);}
.sw-ink{background:var(--ink);}
.sw-ink-soft{background:var(--ink-soft);}
.sw-stamp{background:var(--stamp);}
.sw-stamp-deep{background:var(--stamp-deep);}
.sw-ok{background:var(--sig-ok);}
.sw-warn{background:var(--sig-warn);}
.sw-err{background:var(--sig-err);}

/* ================ 组件响应式 ================ */
@media (max-width:1180px){
  .waybill{width:min(880px,88vw);}
}

@media (max-width:920px){
  .hero{min-height:0;}
  .wb-head{grid-template-columns:1fr;}
}

@media (max-width:760px){
  /* 舱单明细表降级:逐行堆叠单证条目 */
  .manifest-head{display:none;}
  .manifest-row{grid-template-columns:1fr;}
  .manifest-row>*+*{border-left:none;}
  .mf-no{
    background:var(--paper-deep);
    border-bottom:2px solid var(--ink);
    padding:9px 16px;
  }
  .mf-name{padding-bottom:4px;}
  .mf-desc{padding-top:0;padding-bottom:8px;}
  .mf-status{padding-top:0;}

  /* 运单卡降级 */
  .bill-stage{padding:34px var(--gutter) 48px;}
  .waybill-tilt{transform:rotate(1deg);width:100%;}
  .waybill{width:100%;}
  .wb-dest{grid-template-columns:1fr 1fr;}
  .wb-sign{grid-template-columns:1fr;}
  .sign-label{padding:8px;}
  .sign-label span{writing-mode:horizontal-tb;letter-spacing:0.2em;}
  .stamp{width:110px;height:110px;top:-26px;right:-10px;}
  .stamp-inner{width:86px;height:86px;}
  .stamp-cn{font-size:20px;}
  .stamp-en{font-size:7px;letter-spacing:0.18em;}
  .stamp-line{width:44px;}
  .mark-xl{left:-8px;bottom:-34px;font-size:clamp(72px,18vw,120px);}
  .corner-note{display:none;}

  .post-nav{grid-template-columns:1fr;}
  .tab-panel{padding:16px;}
}

@media (max-width:640px){
  .facts-inner{flex-direction:column;}
  .fact{
    border-left:none;
    border-top:2px solid var(--ink);
    padding:10px var(--gutter);
    white-space:normal;
  }
  .fact:first-child{border-top:none;}
  .cc-badges{margin-left:0;width:100%;}
}

@media (max-width:480px){
  .wb-dest{grid-template-columns:1fr;}
  .dest-cell{padding:12px 14px;}
  .chips a{font-size:12px;}
}