/* =========================================================================
   VPNWu — components.css
   跨页面组件：页面头 / tab / 目录条 / FAQ / 套餐卡 / 表格 / 平台卡 /
   文章卡 / callout / 文末推广块 / 深色卖点面板 / CTA 横带 / 步骤列表 /
   正文排版 / 设计预览专用示例类
   ========================================================================= */

/* --------------------------------------------------------------- 页面标题区 */
.page-head{padding-top:44px;padding-bottom:8px}
.page-head .kicker{margin-bottom:6px}
.page-title{
  margin-top:8px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(30px,3.4vw,44px);
  line-height:1.16;
  letter-spacing:-.02em;
  color:var(--ink);
  text-wrap:balance;
}
.page-lede{margin-top:14px;max-width:720px;font-size:16.5px;line-height:1.78;color:var(--muted)}
.page-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted);padding-top:20px}
.breadcrumb a{display:inline-flex;align-items:center;min-height:24px;color:var(--muted)}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb .sep{color:var(--border-strong)}

/* ------------------------------------------------------------------- tabs */
.tabs{display:flex;flex-direction:column;gap:20px;min-width:0}
.tablist{
  display:inline-flex;flex-wrap:wrap;gap:4px;
  padding:4px;max-width:100%;
  background:var(--bg-panel-2);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
}
.tab{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:8px 18px;
  border:1px solid transparent;border-radius:var(--r-pill);
  background:transparent;
  font-size:14.5px;font-weight:600;color:var(--muted);
  white-space:nowrap;cursor:pointer;
  transition:background-color .18s,color .18s,box-shadow .18s;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{
  background:var(--bg-panel);color:var(--ink);
  box-shadow:var(--shadow-card);
}
.tab-panel{min-width:0}
.tab-panel[hidden]{display:none}

/* --------------------------------------------------------- 目录条（toc） */
.toc-tabs{
  position:sticky;
  top:calc(var(--header-h) + 8px);
  z-index:40;
  display:flex;gap:6px;
  overflow-x:auto;
  padding:8px;
  margin:0 0 26px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.toc-tabs a{
  flex:none;
  display:inline-flex;align-items:center;
  min-height:36px;padding:6px 14px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  font-size:14px;color:var(--muted);white-space:nowrap;
  transition:background-color .16s,color .16s,border-color .16s;
}
.toc-tabs a:hover{color:var(--ink);background:var(--bg-panel-2)}
.toc-tabs a.is-current{
  color:var(--ink);font-weight:650;
  background:var(--accent-wash);
  border-color:var(--accent-wash-2);
}
body:has(.toc-tabs) section[id],
body:has(.toc-tabs) [id].anchor-target{scroll-margin-top:var(--toc-offset)}

/* -------------------------------------------------------------------- FAQ */
.faq{
  display:grid;gap:0;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.faq-item{border-bottom:1px solid var(--border-soft)}
.faq-item:last-child{border-bottom:0}
.faq-item summary{
  display:flex;align-items:center;gap:12px;
  min-height:56px;padding:14px 20px;
  font-size:16px;font-weight:600;color:var(--ink);
  cursor:pointer;list-style:none;
  transition:background-color .16s;
}
.faq-item summary:hover{background:var(--bg-panel-2)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";flex:none;margin-left:auto;
  width:9px;height:9px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq-item[open] summary{background:var(--accent-wash)}
.faq-body{padding:2px 20px 20px;font-size:15.5px;line-height:1.8;color:var(--muted)}
.faq-body p + p{margin-top:10px}
.faq-body a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:.18em}
.faq-group + .faq-group{margin-top:32px}
.faq-group-title{
  font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--accent-dark);
  margin-bottom:12px;
}

/* --------------------------------------------------------------- 套餐卡片 */
.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:26px 22px 22px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.plan-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-panel)}
.plan-card.is-featured{
  border-color:var(--accent);
  box-shadow:0 20px 44px -28px var(--honey-shadow),0 2px 6px -4px var(--ink-shadow);
}
.plan-card.is-current{
  border-color:var(--ink);
  box-shadow:0 0 0 1px var(--ink) inset,var(--shadow-card);
}
.plan-badge{
  position:absolute;top:-11px;left:20px;
  display:inline-flex;align-items:center;
  min-height:22px;padding:2px 10px;
  border-radius:var(--r-pill);
  background:var(--accent);color:var(--ink-deep);
  font-size:11.5px;font-weight:800;letter-spacing:.04em;
  box-shadow:0 8px 16px -10px var(--honey-shadow);
}
.plan-name{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:-.01em}
.plan-desc{margin-top:4px;font-size:13px;color:var(--muted)}
.plan-price{
  display:flex;align-items:baseline;gap:5px;
  margin-top:14px;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
}
.plan-price .num{font-size:36px;font-weight:700;letter-spacing:-.02em;line-height:1}
.plan-price .cur{font-size:16px;font-weight:600;color:var(--ink)}
.plan-price .unit{font-size:13px;color:var(--muted)}
.plan-traffic{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:12px;padding:4px 10px;
  border-radius:var(--r-pill);
  background:var(--accent-wash);
  font-size:12.5px;font-weight:600;color:var(--accent-dark);
}
.plan-list{margin-top:16px;display:grid;gap:9px;font-size:14px;line-height:1.6;color:var(--muted)}
.plan-list li{display:flex;align-items:flex-start;gap:8px}
.plan-list .tick{margin-top:4px}
.plan-cta{margin-top:auto;padding-top:20px}
.plan-cta .btn{width:100%}
.plan-note{margin-top:10px;font-size:12px;color:var(--muted);text-align:center}

