/* ==========================================================================
   VPNYN · components.css
   首屏轨道装置 / 客户端线路窗口 / 特性拼盘 / tab / 目录条 / FAQ /
   套餐卡 / 线路表 / 平台卡 / 文章卡 / 引用块 / 文末推广块 / 悬浮 CTA
   ========================================================================== */

/* ==========================================================================
   首屏外壳
   ========================================================================== */
.hero{
  position:relative;
  overflow-x:clip;
  padding-bottom:34px;
}
.hero-halo{
  position:absolute;
  left:0;
  right:0;
  top:-260px;
  height:820px;
  max-width:100%;
  pointer-events:none;
  background:
    radial-gradient(58% 62% at 50% 42%, var(--halo-warm) 0%, var(--halo-warm-2) 46%, var(--accent-00) 74%),
    radial-gradient(34% 40% at 50% 30%, var(--accent-10) 0%, var(--accent-00) 70%);
}
.hero-inner{
  position:relative;
  max-width:1440px;
  margin:0 auto;
  padding:26px 24px 0;
}

/* ==========================================================================
   轨道装置层
   ========================================================================== */
.orbit{
  position:absolute;
  top:0;
  left:50%;
  width:1440px;
  height:900px;
  margin-left:-720px;
  z-index:1;
  pointer-events:none;
}
.orbit-rings{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.ring-outer{fill:none;stroke:var(--accent-24);stroke-width:1.5;}
.ring-outer-hi{fill:none;stroke:var(--white-70);stroke-width:1;transform:translateY(-1.4px);}
.ring-outer-shadow{fill:none;stroke:var(--accent-10);stroke-width:5;filter:url(#ring-glow);}
.band-core{fill:none;stroke:url(#grad-band);stroke-width:40;}
.band-glow{fill:none;stroke:url(#grad-band);stroke-width:46;opacity:.55;filter:url(#ring-glow);}
.core-halo{fill:url(#grad-halo);transform-box:view-box;transform-origin:720px 280px;animation:breathe 4s ease-in-out infinite;}
.orbit-dots{transform-box:view-box;transform-origin:720px 280px;animation:drift 30s linear infinite;}
.orbit-dots circle{fill:var(--accent);opacity:.5;}

.orbit-cards,.orbit-chips,.orbit-float{position:absolute;inset:0;}

.rcard{
  position:absolute;
  display:flex;
  align-items:center;
  gap:10px;
  width:178px;
  height:56px;
  padding:0 12px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card), var(--shadow-inner-hi);
  transform:translate(-50%,-50%);
}
.rcard .flag{flex:0 0 auto;display:block;}
.rcard-name{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--text);white-space:nowrap;}
.rcard-tag{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.01em;
  color:var(--accent-dark);
  background:var(--accent-08);
  border:1px solid var(--accent-16);
  border-radius:var(--r-pill);
  padding:2px 7px;
  white-space:nowrap;
}
.rcard--sg{left:288px;top:123px;}
.rcard--jp{left:260px;top:280px;}
.rcard--hk{left:303px;top:474px;}
.rcard--us{left:1152px;top:123px;}
.rcard--uk{left:1180px;top:280px;}
.rcard--it{left:1137px;top:474px;}

.pchip{
  position:absolute;
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:34px;
  padding:0 13px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-chip);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--text);
  white-space:nowrap;
  transform:translate(-50%,-50%);
}
.pchip::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--chip-dot);
  box-shadow:0 0 0 3px var(--chip-halo);
  flex-shrink:0;
}
.pchip--iepl{--chip-dot:var(--accent);--chip-halo:var(--accent-16);left:300px;top:332px;}
.pchip--relay{--chip-dot:var(--amber);--chip-halo:var(--amber-16);left:300px;top:377px;}
.pchip--direct{--chip-dot:var(--mist);--chip-halo:var(--mist-14);left:300px;top:422px;}

.orbit-float .line-icon{position:absolute;color:var(--accent);opacity:.13;}
.orbit-float .li-globe{left:88px;top:604px;}
.orbit-float .li-arrow{right:96px;top:74px;}

/* ==========================================================================
   首屏文案列
   ========================================================================== */
.hero-copy{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 16px;
  border-radius:var(--r-pill);
  background:var(--halo-warm);
  border:1px solid var(--amber-24);
  box-shadow:0 8px 18px -12px var(--amber-24);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--text);
}
.hero-badge svg{display:block;flex-shrink:0;color:var(--accent-dark);}

.hero-h1{
  margin:24px 0 0;
  font-family:var(--font-display);
  font-size:54px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.03em;
  color:var(--text);
}
.h1-key{position:relative;display:inline-block;padding-bottom:2px;}
.h1-key::after{
  content:"";
  position:absolute;
  left:-6px;
  right:-6px;
  bottom:-3px;
  height:7px;
  border-radius:60% 40% 55% 45% / 100% 100% 100% 100%;
  background:linear-gradient(90deg,var(--accent-00) 0%,var(--accent) 11%,var(--accent) 89%,var(--accent-00) 100%);
  transform:rotate(-.8deg);
}

.hero-cta{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:24px;}
.hero-lede{
  max-width:560px;
  margin-top:22px;
  font-size:16.5px;
  line-height:26px;
  color:var(--muted);
}
.hero-lede strong{font-family:var(--font-mono);font-weight:600;color:var(--accent-dark);letter-spacing:-.01em;}

.hero-trust{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:0 14px;
  margin-top:22px;
  max-width:640px;
  font-size:13px;
  line-height:22px;
  color:var(--muted);
}
.hero-trust li{display:inline-flex;align-items:center;gap:14px;}
.hero-trust li+li::before{
  content:"";
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--border-strong);
  flex-shrink:0;
}
.hero-trust b{font-weight:600;color:var(--text);}
.hero-trust .t-sec{color:var(--accent-dark);font-weight:600;}

.hero-plats{display:flex;align-items:center;justify-content:center;gap:26px;min-height:40px;margin-top:22px;}
.plat{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);font-weight:500;white-space:nowrap;}
.plat svg{display:block;flex-shrink:0;color:var(--text);opacity:.78;}

