/* ============================================================
   39VPN · components.css
   跨页面组件:hero / 客户端窗口装置 / 暗区 / toc / tabs / FAQ /
   套餐卡 / 线路表 / 平台卡 / 文章卡 / 推广块 / float-cta / 预览样张
   ============================================================ */

/* ============ Hero(亮区 + 细网格) ============ */
.hero{position:relative;overflow:hidden;background:var(--bg)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.hero-inner{position:relative;z-index:2;max-width:1160px;margin:0 auto;padding:34px var(--gutter) 0;text-align:center}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--bg);font-size:13px;color:var(--muted);font-weight:500;box-shadow:0 4px 14px -8px rgba(12,27,58,.18)}
.hero-badge i{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;flex-shrink:0}
.hero h1{margin:16px 0 0;font-family:var(--font-display);font-weight:900;font-size:clamp(34px,4.6vw,60px);line-height:1.14;letter-spacing:-.02em}
.hero h1 .kt{display:inline-block}
.kw{background:linear-gradient(94deg,var(--gold) 4%,var(--pink) 50%,var(--accent) 96%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{margin:15px auto 0;max-width:720px;font-size:17px;line-height:1.6;color:var(--muted)}
.hero-sub strong{color:var(--text);font-weight:700}
.hero-cta{margin-top:22px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

.trust-line{margin-top:17px;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--muted)}
.trust-line li{display:inline-flex;align-items:center;gap:7px}
.trust-line i{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}
.ti-a i{background:var(--accent)}
.ti-b i{background:var(--ok)}
.ti-c i{background:var(--warn)}
.ti-d i{background:var(--pink)}

.hero-chips{margin-top:18px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px 8px}
.chip-group{display:flex;align-items:center;flex-wrap:wrap;gap:6px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--bg);font-size:12.5px;color:var(--muted);font-weight:500;max-width:100%}
.chip svg{display:block;color:var(--muted);flex-shrink:0}
.chip-divider{width:1px;height:22px;background:var(--border);margin:0 10px;flex-shrink:0}

/* 一次性入场动画(只动 transform/opacity,总时长 ≤1.2s) */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.anim{animation:rise .5s cubic-bezier(.22,.61,.36,1) both}
.d0{animation-delay:0s}
.d1{animation-delay:.08s}
.d2{animation-delay:.18s}
.d3{animation-delay:.28s}
.d4{animation-delay:.40s}
.d5{animation-delay:.50s}
.d6{animation-delay:.58s}
.d7{animation-delay:.66s}
@media (prefers-reduced-motion:reduce){
  .anim{animation:none}
}

/* ============ 首屏装置:客户端窗口 ============ */
.device-zone{position:relative;z-index:1;max-width:1160px;margin:26px auto 0;padding:0 var(--gutter) 46px}
.glow{position:absolute;border-radius:50%;filter:blur(64px);pointer-events:none}
.glow-gold{left:2%;top:8%;width:380px;height:320px;background:radial-gradient(closest-side,var(--glow-gold),transparent)}
.glow-blue{right:2%;top:14%;width:420px;height:340px;background:radial-gradient(closest-side,var(--glow-blue),transparent)}

.app-window{position:relative;z-index:2;width:940px;max-width:100%;margin:0 auto;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-win);transform:rotate(-1.5deg);overflow:hidden}
.app-chrome{display:flex;align-items:center;gap:16px;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--bg)}
.chrome-dots{display:flex;gap:7px;flex-shrink:0}
.chrome-dots i{width:11px;height:11px;border-radius:50%;display:inline-block}
.cd-r{background:var(--err)}
.cd-y{background:var(--warn)}
.cd-g{background:var(--ok)}
.chrome-search{flex:1;max-width:340px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:7px 14px;background:var(--bg-panel);border-radius:var(--radius-pill);font-size:12.5px;color:var(--muted);min-width:0}
.chrome-search svg{display:block;color:var(--muted);flex-shrink:0}
.chrome-tag{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);letter-spacing:.02em;flex-shrink:0}

.app-body{display:grid;grid-template-columns:206px 1fr}
.app-side{background:var(--bg-panel);border-right:1px solid var(--border);padding:16px 12px 18px}
.side-label{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;padding:0 10px 10px}
.side-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--radius-md);font-size:13.5px;color:var(--text);font-weight:500;margin-bottom:2px}
.side-item svg{display:block;flex:none}
.side-item.on{background:var(--accent-soft);color:var(--accent);font-weight:700;position:relative}
.side-item.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 2px 2px 0;background:var(--accent)}

