/* ==========================================================================
   VPNBF — components.css
   跨页面组件:tab / toc / FAQ / 套餐卡 / 线路表 / 平台卡 / 文章卡 /
   callout / 文末推广块 / 演示页样例样式
   ========================================================================== */

/* ============================ Tab 切换 ============================ */

.tabs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:6px;
  background:rgba(var(--paper-rgb),.72);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  box-shadow:var(--highlight);
  width:max-content;max-width:100%;
}
.tabs [role="tab"]{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:40px;padding:0 20px;border-radius:var(--r-pill);
  font-size:14px;color:var(--text-muted);
  transition:background .15s,color .15s;
  white-space:nowrap;
}
.tabs [role="tab"]:hover{color:var(--text)}
.tabs [role="tab"][aria-selected="true"]{
  background:var(--accent);color:var(--bg-panel);
  box-shadow:0 10px 20px -12px rgba(var(--ink-rgb),.5);
}
.tabs [role="tab"] svg{width:15px;height:15px;flex:none}
.tabpanel{min-width:0}
.tabpanel[hidden]{display:none}

/* ============================ 章节目录条 ============================ */

.toc-tabs{
  position:sticky;top:calc(var(--header-h) + 8px);
  z-index:12;
  display:flex;align-items:center;gap:8px;
  margin-bottom:28px;
  padding:6px;
  background:rgba(var(--paper-bg,255,252,248),.92);
  background:rgba(var(--paper-rgb),.92);
  backdrop-filter:blur(10px);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  box-shadow:var(--highlight),0 12px 24px -18px rgba(var(--ink-rgb),.2);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  scrollbar-width:none;
}
.toc-tabs::-webkit-scrollbar{display:none}
.toc-tabs a{
  display:inline-flex;align-items:center;
  min-height:38px;padding:0 16px;border-radius:var(--r-pill);
  font-size:13.5px;color:var(--text-muted);white-space:nowrap;
  transition:background .15s,color .15s;
  flex:none;
}
.toc-tabs a:hover{color:var(--text);background:var(--bg-panel2)}
.toc-tabs a.is-current{
  background:var(--accent);color:var(--bg-panel);
}

/* 锚点落点避开吸顶条 */
body:has(.toc-tabs) section[id]{scroll-margin-top:calc(var(--header-h) + 78px)}
body:has(.toc-tabs) h2[id]{scroll-margin-top:calc(var(--header-h) + 78px)}

/* ============================ FAQ 折叠 ============================ */

.faq-list{display:flex;flex-direction:column;gap:10px;min-width:0}
.faq-item{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--highlight);
  overflow:hidden;
  min-width:0;
}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:56px;padding:16px 20px;
  font-size:15.5px;font-weight:500;color:var(--text);
  cursor:pointer;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";flex:none;
  width:9px;height:9px;
  border-right:1.6px solid var(--text-muted);
  border-bottom:1.6px solid var(--text-muted);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s;
}
.faq-item[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq-item[open] summary{color:var(--accent)}
.faq-body{
  padding:0 20px 20px;
  font-size:14.5px;line-height:1.75;color:var(--text-muted);
}
.faq-body p + p{margin-top:10px}
.faq-body strong{color:var(--text);font-weight:600}

/* ============================ 套餐卡片 ============================ */

.plan-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
  min-width:0;
}
.plan-card{
  position:relative;
  display:flex;flex-direction:column;gap:18px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--highlight),var(--shadow-card);
  padding:26px 24px 24px;
  min-width:0;
  transition:transform .18s,box-shadow .18s;
}
.plan-card:hover{transform:translateY(-2px);box-shadow:var(--highlight),var(--shadow-float)}
.plan-card.is-current{
  border-color:rgba(var(--ink-rgb),.35);
  box-shadow:var(--highlight),0 0 0 1px rgba(var(--ink-rgb),.12),var(--shadow-float);
}
.plan-badge{
  position:absolute;top:-12px;left:24px;
  display:inline-flex;align-items:center;gap:6px;
  min-height:26px;padding:2px 12px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--bg-panel);
  font-size:12px;font-weight:500;letter-spacing:.03em;
  box-shadow:0 10px 18px -10px rgba(var(--ink-rgb),.5);
}
.plan-badge svg{width:12px;height:12px;flex:none}
.plan-name{font-family:var(--font-display);font-size:22px;letter-spacing:-.01em}
.plan-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.plan-price b{font-family:var(--font-mono);font-size:38px;font-weight:500;letter-spacing:-.03em;line-height:1}
.plan-price span{font-size:13.5px;color:var(--text-muted)}
.plan-quota{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:13px;color:var(--accent);
  padding:6px 12px;border-radius:var(--r-pill);
  background:var(--bg-panel2);border:1px solid var(--border);
  width:max-content;max-width:100%;
}
.plan-list{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--text-muted)}
.plan-list li{display:flex;align-items:flex-start;gap:9px;line-height:1.55}
.plan-list svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--success)}
.plan-card .btn{margin-top:auto}
.plan-note{
  font-size:12.5px;color:var(--text-muted);line-height:1.6;
  padding-top:14px;border-top:1px dashed var(--border);
}