/* 流量包 */
.pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pack-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-width:0;padding:16px 18px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
}
.pack-gb{font-family:var(--font-mono);font-size:17px;font-weight:700;letter-spacing:-.01em}
.pack-price{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--accent-dark)}

/* ----------------------------------------------------------------- 表格 */
.table-scroll{
  overflow-x:auto;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
}
.data-table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:14.5px;
  color:var(--ink);
}
.data-table caption{
  caption-side:top;
  padding:12px 14px;
  font-size:13px;color:var(--muted);text-align:left;
}
.data-table th{
  padding:12px 14px;
  background:var(--bg-panel-2);
  color:var(--ink);
  font-weight:700;font-size:13.5px;letter-spacing:.02em;
  text-align:left;white-space:nowrap;
  word-break:keep-all;
  border-bottom:1px solid var(--border);
}
.data-table td{
  padding:12px 14px;
  border-bottom:1px solid var(--border-soft);
  vertical-align:top;
  word-break:keep-all;
}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:var(--accent-wash)}
.data-table .cell-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:13.5px}
.data-table .cell-strong{font-weight:650}
.table-note{margin-top:10px;font-size:13px;color:var(--muted)}
.table-flag{display:inline-flex;align-items:center;gap:8px;min-width:0}
.table-flag .flag{width:20px;height:14px}

/* 文章正文里的裸表格防御 */
.prose > .data-table{
  display:block;
  overflow-x:auto;
  max-width:100%;
  min-width:0;
  -webkit-overflow-scrolling:touch;
}

/* ------------------------------------------------------------- 平台卡片 */
.platform-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.platform-card{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  min-width:0;padding:22px 14px 18px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  text-align:center;
  transition:transform .18s ease,box-shadow .18s ease;
}
.platform-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-panel)}
.platform-card .ico{width:26px;height:26px;color:var(--ink)}
.platform-card h3{font-size:15px;font-weight:700}
.platform-card p{font-size:12.5px;line-height:1.55;color:var(--muted)}
.platform-card .btn{margin-top:auto;width:100%}
.platform-card .btn-plat{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;min-height:38px;padding:0 12px;
  border-radius:var(--r-sm);
  border:1px solid var(--border-strong);
  font-size:13.5px;font-weight:600;color:var(--ink);
  background:transparent;white-space:nowrap;
  transition:background-color .16s,border-color .16s,color .16s;
}
.platform-card .btn-plat:hover{background:var(--ink);border-color:var(--ink);color:var(--bg-panel)}

