/* ==========================================================================
   KimiVPN — components.css
   跨页面组件：hero 装置 / 徽标行 / tab / 目录条 / FAQ / 套餐卡 / 线路表 /
   平台卡 / 文章卡 / callout / 文末推广块 / 悬浮 CTA / 预览页示例排版类
   ========================================================================== */

/* ========================== 首屏文案列配件 ========================== */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  min-height:32px;padding:0 14px 0 10px;
  border-radius:var(--r-pill);background:var(--accent-tint);color:var(--accent);
  font-size:13px;font-weight:700;letter-spacing:-.005em;
  max-width:100%;
}
.eyebrow i{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-soft));
}
.trust{display:flex;flex-wrap:wrap;gap:8px 20px}
.trust li{
  display:flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;color:var(--ink);
}
.trust svg{width:16px;height:16px;flex:none;color:var(--accent)}
.hero-rule{width:100%;height:1px;background:var(--border);margin:26px 0 18px}
.hero-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero-row + .hero-row{margin-top:14px}
.row-label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  color:var(--muted-2);text-transform:uppercase;min-width:52px;flex:none;
}
.plats{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.plat{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--muted);font-size:13.5px;font-weight:600;
  transition:color .15s ease;
}
.plat:hover{color:var(--ink)}
.plat svg{width:18px;height:18px;flex:none}
.flags{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.flag{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-size:13.5px;font-weight:600}
.flag svg{width:22px;height:15px;flex:none;border-radius:3px}

/* 旗帜填充（供 <symbol> 内 class 引用） */
.f-w{fill:var(--flag-white)}
.f-jp{fill:var(--flag-jp)}
.f-sg{fill:var(--flag-sg)}
.f-usr{fill:var(--flag-us-red)}
.f-usb{fill:var(--flag-us-blue)}
.f-hk{fill:var(--flag-hk)}
.f-itg{fill:var(--flag-it-green)}
.f-itr{fill:var(--flag-it-red)}
.f-edge{fill:none;stroke:var(--flag-edge);stroke-width:1}

/* ========================== 首屏装置：暮色底板 + 客户端窗口 ========================== */
.stage{position:relative;z-index:1;min-width:0}
.dusk{
  position:relative;height:600px;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(135deg,var(--dusk-1) 0%,var(--dusk-2) 100%);
  box-shadow:0 30px 70px -26px rgba(78,21,131,.45),0 0 0 1px rgba(255,255,255,.06) inset;
}
.dusk .glow{
  position:absolute;top:-20%;right:-20%;width:70%;height:70%;pointer-events:none;
  background:radial-gradient(closest-side,var(--dusk-glow) 0%,rgba(168,85,247,.06) 45%,rgba(168,85,247,0) 100%);
}
.dusk .glow-2{
  position:absolute;left:-15%;bottom:-25%;width:60%;height:60%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(168,85,247,.08) 0%,rgba(168,85,247,0) 100%);
}
.dusk .grain{position:absolute;inset:0;width:100%;height:100%;opacity:.045;pointer-events:none;mix-blend-mode:screen}

.win{
  position:absolute;top:44px;right:30px;width:86%;
  background:var(--panel);border-radius:var(--r-md);
  box-shadow:0 0 0 1px rgba(255,255,255,.55) inset,0 0 0 1px rgba(43,33,24,.06),
             0 40px 80px -24px var(--accent-shadow-deep),0 26px 50px -20px rgba(20,8,40,.45);
  transform:rotate(-2deg);transform-origin:50% 50%;
  font-size:13px;color:var(--ink);
}
.win-bar{
  min-height:44px;display:flex;align-items:center;gap:14px;padding:0 14px;
  background:var(--chrome);border-radius:var(--r-md) var(--r-md) 0 0;color:var(--chrome-text);
}
.lights{display:flex;gap:6px;flex-shrink:0}
.lights i{width:11px;height:11px;border-radius:50%;display:block}
.lights i:nth-child(1){background:var(--light-red)}
.lights i:nth-child(2){background:var(--light-yellow)}
.lights i:nth-child(3){background:var(--light-green)}
.tools{display:flex;align-items:center;gap:2px;margin:0 auto;padding:4px 6px;border-radius:var(--r-pill);background:var(--chrome-2)}
.tool{display:grid;place-items:center;width:26px;height:22px;border-radius:var(--r-xs);color:var(--chrome-text);opacity:.85}
.tool svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tool.is-on{background:rgba(255,255,255,.14);opacity:1}
.win-status{
  display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border-radius:var(--r-pill);
  background:linear-gradient(120deg,var(--accent),var(--accent-soft));color:var(--white);
  font-size:11.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;flex-shrink:0;
}
.win-status i{width:6px;height:6px;border-radius:50%;background:var(--white);flex-shrink:0}