.factcard{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin:90px auto 0;
  padding:0 22px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card), var(--shadow-inner-hi);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.01em;
  color:var(--muted);
  white-space:nowrap;
}
.factcard b{font-weight:600;color:var(--accent-dark);}
.factcard .sep{margin:0 12px;color:var(--border-strong);}

/* ==========================================================================
   客户端线路窗口
   ========================================================================== */
.cwin{
  position:relative;
  z-index:4;
  width:1060px;
  max-width:100%;
  height:300px;
  margin:57px auto 0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-window), var(--shadow-inner-hi);
  overflow:hidden;
}
.cwin-bar{
  display:flex;
  align-items:center;
  gap:12px;
  height:38px;
  padding:0 16px;
  background:var(--panel-2);
  border-bottom:1px solid var(--border-soft);
}
.cwin-dots{display:flex;gap:6px;flex-shrink:0;}
.cwin-dots i{display:block;width:9px;height:9px;border-radius:50%;}
.dot-coral{background:var(--coral);}
.dot-amber{background:var(--amber);}
.dot-sage{background:var(--sage);}
.cwin-title{font-size:11.5px;color:var(--muted);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cwin-hex{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;color:var(--muted);white-space:nowrap;}
.cwin-hex svg{display:block;flex-shrink:0;color:var(--accent);opacity:.85;}
.cwin-body{display:grid;grid-template-columns:1fr 372px;height:262px;}
.cwin-body>*{min-width:0;}
.cwin-list{padding:12px 14px;border-right:1px solid var(--border-soft);}
.crow{display:flex;align-items:center;gap:10px;height:34px;padding:0 8px;border-radius:var(--r-sm);}
.crow+.crow{margin-top:2px;}
.crow .flag{display:block;flex:0 0 auto;}
.crow-city{font-size:12.5px;color:var(--text);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.crow-type{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--muted);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:2px 8px;
  white-space:nowrap;
  flex-shrink:0;
}
.crow-mark{width:6px;height:6px;border-radius:2px;flex:0 0 auto;}
.mk-accent{background:var(--accent);}
.mk-amber{background:var(--amber);}
.mk-sage{background:var(--sage);}
.mk-mist{background:var(--mist);}
.mk-coral{background:var(--coral);}

.cwin-side{display:flex;flex-direction:column;gap:12px;padding:14px 16px;}
.cwin-conn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 14px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
}
.cwin-conn span{font-size:12.5px;font-weight:600;color:var(--text);}
.cwin-switch{
  position:relative;
  width:46px;
  height:26px;
  border-radius:var(--r-pill);
  background:var(--success-12);
  border:1px solid var(--success-30);
  flex:0 0 auto;
}
.cwin-switch::after{
  content:"";
  position:absolute;
  top:2px;
  right:2px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--panel);
  box-shadow:var(--shadow-knob);
}
.cwin-exit{padding:11px 14px;border:1px dashed var(--border-strong);border-radius:var(--r-md);}
.cwin-exit .k{display:block;font-size:10.5px;color:var(--muted);letter-spacing:.06em;}
.cwin-exit .v{margin-top:4px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text);}
.cwin-exit .v em{
  font-style:normal;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  color:var(--accent-dark);
  background:var(--accent-08);
  border:1px solid var(--accent-16);
  border-radius:var(--r-pill);
  padding:2px 8px;
}
.cwin-plan{
  margin-top:auto;
  padding:12px 14px;
  border-radius:var(--r-md);
  background:var(--accent-06);
  border:1px solid var(--accent-16);
}
.cwin-plan .k{display:block;font-size:10.5px;color:var(--muted);letter-spacing:.06em;}
.cwin-plan .v{margin-top:4px;font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--accent-dark);letter-spacing:-.01em;}
.cwin-plan .n{display:block;margin-top:3px;font-size:11px;color:var(--muted);}

