/* ==========================================================================
   VPN31 · components.css
   跨页面组件:tab / 目录条 / FAQ / 套餐卡 / 线路表 / 平台卡 / 文章卡 /
   callout / 文末推广块 / bento 卖点拼盘 / 正文排版 / 预览页示例排版
   ========================================================================== */

/* ==========================================================================
   1. Tab 切换(role=tablist)
   ========================================================================== */

.tabs{margin-block:var(--sp-3);}

.tablist{
  display:inline-flex;
  flex-wrap:wrap;
  gap:4px;
  padding:4px;
  border-radius:var(--r-pill);
  background-color:var(--panel-2);
  border:1px solid var(--border);
}

.tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:6px 16px;
  border:0;
  border-radius:var(--r-pill);
  background-color:transparent;
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
  transition:color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

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

.tab[aria-selected="true"]{
  background-color:var(--panel);
  color:var(--accent-dark);
  box-shadow:0 6px 14px -8px var(--accent-a24);
}

.tab-panel{padding-block:var(--sp-3);}

.tab-panel[hidden]{display:none;}

/* ==========================================================================
   2. 长页目录条(吸顶 + 当前章节高亮)
   ========================================================================== */

.toc-tabs{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  gap:6px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  padding-block:10px;
  margin-block:0 var(--sp-3);
  background-color:var(--bg);
  border-bottom:1px solid var(--border);
}

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

.toc-tabs a{
  flex:none;
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:6px 14px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background-color:var(--panel);
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  white-space:nowrap;
  transition:color .18s ease, background-color .18s ease, border-color .18s ease;
}

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

.toc-tabs a.is-active{
  color:var(--on-accent);
  background-color:var(--accent);
  border-color:var(--accent);
  box-shadow:0 8px 18px -10px var(--accent-a32);
}

/* 锚点落点避开吸顶条 */
body:has(.toc-tabs) section[id],
body:has(.toc-tabs) h2[id],
body:has(.toc-tabs) h3[id]{
  scroll-margin-top:84px;
}

/* ==========================================================================
   3. FAQ 折叠
   ========================================================================== */

.faq{
  display:grid;
  gap:10px;
}

.faq-item{
  background-color:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:0 8px 20px -16px var(--accent-a24);
  overflow:hidden;
}

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

.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);
  transition:transform .2s ease;
}

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

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

.faq-a p{margin-bottom:10px;}
.faq-a p:last-child{margin-bottom:0;}

/* ==========================================================================
   4. 套餐卡(糖果渐变 + 最划算徽章 + 当前档高亮)
   ========================================================================== */

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

.plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:26px 24px 24px;
  border-radius:var(--r-xl);
  background-image:var(--grad-candy);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  min-width:0;
  transition:transform .22s ease, box-shadow .22s ease;
}

.plan-card:hover{transform:translateY(-3px);}

.plan-card.is-featured{
  box-shadow:0 26px 52px -24px var(--accent-a32), 0 0 0 1px var(--accent-a24);
}

.plan-badge{
  position:absolute;
  top:-11px;
  left:24px;
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 11px;
  border-radius:var(--r-pill);
  background-color:var(--accent);
  color:var(--on-accent);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
  box-shadow:0 10px 20px -12px var(--accent-a32);
}

.plan-name{
  font-family:var(--font-body);
  font-size:15px;
  font-weight:650;
  letter-spacing:-.008em;
  color:var(--text);
}

.plan-price{
  display:flex;
  align-items:baseline;
  gap:2px;
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(30px, 3.6vw, 40px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--text);
}

.plan-currency{
  font-size:.55em;
  font-weight:600;
  margin-right:2px;
}

.plan-unit{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  letter-spacing:0;
}

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

.plan-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--text);
}

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

.plan-list li::before{
  content:"";
  flex:none;
  width:6px;
  height:10px;
  margin-top:4px;
  border-right:2px solid var(--success);
  border-bottom:2px solid var(--success);
  transform:rotate(40deg);
}

.plan-actions{margin-top:auto;}