.app-main{padding:20px 24px 22px;min-width:0}
.conn-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:16px;border-bottom:1px dashed var(--border-strong);margin-bottom:16px}
.conn-status{display:flex;align-items:center;gap:12px;text-align:left;min-width:0}
.conn-status .dot-ok{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(18,183,106,.15);flex:none}
.conn-status strong{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.conn-status span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.power-ring{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--pink) 52%,var(--accent));position:relative;flex:none;box-shadow:0 10px 22px -10px rgba(46,91,255,.5)}
.power-ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--bg)}
.power-ring svg{position:absolute;inset:0;margin:auto;color:var(--accent)}

.line-cards{display:flex;flex-direction:column;gap:10px;text-align:left}
.line-card{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg)}
.line-card > svg{display:block;flex:none}
.line-name{flex:1;min-width:0}
.line-name strong{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em}
.line-name span{display:block;font-family:var(--font-mono);font-size:10.5px;color:var(--muted);margin-top:2px;letter-spacing:.03em}
.unlock-tags{display:flex;gap:6px;flex-shrink:0}
.unlock-tags i{font-style:normal;font-size:11px;font-weight:600;color:var(--muted);background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-pill);padding:3px 10px}
.line-state{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);flex:none;min-width:64px;justify-content:flex-end}
.line-state i{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}
.ls-ok{color:var(--ok)}
.ls-ok i{background:var(--ok)}
.ls-idle i{background:var(--border-strong)}
.line-card.cur{border:1.5px solid var(--accent);background:linear-gradient(0deg,var(--accent-soft),var(--accent-soft)),var(--bg)}

/* 亮暗边界提示条 */
.next-peek{background:var(--bg-deep);display:flex;align-items:flex-start}
.next-peek .peek-inner{max-width:1160px;margin:0 auto;width:100%;padding:22px var(--gutter) 0;display:flex;align-items:center;gap:10px}
.next-peek i{width:8px;height:8px;border-radius:50%;background:var(--gold);display:inline-block;flex-shrink:0}
.next-peek span{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--bg-panel);opacity:.75;text-transform:uppercase}

/* ============ 暗区面板 ============ */
.band-dark{position:relative;background:var(--bg-deep);color:var(--deep-text);overflow-x:clip}
.band-dark::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid-line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line-dark) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.band-dark > *{position:relative}
.band-dark h2,.band-dark h3,.band-dark h4{color:var(--deep-text)}
.band-dark p,.band-dark li{color:var(--deep-muted)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-ok{background:var(--ok)}
.dot-warn{background:var(--warn)}
.dot-pink{background:var(--pink)}
.dot-gold{background:var(--gold)}
.dot-accent{background:var(--accent)}
.dark-panel{border:1px solid var(--deep-line);border-radius:var(--radius-xl);background:rgba(159,176,214,.06);padding:24px}

/* ============ 章节目录 .toc-tabs ============ */
.toc-tabs{position:sticky;top:80px;z-index:20;display:flex;gap:6px;align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-pill);padding:6px;margin:18px 0 26px;box-shadow:var(--shadow-card);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.toc-tabs::-webkit-scrollbar{display:none}
.toc-tabs a{flex-shrink:0;display:inline-flex;align-items:center;min-height:36px;padding:7px 15px;border-radius:var(--radius-pill);font-size:13.5px;font-weight:600;color:var(--muted);white-space:nowrap;transition:background .15s,color .15s}
.toc-tabs a:hover{color:var(--text);background:var(--bg-panel)}
.toc-tabs a.on{background:var(--accent);color:var(--bg)}
body:has(.toc-tabs) section[id]{scroll-margin-top:132px}

/* ============ 通用 tab ============ */
.tabs{display:inline-flex;gap:4px;padding:5px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-pill);max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs [role="tab"]{appearance:none;border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 22px;border-radius:var(--radius-pill);font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .15s,color .15s}
.tabs [role="tab"]:hover{color:var(--text)}
.tabs [role="tab"].on,.tabs [role="tab"][aria-selected="true"]{background:var(--bg);color:var(--accent);box-shadow:0 2px 8px -2px rgba(12,27,58,.12)}
.tab-panel[hidden]{display:none}

/* ============ FAQ 折叠 ============ */
.faq details{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg);margin-bottom:10px;overflow:hidden}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:16px 20px;font-size:15px;font-weight:700;cursor:pointer;list-style:none;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);font-size:18px;color:var(--muted);flex-shrink:0;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq-body{padding:0 20px 18px;font-size:14.5px;line-height:1.75;color:var(--muted)}
.faq-body a{color:var(--accent);font-weight:600}