.win-body{display:grid;grid-template-columns:168px minmax(0,1fr);gap:14px;padding:14px}
.side{background:var(--bg);border-radius:var(--r-sm);padding:8px;box-shadow:0 0 0 1px var(--border-soft) inset;min-width:0}
.side-h,.dev-h{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--muted-2);text-transform:uppercase;padding:2px 6px 8px;
}
.side li{
  display:flex;align-items:center;gap:8px;min-height:40px;padding:0 6px;border-radius:var(--r-xs);
  font-size:12.5px;font-weight:600;color:var(--ink);position:relative;
}
.side li svg{width:18px;height:12px;flex:none;border-radius:2px}
.side li .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side li.is-on{background:var(--accent-tint)}
.side li.is-on::before{
  content:"";position:absolute;left:-8px;top:10px;bottom:10px;width:3px;
  border-radius:0 3px 3px 0;background:var(--accent);
}
.bd{font-size:10px;font-weight:700;padding:2px 6px;border-radius:var(--r-pill);white-space:nowrap;letter-spacing:.01em;flex-shrink:0}
.bd-iepl{background:var(--accent-tint-2);color:var(--accent)}
.bd-relay{background:var(--warn-tint);color:var(--warn)}
.bd-direct{background:var(--success-tint);color:var(--success)}

.main{display:flex;flex-direction:column;min-width:0}
.route{
  position:relative;overflow:hidden;background:var(--white);border-radius:var(--r-sm);
  box-shadow:0 0 0 1px var(--border-soft) inset,0 10px 24px -14px var(--accent-shadow);
  padding:14px 14px 12px;
}
.route-strip{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-soft))}
.route-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.route-tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted-2);text-transform:uppercase}
.toggle{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--muted)}
.toggle b{color:var(--accent);font-weight:700}
.switch{
  position:relative;width:30px;height:17px;border-radius:var(--r-pill);flex-shrink:0;
  background:linear-gradient(120deg,var(--accent),var(--accent-soft));display:block;
}
.switch::after{
  content:"";position:absolute;top:2px;right:2px;width:13px;height:13px;border-radius:50%;
  background:var(--white);box-shadow:0 1px 2px rgba(43,33,24,.25);
}
.route-name{
  display:flex;align-items:center;gap:9px;margin-top:8px;
  font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.02em;
  color:var(--ink);line-height:1.2;
}
.route-name svg{width:24px;height:16px;border-radius:3px;flex:none}
.route-meta{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:var(--muted);font-weight:500;flex-wrap:wrap}
.route-meta .dot{width:5px;height:5px;border-radius:50%;background:var(--muted-2);flex-shrink:0}
.route-meta .proto{font-family:var(--font-mono);font-size:11.5px;color:var(--accent);font-weight:700}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.chip{
  font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--muted);
  padding:4px 9px;border-radius:var(--r-pill);background:var(--bg);
  box-shadow:0 0 0 1px var(--border-soft) inset;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.chip.is-on{background:var(--accent-tint);color:var(--accent);box-shadow:none}

.dev-h{margin-top:14px;padding-bottom:6px}
.dev-h em{font-style:normal;color:var(--accent);font-weight:700;letter-spacing:.02em}
.devs{display:flex;flex-direction:column;gap:4px}
.devs li{
  display:flex;align-items:center;gap:9px;min-height:34px;padding:0 10px;border-radius:var(--r-xs);
  background:var(--white);box-shadow:0 0 0 1px var(--border-soft) inset;
  font-size:12.5px;font-weight:600;
}
.devs li svg{width:15px;height:15px;color:var(--ink);flex:none}
.devs .dn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.devs .st{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--success);font-weight:700;flex-shrink:0}
.devs .st i{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px var(--success-tint);flex-shrink:0}

