/* ==========================================================================
   VPNHF · 设计系统 · components 层
   跨页面组件:tab / 目录条 / FAQ / 套餐卡 / 线路表 / 平台卡 / 文章卡
   / callout / 文末推广块 / 索引册卖点区 / 预览页示例排版
   颜色一律引用 base.css 的 :root 令牌
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tab 切换(role=tablist)
   -------------------------------------------------------------------------- */

.tablist{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  max-width:100%;
  padding:4px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:var(--bg-panel);
  box-shadow:0 1px 0 var(--white-14) inset;
}

.tablist--stack{
  display:flex;
  border-radius:var(--radius-md);
}

.tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:36px;
  padding:6px 16px;
  border:0;
  border-radius:var(--radius-pill);
  background:transparent;
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:500;
  color:var(--text-muted);
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
  transition:background-color .16s ease, color .16s ease;
}

.tab svg{
  width:14px;
  height:14px;
  flex:none;
  fill:currentColor;
}

.tab:hover{
  background:var(--accent-08);
  color:var(--text);
}

.tab[aria-selected="true"]{
  background:var(--accent);
  color:var(--bg-top);
  font-weight:600;
  box-shadow:0 8px 16px -10px var(--accent-45);
}

.tabpanel{padding:0;}

.tabpanel[hidden]{display:none;}

.tab-list-wrap{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
}

.tab-list-wrap::-webkit-scrollbar{height:0;}

/* --------------------------------------------------------------------------
   长页目录条(吸顶跟随由 reveal.js 负责)
   -------------------------------------------------------------------------- */

.toc-tabs{
  position:sticky;
  top:12px;
  z-index:20;
  display:flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  margin:0 0 26px;
  padding:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-panel);
  box-shadow:var(--shadow-chip);
}

.toc-tabs::-webkit-scrollbar{display:none;}

.toc-tabs a{
  display:inline-flex;
  align-items:center;
  flex:none;
  min-height:36px;
  padding:6px 12px;
  border-radius:var(--radius-pill);
  font-size:13px;
  color:var(--text-muted);
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .16s ease, color .16s ease;
}

.toc-tabs a:hover{
  background:var(--accent-08);
  color:var(--text);
}

.toc-tabs a.is-current{
  background:var(--accent);
  color:var(--bg-top);
  font-weight:600;
}

body:has(.toc-tabs) section[id],
body:has(.toc-tabs) [id^="sec-"]{
  scroll-margin-top:96px;
}

/* --------------------------------------------------------------------------
   FAQ 折叠(原生 details)
   -------------------------------------------------------------------------- */

.faq-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
  padding:0;
}

.faq-item{
  min-width:0;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-panel);
  box-shadow:0 1px 0 var(--white-14) inset;
  overflow:hidden;
}

.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:52px;
  padding:14px 16px;
  font-size:15px;
  font-weight:600;
  line-height:1.5;
  color:var(--text);
  cursor:pointer;
  list-style:none;
}

.faq-item summary::-webkit-details-marker{display:none;}

.faq-item summary::after{
  content:"";
  width:9px;
  height:9px;
  flex:none;
  border-right:1.6px solid var(--text-muted);
  border-bottom:1.6px solid var(--text-muted);
  transform:rotate(45deg);
  transition:transform .2s ease;
}

.faq-item[open] summary::after{transform:rotate(-135deg);}

.faq-item[open] summary{color:var(--accent-dark);}

.faq-a{
  padding:0 16px 16px;
  font-size:14px;
  line-height:1.78;
  color:var(--text-muted);
}

.faq-a p{margin:0 0 .7em;}
.faq-a p:last-child{margin-bottom:0;}

.faq-cat{
  margin:30px 0 14px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.help-section{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  min-width:0;
  margin:0 0 34px;
}

/* --------------------------------------------------------------------------
   套餐卡
   -------------------------------------------------------------------------- */

.plan-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}

.plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:24px 20px 20px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card);
}

