/* ==========================================================================
   MeyeVPN — components.css
   跨页面组件：tab / toc / FAQ / 套餐卡 / 线路表 / 平台卡 / 文章卡 /
   callout / 文末推广块 / 悬浮 CTA / 演示页专用排版类
   ========================================================================== */

/* ---------- Tab（featuresLayout：左胶囊 tab + 右详情面板） ---------- */
.tabs{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:28px;
  align-items:start;
}
.tablist{
  display:flex;flex-direction:column;gap:6px;
  list-style:none;margin:0;padding:0;
}
.tablist [role="tab"]{
  position:relative;
  display:flex;align-items:center;
  width:100%;min-height:52px;
  padding:10px 16px 10px 20px;
  border:1px solid transparent;border-radius:var(--r-pill);
  background:transparent;
  color:var(--muted);
  font-family:var(--font-body);
  font-size:15px;font-weight:600;
  text-align:left;
  cursor:pointer;
  transition:color var(--dur-fast),background-color var(--dur-fast);
}
.tablist [role="tab"]::before{
  content:"";
  position:absolute;left:6px;top:50%;
  width:3px;height:22px;
  transform:translateY(-50%);
  border-radius:var(--r-pill);
  background:transparent;
}
.tablist [role="tab"]:hover{color:var(--text);background:var(--ink-4)}
.tablist [role="tab"][aria-selected="true"]{
  background:var(--tint-6);
  color:var(--accent);
  border-color:var(--tint-14);
}
.tablist [role="tab"][aria-selected="true"]::before{background:var(--accent)}

.tabpanel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-card);
  padding:32px;
  min-width:0;
}
.tabpanel[hidden]{display:none}
.tabpanel-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.tabpanel-head .sq-ic{width:44px;height:44px}
.tabpanel-head h3{
  font-family:var(--font-display);
  font-size:22px;font-weight:800;letter-spacing:-.02em;
}
.tabpanel p{font-size:16px;line-height:1.8;color:var(--muted)}
.tabpanel p + p{margin-top:12px}
.tabpanel-facts{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:22px;padding-top:20px;
  border-top:1px solid var(--border);
}

/* 窄屏退化为纵向手风琴 */
.tabs-accordion{display:none}
.tabs-accordion details{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  margin-bottom:10px;
  overflow:hidden;
}
.tabs-accordion summary{
  display:flex;align-items:center;gap:12px;
  min-height:56px;padding:12px 16px;
  cursor:pointer;list-style:none;
  font-size:15.5px;font-weight:600;
}
.tabs-accordion summary::-webkit-details-marker{display:none}
.tabs-accordion summary::after{
  content:"";
  margin-left:auto;
  width:8px;height:8px;flex-shrink:0;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:rotate(45deg);
  transition:transform var(--dur-base) var(--ease-out);
}
.tabs-accordion details[open] summary::after{transform:rotate(-135deg)}
.tabs-accordion .acc-body{padding:0 16px 18px}
.tabs-accordion .acc-body p{font-size:15px;line-height:1.75;color:var(--muted)}
.tabs-accordion .acc-body p + p{margin-top:10px}

/* ---------- 长页目录条 .toc-tabs ---------- */
.toc-tabs{
  position:sticky;top:calc(var(--head-h) + 8px);
  z-index:12;
  display:flex;align-items:center;gap:6px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-xs);
  padding:6px;
  margin:0 0 32px;
  max-width:100%;
}
.toc-tabs::-webkit-scrollbar{display:none}
.toc-tabs a{
  display:inline-flex;align-items:center;
  min-height:38px;padding:0 14px;
  border-radius:var(--r-pill);
  font-size:13.5px;font-weight:500;color:var(--muted);
  white-space:nowrap;flex-shrink:0;
}
.toc-tabs a:hover{color:var(--text);background:var(--panel-2)}
.toc-tabs a.is-current{background:var(--tint-6);color:var(--accent);font-weight:600}
.toc-tabs.is-static{position:static}