/* 流量包 */
.pack-row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;min-width:0;
}
.pack-card{
  display:flex;flex-direction:column;gap:10px;
  background:var(--bg-panel2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:20px;
  min-width:0;
}
.pack-card b{font-family:var(--font-mono);font-size:24px;font-weight:500;letter-spacing:-.02em}
.pack-card span{font-size:13px;color:var(--text-muted)}

/* ============================ 表格(窄屏横滑) ============================ */

.table-scroll{
  overflow-x:auto;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--bg-panel);
  box-shadow:var(--highlight);
}
.table-scroll > table{min-width:640px;width:100%}
.table-scroll th,.table-scroll td{
  padding:13px 16px;
  text-align:left;
  font-size:14px;
  border-bottom:1px solid var(--border);
  color:var(--text);
  word-break:keep-all;
}
.table-scroll th{
  font-family:var(--font-body);font-size:12.5px;font-weight:600;
  letter-spacing:.06em;color:var(--text-muted);
  background:var(--bg-panel2);
  white-space:nowrap;
  position:sticky;top:0;
}
.table-scroll td:first-child{font-weight:500}
.table-scroll tbody tr:last-child td{border-bottom:0}
.table-scroll tbody tr:hover td{background:rgba(var(--paper-rgb),.6)}

/* 博客文章可能输出裸表格:自带横滑容器 */
.prose > .data-table,
.prose > table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  min-width:0;
}
.prose table{min-width:560px;width:100%;border:1px solid var(--border);border-radius:var(--r-md)}
.prose th,.prose td{
  padding:11px 14px;font-size:13.5px;text-align:left;
  border-bottom:1px solid var(--border);word-break:keep-all;
}
.prose th{background:var(--bg-panel2);color:var(--text-muted);font-weight:600;white-space:nowrap}

/* 线路表首列的组合单元 */
.line-cell{display:flex;align-items:center;gap:10px;white-space:nowrap}
.line-cell svg{width:20px;height:20px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(var(--ink-rgb),.08)}
.type-cell{font-family:var(--font-mono);font-size:12.5px;color:var(--text-muted)}
.stream-cell{display:flex;flex-wrap:wrap;gap:6px}

/* ============================ 平台卡片 ============================ */

.platform-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;min-width:0;
}
.platform-card{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--highlight);
  padding:22px 14px;
  text-align:center;
  min-width:0;
  transition:transform .18s,box-shadow .18s;
}
.platform-card:hover{transform:translateY(-2px);box-shadow:var(--highlight),var(--shadow-card)}
.platform-card .pc-icon{
  width:44px;height:44px;border-radius:var(--r-md);
  display:grid;place-items:center;
  background:var(--bg-panel2);color:var(--accent);
}
.platform-card .pc-icon svg{width:24px;height:24px}
.platform-card b{font-size:14.5px;font-weight:600}
.platform-card span{font-size:12.5px;color:var(--text-muted);line-height:1.5}

/* ============================ 博客文章卡 ============================ */