.win-foot{
  margin-top:12px;padding-top:10px;border-top:1px dashed var(--border);
  font-family:var(--font-mono);font-size:10.5px;color:var(--muted);letter-spacing:.01em;
  display:flex;align-items:center;gap:7px;
}
.win-foot i{width:6px;height:6px;border-radius:50%;background:var(--accent-soft);flex-shrink:0}

/* 装置外围漂浮小卡 */
.fl-refund{
  position:absolute;left:-26px;bottom:46px;z-index:2;
  display:flex;align-items:center;gap:10px;padding:11px 16px 11px 12px;
  background:var(--panel);border-radius:var(--r-md);box-shadow:var(--shadow-float);
  font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;
}
.fl-refund .ico{
  width:32px;height:32px;border-radius:9px;background:var(--accent-tint);
  display:grid;place-items:center;color:var(--accent);flex-shrink:0;
}
.fl-refund .ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fl-refund small{display:block;font-size:11px;font-weight:600;color:var(--muted);line-height:1.2;margin-top:2px}
.fl-stack{
  position:absolute;top:-26px;right:-22px;z-index:2;
  padding:12px 14px 10px;background:var(--panel);border-radius:14px;box-shadow:var(--shadow-float);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.fan{display:flex;align-items:flex-end;height:26px;padding:0 6px}
.fan svg{
  width:26px;height:17px;border-radius:3px;margin-left:-9px;
  box-shadow:0 1px 3px rgba(43,33,24,.25);background:var(--white);flex-shrink:0;
}
.fan svg:first-child{margin-left:0}
.fan svg:nth-child(1){transform:rotate(-14deg) translateY(2px)}
.fan svg:nth-child(2){transform:rotate(-7deg)}
.fan svg:nth-child(3){transform:translateY(-1px)}
.fan svg:nth-child(4){transform:rotate(7deg)}
.fan svg:nth-child(5){transform:rotate(14deg) translateY(2px)}
.fl-stack span{
  font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--muted);
  letter-spacing:.02em;white-space:nowrap;
}
.fl-stack span b{color:var(--accent)}