/* --------------------------------------------------------------- 文章卡片 */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.post-card{
  display:flex;flex-direction:column;min-width:0;
  padding:20px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  transition:transform .18s ease,box-shadow .18s ease;
}
.post-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-panel)}
.post-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px;color:var(--muted)}
.tag-chip{
  display:inline-flex;align-items:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-height:22px;padding:2px 9px;
  border-radius:var(--r-pill);
  font-size:12px;font-weight:650;letter-spacing:.02em;
  color:var(--accent-dark);background:var(--accent-wash);
  border:1px solid var(--accent-wash-2);
}
.post-date{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.post-title{margin-top:12px;font-size:17px;font-weight:700;line-height:1.45;letter-spacing:-.01em}
.post-title a{display:block}
.post-title a:hover{color:var(--accent-dark)}
.post-summary{margin-top:8px;font-size:14px;line-height:1.7;color:var(--muted)}
.post-more{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:16px;padding-block:9px;
  border-top:1px solid var(--border-soft);
  font-size:13.5px;font-weight:650;color:var(--ink);
}
.post-more:hover{color:var(--accent-dark)}
.post-more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 博客列表页 hero 卡（左侧竖色条） */
.post-hero{
  position:relative;
  display:grid;gap:12px;
  padding:28px 30px 28px 36px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}
.post-hero::before{
  content:"";position:absolute;
  left:16px;top:22px;bottom:22px;width:4px;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--accent),var(--accent-dark));
}
.post-hero .post-title{font-size:clamp(22px,2.4vw,30px);line-height:1.3;margin-top:0}
.post-hero .post-summary{font-size:15.5px;max-width:760px}

/* ----------------------------------------------------------------- callout */
.callout{
  display:grid;gap:8px;
  padding:16px 18px;
  background:var(--accent-wash);
  border:1px solid var(--accent-wash-2);
  border-left:3px solid var(--accent);
  border-radius:var(--r-md);
  font-size:15px;line-height:1.75;color:var(--ink);
}
.callout p{color:var(--ink)}
.callout .callout-title{font-weight:700;font-size:14.5px}
.callout--muted{background:var(--bg-panel-2);border-color:var(--border);border-left-color:var(--border-strong)}
.callout--warn{background:var(--warn-wash);border-color:transparent;border-left-color:var(--warn)}

/* ------------------------------------------------------------ 文末推广块 */
.promo-block{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;
  margin-top:40px;padding:22px 24px;
  background:var(--bg-panel-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
}
.promo-brand{
  font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.01em;
  flex:none;
}
.promo-text{flex:1 1 260px;min-width:0;font-size:14.5px;line-height:1.7;color:var(--muted)}
.promo-block .btn,
.promo-block .btn-secondary,
.promo-block .btn-ghost{flex-shrink:0;white-space:nowrap}

/* --------------------------------------------------- 深色卖点面板（tab 详情） */
.feature-panel{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:30px;
  padding:32px;
  background:var(--ink-deep);
  color:var(--on-dark);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-dark);
  overflow:hidden;
}
.feature-panel::after{
  content:"";position:absolute;right:-140px;bottom:-170px;
  width:420px;height:420px;border-radius:50%;
  border:1px dashed var(--on-dark-line);
  pointer-events:none;
}
.feature-nav{
  position:relative;z-index:1;
  display:grid;gap:2px;align-content:start;min-width:0;
}
.feature-item{
  display:flex;align-items:center;gap:12px;
  width:100%;min-height:48px;padding:10px 12px;
  border:0;border-left:2px solid transparent;
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:transparent;
  color:var(--on-dark-muted);
  font-size:15px;font-weight:600;text-align:left;
  cursor:pointer;
  transition:background-color .18s,color .18s,border-color .18s;
}
.feature-item:hover{background:var(--on-dark-fill);color:var(--on-dark)}
.feature-item[aria-selected="true"]{
  border-left-color:var(--accent);
  background:var(--on-dark-fill);
  color:var(--on-dark);
}
.feature-dot{width:7px;height:7px;border-radius:50%;flex:none}
.fd-success{background:var(--success);box-shadow:0 0 0 3px rgba(46,125,79,.22)}
.fd-warn{background:var(--warn);box-shadow:0 0 0 3px rgba(194,118,26,.22)}
.fd-accent{background:var(--accent);box-shadow:0 0 0 3px var(--accent-wash-2)}
.fd-error{background:var(--error);box-shadow:0 0 0 3px rgba(190,58,43,.22)}
.feature-num{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;
  color:var(--on-dark-muted);flex:none;
}
.feature-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feature-body{position:relative;z-index:1;min-width:0}
.feature-body h3{color:var(--on-dark);font-size:clamp(20px,2vw,26px);line-height:1.3;letter-spacing:-.01em}
.feature-body p{margin-top:12px;font-size:15.5px;line-height:1.8;color:var(--on-dark-muted);max-width:640px}
.feature-body .chip{
  height:22px;padding:0 10px;font-size:11px;
  color:var(--on-dark);background:var(--on-dark-fill-2);border:1px solid var(--on-dark-line);
}
.feature-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.feature-facts{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--on-dark-line);
}
.feature-fact{display:flex;flex-direction:column;gap:2px;min-width:0}
.feature-fact .num{
  font-family:var(--font-mono);font-size:19px;font-weight:700;color:var(--accent);
  letter-spacing:-.02em;line-height:1.2;
}
.feature-fact .lbl{font-size:12px;color:var(--on-dark-muted);letter-spacing:.04em}
.dark-note{
  position:absolute;z-index:1;
  font-family:var(--font-hand);font-style:italic;
  font-size:20px;color:var(--accent);
  rotate:-6deg;pointer-events:none;
  -webkit-user-select:none;user-select:none;
}