.post-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;min-width:0;
}
.post-card{
  display:flex;flex-direction:column;gap:12px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--highlight),var(--shadow-card);
  padding:24px;
  min-width:0;
  transition:transform .18s,box-shadow .18s;
}
.post-card:hover{transform:translateY(-2px);box-shadow:var(--highlight),var(--shadow-float)}
.post-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--text-muted);
}
.post-meta time{font-family:var(--font-mono);font-size:12px}
.post-card h3{font-size:19px;line-height:1.4}
.post-card h3 a:hover{color:var(--accent)}
.post-card p{font-size:14px;color:var(--text-muted);line-height:1.65}
.post-more{
  margin-top:auto;padding-top:8px;
  display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;color:var(--accent);font-weight:500;
}
.post-more svg{width:14px;height:14px}

/* 博客列表页 hero(图章角标卡) */
.blog-hero{
  position:relative;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--highlight),var(--shadow-card);
  padding:44px 40px;
  overflow:hidden;
}
.blog-hero .stamp{
  position:absolute;top:22px;right:26px;
  width:86px;height:86px;border-radius:50%;
  display:grid;place-items:center;
  transform:rotate(-11deg);
  border:1px solid rgba(var(--ink-rgb),.35);
  box-shadow:inset 0 0 0 4px rgba(var(--paper-rgb),.9),inset 0 0 0 5px rgba(var(--ink-rgb),.22);
  color:var(--accent);
  font-family:var(--font-display);font-size:15px;letter-spacing:.06em;
  pointer-events:none;
}
.blog-hero h1{font-size:clamp(32px,4vw,46px)}
.blog-hero .post-meta{margin-bottom:12px}

/* ============================ callout 引用块 ============================ */

.callout{
  position:relative;
  background:var(--bg-panel2);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--r-md);
  padding:18px 20px;
  font-size:14.5px;line-height:1.75;color:var(--text-muted);
  min-width:0;
}
.callout strong{color:var(--text);font-weight:600}
.callout p + p{margin-top:10px}
.callout .callout-title{
  display:block;font-weight:600;color:var(--accent);
  margin-bottom:6px;font-size:14px;
}
.callout-note{border-left-color:var(--warn)}
.callout-ok{border-left-color:var(--success)}

blockquote{
  margin:22px 0;padding:16px 20px;
  border-left:3px solid var(--border);
  background:rgba(var(--paper-rgb),.6);
  border-radius:0 var(--r-md) var(--r-md) 0;
  color:var(--text-muted);
}

/* 正文排版 */
.prose{min-width:0;max-width:100%}
.prose h2{margin-top:44px;margin-bottom:16px}
.prose h3{margin-top:30px;margin-bottom:12px}
.prose p{margin-bottom:16px;line-height:1.85;font-size:15.5px;color:var(--text)}
.prose ul,.prose ol{margin:0 0 18px;padding-left:0;display:flex;flex-direction:column;gap:9px}
.prose ul li{position:relative;padding-left:20px;padding-left:20px;font-size:15px;line-height:1.8;color:var(--text)}
.prose ul li::before{
  content:"";position:absolute;left:4px;top:.72em;
  width:6px;height:6px;border-radius:50%;background:var(--border);
}
.prose ol{counter-reset:step}
.prose ol li{
  counter-increment:step;position:relative;padding-left:34px;
  font-size:15px;line-height:1.8;color:var(--text);
}
.prose ol li::before{
  content:counter(step);
  position:absolute;left:0;top:.35em;
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:var(--bg-panel);
  font-family:var(--font-mono);font-size:11px;
}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ============================ 文末推广块 ============================ */

.promo-block{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--highlight),var(--shadow-card);
  padding:28px 30px;
  margin-top:40px;
  min-width:0;
}
.promo-block .promo-copy{min-width:0;flex:1 1 320px}
.promo-block b{
  display:block;font-family:var(--font-display);font-size:22px;font-weight:400;
  letter-spacing:-.01em;margin-bottom:6px;
}
.promo-block p{font-size:14px;color:var(--text-muted);line-height:1.65;margin:0}
.promo-block .btn{flex-shrink:0;white-space:nowrap}