.plan-actions .btn{width:100%;}

/* ==========================================================================
   5. 线路表 / 通用宽表(必须包在 .table-scroll 里横滑)
   ========================================================================== */

.table-scroll{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background-color:var(--panel);
  box-shadow:var(--shadow-soft);
}

.route-table{
  width:100%;
  min-width:660px;
  border-collapse:collapse;
  font-size:14px;
}

.route-table th{
  padding:12px 16px;
  text-align:left;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--text);
  background-color:var(--panel-2);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}

.route-table td{
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  color:var(--text);
  word-break:keep-all;
  vertical-align:middle;
}

.route-table tbody tr:last-child td{border-bottom:0;}
.route-table tbody tr:hover td{background-color:var(--accent-a04);}

.route-table .cell-city{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.route-table .cell-city .flag{flex:none;}

.route-tag{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:2px 9px;
  border-radius:var(--r-p);
  border-radius:var(--r-pill);
  background-color:var(--panel-2);
  border:1px solid var(--border);
  font-size:11.5px;
  font-weight:500;
  color:var(--accent-dark);
  white-space:nowrap;
}

.route-tag--direct{color:var(--success);}
.route-tag--relay{color:var(--warn);}

.region-group{
  margin-block:var(--sp-4);
}

.region-group > h3{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.region-group > h3 .badge{font-weight:500;}

/* 通用数据表(博客正文裸表也要能横滑) */
.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  background-color:var(--panel);
}

.data-table th,
.data-table td{
  padding:10px 14px;
  border:1px solid var(--border);
  text-align:left;
  word-break:keep-all;
}

.data-table th{
  background-color:var(--panel-2);
  color:var(--text);
  font-weight:600;
  white-space:nowrap;
}

/* ==========================================================================
   6. 平台卡(五平台下载区)
   ========================================================================== */

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

.platform-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:20px;
  border-radius:var(--r-lg);
  background-color:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  min-width:0;
  transition:transform .22s ease, box-shadow .22s ease;
}

.platform-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-card);
}

.platform-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  flex:none;
  border-radius:var(--r-md);
  background-color:var(--panel-2);
  color:var(--accent);
}

.platform-icon svg{
  width:22px;
  height:22px;
  fill:currentColor;
}

.platform-name{
  font-size:14.5px;
  font-weight:650;
  letter-spacing:-.008em;
}

.platform-meta{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.55;
}

.platform-card .btn{margin-top:auto;}

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

.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:18px;
}

.post-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:22px;
  border-radius:var(--r-lg);
  background-color:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  min-width:0;
  transition:transform .22s ease, box-shadow .22s ease;
}

.post-card:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 46px -22px var(--accent-a32);
}

.post-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
}