/* ========================== 卖点拼盘（大圆角浅底 + 图标砖）========================== */
.tray{
  background:var(--panel-2);border-radius:var(--r-xl);
  padding:56px 64px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
  display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:48px;
  overflow-x:clip;
}
.tray h2{margin:0;font-size:34px;line-height:1.2}
.tray p{margin-top:16px;color:var(--muted);font-size:15.5px;line-height:1.75}
.tray-link{display:inline-flex;align-items:center;gap:6px;margin-top:20px;color:var(--accent);font-weight:700;font-size:15px}
.bricks{
  display:grid;grid-template-columns:repeat(3,minmax(0,96px));
  gap:16px;justify-content:end;align-content:start;
}
.brick{
  width:96px;height:96px;border-radius:var(--r-lg);
  background:var(--panel);box-shadow:var(--shadow-panel);
  display:grid;place-items:center;color:var(--accent);
  position:relative;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
}
.brick svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.brick:hover{transform:translateY(-2px)}
.brick[aria-selected="true"]{box-shadow:0 0 0 2px var(--accent),var(--shadow-float)}
.brick-label{
  position:absolute;bottom:8px;left:0;right:0;text-align:center;
  font-family:var(--font-mono);font-size:9.5px;color:var(--muted-2);
  letter-spacing:.02em;padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.brick .brick-ico{margin-bottom:10px}

/* ========================== tab 组件 ========================== */
.tabs{display:flex;gap:8px;flex-wrap:wrap;padding:6px;background:var(--panel-2);border-radius:var(--r-pill);width:fit-content;max-width:100%}
.tabs [role="tab"]{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding-inline:22px;border-radius:var(--r-pill);
  font-size:14.5px;font-weight:700;color:var(--muted);white-space:nowrap;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.tabs [role="tab"]:hover{color:var(--ink)}
.tabs [role="tab"][aria-selected="true"]{
  background:var(--panel);color:var(--accent);box-shadow:var(--shadow-soft);
}
.tabpanel{min-width:0}
.tabpanel[hidden]{display:none}
.tabs-note{margin-top:10px;font-size:13px;color:var(--muted-2)}

/* ========================== 长页目录条 ========================== */
.toc-tabs{
  position:sticky;top:0;z-index:12;
  display:flex;gap:8px;align-items:center;
  overflow-x:auto;overscroll-behavior-x:contain;
  padding:10px 0;margin-bottom:24px;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.toc-tabs a{
  display:inline-flex;align-items:center;min-height:36px;padding:0 14px;
  border-radius:var(--r-pill);background:var(--panel);
  box-shadow:0 0 0 1px var(--border-soft) inset;
  font-size:13.5px;font-weight:600;color:var(--muted);
  white-space:nowrap;flex-shrink:0;
}
.toc-tabs a:hover{color:var(--accent)}
.toc-tabs a.is-current{
  background:var(--accent-tint);color:var(--accent);
  box-shadow:0 0 0 1px var(--accent-tint-2) inset;
}
body:has(.toc-tabs) section[id]{scroll-margin-top:96px}

/* ========================== FAQ 折叠 ========================== */
.faq{display:grid;gap:10px;min-width:0}
.faq-item{
  background:var(--panel);border-radius:var(--r-md);
  box-shadow:var(--shadow-soft);overflow:hidden;min-width:0;
}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:56px;padding:14px 20px;cursor:pointer;
  font-size:15.5px;font-weight:700;color:var(--ink);list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";width:10px;height:10px;flex-shrink:0;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq-item .faq-body{padding:0 20px 18px;color:var(--muted);font-size:15px;line-height:1.8}
.faq-item .faq-body > * + *{margin-top:10px}
.faq-cat{margin-bottom:8px}

/* ========================== 套餐卡 ========================== */
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;min-width:0}
.sec-head + .plan-grid{margin-top:28px}
.plan-card{
  position:relative;display:flex;flex-direction:column;gap:14px;
  background:var(--panel);border-radius:var(--r-md);
  box-shadow:var(--shadow-soft);padding:26px 24px;min-width:0;
}
.plan-card.is-featured{
  box-shadow:0 0 0 2px var(--accent),0 24px 50px -24px var(--accent-shadow);
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel-3) 100%);
}
.plan-flag{
  position:absolute;top:-12px;left:24px;
  display:inline-flex;align-items:center;gap:6px;
  min-height:26px;padding:0 12px;border-radius:var(--r-pill);
  background:linear-gradient(120deg,var(--accent-dark),var(--accent) 60%,var(--accent-soft));
  color:var(--white);font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
}
.plan-name{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:-.02em}
.plan-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.plan-price b{font-family:var(--font-display);font-weight:800;font-size:40px;letter-spacing:-.03em;color:var(--ink);line-height:1}
.plan-price small{font-size:13.5px;font-weight:600;color:var(--muted)}
.plan-quota{
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--accent);
  background:var(--accent-tint);border-radius:var(--r-pill);padding:4px 12px;width:fit-content;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.plan-list{display:grid;gap:8px;font-size:14px;color:var(--muted)}