/* --------------------------------------------------------------- CTA 横带 */
.cta-band{
  position:relative;
  display:flex;flex-wrap:wrap;align-items:center;gap:24px;
  padding:44px 40px;
  background:var(--ink-deep);
  color:var(--on-dark);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-dark);
  overflow:hidden;
}
.cta-band::after{
  content:"";position:absolute;left:-120px;top:-140px;
  width:360px;height:360px;border-radius:50%;
  border:1px dashed var(--on-dark-line);
  pointer-events:none;
}
.cta-band-copy{position:relative;z-index:1;flex:1 1 320px;min-width:0}
.cta-band h2{
  color:var(--on-dark);
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.24;letter-spacing:-.02em;
}
.cta-band p{margin-top:10px;font-size:15.5px;line-height:1.75;color:var(--on-dark-muted);max-width:560px}
.cta-band-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:14px;flex:none}
.cta-band .btn-primary{background:var(--accent);color:var(--ink-deep);box-shadow:var(--shadow-note)}
.cta-band .btn-ghost{border-color:var(--on-dark-line);color:var(--on-dark)}
.cta-band .btn-ghost:hover{background:var(--on-dark-fill);border-color:var(--on-dark)}

/* ------------------------------------------------------------- 步骤列表 */
.steps{display:grid;gap:22px;counter-reset:step}
.steps > li{
  position:relative;
  padding-left:52px;
  counter-increment:step;
  min-width:0;
}
.steps > li::before{
  content:counter(step);
  position:absolute;left:0;top:0;
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  border-radius:50%;
  background:var(--accent-wash);
  border:1px solid var(--accent-wash-2);
  color:var(--accent-dark);
  font-family:var(--font-mono);font-size:14px;font-weight:700;
}
.steps h3{font-size:17px;margin-bottom:6px}
.steps p{font-size:15px;line-height:1.78;color:var(--muted)}
.steps p + p{margin-top:8px}