body:has(.toc-tabs) section[id],
body:has(.toc-tabs) [id^="sec-"]{scroll-margin-top:calc(var(--head-h) + 76px)}

/* ---------- FAQ 折叠 ---------- */
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);
  overflow:hidden;
}
.faq-item summary{
  display:flex;align-items:center;gap:14px;
  min-height:60px;padding:16px 20px;
  cursor:pointer;list-style:none;
  font-size:16px;font-weight:600;
  color:var(--text);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";
  margin-left:auto;
  width:9px;height:9px;flex-shrink:0;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform:rotate(45deg);
  transition:transform var(--dur-base) var(--ease-out);
}
.faq-item[open] summary::after{transform:rotate(-135deg);border-color:var(--accent)}
.faq-item[open] summary{color:var(--accent)}
.faq-item .faq-body{padding:0 20px 20px;font-size:15.5px;line-height:1.8;color:var(--muted)}
.faq-item .faq-body p + p{margin-top:10px}
.faq-more{margin-top:20px;font-size:15px}
.faq-more a{color:var(--accent);font-weight:600;display:inline-flex;align-items:center;min-height:24px}

/* ---------- 套餐卡 ---------- */
.plan-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.plan-card{
  position:relative;
  display:flex;flex-direction:column;
  min-width:0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-soft);
  padding:28px 24px 24px;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.plan-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.plan-card.is-featured{
  border-color:var(--tint-18);
  box-shadow:inset 0 1px 0 var(--highlight),0 18px 44px -10px var(--tint-18);
}
.plan-card.is-current{
  border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent),0 18px 44px -12px var(--tint-18);
}
.plan-badge{
  position:absolute;top:-12px;left:24px;
  display:inline-flex;align-items:center;gap:6px;
  min-height:24px;padding:0 12px;
  border-radius:var(--r-pill);
  background:var(--accent);color:var(--white);
  font-size:12px;font-weight:700;
  box-shadow:var(--shadow-btn);
  white-space:nowrap;
}
.plan-name{font-family:var(--font-display);font-size:19px;font-weight:800;letter-spacing:-.02em}
.plan-sub{font-size:13px;color:var(--muted);margin-top:4px}
.plan-price{
  display:flex;align-items:baseline;gap:6px;
  margin:18px 0 4px;
}
.plan-price b{
  font-family:var(--font-mono);
  font-size:38px;font-weight:700;letter-spacing:-.03em;
  color:var(--text);
}
.plan-price span{font-size:14px;color:var(--muted)}
.plan-note{font-size:12.5px;color:var(--muted)}
.plan-feats{list-style:none;margin:20px 0 22px;padding:0;display:flex;flex-direction:column;gap:10px}
.plan-feats li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:1.55}
.plan-feats svg{width:16px;height:16px;color:var(--accent);flex-shrink:0;margin-top:3px}
.plan-card .btn-primary,
.plan-card .btn-secondary{margin-top:auto;width:100%}

/* 流量包卡 */
.pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pack-card{
  display:flex;flex-direction:column;
  min-width:0;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:20px;
}
.pack-card b{font-family:var(--font-mono);font-size:24px;font-weight:700;letter-spacing:-.02em}
.pack-card .pack-price{font-family:var(--font-mono);font-size:16px;font-weight:600;color:var(--accent);margin-top:6px}
.pack-card p{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.6}

/* ---------- 线路表 ---------- */
.route-group{margin-bottom:28px}
.route-group h3{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-size:17px;font-weight:800;letter-spacing:-.01em;
  margin-bottom:12px;
}
.route-group h3 .tag{font-weight:500}
.route-table{
  overflow-x:auto;max-width:100%;
  -webkit-overflow-scrolling:touch;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
}
.route-table table{min-width:600px;width:100%;border-collapse:collapse}
.route-table th,.route-table td{
  padding:12px 16px;text-align:left;
  border-bottom:1px solid var(--border);
  font-size:14px;word-break:keep-all;
}
.route-table th{
  background:var(--panel-2);
  font-size:12.5px;font-weight:600;letter-spacing:.03em;
  color:var(--text);white-space:nowrap;
}
.route-table tr:last-child td{border-bottom:0}
.route-table td:first-child{display:flex;align-items:center;gap:9px;font-weight:600}
.route-table .flag-ic{width:20px;height:20px;box-shadow:none}
.route-table .flag-ic svg{width:20px;height:20px}