.post-tag{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:2px 9px;
  border-radius:var(--r-pill);
  background-color:var(--panel-2);
  border:1px solid var(--border);
  font-size:11.5px;
  font-weight:500;
  color:var(--accent-dark);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

.post-title{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  line-height:1.36;
  letter-spacing:-.018em;
  color:var(--text);
}

.post-excerpt{
  font-size:13.5px;
  line-height:1.72;
  color:var(--muted);
}

.post-more{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  font-size:13px;
  font-weight:600;
  color:var(--accent-dark);
}

/* 博客列表页 hero:带框卡片 + 左侧竖条(内缩,不出界) */
.blog-hero{
  position:relative;
  padding:clamp(22px, 3vw, 34px) clamp(22px, 3vw, 34px) clamp(22px, 3vw, 34px) clamp(30px, 4vw, 44px);
  border-radius:var(--r-xl);
  background-image:var(--grad-candy);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}

.blog-hero::before{
  content:"";
  position:absolute;
  left:clamp(14px, 2vw, 18px);
  top:clamp(18px, 2.4vw, 24px);
  bottom:clamp(18px, 2.4vw, 24px);
  width:4px;
  border-radius:var(--r-pill);
  background-image:linear-gradient(180deg, var(--accent) 0%, var(--pink) 60%, var(--sky) 100%);
}

.blog-hero h1{
  font-size:clamp(1.9rem, 3.4vw, 2.75rem);
  line-height:1.12;
  letter-spacing:-.026em;
}

.blog-hero .lead{margin-top:12px;font-size:16px;}

.blog-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

/* ==========================================================================
   8. callout 引用块
   ========================================================================== */

.callout{
  display:block;
  margin-block:var(--sp-3);
  padding:16px 18px;
  border-radius:var(--r-md);
  background-color:var(--panel-2);
  border-left:3px solid var(--accent);
  font-size:14.5px;
  line-height:1.75;
  color:var(--text);
}

.callout p:last-child{margin-bottom:0;}

.callout--warn{border-left-color:var(--warn);background-color:rgba(217,119,6,.06);}
.callout--ok{border-left-color:var(--success);background-color:rgba(14,159,110,.06);}

/* ==========================================================================
   9. 文末推广块(博客文章页使用)
   ========================================================================== */

.promo-block{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16;
  gap:16px;
  margin-block:var(--sp-5);
  padding:clamp(20px, 2.6vw, 26px);
  border-radius:var(--r-xl);
  background-image:var(--grad-candy);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
}

.promo-block .promo-brand{
  display:block;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  letter-spacing:-.018em;
  color:var(--text);
}

.promo-block .promo-text{
  margin:6px 0 0;
  font-size:13.5px;
  line-height:1.7;
  color:var(--muted);
  max-width:44ch;
}

.promo-block .btn{
  margin-left:auto;
  flex-shrink:0;
  white-space:nowrap;
}

/* ==========================================================================
   10. 卖点 bento 拼盘(7/5 + 4/4/4,1px 细分栏切割)
   ========================================================================== */

.bento{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:1px;
  background-color:var(--border);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}

.bento-card{
  position:relative;
  grid-column:span 12;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  padding:clamp(22px, 2.6vw, 30px);
  padding-bottom:clamp(58px, 6vw, 68px);
  background-color:var(--panel);
}

.bento-card--7{grid-column:span 7;}
.bento-card--5{grid-column:span 5;}
.bento-card--4{grid-column:span 4;}

.bento-card h3{
  font-family:var(--font-body);
  font-size:16.5px;
  font-weight:650;
  letter-spacing:-.012em;
}

.bento-card p{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
}

.bento-icon{
  position:absolute;
  right:clamp(18px, 2vw, 24px);
  bottom:clamp(16px, 2vw, 20px);
  width:34px;
  height:34px;
  color:var(--accent);
  opacity:.9;
}

.bento-icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* 静态线路信号条(纯装饰,不含任何数字) */
.signal-strip{
  display:flex;
  align-items:flex-end;
  gap:4px;
  height:34px;
  margin-top:6px;
}

.signal-strip i{
  display:block;
  width:6px;
  border-radius:2px;
  background-image:linear-gradient(180deg, var(--accent) 0%, var(--pink) 100%);
  opacity:.75;
}

.signal-strip i:nth-child(1){height:30%;}
.signal-strip i:nth-child(2){height:48%;}
.signal-strip i:nth-child(3){height:38%;}
.signal-strip i:nth-child(4){height:62%;}
.signal-strip i:nth-child(5){height:54%;}
.signal-strip i:nth-child(6){height:74%;}
.signal-strip i:nth-child(7){height:66%;}
.signal-strip i:nth-child(8){height:86%;}
.signal-strip i:nth-child(9){height:78%;}
.signal-strip i:nth-child(10){height:94%;}
.signal-strip i:nth-child(11){height:82%;}
.signal-strip i:nth-child(12){height:100%;}

.signal-note{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:-.01em;
  color:var(--muted);
  white-space:nowrap;
}

/* ==========================================================================
   11. 分步流程(教程页)
   ========================================================================== */

.steps{
  list-style:none;
  counter-reset:step;
  margin:0;
  padding:0;
  display:grid;
  gap:18px;
}

.steps > li{
  position:relative;
  counter-increment:step;
  padding-left:48px;
  min-width:0;
}

.steps > li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background-color:var(--panel-2);
  border:1px solid var(--border);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  color:var(--accent-dark);
}