/* ==========================================================================
   数据条（Hero 下方静态事实带）
   ========================================================================== */
.stats-band{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 26px;
  max-width:900px;
  margin:26px auto 0;
  padding:14px 22px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-inner-hi);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
}
.stats-band b{color:var(--accent-dark);font-weight:600;}

/* ==========================================================================
   特性拼盘（左 1/3 sticky + 右 2/3 错位瀑布）
   ========================================================================== */
.feature-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:38px;align-items:start;}
.feature-layout>*{min-width:0;}
.feature-aside{position:sticky;top:calc(var(--header-h) + 22px);}
.feature-aside .sec-lede{margin-top:16px;}
.aside-ring{display:block;margin-top:26px;}
.aside-ring circle{fill:none;stroke:var(--accent-24);stroke-width:1.5;}
.aside-ring .aside-ring-arc{stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:120 260;}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.feature-grid>*{min-width:0;}
.fcard{
  min-width:0;
  padding:24px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card), var(--shadow-inner-hi);
  transition:transform .22s ease, box-shadow .22s ease;
}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift), var(--shadow-inner-hi);}
.fcard--wide{grid-column:span 2;}
.fcard h3{margin-top:14px;}
.fcard p{margin-top:10px;font-size:14px;line-height:25px;color:var(--muted);}
.ficon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:var(--r-sm);
  flex-shrink:0;
}
.ficon svg{display:block;}
.ficon--amber{background:var(--amber-16);color:var(--on-amber);}
.ficon--coral{background:var(--coral-14);color:var(--on-coral);}
.ficon--sage{background:var(--sage-14);color:var(--on-sage);}
.ficon--mist{background:var(--mist-14);color:var(--on-mist);}

.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.trio>*{min-width:0;}