/* ---------- 平台下载卡 ---------- */
.plat-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
}
.plat-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  min-width:0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);
  padding:26px 16px 20px;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.plat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.plat-card .sq-ic{width:48px;height:48px;margin-bottom:14px}
.plat-card .sq-ic svg{width:24px;height:24px;color:var(--text)}
.plat-card h3{font-size:15px;font-weight:700;margin-bottom:4px}
.plat-card p{font-size:12.5px;color:var(--muted);line-height:1.55;margin-bottom:16px}
.plat-card .btn-ghost{margin-top:auto;width:100%;justify-content:center}

/* ---------- 博客文章卡 ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.post-card{
  display:flex;flex-direction:column;
  min-width:0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-xs);
  padding:24px;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.post-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}
.post-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.post-card h3{
  font-family:var(--font-display);
  font-size:17.5px;font-weight:700;line-height:1.45;letter-spacing:-.01em;
  margin-bottom:10px;
}
.post-card h3 a{display:inline}
.post-card p{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:18px}
.post-card .post-foot{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--border);
  font-size:13px;color:var(--muted);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.post-card .post-foot a{color:var(--accent);font-weight:600;display:inline-flex;align-items:center;min-height:24px}

/* 博客 hero 卡（side-rule-card） */
.blog-hero{
  position:relative;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-card);
  padding:32px 32px 32px 44px;
  overflow:hidden;
}
.blog-hero::before{
  content:"";
  position:absolute;left:20px;top:28px;bottom:28px;
  width:4px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
}
.blog-hero h1{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(30px,4vw,46px);
  line-height:1.14;
  letter-spacing:-.03em;
  margin-bottom:14px;
}
.blog-hero p{font-size:16.5px;color:var(--muted);line-height:1.75;max-width:720px}

/* ---------- 事实带 / 清单 ---------- */
.fact-strip{
  display:flex;flex-wrap:wrap;gap:10px;
}
.fact-strip .pill{min-height:34px;font-size:13.5px}

.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.check-list li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;line-height:1.7}
.check-list svg{width:18px;height:18px;color:var(--accent);flex-shrink:0;margin-top:4px}

/* ---------- 底部 CTA 带（整页唯一深色块） ---------- */
.cta-band{
  background:var(--accent-dark);
  color:var(--white);
  border-radius:var(--r-xl);
  padding:40px 44px;
  display:flex;flex-wrap:wrap;align-items:center;gap:24px;
  box-shadow:0 24px 60px -20px rgba(13,107,66,.45);
}
.cta-band h2{
  font-family:var(--font-display);
  font-weight:800;font-size:clamp(24px,2.6vw,32px);
  line-height:1.18;letter-spacing:-.025em;
  color:var(--white);
  margin-bottom:8px;
}
.cta-band p{font-size:15.5px;color:rgba(255,255,255,.82);line-height:1.7}
.cta-band .cta-copy{flex:1 1 320px;min-width:0}
.cta-band .cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.cta-band .btn-primary{
  background:var(--white);
  color:var(--accent-dark);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.35);
}
.cta-band .btn-secondary{
  background:transparent;border-color:rgba(255,255,255,.42);color:var(--white);
  box-shadow:none;
}
.cta-band .btn-secondary:hover{border-color:var(--white);color:var(--white)}