.steps h3{margin-bottom:6px;}

/* ==========================================================================
   12. 正文排版
   ========================================================================== */

.prose{
  max-width:72ch;
  min-width:0;
}

.prose h2{
  margin-top:var(--sp-5);
  margin-bottom:var(--sp-2);
}

.prose h3{
  margin-top:var(--sp-4);
  margin-bottom:var(--sp-1);
}

.prose p{
  margin:0 0 var(--sp-2);
  line-height:1.82;
}

.prose ul,
.prose ol{
  margin:0 0 var(--sp-2);
  padding-left:1.35em;
}

.prose li{margin-bottom:6px;line-height:1.78;}

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

.prose code{
  padding:1px 5px;
  border-radius:var(--r-xs);
  background-color:var(--panel-2);
  overflow-wrap:anywhere;
}

.prose pre{
  margin:0 0 var(--sp-2);
  padding:16px;
  border-radius:var(--r-md);
  background-color:var(--panel-2);
  border:1px solid var(--border);
  overflow-x:auto;
  max-width:100%;
}

.prose pre code{background:none;padding:0;overflow-wrap:normal;}

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

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

/* 博客正文裸表防御:不带横滑容器也不许撑破页面 */
.prose > .data-table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  min-width:0;
}

/* ==========================================================================
   13. 预览页示例排版(design-preview 专用,已在此定义,勿在页面里另造)
   ========================================================================== */

.spec-block{
  margin-block:var(--sp-4);
}

.spec-label{
  display:block;
  margin-bottom:12px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.04em;
  color:var(--muted);
}

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

.swatch{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
  border-radius:var(--r-md);
  background-color:var(--panel);
  border:1px solid var(--border);
  min-width:0;
}

.swatch-chip{
  height:54px;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
}

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

.swatch-var{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted);
  overflow-wrap:anywhere;
}

.sw-bg{background-color:var(--bg);}
.sw-panel{background-color:var(--panel);}
.sw-panel2{background-color:var(--panel-2);}
.sw-border{background-color:var(--border);}
.sw-accent{background-color:var(--accent);}
.sw-accent-dark{background-color:var(--accent-dark);}
.sw-text{background-color:var(--text);}
.sw-muted{background-color:var(--muted);}
.sw-success{background-color:var(--success);}
.sw-warn{background-color:var(--warn);}
.sw-error{background-color:var(--error);}
.sw-pink{background-color:var(--pink);}
.sw-sky{background-color:var(--sky);}
.sw-mint{background-color:var(--mint);}
.sw-candy{background-image:var(--grad-candy);}
.sw-bar{background-image:var(--grad-bar);}

.type-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 18px;
  padding-block:14px;
  border-bottom:1px dashed var(--border);
  min-width:0;
}

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

.type-tag{
  flex:none;
  min-width:76px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
}

.type-sample{min-width:0;}

.demo-block{
  padding:clamp(18px, 2.4vw, 26px);
  border-radius:var(--r-lg);
  background-color:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  min-width:0;
}

.demo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  align-items:start;
}

.demo-stack{
  display:grid;
  gap:16px;
  min-width:0;
}

/* ==========================================================================
   14. 响应式
   ========================================================================== */

@media (max-width:900px){
  .plan-grid{grid-template-columns:minmax(0, 1fr);}
  .bento-card--7,
  .bento-card--5,
  .bento-card--4{grid-column:span 12;}
}

@media (max-width:640px){
  .tablist{width:100%;justify-content:flex-start;}
  .tab{flex:1 1 auto;}
  .promo-block .btn{margin-left:0;width:100%;}
  .route-table{min-width:600px;}
}

@media (prefers-reduced-motion: reduce){
  .plan-card:hover,
  .platform-card:hover,
  .post-card:hover{transform:none;}
  .faq-item summary::after{transition:none;}
}