/* ============================ 面包屑(仅文章页) ============================ */

.crumbs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;color:var(--text-muted);
  margin-bottom:16px;
}
.crumbs a{display:inline-flex;align-items:center;min-height:24px}
.crumbs a:hover{color:var(--text)}
.crumbs span[aria-hidden]{color:var(--border)}

/* ============================ 事实数据条 ============================ */

.facts-band{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:0;
  padding:6px;
  background:rgba(var(--paper-rgb),.72);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  box-shadow:var(--highlight),0 12px 24px -16px rgba(var(--ink-rgb),.12);
  width:max-content;max-width:100%;
}
.facts-band li{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 22px;
  font-size:13px;color:var(--text-muted);letter-spacing:.02em;
}
.facts-band li + li{border-left:1px solid var(--border)}
.facts-band b{font-family:var(--font-mono);font-weight:500;font-size:15px;color:var(--text)}

/* ============================ design-preview 专用样例样式 ============================ */

.preview-sec{
  padding-top:56px;padding-bottom:56px;
  border-top:1px dashed var(--border);
}
.preview-sec:first-of-type{border-top:0}
.preview-label{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:18px;
}
.swatch-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;min-width:0}
.swatch{
  border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;
  background:var(--bg-panel);min-width:0;
}
.swatch .sw-chip{height:64px}
.swatch .sw-meta{padding:10px 12px;font-size:12px;line-height:1.5}
.swatch .sw-meta b{display:block;font-size:12.5px;font-weight:600}
.swatch .sw-meta code{font-size:11.5px;color:var(--text-muted)}

.type-spec{display:flex;flex-direction:column;gap:22px;min-width:0}
.type-spec .ts-row{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:baseline;
  padding-bottom:18px;border-bottom:1px solid var(--border);min-width:0;
}
.type-spec .ts-tag{font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted)}

.btn-shelf{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.preview-hero{
  position:relative;overflow-x:clip;max-width:100%;
  padding-top:44px;padding-bottom:40px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.preview-hero::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  inset:30% 8% -6% 46%;
  background:radial-gradient(closest-side,rgba(217,195,238,.5),rgba(217,195,238,0) 100%);
  filter:blur(24px);
}
.preview-hero > *{position:relative;z-index:1}

.preview-note{
  font-size:12.5px;color:var(--text-muted);
  font-family:var(--font-mono);letter-spacing:.02em;
}

/* ============================ 客户端窗口装置 ============================ */

.stage{position:relative;width:min(1020px,100%);margin-top:34px;z-index:1}
.window{
  position:relative;z-index:2;
  background:var(--bg-panel);
  border-radius:var(--r-xl);
  border:1px solid var(--border);
  box-shadow:var(--highlight),var(--shadow-window);
  overflow:hidden;text-align:left;
}
.chrome{
  height:40px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 16px;
  background:linear-gradient(180deg,rgba(244,232,220,.55),rgba(244,232,220,.25));
  border-bottom:1px solid var(--border);
}
.dots{display:flex;gap:7px}
.dots i{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.08);flex:none}
.dots i:nth-child(1){background:var(--error)}
.dots i:nth-child(2){background:var(--warn)}
.dots i:nth-child(3){background:var(--success)}
.chrome-title{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-size:13px;letter-spacing:.04em;color:var(--text);
}
.chrome-title svg{width:13px;height:13px;flex:none}
.chrome-right{
  justify-self:end;font-family:var(--font-mono);font-size:11px;
  color:var(--text-muted);letter-spacing:.02em;
}
.window-body{display:grid;grid-template-columns:62fr 38fr;gap:12px;padding:14px}