/* ==========================================================================
   Tab 切换
   ========================================================================== */
.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  width:max-content;
  max-width:100%;
  padding:6px;
  background:var(--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:0 18px;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--muted);
  font-size:13.5px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.tab:hover{color:var(--text);}
.tab[aria-selected="true"]{background:var(--panel);color:var(--text);border-color:var(--border);box-shadow:var(--shadow-chip);}
.tab-panel{padding-top:26px;min-width:0;}
.tab-panel[hidden]{display:none;}
.tab-panel:focus-visible{outline-offset:6px;}

/* ==========================================================================
   长页目录条（吸顶 + 跟随高亮；行程由 reveal.js 测量与降级）
   ========================================================================== */
.toc-tabs{
  position:sticky;
  top:0;
  z-index:4;
  display:flex;
  gap:6px;
  max-width:100%;
  margin:0 0 28px;
  padding:10px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--bg-top);
  border-bottom:1px solid var(--border-soft);
  scrollbar-width:none;
}
.toc-tabs::-webkit-scrollbar{display:none;}
.toc-tabs a{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--panel);
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
  transition:color .18s ease, background-color .18s ease, border-color .18s ease;
}
.toc-tabs a:hover{border-color:var(--accent-40);color:var(--text);}
.toc-tabs a.is-current{background:var(--accent);border-color:var(--accent);color:var(--panel);font-weight:600;}
body:has(.toc-tabs) section[id]{scroll-margin-top:calc(var(--header-h) + 76px);}

/* ==========================================================================
   FAQ 折叠项
   ========================================================================== */
.faq-item{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-inner-hi);
}
.faq-item+.faq-item{margin-top:10px;}
.faq-item summary{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:54px;
  padding:15px 18px;
  cursor:pointer;
  font-size:15px;
  font-weight:600;
  color:var(--text);
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"";
  margin-left:auto;
  flex:0 0 auto;
  width:9px;
  height:9px;
  border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px);}
.faq-body{padding:0 18px 18px;font-size:14.5px;line-height:26px;color:var(--muted);}
.faq-body p+p{margin-top:10px;}

/* ==========================================================================
   套餐卡
   ========================================================================== */
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;}
.plan-grid>*{min-width:0;}
.plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
  padding:26px 22px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card), var(--shadow-inner-hi);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.plan-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift), var(--shadow-inner-hi);}
.plan-card.is-current{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-24), var(--shadow-lift), var(--shadow-inner-hi);}
.plan-badge{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  gap:6px;
  min-height:26px;
  padding:0 11px;
  border-radius:var(--r-pill);
  background:var(--accent);
  color:var(--panel);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
}
.plan-name{font-size:15px;font-weight:700;color:var(--text);}
.plan-price{display:flex;align-items:baseline;gap:8px;font-family:var(--font-mono);}
.plan-price b{font-size:34px;font-weight:600;color:var(--accent-dark);letter-spacing:-.02em;}
.plan-price span{font-size:13px;color:var(--muted);}
.plan-list{display:grid;gap:8px;font-size:13.5px;line-height:22px;color:var(--muted);}
.plan-list li{display:flex;gap:9px;align-items:flex-start;}
.plan-list li::before{content:"✓";flex:0 0 auto;color:var(--success);font-weight:700;}
.plan-cta{margin-top:auto;padding-top:6px;}
.plan-note{font-size:12px;line-height:20px;color:var(--muted);}

/* ==========================================================================
   线路表（窄屏横滑：wrapper 负责滚动，表格自身保列宽）
   ========================================================================== */