/* ---------- 步骤列表（教程页） ---------- */
.steps{counter-reset:step;list-style:none;margin:0;padding:0}
.steps > li{
  position:relative;
  padding-left:56px;
  padding-bottom:32px;
}
.steps > li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;left:0;top:0;
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--tint-6);color:var(--accent);
  font-family:var(--font-mono);font-size:15px;font-weight:700;
}
.steps > li::after{
  content:"";
  position:absolute;left:17px;top:44px;bottom:8px;
  width:1px;background:var(--border);
}
.steps > li:last-child{padding-bottom:0}
.steps > li:last-child::after{display:none}
.steps h3{font-size:18px;font-weight:700;margin-bottom:10px}
.steps p{font-size:15.5px;color:var(--muted);line-height:1.8}
.steps p + p{margin-top:10px}

/* ---------- #server-status 网格夹持（文档流占位，禁绝对定位/负 margin） ---------- */
#server-status{
  position:relative;
  display:block;
  width:100%;
  max-width:100%;
  overflow:hidden;
  margin:24px 0;
}

/* ---------- design-preview 专用示例排版类 ---------- */
.pv-section{padding-top:56px;padding-bottom:56px;border-top:1px solid var(--border)}
.pv-section > .wrap > h2{
  font-family:var(--font-display);
  font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;
  margin-bottom:8px;
}
.pv-note{font-size:14px;color:var(--muted);margin-bottom:28px}

.pv-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.pv-swatch{
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--panel);padding:12px;
}
.pv-chip{
  height:56px;border-radius:var(--r-sm);
  border:1px solid var(--ink-8);
  margin-bottom:10px;
}
.pv-swatch b{display:block;font-size:13.5px;font-weight:600}
.pv-swatch code{display:block;font-size:11.5px;color:var(--muted);margin-top:4px;overflow-wrap:anywhere}

.pv-type-row{
  display:flex;align-items:baseline;gap:20px;
  padding:16px 0;border-bottom:1px dashed var(--border);
  flex-wrap:wrap;
}
.pv-type-row .pv-type-tag{
  font-family:var(--font-mono);font-size:11.5px;color:var(--muted);
  min-width:120px;flex-shrink:0;
}
.pv-display{font-family:var(--font-display);font-weight:900;font-size:clamp(32px,5vw,60px);letter-spacing:-.03em;line-height:1.08}
.pv-h2{font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:-.025em}
.pv-h3{font-size:20px;font-weight:700}
.pv-body{font-size:17px;color:var(--text)}
.pv-small{font-size:14px;color:var(--muted)}
.pv-mono{font-family:var(--font-mono);font-size:14px}

.pv-btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:16px}
.pv-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pv-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pv-stack{display:flex;flex-direction:column;gap:16px}
.pv-hero{position:relative;overflow-x:clip;background:linear-gradient(180deg,var(--bg-top),var(--bg-bottom));padding-top:40px;padding-bottom:56px}
.pv-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;max-width:100%;
  background:
    radial-gradient(560px 440px at 90% 4%,var(--glow-7),transparent 70%),
    radial-gradient(620px 480px at 8% 100%,var(--glow-5),transparent 70%);
}
.pv-hero .wrap{position:relative}
.pv-hero-grid{display:grid;grid-template-columns:520px minmax(0,1fr);gap:56px;align-items:center}
.pv-note-inline{font-size:13px;color:var(--muted);margin-top:10px}

@media (max-width:1180px){
  .pv-hero-grid{grid-template-columns:1fr;gap:40px}
  .plat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1024px){
  .tabs{grid-template-columns:1fr}
  .tablist{display:none}
  .tabs-accordion{display:block}
  .plan-grid{grid-template-columns:1fr}
  .post-grid{grid-template-columns:1fr 1fr}
  .pv-grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .tabpanel{padding:22px}
  .post-grid{grid-template-columns:1fr}
  .pack-grid{grid-template-columns:1fr}
  .plat-grid{grid-template-columns:1fr 1fr}
  .cta-band{padding:28px 22px}
  .blog-hero{padding:24px 22px 24px 34px}
  .blog-hero::before{left:14px;top:22px;bottom:22px}
  .pv-grid-3,.pv-grid-2{grid-template-columns:1fr}
  .steps > li{padding-left:46px}
}
@media (max-width:640px){
  .plat-grid{grid-template-columns:1fr}
  .route-table table{min-width:520px}
}