.panel{
  background:rgba(244,232,220,.55);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:12px;
  display:flex;flex-direction:column;gap:10px;
  min-width:0;
}
.plan-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px}
.plan-left{display:flex;align-items:center;gap:10px;min-width:0}
.plan-label{font-size:11.5px;color:var(--text-muted);letter-spacing:.08em;white-space:nowrap}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);white-space:nowrap}
.switch{
  position:relative;width:34px;height:20px;border-radius:var(--r-pill);
  background:var(--accent);box-shadow:inset 0 1px 2px rgba(var(--ink-rgb),.3);
  flex:none;
}
.switch::after{
  content:"";position:absolute;top:2px;right:2px;
  width:16px;height:16px;border-radius:50%;background:var(--bg-panel);
  box-shadow:0 1px 3px rgba(var(--ink-rgb),.3);
}

.lines{list-style:none;display:flex;flex-direction:column;gap:4px;min-width:0}
.line{
  display:grid;grid-template-columns:18px minmax(0,1fr) auto auto;
  align-items:center;gap:10px;
  min-height:34px;padding:4px 10px;border-radius:12px;
  background:var(--bg-panel);border:1px solid var(--border);
  box-shadow:0 1px 0 rgba(var(--paper-rgb),.9) inset;
}
.line.on{
  border-color:rgba(var(--ink-rgb),.22);
  box-shadow:0 0 0 1px rgba(var(--ink-rgb),.06),0 6px 12px -8px rgba(var(--ink-rgb),.25);
}
.line svg{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(var(--ink-rgb),.08)}
.line .name{font-size:13.5px;font-weight:500;color:var(--text);letter-spacing:.01em;white-space:nowrap}
.line .type{
  font-size:12px;color:var(--text-muted);font-family:var(--font-mono);
  letter-spacing:-.01em;white-space:nowrap;
}
.line .state{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--success);min-width:36px;justify-content:flex-end;
  white-space:nowrap;
}
.line .state i{
  width:7px;height:7px;border-radius:50%;background:var(--success);
  box-shadow:0 0 0 3px rgba(63,143,94,.14);flex:none;
}
.line.on .state{color:var(--accent);font-weight:500}
.line.on .state i{background:var(--accent);box-shadow:0 0 0 3px rgba(var(--ink-rgb),.14)}

.search{
  display:flex;align-items:center;gap:10px;
  min-height:40px;padding:4px 5px 4px 14px;border-radius:var(--r-pill);
  background:var(--bg-panel);border:1px solid var(--border);
  box-shadow:0 4px 10px -8px rgba(var(--ink-rgb),.2);
}
.search svg.mag{width:15px;height:15px;color:var(--text-muted);flex:none}
.search span{flex:1;font-size:13px;color:var(--text-muted);text-align:left;min-width:0}
.search .go{
  width:30px;height:30px;border-radius:50%;background:var(--accent);
  display:grid;place-items:center;flex:none;
  box-shadow:0 6px 12px -6px rgba(var(--ink-rgb),.5);
}
.search .go svg{width:14px;height:14px}

.aura-badge{
  position:absolute;top:14px;left:14px;
  width:34px;height:34px;border-radius:10px;
  background:rgba(var(--paper-rgb),.55);
  display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(var(--paper-rgb),.6);
  backdrop-filter:blur(6px);
}
.aura-badge svg{width:20px;height:20px}
.aura-label{
  position:absolute;left:16px;bottom:12px;
  font-size:11.5px;letter-spacing:.06em;color:var(--accent);opacity:.85;
}
.aura-stage{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:100%}
.aura-stage .tag{position:absolute;height:30px;border-radius:12px;white-space:nowrap}
.aura-stage .tag.t1{top:16px;left:58px}
.aura-stage .tag.t2{top:78px;right:20px}
.aura-stage .tag.t3{top:146px;left:28px}
.aura-stage .tag.t4{top:204px;right:28px}
.aura-stage .tag.t5{top:258px;left:18px}

.float-note{
  position:absolute;z-index:3;top:-56px;right:-72px;
  width:236px;padding:12px 14px 12px 12px;border-radius:16px;
  background:var(--bg-panel);border:1px solid var(--border);
  box-shadow:var(--highlight),var(--shadow-float);
  transform:rotate(-3deg);text-align:left;
  display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;
}
.float-note .ic{
  width:30px;height:30px;border-radius:9px;background:var(--bg-panel2);
  display:grid;place-items:center;color:var(--accent);
}
.float-note .ic svg{width:16px;height:16px}
.float-note b{display:block;font-size:13px;font-weight:600;color:var(--text);line-height:1.35}
.float-note span{display:block;font-size:12px;color:var(--text-muted);line-height:1.4;margin-top:2px}