.table-scroll{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-inner-hi);
}
.line-table{width:100%;min-width:660px;border-collapse:collapse;font-size:14px;}
.line-table th,.line-table td{
  padding:12px 16px;
  text-align:left;
  border-bottom:1px solid var(--border-soft);
  word-break:keep-all;
}
.line-table th{
  font-size:12px;
  font-weight:600;
  letter-spacing:.055em;
  color:var(--muted);
  background:var(--panel-2);
  white-space:nowrap;
}
.line-table td{color:var(--text);}
.line-table tr:last-child td{border-bottom:0;}
.line-table .cell-flag{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;}
.line-table .cell-type{font-family:var(--font-mono);font-size:12px;color:var(--accent-dark);white-space:nowrap;}
.node-group+.node-group{margin-top:30px;}
.node-group-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.node-group-head h3{font-size:17px;}
.node-group-head .mono{font-size:11.5px;color:var(--muted);}

/* ==========================================================================
   平台卡
   ========================================================================== */
.plat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:16px;}
.plat-grid>*{min-width:0;}
.plat-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  min-width:0;
  padding:22px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card), var(--shadow-inner-hi);
  transition:transform .22s ease, box-shadow .22s ease;
}
.plat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift), var(--shadow-inner-hi);}
.plat-card .ficon{margin-bottom:2px;}
.plat-card h3{font-size:15.5px;}
.plat-card .plat-note{font-size:12.5px;line-height:21px;color:var(--muted);}
.plat-card .btn{margin-top:auto;flex-shrink:0;white-space:nowrap;}

/* ==========================================================================
   博客文章卡
   ========================================================================== */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.post-grid>*{min-width:0;}
.post-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  padding:22px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card), var(--shadow-inner-hi);
  transition:transform .22s ease, box-shadow .22s ease;
}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift), var(--shadow-inner-hi);}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11.5px;color:var(--muted);}
.post-title{font-size:17px;font-weight:700;line-height:1.42;}
.post-ex{font-size:13.5px;line-height:23px;color:var(--muted);}
.post-more{margin-top:auto;padding-top:6px;font-size:13px;font-weight:600;color:var(--accent);}

/* ==========================================================================
   徽章 / 标签 / 胶囊
   ========================================================================== */
.chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:30px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--panel);
  font-size:12.5px;
  color:var(--text);
}
.chip--accent{background:var(--accent-08);border-color:var(--accent-16);color:var(--accent-dark);}
.chip--ok{background:var(--success-12);border-color:var(--success-30);color:var(--success);}
.chip-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.tag{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:0 10px;
  border-radius:var(--r-pill);
  background:var(--accent-08);
  border:1px solid var(--accent-16);
  font-size:11.5px;
  font-weight:600;
  color:var(--accent-dark);
}
.tag--sage{background:var(--sage-14);border-color:var(--sage-14);color:var(--on-sage);}
.tag--mist{background:var(--mist-14);border-color:var(--mist-14);color:var(--on-mist);}
.tag--coral{background:var(--coral-14);border-color:var(--coral-14);color:var(--on-coral);}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.dot--amber{background:var(--amber);}
.dot--sage{background:var(--sage);}
.dot--mist{background:var(--mist);}
.dot--coral{background:var(--coral);}

/* ==========================================================================
   引用块 / 提示块
   ========================================================================== */
.callout{
  display:flex;
  gap:14px;
  padding:16px 18px;
  border:1px solid var(--accent-16);
  border-left:3px solid var(--accent);
  border-radius:var(--r-md);
  background:var(--accent-06);
  font-size:14px;
  line-height:24px;
  color:var(--text);
}
.callout svg{flex-shrink:0;margin-top:3px;color:var(--accent-dark);}
.callout--warn{background:var(--amber-10);border-color:var(--amber-24);border-left-color:var(--amber);}
.callout--warn svg{color:var(--on-amber);}
.callout--ok{background:var(--success-12);border-color:var(--success-30);border-left-color:var(--success);}
.callout--ok svg{color:var(--success);}

/* ==========================================================================
   文末推广块（博客文章页用）
   ========================================================================== */