/* ============ 套餐卡片 ============ */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plan-grid > *{min-width:0}
.plan-card{position:relative;display:flex;flex-direction:column;padding:28px 24px 24px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--bg);box-shadow:var(--shadow-card);transition:transform .2s,border-color .2s}
.plan-card:hover{transform:translateY(-3px)}
.plan-card.popular{border:1.5px solid var(--accent);background:linear-gradient(0deg,var(--accent-soft),var(--accent-soft)),var(--bg)}
.plan-badge{position:absolute;top:-13px;left:24px;display:inline-flex;align-items:center;min-height:26px;padding:4px 14px;border-radius:var(--radius-pill);background:var(--accent);color:var(--bg);font-size:12px;font-weight:700;letter-spacing:.04em}
.plan-name{font-size:15px;font-weight:800}
.plan-traffic{margin-top:4px;font-family:var(--font-mono);font-size:11.5px;color:var(--muted);letter-spacing:.03em}
.plan-price{margin-top:16px;font-family:var(--font-display);font-size:40px;font-weight:900;letter-spacing:-.02em;line-height:1}
.plan-price em{font-style:normal;font-size:14px;font-weight:700;color:var(--muted);margin-left:4px}
.plan-features{margin-top:18px;display:grid;gap:9px;font-size:13.5px;color:var(--muted)}
.plan-features li{display:flex;align-items:flex-start;gap:8px}
.plan-features li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0;margin-top:8px}
.plan-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:22px;border-radius:var(--radius-pill);border:1.5px solid var(--border-strong);font-weight:700;font-size:14.5px;color:var(--text);transition:border-color .15s,color .15s,background .15s}
.plan-btn:hover{border-color:var(--accent);color:var(--accent)}
.plan-card.popular .plan-btn{background:var(--accent);border-color:var(--accent);color:var(--bg);box-shadow:var(--shadow-btn)}
.plan-card.popular .plan-btn:hover{background:var(--accent-dark);color:var(--bg)}
.plan-note{margin-top:18px;padding:14px 18px;border:1px dashed var(--border-strong);border-radius:var(--radius-lg);font-size:13.5px;color:var(--muted);text-align:center}

/* ============ 宽表格:窄屏横滑 wrapper ============ */
.table-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg)}
.table-scroll table{min-width:720px;width:100%;border-collapse:collapse;font-size:14px}
.table-scroll th{background:var(--bg-panel);text-align:left;padding:12px 16px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.table-scroll td{padding:12px 16px;border-top:1px solid var(--border);color:var(--text);white-space:nowrap;vertical-align:middle}
.table-scroll .cell-muted{color:var(--muted)}

/* 线路表(按地区分组) */
.route-group td{background:var(--bg-panel);font-weight:700;font-size:12.5px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;padding:9px 16px}
.route-flag{display:inline-flex;align-items:center;gap:9px}
.route-flag svg{display:block;flex-shrink:0}

/* 通用数据表 + 文章裸表格防御 */
.data-table{width:100%;border-collapse:collapse;font-size:14px}
.data-table th{text-align:left;padding:11px 14px;background:var(--bg-panel);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.data-table td{padding:11px 14px;border-top:1px solid var(--border);color:var(--text)}
.prose > .data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}

/* ============ 平台卡片 ============ */
.platform-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.platform-grid > *{min-width:0}
.platform-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 14px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg);text-align:center;box-shadow:var(--shadow-card)}
.platform-card svg{display:block;color:var(--accent);flex-shrink:0}
.platform-name{font-size:14px;font-weight:700}
.platform-btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;min-width:96px;padding:7px 16px;border-radius:var(--radius-pill);border:1.5px solid var(--border-strong);font-size:12.5px;font-weight:700;color:var(--text);transition:border-color .15s,color .15s}
.platform-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ============ 博客文章卡 ============ */
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.article-grid > *{min-width:0}
.article-card{display:flex;flex-direction:column;padding:22px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--bg);box-shadow:var(--shadow-card);transition:transform .2s}
.article-card:hover{transform:translateY(-3px)}
.article-meta{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.article-date{font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
.article-title{font-size:16.5px;font-weight:800;line-height:1.45;margin:0 0 8px;color:var(--text)}
.article-title:hover{color:var(--accent)}
.article-summary{font-size:13.5px;line-height:1.7;color:var(--muted)}

/* ============ 徽章 / 标签 ============ */
.badge{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:4px 12px;border-radius:var(--radius-pill);font-size:12px;font-weight:700;max-width:100%;overflow:hidden;white-space:nowrap}
.badge-accent{background:var(--accent-soft);color:var(--accent)}
.badge-ok{background:rgba(18,183,106,.12);color:var(--ok)}
.badge-warn{background:rgba(247,144,9,.12);color:var(--warn)}
.badge-pink{background:rgba(240,61,138,.12);color:var(--pink)}
.badge-dark{background:var(--bg-deep);color:var(--deep-text)}
.tag{display:inline-flex;align-items:center;min-height:22px;padding:3px 10px;border:1px solid var(--border);border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:11px;color:var(--muted);max-width:100%;overflow:hidden}

/* ============ 引用块 ============ */
.callout{border-left:3px solid var(--accent);background:var(--bg-panel);border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:16px 20px;font-size:14.5px;line-height:1.75;color:var(--text)}
.callout strong{color:var(--accent-dark)}

/* ============ 文末推广块 ============ */
.promo-block{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 26px;border:1px solid var(--border);border-radius:var(--radius-xl);background:linear-gradient(0deg,var(--accent-soft),var(--accent-soft)),var(--bg);padding:28px 30px}
.promo-text{min-width:0}
.promo-text strong{font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--accent-dark);letter-spacing:-.01em}
.promo-text p{margin-top:6px;font-size:14px;color:var(--muted)}
.promo-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:13px 30px;border-radius:var(--radius-pill);background:var(--accent);color:var(--bg);font-size:15px;font-weight:700;box-shadow:var(--shadow-btn);transition:background .15s,transform .15s;flex-shrink:0}
.promo-cta:hover{background:var(--accent-dark);transform:translateY(-1px)}