.plan-list li{display:flex;gap:9px;align-items:flex-start;line-height:1.6}
.plan-list svg{width:15px;height:15px;flex-shrink:0;margin-top:3px;color:var(--success);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.plan-card .btn{margin-top:auto}
.plan-foot{font-size:12.5px;color:var(--muted-2);line-height:1.6}

/* ========================== 线路表 ========================== */
.line-group{margin-top:28px}
.line-group > h3{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.line-group > h3 svg{width:24px;height:16px;border-radius:3px;flex:none}
.country-cell{display:flex;align-items:center;gap:9px;white-space:nowrap}
.country-cell svg{width:22px;height:15px;border-radius:3px;flex:none}
.stream-cell{display:flex;gap:6px;flex-wrap:wrap}
.stream-cell .badge{font-size:11.5px}

/* ========================== 平台卡 / 下载区 ========================== */
.platform-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;min-width:0}
.platform-card{
  display:flex;align-items:center;gap:16px;
  background:var(--panel);border-radius:var(--r-md);
  box-shadow:var(--shadow-soft);padding:18px 20px;min-width:0;
}
.platform-tile{
  width:52px;height:52px;border-radius:14px;flex-shrink:0;
  display:grid;place-items:center;color:var(--white);
  background:linear-gradient(145deg,var(--accent-mid),var(--accent) 55%,var(--accent-dark));
  box-shadow:0 10px 22px -12px var(--accent-shadow);
}
.platform-tile svg{width:26px;height:26px}
.platform-tile.tile-warm{background:linear-gradient(145deg,#D98A3C,#B9791A)}
.platform-tile.tile-green{background:linear-gradient(145deg,#4C9E6B,#2F7D4F)}
.platform-tile.tile-plum{background:linear-gradient(145deg,#8E5AC8,var(--accent-dark))}
.platform-tile.tile-slate{background:linear-gradient(145deg,#5C5A7A,#2B2118)}
.platform-meta{min-width:0;flex:1}
.platform-meta strong{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.platform-meta span{display:block;font-size:13px;color:var(--muted);margin-top:2px}

/* ========================== 文章卡 ========================== */
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;min-width:0}
.article-card{
  display:flex;flex-direction:column;gap:12px;
  background:var(--panel);border-radius:var(--r-md);
  box-shadow:var(--shadow-soft);padding:22px;min-width:0;
  transition:transform .15s ease,box-shadow .15s ease;
}
.article-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-panel)}
.article-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11.5px;color:var(--muted-2);
}
.article-card h3{font-size:18px;line-height:1.45}
.article-card p{font-size:14px;color:var(--muted);line-height:1.7}
.article-card .text-link{margin-top:auto;font-size:14px}

/* ========================== callout ========================== */
.callout{
  display:flex;gap:14px;
  background:var(--panel-2);border-left:3px solid var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:16px 20px;min-width:0;
}
.callout svg{width:20px;height:20px;flex-shrink:0;color:var(--accent);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.callout p{font-size:14.5px;line-height:1.75;color:var(--ink)}
.callout strong{color:var(--accent)}
.callout-warn{border-left-color:var(--warn)}
.callout-warn svg{color:var(--warn)}

/* ========================== 文末推广块（博客文章用）========================== */
.promo-block{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--dusk-1) 0%,var(--dusk-2) 100%);
  border-radius:var(--r-lg);padding:26px 28px;color:var(--chrome-text);
  box-shadow:0 24px 50px -26px rgba(78,21,131,.5);
  overflow-x:clip;
}
.promo-block .promo-mark{width:40px;height:40px;border-radius:11px;flex-shrink:0}
.promo-block .promo-text{min-width:0;flex:1 1 260px}
.promo-block strong{display:block;font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.promo-block p{margin-top:6px;font-size:14px;color:rgba(243,238,249,.78);line-height:1.7}
.promo-block .btn{flex-shrink:0;white-space:nowrap}

/* ========================== 悬浮 CTA（全站常驻）========================== */
.float-cta{
  position:fixed;right:28px;bottom:28px;z-index:20;
  display:inline-flex;align-items:center;gap:8px;
  min-height:48px;padding-inline:22px;border-radius:var(--r-pill);
  color:var(--white);font-weight:700;font-size:15px;
  background:linear-gradient(120deg,var(--accent-dark),var(--accent) 55%,var(--accent-mid));
  box-shadow:0 14px 30px -10px var(--accent-shadow),0 1px 0 rgba(255,255,255,.2) inset;
}
.float-cta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
/* 页尾避让：与浮标等高的垫块，防止压住正文段尾与页脚法律链 */
body:has(.float-cta)::after{
  content:"";display:block;height:calc(88px + env(safe-area-inset-bottom,0px));
}

/* ========================== 页尾 CTA 横带 ========================== */
.ctaband{
  background:linear-gradient(135deg,var(--dusk-1) 0%,var(--dusk-2) 100%);
  border-radius:var(--r-xl);
  padding:44px 48px;
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  box-shadow:0 30px 60px -30px rgba(78,21,131,.5);
  overflow-x:clip;
}
.ctaband h2{color:var(--chrome-text);font-size:30px;max-width:520px}
.ctaband p{margin-top:10px;color:rgba(243,238,249,.75);font-size:15px;max-width:520px}
.ctaband .ctaband-actions{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto}
.ctaband .btn-ghost{background:rgba(255,255,255,.12);color:var(--chrome-text);box-shadow:0 0 0 1px rgba(255,255,255,.28) inset}
.ctaband .btn-ghost:hover{background:rgba(255,255,255,.2)}

/* ========================== 步骤条 / 事实带 ========================== */
.fact-row{
  display:flex;flex-wrap:wrap;gap:12px;
  font-family:var(--font-mono);font-size:12.5px;color:var(--muted);
}
.fact-row li{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--panel);border-radius:var(--r-pill);
  padding:6px 14px;box-shadow:0 0 0 1px var(--border-soft) inset;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fact-row b{color:var(--accent);font-weight:700}
.step-card{display:flex;gap:14px;background:var(--panel);border-radius:var(--r-md);box-shadow:var(--shadow-soft);padding:20px;min-width:0}
.step-num{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:var(--accent-tint);color:var(--accent);
  font-family:var(--font-mono);font-size:14px;font-weight:700;
}

/* ========================== design-preview 示例排版类 ========================== */
.pv-sec{padding-top:56px;padding-bottom:56px}
.pv-sec + .pv-sec{border-top:1px solid var(--border-soft)}
.pv-label{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:18px;
}
.pv-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.pv-swatch{background:var(--panel);border-radius:var(--r-md);box-shadow:var(--shadow-soft);padding:12px;min-width:0}
.pv-chip{height:52px;border-radius:var(--r-sm);box-shadow:0 0 0 1px var(--border-soft) inset;margin-bottom:10px}
.pv-swatch code{font-size:12px;color:var(--ink);display:block;overflow-wrap:anywhere}
.pv-swatch span{display:block;font-size:11.5px;color:var(--muted-2);margin-top:2px}
.pv-type > * + *{margin-top:14px}
.pv-type .pv-h1{font-family:var(--font-display);font-weight:800;font-size:60px;line-height:1.06;letter-spacing:-.03em}
.pv-type .pv-h2{font-family:var(--font-display);font-weight:800;font-size:38px;line-height:1.2;letter-spacing:-.025em}
.pv-type .pv-h3{font-family:var(--font-display);font-weight:700;font-size:21px}
.pv-type .pv-body{font-size:16px;color:var(--muted);max-width:640px}
.pv-type .pv-mono{font-family:var(--font-mono);font-size:13px;color:var(--muted)}
.pv-btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.pv-grid{display:grid;gap:20px;min-width:0}
.pv-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pv-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pv-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:52px;align-items:center}
.pv-hero-copy{display:flex;flex-direction:column;align-items:flex-start}
.pv-hero-copy h1{margin:24px 0 26px}
.pv-hero-copy .lede{margin-top:24px;max-width:520px}
.pv-hero-copy .trust{margin-top:20px}
.pv-note{font-size:13px;color:var(--muted-2);margin-top:10px}
.pv-footer-sample{background:var(--panel-2);border-radius:var(--r-xl);padding:36px 40px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset}

@media (max-width:1024px){
  .tray{grid-template-columns:minmax(0,1fr);padding:36px 28px}
  .bricks{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:start}
  .brick{width:100%;height:88px}
  .plan-grid,.platform-grid,.article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-hero{grid-template-columns:minmax(0,1fr);gap:36px}
  .dusk{height:auto;padding:28px}
  .win{position:relative;top:auto;right:auto;width:100%;transform:none}
  .fl-refund,.fl-stack{display:none}
  .ctaband{padding:32px 28px}
  .ctaband .ctaband-actions{margin-left:0;width:100%}
}
@media (max-width:768px){
  .plan-grid,.platform-grid,.article-grid,.pv-grid-2,.pv-grid-3{grid-template-columns:minmax(0,1fr)}
  .tray h2{font-size:26px}
  .pv-type .pv-h1{font-size:36px}
  .pv-type .pv-h2{font-size:28px}
  .ctaband h2{font-size:24px}
}
@media (max-width:640px){
  .win-body{grid-template-columns:minmax(0,1fr)}
  .tools{display:none}
  .dusk{padding:14px}
  .bricks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust li{white-space:normal}
  .float-cta{right:16px;bottom:16px;min-height:46px;padding-inline:18px;font-size:14.5px}
  .toc-tabs a{min-height:34px}
}