.plan-card.is-featured{
  border-color:transparent;
  border-radius:var(--radius-lg);
  background:linear-gradient(155deg, var(--accent) 0%, var(--accent-rose) 100%);
  color:var(--bg-top);
  box-shadow:var(--shadow-window);
}

.plan-card.is-current{
  box-shadow:0 0 0 2px var(--accent), var(--shadow-card);
}

.plan-card.is-featured.is-current{
  box-shadow:0 0 0 2px var(--accent-dark), var(--shadow-window);
}

.plan-badge{
  position:absolute;
  top:-11px;
  right:16px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  background:var(--bg-panel);
  border:1px solid var(--border);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--accent-dark);
  white-space:nowrap;
  box-shadow:var(--shadow-chip);
}

.plan-card.is-featured .plan-badge{
  border-color:transparent;
  background:var(--bg-top);
  color:var(--accent-dark);
}

.plan-name{
  margin:0;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--text);
}

.plan-card.is-featured .plan-name{color:var(--bg-top);}

.plan-desc{
  margin:6px 0 0;
  font-size:12.5px;
  line-height:1.6;
  color:var(--text-muted);
}

.plan-card.is-featured .plan-desc{color:var(--on-ink-78);}

.plan-price{
  display:flex;
  align-items:baseline;
  gap:4px;
  margin:16px 0 4px;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  color:var(--text);
}

.plan-amount{
  font-size:34px;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1;
}

.plan-card.is-featured .plan-price{color:var(--bg-top);}

.plan-per{
  font-size:12px;
  font-weight:400;
  color:var(--text-muted);
}

.plan-card.is-featured .plan-per{color:var(--on-ink-78);}

.plan-quota-line{
  margin:0 0 16px;
  font-size:12.5px;
  color:var(--text-muted);
}

.plan-card.is-featured .plan-quota-line{color:var(--on-ink-78);}

.plan-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0 0 20px;
  padding:16px 0 0;
  border-top:1px dashed var(--border);
  list-style:none;
  font-size:13px;
  color:var(--text-muted);
}

.plan-card.is-featured .plan-list{
  border-top-color:var(--on-ink-14);
  color:var(--on-ink-78);
}

.plan-list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  line-height:1.55;
}

.plan-list li::before{
  content:"";
  width:5px;
  height:5px;
  margin-top:7px;
  flex:none;
  border-radius:50%;
  background:var(--accent);
}

.plan-card.is-featured .plan-list li::before{background:var(--bg-top);}

.plan-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:auto;
}

.plan-actions .btn,
.plan-actions .btn-primary,
.plan-actions .btn-ghost,
.plan-actions .btn-outline{
  width:100%;
  flex-shrink:0;
  white-space:nowrap;
}

.plan-card.is-featured .btn-primary{
  background:var(--bg-top);
  color:var(--accent-dark);
  box-shadow:none;
}

.plan-card.is-featured .btn-primary:hover{
  background:var(--bg-panel-2);
  color:var(--accent-dark);
}

.plan-card.is-featured .btn-ghost{
  border-color:var(--on-ink-14);
  background:transparent;
  color:var(--bg-top);
}

.plan-card.is-featured .btn-ghost:hover{
  background:var(--on-ink-08);
}

.plan-note{
  margin:22px 0 0;
  font-size:12.5px;
  line-height:1.7;
  color:var(--text-muted);
}

.traffic-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.traffic-card{
  min-width:0;
  padding:18px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-panel-2);
}

.traffic-size{
  display:block;
  font-family:var(--font-mono);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}

.traffic-price{
  display:block;
  margin-top:6px;
  font-size:13px;
  color:var(--text-muted);
}

/* --------------------------------------------------------------------------
   表格:窄屏必须由 wrapper 横滑,表格自身 min-width 保列宽
   -------------------------------------------------------------------------- */

.table-scroll{
  position:relative;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-panel);
}

.table-scroll table{min-width:640px;}

.table-scroll--wide table{min-width:760px;}

.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:13.5px;
  color:var(--text);
}

.data-table caption{
  padding:12px 14px;
  font-size:12px;
  text-align:left;
  color:var(--text-muted);
}