/* ------------------------------------------------------------ 正文排版 */
.prose{
  max-width:760px;
  font-size:17px;line-height:1.82;color:var(--ink);
  min-width:0;
}
.prose > * + *{margin-top:1.05em}
.prose h2{
  margin-top:2.1em;
  font-size:clamp(22px,2.2vw,28px);
  line-height:1.32;letter-spacing:-.02em;
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.prose h3{
  margin-top:1.7em;
  font-size:19px;line-height:1.45;
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.prose h2 + p,.prose h3 + p{margin-top:.7em}
.prose ul,.prose ol{padding-left:1.35em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li + li{margin-top:.42em}
.prose a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:.18em}
.prose a:hover{color:var(--ink)}
.prose code{
  font-size:.9em;
  padding:.1em .38em;
  background:var(--bg-panel-2);
  border:1px solid var(--border-soft);
  border-radius:var(--r-xs);
  overflow-wrap:anywhere;
}
.prose pre{
  padding:16px 18px;
  background:var(--ink-deep);
  color:var(--on-dark);
  border-radius:var(--r-md);
  overflow-x:auto;
}
.prose pre code{background:transparent;border:0;padding:0;color:inherit}
.prose blockquote{
  padding:14px 18px;
  border-left:3px solid var(--accent);
  background:var(--bg-panel-2);
  border-radius:0 var(--r-md) var(--r-md) 0;
  color:var(--muted);
}
.prose img{border-radius:var(--r-md);border:1px solid var(--border)}
.prose figure figcaption{margin-top:8px;font-size:13px;color:var(--muted)}

/* -------------------------------------------------- 设计预览页专用示例类 */
.preview-section{
  padding-top:56px;padding-bottom:56px;
  border-top:1px solid var(--border);
}
.preview-section:first-of-type{border-top:0}
.preview-head{margin-bottom:26px;max-width:720px}
.preview-title{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(22px,2.2vw,28px);line-height:1.3;letter-spacing:-.02em;
}
.preview-note{margin-top:8px;font-size:14px;line-height:1.7;color:var(--muted)}
.preview-note code{font-size:12.5px}

.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.swatch{
  display:grid;gap:8px;min-width:0;
  padding:12px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
}
.swatch-chip{
  height:52px;border-radius:var(--r-sm);
  border:1px solid var(--border);
}
.swatch-meta{display:grid;gap:2px;min-width:0}
.swatch-name{
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--ink);
  overflow-wrap:anywhere;
}
.swatch-val{font-family:var(--font-mono);font-size:11px;color:var(--muted);overflow-wrap:anywhere}

.type-spec{display:grid;gap:18px}
.spec-row{
  display:grid;grid-template-columns:minmax(0,1fr) 148px;
  gap:18px;align-items:baseline;
  padding-bottom:14px;
  border-bottom:1px dashed var(--border);
}
.spec-row:last-child{border-bottom:0;padding-bottom:0}
.spec-sample{min-width:0;color:var(--ink)}
.spec-label{
  font-family:var(--font-mono);font-size:11.5px;line-height:1.6;
  color:var(--muted);text-align:right;
}
.demo-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.demo-block{
  min-width:0;padding:18px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
}
.demo-caption{margin-top:10px;font-size:12.5px;color:var(--muted)}
.grid-demo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.grid-demo-cell{
  display:flex;align-items:center;justify-content:center;
  min-height:84px;padding:12px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  font-family:var(--font-mono);font-size:12px;color:var(--muted);
  text-align:center;
}
.ds-note{
  display:flex;gap:10px;align-items:flex-start;
  padding:14px 16px;margin-bottom:22px;
  background:var(--bg-panel-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  font-size:14px;line-height:1.7;color:var(--muted);
}
.ds-note .dot-mark{margin-top:8px}

/* ------------------------------------------------------------- 通用小工具 */
.stack{display:grid;gap:16px;min-width:0}
.cluster{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.center{text-align:center}
.mt-0{margin-top:0}
.mt-sm{margin-top:12px}
.mt-md{margin-top:24px}
.mt-lg{margin-top:36px}

/* ------------------------------------------------------------- 响应式 */
@media (max-width:1180px){
  .platform-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .feature-panel{grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:24px;padding:28px}
}

@media (max-width:980px){
  .plan-grid{grid-template-columns:minmax(0,1fr)}
  .pack-grid{grid-template-columns:minmax(0,1fr)}
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-panel{grid-template-columns:minmax(0,1fr);gap:20px;padding:24px}
  .feature-nav{
    grid-auto-flow:row;gap:2px;
    padding-bottom:8px;border-bottom:1px solid var(--on-dark-line);
  }
  .cta-band{padding:32px 26px}
  .grid-demo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .spec-label{text-align:left}
}

@media (max-width:640px){
  .platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-grid{grid-template-columns:minmax(0,1fr)}
  .post-hero{padding:22px 18px 22px 32px}
  .post-hero::before{left:13px;top:18px;bottom:18px;width:3px}
  .feature-panel{padding:20px 16px;border-radius:var(--r-lg)}
  .feature-item{min-height:48px;font-size:14.5px}
  .feature-name{white-space:normal;overflow:visible;text-overflow:clip}
  .cta-band{padding:26px 20px;border-radius:var(--r-lg)}
  .dark-note{display:none}
  .toc-tabs{top:calc(var(--header-h) + 4px)}
  .steps > li{padding-left:44px}
  .steps > li::before{width:30px;height:30px;font-size:13px}
  .promo-block{padding:18px}
  .grid-demo{grid-template-columns:minmax(0,1fr)}
  .swatch-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
}