/* ============ 悬浮 CTA(右下角常驻) ============ */
.float-cta{position:fixed;right:28px;bottom:28px;z-index:60;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:13px 26px;border-radius:var(--radius-pill);background:var(--accent);color:var(--bg);font-size:14.5px;font-weight:700;box-shadow:var(--shadow-btn);transition:background .15s,transform .15s}
.float-cta:hover{background:var(--accent-dark);transform:translateY(-2px)}
.float-cta i{width:7px;height:7px;border-radius:50%;background:var(--gold);display:inline-block;flex-shrink:0}
/* 页尾避让垫块:防浮标压住正文段尾与法律链 */
body:has(.float-cta)::after{content:"";display:block;height:calc(88px + env(safe-area-inset-bottom,0px))}

/* ============ 组件响应式 ============ */
@media (max-width:1024px){
  .platform-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .app-body{grid-template-columns:1fr}
  .app-side{display:none}
  .app-window{transform:none}
}
@media (max-width:768px){
  .hero h1{font-size:34px}
  .hero-sub{font-size:15.5px}
  .plan-grid,.article-grid{grid-template-columns:1fr}
  .platform-grid{grid-template-columns:repeat(2,1fr)}
  .conn-head{flex-wrap:wrap}
}
@media (max-width:640px){
  .app-window{transform:none}
  .glow{filter:blur(48px)}
  .float-cta{right:16px;bottom:16px;padding:12px 20px;font-size:13.5px}
  .promo-block{flex-direction:column;align-items:flex-start}
}
@media (max-width:480px){
  .platform-grid{grid-template-columns:1fr}
  .unlock-tags{display:none}
}

/* ============ 预览页专用样张(design-preview.html) ============ */
.pv-section{padding-top:64px;padding-bottom:64px;border-top:1px solid var(--border)}
.pv-section:first-of-type{border-top:none}
.pv-head{max-width:760px;margin:0 auto 36px;text-align:center;padding-inline:var(--gutter)}
.pv-head h2{margin:0 0 10px}
.pv-head p{color:var(--muted);font-size:14.5px}
.pv-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px}
.pv-swatch{min-width:0;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg)}
.pv-swatch-color{height:60px}
.pv-swatch-name{padding:10px 12px;font-family:var(--font-mono);font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
.pv-type-row{display:flex;align-items:baseline;gap:22px;padding:14px 0;border-bottom:1px dashed var(--border);flex-wrap:wrap}
.pv-type-row small{font-family:var(--font-mono);color:var(--muted);flex-shrink:0}
.pv-btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.pv-note{margin-top:14px;font-size:13px;color:var(--muted)}
.pv-cols{display:grid;grid-template-columns:2fr 1fr;gap:22px;align-items:start}
.pv-cols > *{min-width:0}
@media (max-width:860px){
  .pv-cols{grid-template-columns:1fr}
}