.data-table th,
.data-table td{
  padding:11px 14px;
  text-align:left;
  vertical-align:middle;
  border-bottom:1px solid var(--ink-06);
}

.data-table thead th{
  background:var(--bg-panel-2);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text);
  white-space:nowrap;
  border-bottom:1px solid var(--border);
}

.data-table tbody tr:last-child td{border-bottom:0;}

.data-table td.num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.data-table .is-key{font-weight:600;color:var(--accent-dark);}

.data-table td,
.data-table th{word-break:keep-all;}

.prose > .data-table{
  display:block;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* 线路表 */
.route-table .group-row td{
  background:var(--bg-panel-2);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.route-table .city{
  font-weight:600;
  white-space:nowrap;
}

.route-table .type-tag{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:var(--radius-xs);
  background:var(--bg-panel-2);
  font-size:11px;
  color:var(--text-muted);
  white-space:nowrap;
}

.route-table .type-tag.is-iepl{
  background:var(--accent-12);
  color:var(--accent-dark);
  font-weight:600;
}

.route-table .type-tag.is-direct{
  background:var(--success-10);
  color:var(--success);
}

.route-table .media-cell{
  white-space:nowrap;
  color:var(--text-muted);
  font-size:12.5px;
}

/* --------------------------------------------------------------------------
   平台卡
   -------------------------------------------------------------------------- */

.platform-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(154px,1fr));
  gap:12px;
}

.platform-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  padding:18px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card);
}

.platform-card .pi-box{
  width:34px;
  height:34px;
  border-radius:var(--radius-sm);
}

.platform-card .pi-box svg{
  width:18px;
  height:18px;
}

.platform-name{
  font-size:14px;
  font-weight:700;
  color:var(--text);
}

.platform-note{
  font-size:11.5px;
  line-height:1.55;
  color:var(--text-muted);
}

.platform-card .btn,
.platform-card .btn-ghost,
.platform-card .btn-outline{
  margin-top:auto;
  width:100%;
  flex-shrink:0;
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   文章卡 / 博客列表
   -------------------------------------------------------------------------- */

.post-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.post-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:20px 18px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card);
  text-decoration:none;
  color:inherit;
  transition:border-color .16s ease, transform .16s ease;
}

.post-card:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
}

.post-tag{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  max-width:100%;
  overflow:hidden;
  padding:3px 9px;
  border-radius:var(--radius-pill);
  background:var(--accent-08);
  font-size:11px;
  font-weight:600;
  color:var(--accent-dark);
  white-space:nowrap;
}

.post-title{
  margin:10px 0 8px;
  font-size:16px;
  font-weight:700;
  line-height:1.42;
  color:var(--text);
  overflow-wrap:anywhere;
}

.post-summary{
  margin:0 0 14px;
  font-size:13px;
  line-height:1.7;
  color:var(--text-muted);
}

.post-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  margin-top:auto;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-muted);
}

.post-meta .dot{
  width:3px;
  height:3px;
  flex:none;
  border-radius:50%;
  background:var(--text-muted);
  opacity:.6;
}

.tag-filter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 24px;
  padding:0;
  list-style:none;
}

/* 博客刊头(居中庄重) */
.blog-masthead{
  padding-top:56px;
  padding-bottom:38px;
  text-align:center;
}

.masthead-kicker{
  display:block;
  margin:0 0 12px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.masthead-title{
  margin:0 auto;
  max-width:22ch;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(28px, 3.4vw, 44px);
  line-height:1.14;
  letter-spacing:-.025em;
  color:var(--text);
  text-wrap:balance;
}

.masthead-rule{
  width:3.6em;
  height:3px;
  margin:20px auto 0;
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--accent), var(--accent-rose));
}

.masthead-sub{
  margin:16px auto 0;
  max-width:56ch;
  font-size:15px;
  line-height:1.72;
  color:var(--text-muted);
}

.masthead-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px 12px;
  margin:18px 0 0;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--text-muted);
}