.promo-block{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 24px;
  padding:26px 28px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card), var(--shadow-inner-hi);
}
.promo-block>*{min-width:0;}
.promo-text{flex:1 1 320px;}
.promo-title{margin:0;font-family:var(--font-display);font-size:19px;font-weight:800;letter-spacing:-.02em;}
.promo-sub{margin-top:8px;font-size:13.5px;line-height:23px;color:var(--muted);}
.promo-block .btn{flex-shrink:0;white-space:nowrap;}
.promo-mark{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-md);background:var(--accent-08);color:var(--accent-dark);flex-shrink:0;}

/* ==========================================================================
   右下角常驻悬浮 CTA（页尾避让垫块）
   ========================================================================== */
.float-cta{
  position:fixed;
  right:26px;
  bottom:26px;
  z-index:20;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:0 22px;
  border-radius:var(--r-pill);
  background:var(--accent);
  color:var(--panel);
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:var(--shadow-cta);
  transition:background-color .18s ease, transform .18s ease;
}
.float-cta:hover{background:var(--accent-dark);transform:translateY(-2px);}
.float-cta svg{display:block;flex-shrink:0;}
body:has(.float-cta)::after{
  content:"";
  display:block;
  height:calc(88px + env(safe-area-inset-bottom,0px));
}

/* ==========================================================================
   平铺正文（教程 / 文章 / 深度指南）
   ========================================================================== */
.prose{max-width:100%;font-size:15.5px;line-height:28px;color:var(--text);}
.prose>*{max-width:100%;}
.prose h2{margin-top:38px;font-size:24px;}
.prose h3{margin-top:26px;}
.prose p{margin-top:14px;}
.prose ul,.prose ol{margin-top:14px;padding-left:22px;list-style:disc;}
.prose ol{list-style:decimal;}
.prose li+li{margin-top:8px;}
.prose blockquote{margin:20px 0;padding:14px 18px;border-left:3px solid var(--border-strong);background:var(--panel-2);border-radius:var(--r-md);color:var(--muted);}
.prose .callout{margin-top:20px;}
.prose code{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r-xs);padding:1px 5px;}

/* 裸表格防御：写作后台可能输出不带横滑容器的 .data-table */
.data-table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px;background:var(--panel);}
.data-table th,.data-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border-soft);word-break:keep-all;}
.data-table th{font-size:12px;font-weight:600;letter-spacing:.05em;color:var(--muted);background:var(--panel-2);white-space:nowrap;}
.data-table tr:last-child td{border-bottom:0;}
.prose>.data-table{
  display:block;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
}

/* ==========================================================================
   design-preview 专用示例排版（演示页用到的每个类都在此定义）
   ========================================================================== */
.pv-sec{padding-top:64px;padding-bottom:64px;border-top:1px dashed var(--border);}
.pv-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:26px;}
.pv-h2{font-size:26px;letter-spacing:-.025em;}
.pv-note{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);letter-spacing:.02em;}
.pv-stack{display:grid;gap:22px;}
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;}
.swatch{min-width:0;padding:10px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-inner-hi);}
.swatch-color{height:52px;border-radius:var(--r-sm);border:1px solid var(--border-soft);}
.swatch-name{display:block;margin-top:9px;font-size:12.5px;font-weight:600;}
.swatch-var{display:block;font-family:var(--font-mono);font-size:10.5px;color:var(--muted);overflow-wrap:anywhere;}
.sw-bg{background-color:var(--bg);}
.sw-bg-top{background-color:var(--bg-top);}
.sw-bg-bottom{background-color:var(--bg-bottom);}
.sw-panel{background-color:var(--panel);}
.sw-panel-2{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-amber{background-color:var(--amber);}
.sw-coral{background-color:var(--coral);}
.sw-sage{background-color:var(--sage);}
.sw-mist{background-color:var(--mist);}
.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);}
.type-stack{display:grid;gap:16px;}
.type-row{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px dashed var(--border);}
.type-label{flex:0 0 128px;font-family:var(--font-mono);font-size:11px;color:var(--muted);}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
.btn-row .btn[data-demo="hover"]{transform:translateY(-2px);}
.btn-row .btn-primary[data-demo="hover"]{background:var(--accent-dark);}
.btn-row .btn-ghost[data-demo="hover"]{border-color:var(--accent-40);}
.btn-row .btn-quiet[data-demo="hover"]{background:var(--accent-14);}