.float-pill{
  position:absolute;z-index:3;left:-56px;bottom:-14px;
  display:inline-flex;align-items:center;gap:8px;
  min-height:36px;padding:4px 16px 4px 12px;border-radius:var(--r-pill);
  background:var(--bg-panel);border:1px solid var(--border);
  box-shadow:var(--highlight),var(--shadow-float);
  font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;
}
.float-pill i{
  width:18px;height:18px;border-radius:50%;background:var(--success);
  display:grid;place-items:center;flex:none;
}
.float-pill i svg{width:11px;height:11px}

/* hero 生态行 */
.eco{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:6px 20px;margin-top:22px;min-height:40px;
}
.eco-sep{width:1px;height:20px;background:var(--border);flex:none}

/* 信任点行 */
.trust{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:6px 14px;margin-top:12px;font-size:13px;color:var(--text-muted);letter-spacing:.02em;
}
.trust li{display:inline-flex;align-items:center;gap:14px}
.trust li + li::before{
  content:"";width:3px;height:3px;border-radius:50%;
  background:var(--border);display:inline-block;flex:none;
}
.trust b{font-weight:500;color:var(--text)}

/* 卖点拼盘 */
.feature-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;min-width:0}
.feature-card{
  grid-column:span 4;
  display:flex;flex-direction:column;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--highlight),var(--shadow-card);
  overflow:hidden;min-width:0;
  transition:transform .18s,box-shadow .18s;
}
.feature-card.narrow{grid-column:span 2}
.feature-card:hover{transform:translateY(-2px);box-shadow:var(--highlight),var(--shadow-float)}
.feature-visual{
  /* min-height:0 overrides .aura's min-height:100%: otherwise the visual stretches
     to the whole card and pushes .feature-body out of the card (clipped). */
  position:relative;height:172px;min-height:0;
  display:flex;align-items:flex-start;justify-content:flex-start;
  padding:16px;gap:8px;flex-wrap:wrap;
}
.feature-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.feature-body h3{font-size:21px}
.feature-body p{font-size:14.5px;line-height:1.75;color:var(--text-muted)}

/* ============================ 响应式 ============================ */

@media (max-width:1100px){
  .platform-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .feature-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .feature-card{grid-column:span 3}
  .feature-card.narrow{grid-column:span 1}
}

@media (max-width:900px){
  .plan-grid{grid-template-columns:minmax(0,1fr)}
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pack-row{grid-template-columns:minmax(0,1fr)}
  .swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .type-spec .ts-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .table-scroll > table{min-width:600px}
}

@media (max-width:768px){
  .platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-grid{grid-template-columns:minmax(0,1fr)}
  .feature-grid{grid-template-columns:minmax(0,1fr)}
  .feature-card,.feature-card.narrow{grid-column:span 1}
  .feature-visual{height:132px}
  .window-body{grid-template-columns:minmax(0,1fr)}
  .aura-stage{min-height:340px}
  .float-note,.float-pill{display:none}
  .facts-band{border-radius:var(--r-lg);flex-wrap:wrap}
  .facts-band li{padding:10px 14px}
  .facts-band li + li{border-left:0}
  .blog-hero{padding:30px 22px}
  .blog-hero .stamp{width:64px;height:64px;font-size:12px;top:16px;right:16px}
  .promo-block{padding:22px}
  .toc-tabs{top:calc(var(--header-h) + 4px)}
}

@media (max-width:640px){
  .swatch-grid{grid-template-columns:minmax(0,1fr)}
  .tabs{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}
  .tabs [role="tab"]{flex:none}
  .promo-block .btn{width:100%}
  .plan-price b{font-size:32px}
}

@media (max-width:400px){
  .platform-grid{grid-template-columns:minmax(0,1fr)}
}