.masthead-meta .dot{
  width:3px;
  height:3px;
  flex:none;
  border-radius:50%;
  background:var(--text-muted);
  opacity:.6;
}

/* --------------------------------------------------------------------------
   正文排版与引用块
   -------------------------------------------------------------------------- */

.prose{
  max-width:72ch;
  font-size:15.5px;
  line-height:1.82;
  color:var(--text);
}

.prose > *{min-width:0;}

.prose h2{
  margin:40px 0 14px;
  font-size:clamp(21px, 2.2vw, 27px);
}

.prose h3{
  margin:28px 0 10px;
  font-size:18px;
}

.prose ul,
.prose ol{
  margin:0 0 1.1em;
  padding-left:1.35em;
  list-style:disc;
}

.prose ol{list-style:decimal;}

.prose li{margin:0 0 .45em;}

.prose a{
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}

.prose blockquote{
  margin:22px 0;
  padding:12px 18px;
  border-left:3px solid var(--accent);
  background:var(--bg-panel-2);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--text-muted);
}

.prose img{border-radius:var(--radius-sm);}

.callout{
  display:flex;
  gap:12px;
  margin:22px 0;
  padding:14px 16px;
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);
  background:var(--bg-panel-2);
  font-size:14px;
  line-height:1.72;
  color:var(--text-muted);
}

.callout-title{
  display:block;
  margin-bottom:4px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-dark);
}

.callout--warn{border-left-color:var(--warn);}
.callout--warn .callout-title{color:var(--warn);}
.callout--ok{border-left-color:var(--success);}
.callout--ok .callout-title{color:var(--success);}

/* 步骤列表(教程页) */
.steps{
  counter-reset:step;
  margin:0;
  padding:0;
  list-style:none;
}

.steps > li{
  position:relative;
  min-width:0;
  margin:0 0 18px;
  padding:16px 18px 16px 56px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-panel);
}

.steps > li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;
  top:16px;
  left:16px;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--accent);
  color:var(--bg-top);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
}

.steps h3{margin:0 0 8px;}

/* --------------------------------------------------------------------------
   文末推广块(博客文章页 / 长文末尾)
   -------------------------------------------------------------------------- */

.promo-block{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px;
  margin:36px 0 0;
  padding:24px 22px;
  border-radius:var(--radius-lg);
  background:linear-gradient(150deg, var(--accent) 0%, var(--accent-rose) 100%);
  color:var(--bg-top);
  box-shadow:var(--shadow-window);
}

.promo-copy{
  flex:1 1 240px;
  min-width:0;
}

.promo-brand{
  display:block;
  margin-bottom:6px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--on-ink-78);
}

.promo-title{
  margin:0;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:800;
  line-height:1.35;
  color:var(--bg-top);
}

.promo-text{
  margin:6px 0 0;
  font-size:13px;
  line-height:1.7;
  color:var(--on-ink-78);
}

.promo-block .btn,
.promo-block .btn-primary,
.promo-block .btn-ghost,
.promo-block .btn-outline{
  flex-shrink:0;
  white-space:nowrap;
}

.promo-block .btn-primary{
  background:var(--bg-top);
  color:var(--accent-dark);
  box-shadow:none;
}

.promo-block .btn-primary:hover{
  background:var(--bg-panel-2);
  color:var(--accent-dark);
}

/* --------------------------------------------------------------------------
   卖点区:索引册跨页(左胶囊栏 + 右详情面板 + 事实带)
   -------------------------------------------------------------------------- */

.feature-book{
  display:grid;
  grid-template-columns:minmax(0,264px) minmax(0,1fr);
  min-width:0;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-panel);
  box-shadow:var(--shadow-window), 0 1px 0 var(--white-14) inset;
  overflow:hidden;
}

.feature-rail{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  padding:18px 16px;
  border-right:1px dashed var(--border);
  background:linear-gradient(180deg, var(--bg-panel-2), var(--bg-panel));
}