/* ==========================================================================
   动效
   ========================================================================== */
@keyframes drift{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.9;}50%{transform:scale(1.07);opacity:1;}}

/* ==========================================================================
   旗帜 / 平台图标着色（SVG 内只写 class）
   ========================================================================== */
.flag{display:block;flex:0 0 auto;}
.flag-line{fill:none;stroke:var(--border);stroke-width:1;}
.fv-white{fill:var(--flag-white);}
.fv-red{fill:var(--flag-red);}
.fv-jp{fill:var(--flag-jp);}
.fv-ukb{fill:var(--flag-uk-blue);}
.fv-usr{fill:var(--flag-us-red);}
.fv-usb{fill:var(--flag-us-blue);}
.fv-itg{fill:var(--flag-it-green);}
.fv-itr{fill:var(--flag-it-red);}
.uk-diag{fill:none;stroke:var(--flag-white);stroke-width:3.2;}
.uk-diag-r{fill:none;stroke:var(--flag-uk-red);stroke-width:1.6;}
.uk-cross-w{fill:none;stroke:var(--flag-white);stroke-width:4.6;}
.uk-cross-r{fill:none;stroke:var(--flag-uk-red);stroke-width:2.4;}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:1279px){
  .orbit{position:static;width:auto;height:auto;margin-left:0;}
  .orbit-rings,.orbit-float{display:none;}
  .orbit-cards,.orbit-chips{position:static;inset:auto;}
  .orbit-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:26px 8px 0;}
  .orbit-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:10px 8px 0;}
  .rcard{position:static;transform:none;width:auto;min-width:168px;height:52px;}
  .pchip{position:static;transform:none;}
  .factcard{margin:26px auto 0;white-space:normal;text-align:center;min-height:46px;height:auto;padding:12px 20px;line-height:22px;flex-wrap:wrap;}
  .cwin{margin-top:34px;height:auto;}
  .cwin-body{grid-template-columns:minmax(0,1fr);height:auto;}
  .cwin-list{border-right:0;border-bottom:1px solid var(--border-soft);}
  .cwin-side{flex-direction:row;flex-wrap:wrap;}
  .cwin-conn,.cwin-exit,.cwin-plan{flex:1 1 200px;margin-top:0;}
}
@media (max-width:1100px){
  .feature-layout{grid-template-columns:minmax(0,1fr);gap:26px;}
  .feature-aside{position:static;}
  .aside-ring{max-width:220px;}
}
@media (max-width:900px){
  .hero-inner{padding:22px 16px 0;}
  .hero-h1{font-size:42px;}
  .hero-plats{gap:16px;flex-wrap:wrap;justify-content:center;min-height:0;}
  .cwin-side{flex-direction:column;}
  .trio{grid-template-columns:minmax(0,1fr);}
  .plan-grid{grid-template-columns:minmax(0,1fr);}
  .post-grid{grid-template-columns:minmax(0,1fr);}
  .feature-grid{grid-template-columns:minmax(0,1fr);}
  .fcard--wide{grid-column:auto;}
}
@media (max-width:640px){
  .hero-h1{font-size:34px;letter-spacing:-.02em;}
  .hero-cta{width:100%;flex-direction:column;gap:10px;}
  .hero-badge{font-size:11.5px;padding:0 13px;}
  .float-cta{right:14px;bottom:14px;min-height:44px;padding:0 18px;}
  .tabs{width:100%;border-radius:var(--r-md);}
  .tab{flex:1 1 auto;}
  .promo-block{padding:22px 20px;}
  .promo-block .btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .orbit-dots,.core-halo{animation:none;}
}