.feature-rail .rail-label{
  display:block;
  margin:0 0 8px;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.feature-tab{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  min-height:44px;
  padding:9px 12px;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  background:transparent;
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:500;
  text-align:left;
  color:var(--text-muted);
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease;
}

.feature-tab svg{
  width:15px;
  height:15px;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.feature-tab:hover{
  background:var(--accent-08);
  color:var(--text);
}

.feature-tab[aria-selected="true"]{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--bg-top);
  font-weight:600;
  box-shadow:0 10px 20px -12px var(--accent-45);
}

.feature-panel{
  min-width:0;
  padding:26px 28px 24px;
}

.feature-panel h3{
  margin:0 0 10px;
  font-size:21px;
}

.feature-panel p{
  margin:0 0 14px;
  font-size:14.5px;
  line-height:1.8;
  color:var(--text-muted);
}

.feature-foot{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:16px 0 0;
  padding:14px 0 0;
  border-top:1px dashed var(--border);
  list-style:none;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--text-muted);
}

.feature-foot li{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.feature-foot li::before{
  content:"";
  width:4px;
  height:4px;
  flex:none;
  border-radius:50%;
  background:var(--accent);
  opacity:.6;
}

.fact-band{
  display:flex;
  flex-wrap:wrap;
  gap:10px 34px;
  margin:18px 0 0;
  padding:14px 18px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-panel-2);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.02em;
  color:var(--text-muted);
}

.fact-band b{
  color:var(--accent-dark);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------------------
   预览页专用示例排版(design-preview.html 使用)
   -------------------------------------------------------------------------- */

.swatch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:12px;
}

.swatch{
  min-width:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-panel);
}

.swatch-chip{
  display:block;
  height:62px;
  border-bottom:1px solid var(--border);
}

.swatch-meta{
  display:block;
  padding:9px 11px;
}

.swatch-name{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--text);
}

.swatch-var{
  display:block;
  margin-top:2px;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--text-muted);
  overflow-wrap:anywhere;
}

.type-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.type-row{
  display:grid;
  grid-template-columns:minmax(0,96px) minmax(0,1fr);
  gap:16px;
  align-items:baseline;
  padding-bottom:14px;
  border-bottom:1px dashed var(--border);
}

.type-row:last-child{border-bottom:0;padding-bottom:0;}

.type-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.type-sample{
  min-width:0;
  margin:0;
  overflow-wrap:anywhere;
}

.demo-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.demo-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.demo-note{
  margin:10px 0 0;
  font-size:12px;
  line-height:1.7;
  color:var(--text-muted);
}

.demo-block{
  min-width:0;
  padding:18px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-panel);
}

.preview-caption{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
}

/* --------------------------------------------------------------------------
   组件响应式
   -------------------------------------------------------------------------- */

@media (max-width:1040px){
  .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .feature-book{grid-template-columns:minmax(0,1fr);}
  .feature-rail{
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-right:0;
    border-bottom:1px dashed var(--border);
    padding:12px;
  }
  .feature-rail .rail-label{display:none;}
  .feature-tab{width:auto;flex:none;}
}

@media (max-width:768px){
  .type-row{grid-template-columns:minmax(0,1fr);gap:6px;}
  .plan-amount{font-size:30px;}
  .feature-panel{padding:20px 18px;}
  .promo-block{padding:20px 18px;}
  .traffic-grid{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:640px){
  .plan-grid{grid-template-columns:minmax(0,1fr);}
  .post-grid{grid-template-columns:minmax(0,1fr);}
  .tablist{width:100%;border-radius:var(--radius-sm);}
  .tab{padding:6px 12px;font-size:12.5px;}
  .faq-item summary{font-size:14px;padding:13px 14px;}
  .faq-a{padding:0 14px 14px;font-size:13.5px;}
  .toc-tabs{top:8px;}
  body:has(.toc-tabs) section[id],
  body:has(.toc-tabs) [id^="sec-"]{scroll-margin-top:84px;}
  .data-table th,
  .data-table td{padding:10px 12px;}
  .steps > li{padding:14px 14px 14px 50px;}
  .steps > li::before{left:14px;top:14px;width:24px;height:24px;font-size:12px;}
  .masthead-title{font-size:26px;}
}