/* ZaFeed 站点组件样式（导航 / 页脚 / 拼块 / 代码窗 / 结算条等），首页与内页共用。依赖 foundation.css / overlays.css */

body { background: var(--zf-bg); overflow-x: hidden; }
.page-bg {
  position: absolute; inset: 0 0 auto 0; height: 1100px; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(900px 520px at 78% 18%, rgba(116, 211, 162, .30), transparent 65%),
    radial-gradient(700px 420px at 12% 8%, rgba(214, 240, 228, .9), transparent 70%),
    linear-gradient(180deg, var(--zf-tint) 0%, var(--zf-bg) 100%);
}
.page-bg svg { position: absolute; right: -120px; top: 120px; width: 1100px; height: 640px; opacity: .9; }
.page-bg .ribbon { animation: ribbon 14s var(--zf-ease) infinite alternate; transform-origin: center; }
.page-bg .ribbon:nth-child(2) { animation-duration: 18s; animation-delay: -6s; }
@keyframes ribbon { from { transform: translate3d(0, 0, 0) scaleY(1); } to { transform: translate3d(-40px, 18px, 0) scaleY(1.08); } }

section { position: relative; }
.sec { padding: 120px 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 48px; }

/* ============================ 导航 ============================ */
.nav {
  position: sticky; top: 0; z-index: var(--zf-z-nav); height: 76px;
  transition: height var(--zf-dur-layer) var(--zf-ease-out), background-color var(--zf-dur-layer), box-shadow var(--zf-dur-layer), border-color var(--zf-dur-layer);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled, .nav.is-mega {
  height: 64px; background: rgb(var(--zf-surface-rgb) / .76); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border-bottom-color: rgb(var(--zf-shade-rgb) / .07); box-shadow: 0 8px 30px -20px rgba(16, 42, 67, .25);
}
.nav .zf-container { height: 100%; display: flex; align-items: center; gap: 28px; }
.nav__brand { display: flex; align-items: center; height: 100%; margin-right: auto; }
.nav__brand img { height: 32px; width: auto; transition: transform var(--zf-dur-pop) var(--zf-ease-out); }
.nav__brand:hover img { transform: scale(1.03); }
.nav__links { position: relative; display: flex; align-items: center; gap: 2px; height: 40px; margin-right: auto; }
.nav__ind {
  position: absolute; top: 0; left: 0; height: 40px; width: 0; border-radius: var(--zf-r-pill); background: rgb(var(--zf-shade-rgb) / .06);
  opacity: 0; transition: transform 300ms var(--zf-ease-out), width 300ms var(--zf-ease-out), opacity 160ms;
}
.nav__links.is-hover .nav__ind { opacity: 1; }
.nav__link {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 16px; border-radius: var(--zf-r-pill);
  font-size: 15px; font-weight: 500; color: var(--zf-text); transition: color var(--zf-dur-hover);
}
.nav__link svg { width: 14px; height: 14px; color: var(--zf-text-3); transition: transform var(--zf-dur-pop) var(--zf-ease-out); }
.nav__link.is-active svg { transform: rotate(180deg); color: var(--zf-green-600); }
.nav__link.is-active { color: var(--zf-green-800); }
.nav__right { display: flex; align-items: center; gap: 10px; }
.nav__search {
  display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 8px 0 14px; border-radius: var(--zf-r-pill);
  border: 1px solid var(--zf-line); background: rgb(var(--zf-surface-rgb) / .7); color: var(--zf-text-3); font-size: 14px;
  transition: border-color var(--zf-dur-hover), background-color var(--zf-dur-hover), color var(--zf-dur-hover), width var(--zf-dur-pop);
}
.nav__search svg { width: 17px; height: 17px; }
.nav__search:hover { border-color: var(--zf-green-300); color: var(--zf-text); background: var(--zf-surface); }
.nav__search .zf-kbd { height: 22px; }

/* 超级菜单：一个面板在不同菜单之间变形 */
.mega {
  position: fixed; z-index: var(--zf-z-dropdown); top: 0; left: 0;
  width: var(--w, 560px); height: var(--h, 300px); border-radius: var(--zf-r-lg);
  background: rgb(var(--zf-surface-rgb) / .86); -webkit-backdrop-filter: blur(28px) saturate(1.7); backdrop-filter: blur(28px) saturate(1.7);
  border: 1px solid rgb(var(--zf-shade-rgb) / .08); box-shadow: var(--zf-sh-inset), 0 40px 80px -30px rgba(16, 42, 67, .35), 0 10px 24px -12px rgba(16, 42, 67, .12);
  transform: translate3d(var(--x, 0), var(--y, 0), 0) translateY(-8px) scale(.98); transform-origin: var(--ox, 50%) 0;
  opacity: 0; visibility: hidden; overflow: hidden;
  transition: opacity 160ms var(--zf-ease-in), transform 160ms var(--zf-ease-in), visibility 0s 160ms;
}
.mega.is-open {
  opacity: 1; visibility: visible; transform: translate3d(var(--x, 0), var(--y, 0), 0);
  transition: opacity 240ms var(--zf-ease-out), transform 240ms var(--zf-ease-out), visibility 0s;
}
.mega.is-open.is-morph {
  transition: opacity 240ms var(--zf-ease-out), transform 380ms var(--zf-ease-out), width 380ms var(--zf-ease-out), height 380ms var(--zf-ease-out), visibility 0s;
}
.mega__arrow {
  position: fixed; z-index: calc(var(--zf-z-dropdown) + 1); top: 0; left: 0; width: 14px; height: 14px; border-radius: 3px;
  background: var(--zf-surface); border-left: 1px solid rgb(var(--zf-shade-rgb) / .08); border-top: 1px solid rgb(var(--zf-shade-rgb) / .08);
  transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(45deg); opacity: 0; transition: opacity 160ms, transform 380ms var(--zf-ease-out);
}
.mega.is-open + .mega__arrow { opacity: 1; }
.mega__sec { position: absolute; top: 0; left: 0; padding: 22px; opacity: 0; pointer-events: none; transform: translateX(calc(var(--dir, 0) * 40px)); transition: opacity 200ms var(--zf-ease), transform 380ms var(--zf-ease-out); }
.mega__sec.is-on { opacity: 1; pointer-events: auto; transform: none; transition-delay: 60ms; }
.mega__grid { display: grid; grid-template-columns: repeat(2, 252px); gap: 4px 8px; }
.mega__item { display: flex; gap: 14px; padding: 12px; border-radius: 12px; transition: background-color 140ms var(--zf-ease); }
.mega__item:hover { background: var(--zf-green-50); }
.mega__ico { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--zf-surface); border: 1px solid var(--zf-line); color: var(--zf-green-600); box-shadow: var(--zf-sh-1); transition: transform 260ms var(--zf-ease-spring), border-color 140ms; }
.mega__ico svg { width: 19px; height: 19px; }
.mega__item:hover .mega__ico { transform: translateY(-2px) rotate(-4deg); border-color: var(--zf-green-200); }
.mega__t { font-size: 14.5px; font-weight: 600; color: var(--zf-text); display: flex; align-items: center; gap: 8px; }
.mega__d { margin-top: 2px; font-size: 13px; color: var(--zf-text-3); line-height: 1.5; }
.mega__new { height: 18px; padding: 0 6px; border-radius: 99px; background: var(--zf-green-600); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; }
.mega__foot { display: flex; align-items: center; justify-content: space-between; margin: 14px -22px -22px; padding: 14px 22px; background: rgb(var(--zf-surface-2-rgb) / .8); border-top: 1px solid var(--zf-line); font-size: 13px; color: var(--zf-text-2); }
.mega__markets { display: grid; grid-template-columns: 220px 300px; gap: 20px; }
.mega__mlist { display: grid; gap: 2px; }
.mega__mrow { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; color: var(--zf-text); transition: background-color 140ms; }
.mega__mrow:hover { background: var(--zf-green-50); }
.mega__mrow span { font-size: 12.5px; color: var(--zf-text-3); }
.mega__feature { border-radius: 14px; padding: 18px; background: linear-gradient(160deg, var(--zf-tint), var(--zf-surface) 70%); border: 1px solid var(--zf-green-100); }
.mega__feature h5 { font-size: 15px; }
.mega__feature p { font-size: 13px; margin: 6px 0 12px; }

/* ============================ 首屏 ============================ */
.hero { padding: 64px 0 40px; }
.hero .zf-container { display: grid; grid-template-columns: 1fr 560px; gap: 40px; align-items: center; min-height: 560px; }
.hero h1 { margin-top: 22px; font-size: 68px; line-height: 1.12; letter-spacing: -.02em; font-weight: 800; }
.hero__desc { margin-top: 24px; max-width: 520px; font-size: 18px; line-height: 1.75; color: var(--zf-text-2); }
.hero__cta { display: flex; gap: 14px; margin-top: 36px; }
.hero__meta { display: flex; align-items: center; gap: 22px; margin-top: 30px; font-size: 13.5px; color: var(--zf-text-3); }
.hero__meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero__meta svg { width: 16px; height: 16px; color: var(--zf-green-600); }

.stage { position: relative; height: 520px; }
.stage__card { position: absolute; border-radius: 24px; }
.stage__back {
  right: -10px; top: 26px; width: 420px; height: 300px; transform: rotate(6deg); opacity: .85;
  background: linear-gradient(150deg, rgb(var(--zf-surface-rgb) / .6), rgba(214, 243, 227, .55)); border: 1px solid rgb(var(--zf-surface-rgb) / .9);
  box-shadow: var(--zf-sh-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: float 9s var(--zf-ease) infinite alternate;
}
.stage__back-inner { padding: 22px 26px; display: flex; justify-content: space-between; align-items: flex-start; opacity: .7; }
.stage__main { left: 20px; top: 24px; width: 470px; padding: 26px 28px 20px; animation: float 7s var(--zf-ease) infinite alternate-reverse; }
@keyframes float { from { translate: 0 0; } to { translate: 0 -10px; } }
.qhead { display: flex; align-items: center; gap: 12px; }
.qbadge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--zf-ink-800); color: #fff; font: 700 13px/1 var(--zf-sans); letter-spacing: -.02em; }
.qbadge--sm { width: 32px; height: 32px; border-radius: 9px; font-size: 11px; }
.qbadge--crypto { background: var(--zf-cat-crypto); }
.qbadge--fx { background: var(--zf-cat-fx); }
.qcode { font-size: 18px; font-weight: 700; color: var(--zf-text); line-height: 1.2; }
.qname { font-size: 12.5px; color: var(--zf-text-3); }
.qprice { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.qprice__v { font-size: 50px; font-weight: 700; color: var(--zf-text); letter-spacing: -.03em; line-height: 1; padding: 2px 6px; margin-left: -6px; }
.stage__chart { height: 150px; margin: 14px -6px 0; }
.qstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 14px; margin-top: 8px; border-top: 1px solid rgb(var(--zf-shade-rgb) / .07); font-size: 12px; color: var(--zf-text-3); }
.qstats b { display: block; font-size: 13.5px; color: var(--zf-text); font-weight: 600; }
.stage__mini {
  left: -40px; bottom: 4px; width: 250px; padding: 16px 18px; border-radius: 18px;
  animation: float 8s 1s var(--zf-ease) infinite alternate;
}
.stage__mini .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stage__mini .p { margin-top: 10px; font-size: 22px; font-weight: 700; color: var(--zf-text); letter-spacing: -.02em; padding: 0 4px; margin-left: -4px; }
.stage__push {
  left: 236px; bottom: 18px; width: 270px; padding: 12px 14px; border-radius: 16px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center;
  font-size: 12.5px; color: var(--zf-text-2);
  opacity: 0; transform: translateY(10px) scale(.96); transition: opacity 260ms var(--zf-ease-in), transform 260ms var(--zf-ease-in);
}
.stage__push.is-on { opacity: 1; transform: none; transition: opacity 420ms var(--zf-ease-out), transform 520ms var(--zf-ease-spring); }
.stage__push .ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--zf-green-600); color: #fff; }
.stage__push .ico svg { width: 16px; height: 16px; }
.stage__push b { color: var(--zf-text); font-weight: 600; }
.stage__push .zf-mono { font-size: 11.5px; color: var(--zf-text-3); }
.stage .zf-demo-chip { position: absolute; right: 24px; top: 24px; }

/* 行情滚动带 */
.tape { position: relative; margin-top: 18px; height: 64px; border-top: 1px solid rgb(var(--zf-shade-rgb) / .06); border-bottom: 1px solid rgb(var(--zf-shade-rgb) / .06); background: rgb(var(--zf-surface-rgb) / .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; }
.tape::before, .tape::after { content: ""; position: absolute; top: 0; bottom: 0; width: 160px; z-index: 2; pointer-events: none; }
.tape::before { left: 0; background: linear-gradient(90deg, var(--zf-bg), transparent); }
.tape::after { right: 0; background: linear-gradient(-90deg, var(--zf-bg), transparent); }
.tape__track { display: flex; width: max-content; height: 100%; animation: tape 60s linear infinite; }
.tape:hover .tape__track { animation-play-state: paused; }
@keyframes tape { to { transform: translateX(-50%); } }
.tape__item { display: flex; align-items: center; gap: 12px; height: 100%; padding: 0 26px; font-size: 14px; color: var(--zf-text); border-right: 1px solid rgb(var(--zf-shade-rgb) / .06); cursor: default; transition: background-color var(--zf-dur-hover); }
.tape__item:hover { background: rgb(var(--zf-surface-rgb) / .9); }
.tape__item b { font-weight: 600; }
.tape__item .px { font-variant-numeric: tabular-nums; padding: 2px 4px; }
.tape__item .chg { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tape__item svg { opacity: .9; }

/* ============================ 覆盖范围 ============================ */
.cov { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cov__card { padding: 26px 24px 22px; cursor: pointer; }
.cov__ico {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, var(--zf-surface)); border: 1px solid color-mix(in srgb, var(--c) 18%, var(--zf-surface));
  transition: transform 420ms var(--zf-ease-spring), box-shadow var(--zf-dur-pop);
}
.cov__ico svg { width: 26px; height: 26px; }
.cov__card:hover .cov__ico { transform: translateY(-3px) rotate(-6deg) scale(1.06); box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--c) 70%, transparent); }
.cov__card h3 { margin-top: 22px; font-size: 21px; }
.cov__sub { margin-top: 4px; font-size: 14px; color: var(--zf-text-3); }
.cov__num { display: flex; align-items: baseline; gap: 6px; margin-top: 22px; }
.cov__num b { font-size: 32px; font-weight: 700; color: var(--zf-text); letter-spacing: -.02em; }
.cov__num span { font-size: 13.5px; color: var(--zf-text-3); }
.cov__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.cov__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--zf-dur-layer) var(--zf-ease-out); }
.cov__more > div { overflow: hidden; }
.cov__card:hover .cov__more { grid-template-rows: 1fr; }
.cov__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--zf-line); font-size: 13px; color: var(--zf-text-3); }
.cov__go { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--zf-ink-50); color: var(--zf-text-2); transition: background-color var(--zf-dur-hover), color var(--zf-dur-hover), transform var(--zf-dur-pop) var(--zf-ease-out); }
.cov__go svg { width: 15px; height: 15px; }
.cov__card:hover .cov__go { background: var(--zf-green-600); color: #fff; transform: translateX(2px) rotate(-45deg); }

/* ============================ 数据能力 ============================ */
.cap { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: start; }
.cap__list { display: grid; gap: 6px; margin-top: 36px; }
.cap__item { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 18px 20px; border-radius: 16px; text-align: left; transition: background-color var(--zf-dur-pop); overflow: hidden; }
.cap__item:hover { background: rgb(var(--zf-surface-rgb) / .6); }
.cap__item[aria-selected="true"] { background: var(--zf-surface); box-shadow: var(--zf-sh-2); }
.cap__check { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--zf-green-50); color: var(--zf-green-600); transition: background-color var(--zf-dur-pop), color var(--zf-dur-pop), transform 400ms var(--zf-ease-spring); }
.cap__check svg { width: 19px; height: 19px; }
.cap__item[aria-selected="true"] .cap__check { background: var(--zf-green-600); color: #fff; transform: scale(1.05); }
.cap__t { font-size: 17px; font-weight: 700; color: var(--zf-text); }
.cap__d { margin-top: 3px; font-size: 14px; color: var(--zf-text-3); line-height: 1.6; }
.cap__prog { position: absolute; left: 18px; right: 18px; bottom: 8px; height: 2px; border-radius: 2px; background: var(--zf-ink-50); opacity: 0; transition: opacity 200ms; }
.cap__prog i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--zf-green-500); transform-origin: left; transform: scaleX(0); }
.cap__item[aria-selected="true"] .cap__prog { opacity: 1; }
.cap__item[aria-selected="true"] .cap__prog i { animation: capprog var(--cap-dur, 7000ms) linear forwards; }
.cap.is-paused .cap__prog i { animation-play-state: paused; }
@keyframes capprog { to { transform: scaleX(1); } }

.panel { position: relative; height: 520px; padding: 0; overflow: hidden; }
.panel__view { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.99); transition: opacity 200ms var(--zf-ease-in), transform 200ms var(--zf-ease-in), visibility 0s 200ms; }
.panel__view.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 420ms var(--zf-ease-out) 80ms, transform 520ms var(--zf-ease-out) 80ms, visibility 0s; }
.panel__head { display: flex; align-items: center; gap: 14px; height: 68px; padding: 0 24px; border-bottom: 1px solid var(--zf-line); }
.panel__body { flex: 1; padding: 20px 24px; position: relative; }
.panel__url { font: 500 13px var(--zf-mono); color: var(--zf-text-2); background: var(--zf-ink-50); padding: 5px 10px; border-radius: 8px; }
.panel__stat { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--zf-text-2); }

.stream { display: grid; gap: 0; font-size: 13.5px; }
.stream__head, .stream__row { display: grid; grid-template-columns: 120px 1fr 120px 100px 80px; align-items: center; height: 46px; padding: 0 14px; }
.stream__head { height: 34px; font-size: 12px; color: var(--zf-text-3); font-weight: 500; }
.stream__row { border-radius: 10px; color: var(--zf-text); animation: streamin 520ms var(--zf-ease-out) both; }
.stream__row:nth-child(even) { background: var(--zf-surface-2); }
.stream__row .t { font-family: var(--zf-mono); font-size: 12px; color: var(--zf-text-3); }
.stream__row .s { font-weight: 600; display: flex; align-items: center; gap: 10px; }
.stream__row .p, .stream__row .c, .stream__row .v { text-align: right; font-variant-numeric: tabular-nums; }
.stream__row .v { color: var(--zf-text-3); }
@keyframes streamin { from { opacity: 0; transform: translateY(-16px); background-color: var(--zf-green-50); } to { opacity: 1; transform: none; } }
.panel__foot { display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 24px; border-top: 1px solid var(--zf-line); font-size: 13px; color: var(--zf-text-3); background: var(--zf-surface-2); }

.kline-host { height: 340px; }
.snap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--zf-line); border: 1px solid var(--zf-line); border-radius: 14px; overflow: hidden; }
.snap div { background: var(--zf-surface); padding: 16px 18px; transition: background-color var(--zf-dur-hover); }
.snap div:hover { background: var(--zf-green-50); }
.snap span { display: block; font-size: 12.5px; color: var(--zf-text-3); }
.snap b { display: block; margin-top: 4px; font-size: 18px; color: var(--zf-text); font-variant-numeric: tabular-nums; }
.snap-big { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.snap-big .v { font-size: 44px; line-height: 1; font-weight: 700; color: var(--zf-text); letter-spacing: -.03em; padding: 2px 6px; margin-left: -6px; }
.json { margin: 0; padding: 18px 20px; border-radius: 14px; background: var(--zf-ink-900); color: #C9D5E1; font: 13px/1.75 var(--zf-mono); overflow: auto; height: 300px; }
.json .k { color: #7FD7AA; } .json .s { color: #F6C177; } .json .n { color: #9CC9FF; } .json .c { color: #627D98; }

/* ============================ 接入 ============================ */
.dev { display: grid; grid-template-columns: 480px 1fr; gap: 60px; align-items: center; }
.iso { position: relative; height: 380px; perspective: 1200px; }
.iso__stack { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-40deg); transition: transform 800ms var(--zf-ease-out); }
.iso:hover .iso__stack { transform: rotateX(54deg) rotateZ(-34deg); }
.iso__plate {
  position: absolute; inset: 0; border-radius: 44px; transform: translateZ(calc(var(--z) * 1px));
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(205, 240, 222, .72)); border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 0 0 1px rgba(0,144,74,.06), 0 30px 60px -20px rgba(0, 120, 60, .35), inset 0 1px 0 #fff;
  transition: transform 800ms var(--zf-ease-out);
}
.iso__plate:nth-child(1) { --z: 0; opacity: .55; }
.iso__plate:nth-child(2) { --z: 34; opacity: .75; }
.iso__plate:nth-child(3) { --z: 68; }
.iso:hover .iso__plate:nth-child(2) { transform: translateZ(50px); }
.iso:hover .iso__plate:nth-child(3) { transform: translateZ(104px); }
.iso__plate:nth-child(3) { display: grid; place-items: center; background: linear-gradient(135deg, #ffffff, #D9F5E6 60%, #B9EBCF); }
.iso__glyph { font: 800 92px/1 var(--zf-sans); letter-spacing: -.04em; color: transparent; background: linear-gradient(150deg, #2FBE79, var(--zf-green-700)); -webkit-background-clip: text; background-clip: text; transform: rotateZ(40deg); }
.iso__glow { position: absolute; left: 50%; top: 58%; width: 380px; height: 160px; margin-left: -190px; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 190, 121, .35), transparent); filter: blur(10px); }
.iso__float { animation: isofloat 6s var(--zf-ease) infinite alternate; position: absolute; inset: 0; }
@keyframes isofloat { to { translate: 0 -14px; } }
.dev__cta { display: flex; gap: 12px; margin-top: 30px; }
.dev__langs { display: flex; gap: 8px; margin-top: 26px; flex-wrap: wrap; }

.code { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; border-radius: 22px; overflow: hidden; background: var(--zf-ink-900); box-shadow: var(--zf-sh-3); }
.code__side { display: flex; flex-direction: column; min-height: 400px; }
.code__side + .code__side { border-left: 1px solid rgba(255,255,255,.07); background: #0E2438; }
.code__bar { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 14px 0 18px; border-bottom: 1px solid rgba(255,255,255,.07); }
.code .zf-tabs { border: 0; }
.code .zf-tabs button { height: 56px; color: #7F95AA; }
.code .zf-tabs button:hover, .code .zf-tabs button[aria-selected="true"] { color: #fff; }
.code .zf-tabs__ind { bottom: 0; background: var(--zf-green-400); }
.code__bar .sp { margin-left: auto; display: flex; gap: 8px; }
.code__btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 9px; color: #B7C6D4; font-size: 13px; font-weight: 500; background: rgba(255,255,255,.05); transition: background-color var(--zf-dur-hover), color var(--zf-dur-hover); }
.code__btn svg { width: 15px; height: 15px; }
.code__btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.code__btn.is-copied { color: #7FD7AA; }
.code__run { background: var(--zf-green-600); color: #fff; }
.code__run:hover { background: var(--zf-green-500); }
.code pre { margin: 0; padding: 22px 24px; font: 13.5px/1.85 var(--zf-mono); color: #C9D5E1; white-space: pre; overflow: auto; flex: 1; }
.code pre .k { color: #FF9E9E; } .code pre .f { color: #7FD7AA; } .code pre .s { color: #F6C177; } .code pre .n { color: #9CC9FF; } .code pre .c { color: #5C7690; } .code pre .p { color: #C9D5E1; }
.code__res { position: relative; flex: 1; }
.code__empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #5C7690; font-size: 14px; }
.code__empty .zf-nodes { justify-content: center; margin-bottom: 14px; color: #2FBE79; }
.code__status { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px var(--zf-mono); color: #7FD7AA; opacity: 0; transition: opacity 200ms; }
.code__status.is-on { opacity: 1; }
.code__status i { width: 7px; height: 7px; border-radius: 50%; background: #2FBE79; }
.code pre.is-typing { mask-image: linear-gradient(180deg, #000 var(--reveal, 0%), transparent calc(var(--reveal, 0%) + 8%)); -webkit-mask-image: linear-gradient(180deg, #000 var(--reveal, 0%), transparent calc(var(--reveal, 0%) + 8%)); }

/* ============================ 规格 ============================ */
.specs { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 24px; padding: 8px; }
.spec { position: relative; padding: 28px 30px; }
.spec + .spec::before { content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 1px; background: rgb(var(--zf-shade-rgb) / .08); }
.spec__l { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--zf-text-2); }
.spec__l .info { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--zf-text-3); cursor: help; border-radius: 50%; transition: color var(--zf-dur-hover), background-color var(--zf-dur-hover); }
.spec__l .info:hover { color: var(--zf-green-700); background: var(--zf-green-50); }
.spec__l .info svg { width: 15px; height: 15px; }
.spec__v { margin-top: 10px; font-size: 42px; font-weight: 700; color: var(--zf-text); letter-spacing: -.03em; line-height: 1; }
.spec__v small { font-size: 18px; font-weight: 600; margin-left: 3px; color: var(--zf-text-2); letter-spacing: 0; }
.spec__d { margin-top: 10px; font-size: 13px; color: var(--zf-text-3); }

/* ============================ 三步开始 ============================ */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.steps__line { position: absolute; left: 16.6%; right: 16.6%; top: 27px; height: 2px; background: var(--zf-line-2); border-radius: 2px; overflow: hidden; }
.steps__line i { display: block; height: 100%; background: linear-gradient(90deg, var(--zf-green-600), var(--zf-green-400)); transform: scaleX(0); transform-origin: left; transition: transform 1400ms var(--zf-ease-out) 300ms; }
.steps.is-in .steps__line i { transform: scaleX(1); }
.step { text-align: center; }
.step__node { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; background: var(--zf-surface); border: 2px solid var(--zf-line-2); font: 700 18px var(--zf-sans); color: var(--zf-text-3); transition: all 500ms var(--zf-ease-out); transition-delay: calc(300ms + var(--i) * 450ms); }
.steps.is-in .step__node { border-color: var(--zf-green-600); background: var(--zf-green-600); color: #fff; box-shadow: 0 0 0 8px rgba(0,144,74,.1); }
.step h3 { margin-top: 22px; font-size: 20px; }
.step p { margin-top: 8px; font-size: 14.5px; color: var(--zf-text-3); }
.step__card { margin-top: 22px; padding: 18px; text-align: left; min-height: 120px; }
.token { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 14px; border-radius: 12px; background: var(--zf-ink-50); font: 500 13px var(--zf-mono); color: var(--zf-text); }
.token span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.token .zf-iconbtn { width: 32px; height: 32px; }
.token .zf-iconbtn svg { width: 16px; height: 16px; }
.mini-code { padding: 12px 14px; border-radius: 12px; background: var(--zf-ink-900); color: #C9D5E1; font: 12.5px/1.7 var(--zf-mono); white-space: pre; overflow: hidden; }
.mini-code .f { color: #7FD7AA; } .mini-code .s { color: #F6C177; }

/* ============================ 场景 ============================ */
.scn { display: grid; grid-template-columns: 300px repeat(3, 1fr); align-items: stretch; border-radius: 24px; overflow: hidden; }
.scn__title { padding: 34px 32px; display: flex; flex-direction: column; justify-content: center; }
.scn__title h2 { font-size: 26px; }
.scn__title p { margin-top: 8px; font-size: 14px; color: var(--zf-text-3); }
.scn__item { position: relative; padding: 32px 28px; border-left: 1px solid rgb(var(--zf-shade-rgb) / .07); transition: background-color var(--zf-dur-pop); }
.scn__item:hover { background: rgb(var(--zf-surface-rgb) / .85); }
.scn__item .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--zf-green-50); color: var(--zf-green-600); transition: transform 400ms var(--zf-ease-spring), background-color var(--zf-dur-pop), color var(--zf-dur-pop); }
.scn__item .ico svg { width: 22px; height: 22px; }
.scn__item:hover .ico { background: var(--zf-green-600); color: #fff; transform: rotate(-8deg) scale(1.06); }
.scn__item h3 { margin-top: 18px; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.scn__item h3 svg { width: 16px; height: 16px; color: var(--zf-green-600); opacity: 0; transform: translateX(-6px); transition: opacity var(--zf-dur-pop), transform var(--zf-dur-pop) var(--zf-ease-out); }
.scn__item:hover h3 svg { opacity: 1; transform: none; }
.scn__item p { margin-top: 6px; font-size: 14px; color: var(--zf-text-3); }
.scn__item .tags { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }

/* ============================ 价格 ============================ */
.price-top { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 48px; }
.price-top .zf-seg { margin-top: 28px; }
.save { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-left: 6px; border-radius: 99px; background: var(--zf-green-100); color: var(--zf-green-800); font-size: 11px; font-weight: 700; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 32px 30px 30px; }
.plan h3 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.plan__d { margin-top: 6px; font-size: 14px; color: var(--zf-text-3); min-height: 44px; }
.plan__price { display: flex; align-items: baseline; gap: 4px; margin-top: 22px; height: 56px; }
.plan__price .cur { font-size: 22px; font-weight: 700; color: var(--zf-text); }
.plan__price .amt { position: relative; display: inline-block; font-size: 52px; font-weight: 700; color: var(--zf-text); letter-spacing: -.03em; line-height: 1; overflow: hidden; height: 56px; }
.plan__price .amt > span { display: block; transition: transform 520ms var(--zf-ease-out), opacity 300ms; }
.plan__price .amt.is-roll > span { transform: translateY(-100%); opacity: 0; }
.plan__price .per { font-size: 14px; color: var(--zf-text-3); margin-left: 4px; }
.plan__note { margin-top: 6px; height: 20px; font-size: 13px; color: var(--zf-green-700); }
.plan .zf-btn { margin-top: 24px; width: 100%; }
.plan ul { list-style: none; margin: 26px 0 0; padding: 24px 0 0; border-top: 1px solid var(--zf-line); display: grid; gap: 12px; }
.plan li { display: flex; gap: 10px; font-size: 14.5px; color: var(--zf-text-2); }
.plan li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--zf-green-600); }
.plan li.off { color: var(--zf-text-3); } .plan li.off svg { color: var(--zf-ink-200); }
/* 推荐套餐：旋转渐变描边 */
.plan--pro { border: 0; background: var(--zf-surface); isolation: isolate; }
.plan--pro::before {
  content: ""; position: absolute; inset: -1.5px; z-index: -2; border-radius: calc(var(--zf-r-lg) + 1.5px);
  background: conic-gradient(from var(--ang, 0deg), var(--zf-green-300), var(--zf-green-600), var(--zf-tint), var(--zf-green-500), var(--zf-green-300));
  animation: spin 6s linear infinite;
}
.plan--pro::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--zf-r-lg); background: linear-gradient(180deg, var(--zf-tint), var(--zf-surface) 40%); }
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin { to { --ang: 360deg; } }
.plan__pop { height: 22px; padding: 0 9px; border-radius: 99px; background: var(--zf-green-600); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 22px; letter-spacing: .02em; }
.price-foot { margin-top: 24px; text-align: center; font-size: 13.5px; color: var(--zf-text-3); }

/* ============================ FAQ ============================ */
.faq { display: grid; grid-template-columns: 380px 1fr; gap: 80px; }
.faq__contact { margin-top: 32px; padding: 24px; }
.faq__contact h4 { font-size: 16px; }
.faq__contact p { margin: 6px 0 16px; font-size: 14px; color: var(--zf-text-3); }

/* ============================ CTA & 页脚 ============================ */
.cta { position: relative; overflow: hidden; padding: 64px 64px; border-radius: 32px; display: flex; align-items: center; justify-content: space-between; gap: 40px;
  background: linear-gradient(120deg, var(--zf-tint) 0%, var(--zf-tint) 50%, var(--zf-tint) 100%); border: 1px solid rgb(var(--zf-surface-rgb) / .9); box-shadow: var(--zf-sh-2); }
.cta h2 { font-size: 38px; }
.cta p { margin-top: 12px; font-size: 17px; color: var(--zf-text-2); }
.cta__btns { display: flex; gap: 12px; position: relative; z-index: 1; }
.cta svg.waves { position: absolute; right: -40px; bottom: -40px; width: 760px; height: 280px; pointer-events: none; }
.cta .waves path { animation: ribbon 10s var(--zf-ease) infinite alternate; }

.foot { margin-top: 100px; padding: 64px 0 36px; border-top: 1px solid var(--zf-line); background: rgb(var(--zf-surface-rgb) / .5); }
.foot__top { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 40px; }
.foot__brand img { height: 30px; }
.foot__brand p { margin-top: 16px; font-size: 14px; color: var(--zf-text-3); max-width: 280px; }
.foot__status { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; height: 34px; padding: 0 14px; border-radius: 99px; background: var(--zf-surface); border: 1px solid var(--zf-line); font-size: 13px; color: var(--zf-text-2); cursor: default; transition: border-color var(--zf-dur-hover); }
.foot__status:hover { border-color: var(--zf-green-300); }
.foot h5 { font-size: 14px; color: var(--zf-text); margin-bottom: 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot li a { font-size: 14px; color: var(--zf-text-3); transition: color var(--zf-dur-hover); }
.foot li a:hover { color: var(--zf-green-700); }
.foot__bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--zf-line); font-size: 13px; color: var(--zf-text-3); }
.foot__bottom nav { display: flex; gap: 20px; }
.foot__bottom nav a:hover { color: var(--zf-text); }
.foot__tools { display: flex; gap: 8px; }
.foot__tool { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; color: var(--zf-text-2); transition: background-color var(--zf-dur-hover), color var(--zf-dur-hover); }
.foot__tool:hover, .foot__tool.is-open { background: rgb(var(--zf-shade-rgb) / .06); color: var(--zf-text); }
.foot__tool svg { width: 16px; height: 16px; }
.foot__tool [data-icon="chevron"] svg { width: 14px; height: 14px; transition: transform var(--zf-dur-pop) var(--zf-ease-out); }
.foot__tool.is-open [data-icon="chevron"] svg { transform: rotate(180deg); }
.foot__legal { margin-top: 18px; font-size: 12.5px; color: var(--zf-ink-300); line-height: 1.7; }

/* 原型标记 */
.proto-flag { position: fixed; left: 20px; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 14px; border-radius: 99px; background: rgba(11,31,51,.88); color: #DCE6EF; font-size: 12.5px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--zf-sh-3); }
.proto-flag a { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 99px; background: rgba(255,255,255,.1); color: #fff; font-weight: 600; transition: background-color var(--zf-dur-hover); }
.proto-flag a:hover { background: var(--zf-green-600); }
.proto-flag a svg { width: 14px; height: 14px; }

/* 弹层内的表单与认证 */
.auth-seg { display: flex; margin: 0 28px; }
.auth-seg .zf-seg { width: 100%; }
.auth-seg .zf-seg button { flex: 1; }
.auth-view { display: none; }
.auth-view.is-on { display: grid; gap: 16px; animation: authin 360ms var(--zf-ease-out) both; }
@keyframes authin { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 14px)); } to { opacity: 1; transform: none; } }
.or { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--zf-text-3); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--zf-line); }
.sso { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.legal-s { font-size: 12.5px; color: var(--zf-text-3); text-align: center; }
.legal-s a { color: var(--zf-green-700); }

.key-card { padding: 18px; border-radius: 16px; background: linear-gradient(150deg, var(--zf-tint), var(--zf-surface)); border: 1px solid var(--zf-green-100); }
.key-card .token { background: var(--zf-surface); border: 1px solid var(--zf-line); margin-top: 12px; }
.key-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.key-meta div { padding: 14px; border-radius: 12px; background: var(--zf-surface-2); border: 1px solid var(--zf-line); }
.key-meta span { display: block; font-size: 12.5px; color: var(--zf-text-3); }
.key-meta b { font-size: 16px; color: var(--zf-text); }
.dr-sec { margin-top: 26px; }
.dr-sec h4 { font-size: 15px; margin-bottom: 12px; }
.perm { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--zf-line); font-size: 14px; color: var(--zf-text); }
.perm small { display: block; font-size: 12.5px; color: var(--zf-text-3); }
.cap__t, .cap__d, .mega__d { display: block; }
.token [data-icon] { flex: none; color: var(--zf-green-600); }
.plan__price { align-items: flex-end; }
.plan__price .cur { padding-bottom: 7px; }
.plan__price .per { padding-bottom: 9px; }

/* =====================================================================
   布局 r2（2026-11-04）：收紧首屏构图、合并区块、加入深色开发者区块
   ===================================================================== */
/* 首屏 */
.hero { padding: 48px 0 36px; }
.hero .zf-container { grid-template-columns: 1fr 580px; min-height: 580px; }
.stage { height: 560px; }
.stage__plate {
  position: absolute; left: 96px; top: 6px; width: 440px; height: 400px; border-radius: 28px; transform: rotate(5deg);
  background: linear-gradient(150deg, rgb(var(--zf-surface-rgb) / .55), rgba(174,230,200,.45)); border: 1px solid rgb(var(--zf-surface-rgb) / .9);
  box-shadow: var(--zf-sh-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: float 10s var(--zf-ease) infinite alternate;
}
.stage__main { left: 40px; top: 44px; width: 480px; }
.qlive { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--zf-green-50); color: var(--zf-green-700); font-size: 12px; font-weight: 600; }
.stage__mini { left: -24px; bottom: 26px; width: 260px; }
.stage__push { left: auto; right: -12px; top: 0; bottom: auto; }
.stage .stage__note { top: auto; right: 64px; bottom: 50px; }

/* 区块节奏 */
.sec--cov { padding: 96px 0 24px; }
.sec--cap { padding: 72px 0 112px; }
.sec--scn { padding: 104px 0 0; }
.sec--price { padding: 112px 0 96px; }
.sec--faq { padding: 24px 0 112px; }

/* 深色开发者区块 */
.dev-band { position: relative; overflow: hidden; padding: 112px 0 120px; background: linear-gradient(180deg, #0B1F33 0%, #0D2740 100%); color: #A9BCCD; }
.dev-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(900px 500px at 30% 20%, #000, transparent 75%); mask-image: radial-gradient(900px 500px at 30% 20%, #000, transparent 75%);
}
.dev-band__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 420px at 12% 0%, rgba(47,190,121,.20), transparent 70%), radial-gradient(600px 400px at 95% 100%, rgba(43,120,240,.12), transparent 70%); }
.dev2 { position: relative; display: grid; grid-template-columns: 420px 1fr; gap: 72px; align-items: start; }
.dev-band .zf-section-title { color: #fff; }
.dev-band .zf-section-desc { color: #A9BCCD; }
.dev-band .zf-eyebrow { color: var(--zf-green-300); }
.dev-band .zf-eyebrow::before { background: var(--zf-green-400); }
.dev-band .zf-tag { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: #A9BCCD; }

.vsteps { position: relative; list-style: none; margin: 36px 0 4px; padding: 0; }
.vsteps::before, .vsteps::after { content: ""; position: absolute; left: 17px; top: 18px; bottom: 44px; width: 2px; border-radius: 2px; background: rgba(255,255,255,.1); }
.vsteps::after { background: linear-gradient(180deg, var(--zf-green-500), var(--zf-green-300)); transform: scaleY(0); transform-origin: top; transition: transform 1300ms var(--zf-ease-out) 200ms; }
.vsteps.is-in::after { transform: none; }
.vsteps li { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 18px; padding-bottom: 24px; }
.vsteps__n {
  position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: #0C2237; border: 2px solid rgba(255,255,255,.16); color: #7F95AA; font: 700 14px var(--zf-sans);
  transition: background-color 500ms var(--zf-ease-out), border-color 500ms, color 500ms, box-shadow 500ms; transition-delay: calc(200ms + var(--i) * 420ms);
}
.vsteps.is-in .vsteps__n { background: var(--zf-green-600); border-color: var(--zf-green-500); color: #fff; box-shadow: 0 0 0 6px rgba(47,190,121,.14); }
.vsteps h4 { color: #fff; font-size: 16.5px; margin-top: 6px; }
.vsteps p { font-size: 14px; color: #8DA2B6; margin-top: 4px; }
.vsteps .zf-link { margin-top: 8px; font-size: 13.5px; color: var(--zf-green-300); }
.vsteps .zf-link:hover { color: #A9EBC6; }

.zf-btn--glass { color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); }
.zf-btn--glass:hover { background: rgba(47,190,121,.14); border-color: rgba(47,190,121,.5); transform: translateY(-1px); }

.code--stack { margin-top: 0; grid-template-columns: 1fr; background: #0F2A43; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 40px 80px -30px rgba(0,0,0,.55); }
.code--stack .code__side { min-height: 0; }
.code--stack .code__side + .code__side { border-left: 0; border-top: 1px solid rgba(255,255,255,.07); background: #0B2236; }
.code--stack #codeReq { min-height: 236px; }
.code--stack .code__res { min-height: 260px; }
.code__title { color: #7F95AA; font-size: 13px; font-weight: 600; }
.code__mock { margin-left: auto; background: rgba(255,255,255,.06); color: #7F95AA; }

/* 收尾 CTA：3D 插画移到这里 */
.cta { display: grid; grid-template-columns: 1fr 360px; align-items: center; min-height: 340px; padding: 56px 64px; }
.cta__text .zf-eyebrow { margin-bottom: 16px; }
.cta__btns { margin-top: 30px; }
.iso--cta { height: 300px; margin: -40px 0; }
.iso--cta .iso__stack { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
.iso--cta .iso__glyph { font-size: 70px; }
.iso--cta .iso__plate { border-radius: 36px; }
.iso--cta .iso__glow { width: 300px; margin-left: -150px; }

/* =====================================================================
   布局 r3（2026-11-04）：业务主线 = 按国家/市场购买 API Key
   ===================================================================== */
.qbadge--metal { background: #B7862B; }
.qbadge--index { background: var(--zf-green-700); }

/* 首屏 */
.hero--r3 h1 { font-size: 62px; }
.hero__facts { display: flex; align-items: center; margin-top: 40px; }
.hero__facts > div { padding: 0 28px; border-left: 1px solid rgb(var(--zf-shade-rgb) / .1); }
.hero__facts > div:first-child { padding-left: 0; border-left: 0; }
.hero__facts b { display: block; font-size: 24px; font-weight: 700; color: var(--zf-text); letter-spacing: -.01em; line-height: 1.3; }
.hero__facts span { font-size: 13px; color: var(--zf-text-3); }
.hero__facts .zf-demo-chip { margin-left: 4px; }

/* 首屏：市场 Key 卡片堆叠 */
.stage--keys { height: 540px; }
.kglow { position: absolute; left: 40px; top: 90px; width: 520px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(47,190,121,.28), transparent); filter: blur(20px); }
.keycard { position: absolute; left: 30px; top: 150px; width: 480px; padding: 24px 26px; border-radius: 24px; transition: transform 700ms var(--zf-ease-out), opacity 400ms; }
.keycard--front { z-index: 3; }
.keycard--2 { z-index: 2; opacity: .94; transform: translate(34px, -64px) rotate(4deg) scale(.95); }
.keycard--3 { z-index: 1; opacity: .82; transform: translate(68px, -128px) rotate(8deg) scale(.9); }
#kstage:hover .keycard--2 { transform: translate(50px, -86px) rotate(6deg) scale(.95); }
#kstage:hover .keycard--3 { transform: translate(100px, -172px) rotate(11deg) scale(.9); }
.kc-top { display: flex; align-items: center; gap: 12px; }
.kc-flag { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--zf-ink-800); color: #fff; font: 700 14px var(--zf-sans); letter-spacing: .02em; }
.keycard--2 .kc-flag { background: var(--zf-green-700); }
.keycard--3 .kc-flag { background: var(--zf-ink-600); }
.kc-name { font-size: 17px; font-weight: 700; color: var(--zf-text); line-height: 1.3; }
.kc-ex { font-size: 12.5px; color: var(--zf-text-3); }
.kc-on { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 99px; background: var(--zf-green-50); color: var(--zf-green-700); font-size: 12px; font-weight: 600; }
.kc-label { margin-top: 22px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--zf-text-3); }
.kc-keyrow { display: flex; align-items: center; justify-content: space-between; height: 52px; margin-top: 8px; padding: 0 6px 0 16px; border-radius: 14px; background: rgb(var(--zf-surface-rgb) / .75); border: 1px solid var(--zf-line); }
.kc-key { font-size: 16px; color: var(--zf-text); letter-spacing: .02em; }
.keycard--back .kc-key { display: block; margin-top: 16px; font-size: 14px; color: var(--zf-text-2); }
.kc-incl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.kc-incl b { margin-left: 4px; color: var(--zf-text); font-weight: 600; }
.kc-live { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgb(var(--zf-shade-rgb) / .07); }
.kc-live div { display: flex; align-items: baseline; gap: 8px; }
.kc-live span { font-size: 12.5px; color: var(--zf-text-3); }
.kc-live b { font-size: 16px; font-weight: 600; color: var(--zf-text); padding: 0 4px; }
.kc-live em { font-style: normal; font-size: 12.5px; font-weight: 600; }
.stage--keys .stage__push { top: auto; bottom: 6px; right: -16px; left: auto; }
.stage--keys .stage__note { top: auto; right: auto; left: 30px; bottom: 24px; }

/* 选择市场 */
.sec--mk { padding: 104px 0 40px; }
.mk__search { display: flex; align-items: center; gap: 10px; width: 340px; height: 48px; padding: 0 16px; border-radius: 99px; background: var(--zf-surface); border: 1px solid var(--zf-line-2); box-shadow: var(--zf-sh-1); color: var(--zf-text-3); transition: border-color var(--zf-dur-hover), box-shadow var(--zf-dur-hover); }
.mk__search:hover { border-color: var(--zf-ink-300); }
.mk__search:focus-within { border-color: var(--zf-green-500); box-shadow: var(--zf-focus); }
.mk__search input { flex: 1; border: 0; outline: 0; background: none; font-size: 15px; color: var(--zf-text); }
.mk__search input::placeholder { color: var(--zf-ink-300); }
.mk__bar { display: flex; align-items: center; justify-content: space-between; margin: -16px 0 26px; }
.mk__hint { font-size: 13px; color: var(--zf-text-3); }
.mk { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.mk__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mcard {
  position: relative; display: flex; flex-direction: column; padding: 18px 18px 16px; border-radius: 18px; text-align: left;
  background: var(--zf-surface); border: 1px solid var(--zf-line); box-shadow: var(--zf-sh-1);
  transition: transform var(--zf-dur-pop) var(--zf-ease-out), box-shadow var(--zf-dur-pop) var(--zf-ease-out), border-color var(--zf-dur-hover), background-color var(--zf-dur-hover);
  animation: mkin 420ms var(--zf-ease-out) both; animation-delay: calc(var(--d, 0) * 28ms);
}
@keyframes mkin { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.mcard:hover { transform: translateY(-3px); box-shadow: var(--zf-sh-2); border-color: var(--zf-line-2); }
.mcard.is-sel { border-color: var(--zf-green-500); background: linear-gradient(180deg, var(--zf-tint), var(--zf-surface) 65%); box-shadow: 0 0 0 3px rgba(0,144,74,.12), var(--zf-sh-2); }
.mcard__top { display: flex; align-items: center; gap: 10px; }
.mcard__flag { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--zf-ink-800); color: #fff; font: 700 12px var(--zf-sans); letter-spacing: .02em; transition: transform 380ms var(--zf-ease-spring); }
.mcard:hover .mcard__flag { transform: rotate(-6deg) scale(1.05); }
.mcard__flag--fx { background: var(--zf-cat-fx); }
.mcard__flag--metal { background: #B7862B; }
.mcard__name { font-size: 15.5px; font-weight: 700; color: var(--zf-text); line-height: 1.3; }
.mcard__region { font-size: 12px; color: var(--zf-text-3); }
.mcard__add { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid var(--zf-line-2); color: var(--zf-text-3); transition: all var(--zf-dur-pop) var(--zf-ease-out); }
.mcard__add svg { width: 16px; height: 16px; transition: transform 300ms var(--zf-ease-spring); }
.mcard:hover .mcard__add { border-color: var(--zf-green-300); color: var(--zf-green-600); }
.mcard.is-sel .mcard__add { background: var(--zf-green-600); border-color: var(--zf-green-600); color: #fff; }
.mcard.is-sel .mcard__add svg { transform: rotate(360deg); }
.mcard__ex { margin-top: 12px; min-height: 38px; font-size: 12.5px; line-height: 1.5; color: var(--zf-text-2); }
.mcard__types { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mcard__types .zf-tag { height: 22px; padding: 0 8px; font-size: 11.5px; }
.mcard__foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--zf-line); }
.mcard__price b { font-size: 18px; font-weight: 700; color: var(--zf-text); }
.mcard__price small { font-size: 12px; color: var(--zf-text-3); margin-left: 2px; }
.mcard__cnt { font-size: 12px; color: var(--zf-text-3); }
.mk__empty { padding: 60px 0; text-align: center; color: var(--zf-text-3); font-size: 14px; }
.mk__empty .zf-nodes, .sum__empty .zf-nodes { justify-content: center; margin: 0 auto 12px; display: flex; }
.mk__more { margin-top: 22px; }

.mk__sum { position: sticky; top: 88px; padding: 22px; border-radius: 22px; }
.sum__head { display: flex; align-items: center; gap: 10px; }
.sum__head h3 { font-size: 18px; }
.sum__count { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 99px; background: var(--zf-ink-100); color: var(--zf-text-2); font-size: 13px; font-weight: 700; transition: background-color var(--zf-dur-pop), color var(--zf-dur-pop); }
.sum__count.is-on { background: var(--zf-green-600); color: #fff; }
.sum__count.bump { animation: bump 420ms var(--zf-ease-spring); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.sum__empty { padding: 28px 10px 20px; text-align: center; color: var(--zf-text-3); font-size: 13.5px; line-height: 1.7; }
.sum__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; max-height: 248px; overflow: auto; }
.sum__item { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 8px; border-radius: 12px; background: var(--zf-surface-2); border: 1px solid var(--zf-line); font-size: 14px; color: var(--zf-text); animation: sumin 340ms var(--zf-ease-out) both; }
.sum__item.is-out { animation: sumout 200ms var(--zf-ease-in) forwards; }
@keyframes sumin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes sumout { to { opacity: 0; transform: translateX(14px); height: 0; margin-top: -6px; padding-top: 0; padding-bottom: 0; border-width: 0; } }
.sum__item .mcard__flag { width: 28px; height: 28px; border-radius: 8px; font-size: 10px; }
.sum__item .p { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--zf-text-2); font-size: 13.5px; }
.sum__item .zf-iconbtn { width: 28px; height: 28px; color: var(--zf-text-3); }
.sum__item .zf-iconbtn svg { width: 14px; height: 14px; }
.sum__item .zf-iconbtn:hover { color: var(--zf-danger); background: rgba(229,72,77,.08); }
.sum__bill { margin-top: 18px; }
.sum__bill .zf-seg { display: flex; width: 100%; }
.sum__bill .zf-seg button { flex: 1; height: 32px; }
.sum__lines { display: grid; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--zf-text-2); }
.sum__lines > div { display: flex; align-items: center; justify-content: space-between; }
.sum__disc .info { display: inline-grid; place-items: center; vertical-align: -3px; color: var(--zf-text-3); cursor: help; }
.sum__disc .info svg { width: 15px; height: 15px; }
#sumDisc { color: var(--zf-text-3); font-size: 13px; }
#sumDisc.is-on { color: var(--zf-green-700); font-weight: 600; font-size: 14px; }
.sum__total { padding-top: 14px; border-top: 1px solid var(--zf-line); align-items: baseline !important; }
.sum__total b { font-size: 30px; font-weight: 700; color: var(--zf-text); letter-spacing: -.02em; }
.sum__total small { margin-left: 4px; font-size: 13px; color: var(--zf-text-3); }
.sum__buy { width: 100%; margin-top: 18px; }
.sum__trial { display: flex; margin: 14px auto 0; font-size: 13.5px; }
.sum__note { margin-top: 8px; text-align: center; font-size: 12px; color: var(--zf-text-3); }

.ent { display: flex; align-items: center; gap: 22px; margin-top: 28px; padding: 24px 28px; border-radius: 22px; background: linear-gradient(120deg, var(--zf-surface), var(--zf-tint)); }
.ent__ico { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 16px; background: var(--zf-ink-800); color: #fff; }
.ent__ico svg { width: 26px; height: 26px; }
.ent h3 { font-size: 18px; }
.ent p { margin-top: 4px; font-size: 14px; color: var(--zf-text-3); }
.ent .zf-btn { margin-left: auto; }

/* 下单抽屉 */
.co-list { display: grid; gap: 8px; }
.co-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--zf-line); background: var(--zf-surface); }
.co-item .mcard__flag { width: 34px; height: 34px; }
.co-item b { display: block; font-size: 14.5px; color: var(--zf-text); }
.co-item small { font-size: 12.5px; color: var(--zf-text-3); }
.co-item .p { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--zf-text); }
.co-sum { display: grid; gap: 10px; margin-top: 18px; padding: 16px; border-radius: 14px; background: var(--zf-surface-2); border: 1px solid var(--zf-line); font-size: 14px; color: var(--zf-text-2); }
.co-sum > div { display: flex; justify-content: space-between; }
.co-total { padding-top: 10px; border-top: 1px solid var(--zf-line); align-items: baseline; }
.co-total b { font-size: 24px; color: var(--zf-text); }
.co-keys { display: grid; gap: 10px; margin-top: 14px; }
.co-key { padding: 14px; border-radius: 14px; border: 1px solid var(--zf-line); background: var(--zf-surface); animation: sumin 420ms var(--zf-ease-out) both; animation-delay: calc(var(--i) * 90ms); }
.co-key__h { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--zf-text); }
.co-key__h .mcard__flag { width: 28px; height: 28px; font-size: 10px; border-radius: 8px; }
.co-key .token { margin-top: 10px; background: var(--zf-surface-2); border: 1px solid var(--zf-line); }
/* r3 微调：市场卡更紧凑，4 列 */
.mk__grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mcard { padding: 16px 16px 14px; }
.mcard__flag { width: 32px; height: 32px; font-size: 11.5px; }
.mcard__name { font-size: 15px; }
.mcard__ex { margin-top: 10px; }
.mcard__foot { margin-top: 10px; }
.mcard__cnt { font-size: 11.5px; }
.hero__facts > div:nth-child(3) b { font-size: 19px; line-height: 1.6; }
/* r3：去掉收尾 CTA 后，页脚直接接在 FAQ 之后 */
.foot { margin-top: 0; }

/* =====================================================================
   布局 r4（2026-11-04）：导航不跳动、卡片式行情带、Markets 三栏、开发者宽代码窗
   ===================================================================== */
/* 首屏未滚动时展开菜单：只加背景，不改高度（避免导航向上顶） */
.nav.is-mega:not(.is-scrolled) { height: 76px; }

/* 行情带：卡片式 */
.tape { height: 92px; margin-top: 8px; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tape__track { align-items: center; padding: 14px 0; }
.tcard {
  display: flex; align-items: center; gap: 12px; flex: none; height: 64px; margin-right: 12px; padding: 0 16px 0 12px; border-radius: 16px;
  background: rgb(var(--zf-surface-rgb) / .74); border: 1px solid rgb(var(--zf-surface-rgb) / .95);
  box-shadow: var(--zf-sh-1), 0 8px 20px -12px rgba(16,42,67,.22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform var(--zf-dur-pop) var(--zf-ease-out), box-shadow var(--zf-dur-pop) var(--zf-ease-out), background-color var(--zf-dur-hover); cursor: default;
}
.tcard:hover { transform: translateY(-3px); background: var(--zf-surface); box-shadow: var(--zf-sh-2); }
.tcard__flag { width: 32px; height: 32px; border-radius: 9px; font-size: 11px; }
.tcard__id b { display: block; font-size: 14px; font-weight: 700; color: var(--zf-text); line-height: 1.25; }
.tcard__id small { display: block; font-size: 12px; color: var(--zf-text-3); white-space: nowrap; }
.tcard__px { display: grid; justify-items: end; gap: 2px; }
.tcard__px b { font-size: 14.5px; font-weight: 600; color: var(--zf-text); font-variant-numeric: tabular-nums; padding: 0 4px; line-height: 1.3; }
.tcard__px .zf-chg { height: 20px; padding: 0 7px; font-size: 11.5px; }

/* Markets：地区栏 + 市场清单 + 结算 */
.mk2__facts { display: flex; align-items: flex-end; gap: 28px; font-size: 13px; color: var(--zf-text-3); }
.mk2__facts b { display: block; font-size: 26px; font-weight: 700; color: var(--zf-text); letter-spacing: -.01em; line-height: 1.2; }
.mk2__facts .zf-demo-chip { margin-bottom: 4px; }
.mk2 { display: grid; grid-template-columns: 196px 1fr 320px; gap: 20px; align-items: start; }
.mk2__regions { position: relative; display: grid; gap: 4px; }
.mk2__ind { position: absolute; left: 0; right: 0; top: 0; height: 48px; border-radius: 12px; background: var(--zf-surface); border: 1px solid var(--zf-line); box-shadow: var(--zf-sh-2); transition: transform var(--zf-dur-layer) var(--zf-ease-out), height var(--zf-dur-layer) var(--zf-ease-out), opacity 200ms; }
.mk2__reg { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 12px; font-size: 14.5px; font-weight: 600; color: var(--zf-text-2); text-align: left; transition: color var(--zf-dur-hover), background-color var(--zf-dur-hover); }
.mk2__reg:hover { color: var(--zf-text); background: rgb(var(--zf-shade-rgb) / .04); }
.mk2__reg.is-on { color: var(--zf-green-800); background: transparent; }
.mk2__rc { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--zf-text-3); }
.mk2__sel { display: none; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--zf-green-600); color: #fff; font-size: 11px; font-weight: 700; }
.mk2__sel.is-on { display: grid; animation: bump 420ms var(--zf-ease-spring); }
.mk2__list { padding: 0; overflow: hidden; border-radius: 20px; }
.mk2__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--zf-line); }
.mk2__top .mk__search { width: 320px; height: 42px; box-shadow: none; }
.mk2__head, .mrow { display: grid; grid-template-columns: 34px 1fr 124px 104px 30px; gap: 14px; align-items: center; padding: 0 18px; }
.mk2__head { height: 38px; background: var(--zf-surface-2); border-bottom: 1px solid var(--zf-line); font-size: 12px; font-weight: 600; color: var(--zf-text-3); }
.mk2__head span:first-child { grid-column: span 2; }
.mk2__rows { min-height: 512px; }
.mrow {
  position: relative; width: 100%; height: 64px; text-align: left; border-bottom: 1px solid var(--zf-line);
  transition: background-color var(--zf-dur-hover) var(--zf-ease); animation: mkin 380ms var(--zf-ease-out) both; animation-delay: calc(var(--d, 0) * 30ms);
}
.mrow::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--zf-green-600); transform: scaleY(0); transition: transform var(--zf-dur-pop) var(--zf-ease-out); }
.mrow:hover { background: rgba(0,144,74,.04); }
.mrow:hover::before, .mrow.is-sel::before { transform: scaleY(1); }
.mrow.is-sel { background: var(--zf-tint); }
.mrow .mcard__flag { width: 34px; height: 34px; }
.mrow:hover .mcard__flag { transform: rotate(-6deg) scale(1.05); }
.mrow__id { min-width: 0; }
.mrow__id b { display: block; font-size: 15px; font-weight: 600; color: var(--zf-text); line-height: 1.35; }
.mrow__id small { display: block; font-size: 12.5px; color: var(--zf-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow__cnt { font-size: 14px; color: var(--zf-text); }
.mrow__cnt small, .mrow__price small { font-size: 12px; color: var(--zf-text-3); }
.mrow__price b { font-size: 15px; font-weight: 700; color: var(--zf-text); }
.mrow__add { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--zf-line-2); color: var(--zf-text-3); transition: all var(--zf-dur-pop) var(--zf-ease-out); }
.mrow__add svg { width: 15px; height: 15px; }
.mrow:hover .mrow__add { border-color: var(--zf-green-300); color: var(--zf-green-600); }
.mrow.is-sel .mrow__add { background: var(--zf-green-600); border-color: var(--zf-green-600); color: #fff; }
.mrow.is-sel .mrow__add svg { animation: pop 380ms var(--zf-ease-spring); }
@keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.mk2__foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; font-size: 13px; color: var(--zf-text-3); }
.mk2 .mk__sum { position: static; }

/* 开发者：标题行 + 宽代码窗 + 横向步骤 */
.dev3 { position: relative; }
.dev3__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
.dev3__head .zf-section-desc { margin-top: 12px; }
.dev-band .dev3__head .dev__cta { margin-top: 0; }
.code--wide { display: block; margin-top: 0; background: #0F2A43; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 40px 80px -30px rgba(0,0,0,.55); }
.code--wide .code__bar { height: 60px; padding: 0 14px 0 18px; }
.code--wide .code__bar .sp { display: flex; align-items: center; gap: 10px; }
.code__cols { display: grid; grid-template-columns: 1fr 1fr; min-height: 300px; }
.code__cols .code__side { min-height: 0; }
.code__sub { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 24px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: #6F86A0; }
.code__sub .code__mock { margin-left: auto; }
.code--wide pre { padding: 18px 24px; }
.code--wide .code__res { position: relative; flex: 1; min-height: 240px; }
.code__wait { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: #6F86A0; }
.code__wait .zf-nodes { margin: 0; color: #2FBE79; }
.code__foot { display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 24px; border-top: 1px solid rgba(255,255,255,.07); font-size: 12.5px; color: #6F86A0; }
.code__foot > span:first-child { margin-right: 6px; }
.code__foot .zf-link { margin-left: auto; color: var(--zf-green-300); font-size: 13px; }
.zf-seg--dark { background: rgba(255,255,255,.06); }
.zf-seg--dark .zf-seg__ind { background: rgba(255,255,255,.14); box-shadow: none; }
.zf-seg--dark button { color: #8DA2B6; }
.zf-seg--dark button:hover, .zf-seg--dark button[aria-selected="true"] { color: #fff; }

.hsteps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 48px 0 0; padding: 0; list-style: none; }
.hsteps::before, .hsteps::after { content: ""; position: absolute; top: 17px; left: 18px; right: calc((100% - 48px) / 3 - 18px); height: 2px; border-radius: 2px; background: rgba(255,255,255,.1); }
.hsteps::after { background: linear-gradient(90deg, var(--zf-green-500), var(--zf-green-300)); transform: scaleX(0); transform-origin: left; transition: transform 1300ms var(--zf-ease-out) 200ms; }
.hsteps.is-in::after { transform: none; }
.hsteps li { position: relative; z-index: 1; }
.hsteps__n {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #0C2237; border: 2px solid rgba(255,255,255,.16); color: #7F95AA; font: 700 14px var(--zf-sans);
  transition: background-color 500ms var(--zf-ease-out), border-color 500ms, color 500ms, box-shadow 500ms; transition-delay: calc(200ms + var(--i) * 420ms);
}
.hsteps.is-in .hsteps__n { background: var(--zf-green-600); border-color: var(--zf-green-500); color: #fff; box-shadow: 0 0 0 6px rgba(47,190,121,.14); }
.hsteps h4 { margin-top: 16px; font-size: 16px; color: #fff; }
.hsteps p { margin-top: 4px; font-size: 13.5px; color: #8DA2B6; }

/* =====================================================================
   布局 r5（2026-11-04）：统一节奏——同一种区块头部、同一种面板、统一间距、延续首屏氛围
   ===================================================================== */
body { background: linear-gradient(180deg, var(--zf-tint) 0%, var(--zf-tint) 55%, #F4F8F6 100%); }

/* 区块外壳 */
.blk2 { position: relative; padding: 64px 0; }
.blk2--first { padding-top: 104px; }
.blk2--last { padding-bottom: 120px; }
.blk2::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.blk2--glow-r::before { background: radial-gradient(760px 440px at 94% 16%, rgba(116,211,162,.22), transparent 70%), radial-gradient(560px 340px at 2% 92%, rgba(174,230,200,.20), transparent 70%); }
.blk2--glow-l::before { background: radial-gradient(760px 440px at 4% 20%, rgba(116,211,162,.20), transparent 70%), radial-gradient(560px 340px at 98% 88%, rgba(174,230,200,.18), transparent 70%); }

/* 统一区块头部 */
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
.shead .zf-section-title { margin-top: 14px; font-size: 36px; }
.shead .zf-section-desc { margin-top: 12px; }

/* 统一面板 */
.panel2, .mk2__list, .mk2 .mk__sum, .cap .panel {
  background: var(--zf-surface); border: 1px solid var(--zf-line); border-radius: 24px;
  box-shadow: 0 1px 2px rgba(16,42,67,.04), 0 20px 44px -26px rgba(16,42,67,.20);
}

/* Markets */
.mk2__regions { padding: 8px; border-radius: 24px; background: rgb(var(--zf-surface-rgb) / .6); border: 1px solid rgb(var(--zf-shade-rgb) / .06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mk2__ind { left: 8px; right: 8px; border-radius: 16px; }
.mk2__reg { border-radius: 16px; }
.sum__ent { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--zf-line); }
.sum__ent .ent__ico { width: 36px; height: 36px; border-radius: 11px; }
.sum__ent .ent__ico svg { width: 18px; height: 18px; }
.sum__ent b { display: block; font-size: 13.5px; color: var(--zf-text); }
.sum__ent small { display: block; font-size: 12px; color: var(--zf-text-3); }
.sum__ent .zf-link { margin-left: auto; font-size: 13px; white-space: nowrap; }

/* 每个 Key 都包含：左侧三项等分撑满，与右侧面板等高 */
.cap { grid-template-columns: 360px 1fr; gap: 24px; align-items: stretch; }
.cap > div:first-child { display: flex; }
.cap__list { flex: 1; display: grid; grid-auto-rows: 1fr; gap: 12px; margin-top: 0; }
.cap__item { align-content: center; padding: 22px; border-radius: 20px; border: 1px solid rgb(var(--zf-shade-rgb) / .06); background: rgb(var(--zf-surface-rgb) / .55); }
.cap__item:hover { background: rgb(var(--zf-surface-rgb) / .85); }
.cap__item[aria-selected="true"] { background: var(--zf-surface); border-color: var(--zf-green-200); box-shadow: 0 18px 40px -24px rgba(16,42,67,.22); }
.cap__prog { bottom: 12px; left: 22px; right: 22px; }
.cap .panel { height: 520px; }
.specs.panel2 { margin-top: 24px; padding: 8px; }

/* 开发者：圆角深色大卡，不再铺满全宽 */
.blk2--dark { padding: 64px 0; }
.dev-band { width: calc(100% - 48px); max-width: 1392px; margin: 0 auto; padding: 96px 0 104px; border-radius: 32px; }

/* FAQ */
.faq2 { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.zf-acc.panel2 { padding: 6px 28px; }
.zf-acc.panel2 .zf-acc__item:last-child { border-bottom: 0; }
.faq2__side { display: grid; gap: 16px; }
.faq2__card { padding: 24px; }
.faq2__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--zf-green-50); color: var(--zf-green-600); }
.faq2__ico svg { width: 22px; height: 22px; }
.faq2__ico--ink { background: var(--zf-ink-800); color: #fff; }
.faq2__card h4 { margin-top: 16px; font-size: 16px; }
.faq2__card p { margin: 6px 0 16px; font-size: 13.5px; color: var(--zf-text-3); }

/* 页脚 */
.foot { margin-top: 0; padding-top: 56px; background: rgb(var(--zf-surface-rgb) / .55); }
/* r5：Markets 三栏等高，结算栏底部对齐 */
.mk2 { align-items: stretch; }
.mk2 .mk__sum { display: flex; flex-direction: column; }
.mk2 .sum__ent { margin-top: auto; }
.mk2 .sum__note { margin-bottom: 18px; }

/* =====================================================================
   布局 r6（2026-11-04）：Markets 改为地区拼块 + 底部悬浮结算条
   ===================================================================== */
.mk3__search { width: 340px; }
.mk3__hit { font-size: 12px; color: var(--zf-text-3); white-space: nowrap; }
.mk3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rp {
  --ac: var(--zf-green-600);
  position: relative; overflow: hidden; isolation: isolate; padding: 24px; border-radius: 24px;
  background: linear-gradient(160deg, rgb(var(--zf-surface-rgb) / .95), rgb(var(--zf-surface-rgb) / .78));
  border: 1px solid rgb(var(--zf-surface-rgb) / .95);
  box-shadow: 0 1px 2px rgba(16,42,67,.04), 0 24px 50px -30px rgba(16,42,67,.26);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity var(--zf-dur-pop) var(--zf-ease), transform var(--zf-dur-reveal) var(--zf-ease-out);
}
.rp--wide { grid-column: span 2; }
.rp--ap { --ac: #00904A; }
.rp--am { --ac: #2B78F0; }
.rp--emea { --ac: #7B5CF5; }
.rp--gl { --ac: #B7862B; background: linear-gradient(160deg, var(--zf-tint-warm), rgb(var(--zf-surface-rgb) / .82) 60%); }
.rp::before { content: ""; position: absolute; z-index: -1; right: -90px; top: -110px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ac) 16%, transparent), transparent); transition: transform 900ms var(--zf-ease-out); }
.rp:hover::before { transform: translate(-20px, 16px) scale(1.08); }
.rp__en { position: absolute; z-index: -1; right: 20px; bottom: -18px; font: 800 104px/1 var(--zf-sans); letter-spacing: -.05em; color: var(--ac); opacity: .055; pointer-events: none; }
.rp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.rp__head h3 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.rp__head h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac) 16%, transparent); }
.rp__head p { margin-top: 5px; font-size: 13px; color: var(--zf-text-3); }
.rp__meta { display: grid; justify-items: end; gap: 6px; font-size: 12.5px; color: var(--zf-text-3); white-space: nowrap; }
.rp__sel { display: none; height: 22px; padding: 0 9px; border-radius: 99px; background: var(--zf-green-600); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 22px; }
.rp__sel.is-on { display: inline-block; animation: bump 420ms var(--zf-ease-spring); }
.rp__chips { display: grid; grid-template-columns: 1fr; gap: 10px; }
.rp--wide .rp__chips { grid-template-columns: 1fr 1fr; }
.rp.is-dim { opacity: .5; }
.rp.is-ping { animation: rping 1300ms var(--zf-ease-out); }
@keyframes rping { 0% { box-shadow: 0 0 0 0 rgba(0,144,74,.38), 0 24px 50px -30px rgba(16,42,67,.26); } 100% { box-shadow: 0 0 0 22px rgba(0,144,74,0), 0 24px 50px -30px rgba(16,42,67,.26); } }

.mchip {
  position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 28px; align-items: center; gap: 12px;
  height: 64px; padding: 0 12px; border-radius: 16px; text-align: left; background: var(--zf-surface); border: 1px solid var(--zf-line);
  transition: transform var(--zf-dur-pop) var(--zf-ease-out), box-shadow var(--zf-dur-pop) var(--zf-ease-out), border-color var(--zf-dur-hover), background-color var(--zf-dur-hover), opacity var(--zf-dur-pop);
}
.mchip[data-id="fx"] { --ac: #2B78F0; }
.mchip:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ac) 35%, var(--zf-line)); box-shadow: 0 14px 26px -16px color-mix(in srgb, var(--ac) 55%, transparent); }
.mchip__flag {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; font: 700 12px var(--zf-sans); letter-spacing: .02em;
  color: var(--ac); background: color-mix(in srgb, var(--ac) 9%, var(--zf-surface)); border: 1px solid color-mix(in srgb, var(--ac) 18%, var(--zf-surface));
  transition: transform 380ms var(--zf-ease-spring), background-color var(--zf-dur-pop), color var(--zf-dur-pop), border-color var(--zf-dur-pop);
}
.mchip:hover .mchip__flag { transform: rotate(-6deg) scale(1.06); }
.mchip__id b { display: block; font-size: 14.5px; font-weight: 600; color: var(--zf-text); line-height: 1.35; }
.mchip__id small { display: block; font-size: 12px; color: var(--zf-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mchip__price { white-space: nowrap; }
.mchip__price b { font-size: 14.5px; font-weight: 700; color: var(--zf-text); }
.mchip__price small { margin-left: 2px; font-size: 11.5px; color: var(--zf-text-3); }
.mchip__add { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--zf-line-2); color: var(--zf-text-3); transition: all var(--zf-dur-pop) var(--zf-ease-out); }
.mchip__add svg { width: 14px; height: 14px; }
.mchip:hover .mchip__add { border-color: var(--zf-green-300); color: var(--zf-green-600); }
.mchip.is-sel { border-color: var(--zf-green-500); background: linear-gradient(180deg, var(--zf-tint), var(--zf-surface)); box-shadow: 0 0 0 3px rgba(0,144,74,.10); }
.mchip.is-sel .mchip__flag { background: var(--zf-green-600); border-color: var(--zf-green-600); color: #fff; }
.mchip.is-sel .mchip__add { background: var(--zf-green-600); border-color: var(--zf-green-600); color: #fff; }
.mchip.is-sel .mchip__add svg { animation: pop 380ms var(--zf-ease-spring); }
.mchip.is-dim { opacity: .3; }
.mchip.is-hit { border-color: var(--zf-green-400); box-shadow: 0 0 0 3px rgba(0,144,74,.16); }

/* 底部悬浮结算条：随 Markets 区块吸附在视口底部 */
.mkbar {
  position: sticky; bottom: 20px; z-index: 30; display: flex; align-items: center; gap: 24px; height: 80px; margin-top: 24px; padding: 0 12px 0 18px;
  border-radius: 24px; background: rgba(11,31,51,.92); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 60px -24px rgba(11,31,51,.55); color: #A9BCCD;
}
.mkbar__sel { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.mkbar .sum__count { background: rgba(255,255,255,.12); color: #fff; }
.mkbar .sum__count.is-on { background: var(--zf-green-500); }
.mkbar__av { display: flex; }
.mkbar__flag { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -9px; border-radius: 11px; background: #17405F; border: 2px solid #0E2438; color: #fff; font: 700 11px var(--zf-sans); }
.mkbar__flag:first-child { margin-left: 0; }
.mkbar__flag.is-new { animation: pop 420ms var(--zf-ease-spring); background: var(--zf-green-600); }
.mkbar__more { background: rgba(255,255,255,.12); }
.mkbar.is-empty .mkbar__av { display: none; }
.mkbar__txt { min-width: 0; }
.mkbar__txt b { display: block; font-size: 14.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkbar__txt small { font-size: 12.5px; color: #8DA2B6; }
.mkbar__txt small.is-on { color: var(--zf-green-300); font-weight: 600; }
.mkbar .zf-seg--dark .save { background: rgba(47,190,121,.2); color: var(--zf-green-300); }
.mkbar__price { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.mkbar__price span { font-size: 13px; color: #8DA2B6; }
.mkbar__price b { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.mkbar__price small { font-size: 13px; color: #8DA2B6; }
.mkbar .zf-btn { height: 56px; }
.mk3__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; font-size: 13px; color: var(--zf-text-3); }
.mk3__links { display: flex; gap: 24px; }
.mk3__links .zf-link { font-size: 13.5px; }
/* r6 微调：统计信息跟在地区名后，已选徽标在右上角；城市一行显示 */
.rp__stat { margin-left: 4px; padding: 0 9px; height: 22px; line-height: 22px; border-radius: 99px; background: color-mix(in srgb, var(--ac) 8%, var(--zf-surface)); color: color-mix(in srgb, var(--ac) 70%, var(--zf-text-2)); font-size: 11.5px; font-weight: 600; letter-spacing: 0; }
.rp__head p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp__head > div { min-width: 0; }
.rp__sel { flex: none; }

/* =====================================================================
   布局 r7（2026-11-04）：Included 与 Developer First 改为拼块，与 Markets 同一语言
   ===================================================================== */
/* Included 拼块 */
.inc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tile {
  --ac: var(--zf-green-600);
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; padding: 24px; border-radius: 24px;
  background: linear-gradient(160deg, rgb(var(--zf-surface-rgb) / .96), rgb(var(--zf-surface-rgb) / .8)); border: 1px solid rgb(var(--zf-surface-rgb) / .95);
  box-shadow: 0 1px 2px rgba(16,42,67,.04), 0 24px 50px -30px rgba(16,42,67,.26);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tile::before { content: ""; position: absolute; z-index: -1; right: -100px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ac) 14%, transparent), transparent); transition: transform 900ms var(--zf-ease-out); }
.tile:hover::before { transform: translate(-20px, 16px) scale(1.08); }
.tile--wide { grid-column: span 2; }
.tile--push { --ac: #00904A; }
.tile--snap { --ac: #2B78F0; }
.tile--specs { --ac: #7B5CF5; }
.tile--kline { --ac: #0F9C8E; }
.tile__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.tile__ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; color: var(--ac); background: color-mix(in srgb, var(--ac) 10%, var(--zf-surface)); border: 1px solid color-mix(in srgb, var(--ac) 18%, var(--zf-surface)); transition: transform 420ms var(--zf-ease-spring); }
.tile__ico svg { width: 20px; height: 20px; }
.tile:hover .tile__ico { transform: rotate(-8deg) scale(1.06); }
.tile__head h3 { font-size: 18px; }
.tile__head p { margin-top: 2px; font-size: 13px; color: var(--zf-text-3); }
.tile__api { margin-left: auto; padding: 4px 10px; border-radius: 8px; background: var(--zf-ink-50); font-size: 12px; color: var(--zf-text-2); white-space: nowrap; }
.tile__tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tile__bar { display: flex; align-items: center; gap: 20px; margin-bottom: 6px; padding: 10px 14px; border-radius: 12px; background: var(--zf-surface-2); border: 1px solid var(--zf-line); font-size: 12.5px; color: var(--zf-text-3); }
.tile__bar > :first-child { margin-right: auto; }
.tile__bar b { color: var(--zf-text); }
.tile__bar .tile__ok { color: var(--zf-green-700); }
.tile--push .stream__head, .tile--push .stream__row { padding: 0 10px; }
.snap2__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.tile--snap .snap-big { margin-bottom: 16px; }
.tile--snap .snap-big .v { font-size: 40px; }
.snap2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--zf-line); border: 1px solid var(--zf-line); border-radius: 14px; overflow: hidden; }
.snap2 div { padding: 10px 14px; background: var(--zf-surface); transition: background-color var(--zf-dur-hover); }
.snap2 div:hover { background: color-mix(in srgb, var(--ac) 6%, var(--zf-surface)); }
.snap2 span { display: block; font-size: 12px; color: var(--zf-text-3); }
.snap2 b { display: block; margin-top: 2px; font-size: 15px; color: var(--zf-text); }
.snap2__time { margin-top: auto; padding-top: 14px; font-size: 12px; color: var(--zf-text-3); }
#snapTable { display: flex; flex-direction: column; flex: 1; }
.json--tile { flex: 1; height: auto; margin: 0; font-size: 12px; }
.spec2 { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; }
.spec2 > div { display: flex; flex-direction: column; justify-content: center; padding: 16px; border-radius: 16px; background: var(--zf-surface-2); border: 1px solid var(--zf-line); transition: border-color var(--zf-dur-hover), background-color var(--zf-dur-hover); }
.spec2 > div:hover { background: var(--zf-surface); border-color: color-mix(in srgb, var(--ac) 30%, var(--zf-line)); }
.spec2 > div > span { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--zf-text-2); }
.spec2 .info { display: inline-grid; place-items: center; color: var(--zf-text-3); cursor: help; }
.spec2 .info svg { width: 14px; height: 14px; }
.spec2 b { display: block; margin-top: 8px; font-size: 32px; font-weight: 700; color: var(--zf-text); letter-spacing: -.02em; line-height: 1.1; }
.spec2 small { margin-left: 3px; font-size: 14px; font-weight: 600; color: var(--zf-text-2); letter-spacing: 0; }
.spec2 em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--zf-text-3); }
.tile--kline .kline-host { flex: 1; min-height: 320px; }

/* Developer First 深色拼块 */
.dev-band .shead .dev__cta { margin-top: 0; }
.dgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.dsteps { display: grid; grid-auto-rows: 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.dstep { position: relative; padding: 22px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: background-color var(--zf-dur-pop), border-color var(--zf-dur-pop), transform var(--zf-dur-pop) var(--zf-ease-out); }
.dstep:hover { background: rgba(255,255,255,.07); border-color: rgba(47,190,121,.35); transform: translateY(-2px); }
.dstep__n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(47,190,121,.12); border: 1px solid rgba(47,190,121,.3); color: var(--zf-green-300); font: 700 13px var(--zf-sans); transition: background-color 500ms var(--zf-ease-out), color 500ms, box-shadow 500ms; transition-delay: calc(200ms + var(--i) * 380ms); }
.dsteps.is-in .dstep__n { background: var(--zf-green-600); border-color: var(--zf-green-500); color: #fff; box-shadow: 0 0 0 5px rgba(47,190,121,.14); }
.dstep h4 { margin-top: 14px; font-size: 16px; color: #fff; }
.dstep p { margin-top: 4px; font-size: 13.5px; color: #8DA2B6; }
.dstep .zf-link { margin-top: 12px; font-size: 13.5px; color: var(--zf-green-300); }
.dstep__key { display: flex; align-items: center; justify-content: space-between; height: 40px; margin-top: 12px; padding: 0 4px 0 12px; border-radius: 10px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #C9D5E1; }
.dstep__key .code__btn { height: 30px; padding: 0 9px; }
.dstep__state { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: #8DA2B6; }
.dstep__state .zf-nodes { color: #2FBE79; }
.dstep__done { display: none; align-items: center; gap: 6px; color: var(--zf-green-300); font-weight: 600; }
.dstep__done svg { width: 15px; height: 15px; }
#step3.is-done .zf-nodes, #step3.is-done .dstep__wait { display: none; }
#step3.is-done .dstep__done { display: inline-flex; animation: pop 420ms var(--zf-ease-spring); }
#step3.is-done { border-color: rgba(47,190,121,.35); }

.code--tile { grid-column: span 2; display: flex; flex-direction: column; margin-top: 0; border-radius: 22px; background: #0F2A43; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); }
.code--tile .code__bar { height: 60px; padding: 0 14px 0 18px; }
.code--tile .code__bar .sp { display: flex; align-items: center; gap: 10px; }
.code--tile #codeReq { flex: none; min-height: 150px; padding: 16px 24px; }
.code--tile .code__sub--res { border-top: 1px solid rgba(255,255,255,.07); background: #0B2236; }
.code--tile .code__res { position: relative; flex: 1; min-height: 220px; background: #0B2236; border-radius: 0 0 22px 22px; }
.code--tile #codeRes { padding: 16px 24px; }

.sdks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 20px; }
.sdk { position: relative; display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; text-align: left; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: #fff; transition: background-color var(--zf-dur-pop), border-color var(--zf-dur-pop), transform var(--zf-dur-pop) var(--zf-ease-out); }
.sdk:hover { background: rgba(255,255,255,.08); border-color: rgba(47,190,121,.4); transform: translateY(-2px); }
.sdk b { font-size: 14.5px; }
.sdk code { font: 12px var(--zf-mono); color: #8DA2B6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 18px; }
.sdk__cp { position: absolute; top: 14px; right: 14px; color: #6F86A0; opacity: 0; transition: opacity var(--zf-dur-hover), color var(--zf-dur-hover); }
.sdk__cp svg { width: 15px; height: 15px; }
.sdk:hover .sdk__cp { opacity: 1; color: var(--zf-green-300); }
.sdk.is-copied { border-color: var(--zf-green-500); }
.sdk--more b { color: var(--zf-green-300); }
.sdk--more .sdk__cp { opacity: 1; }

/* r7：自适应宽度——深色开发者卡比页面窄 48px，内部容器补回，保证与其他区块左右对齐 */
.dev-band { max-width: none; }
.dev-band .zf-container { width: min(var(--zf-wrap), calc(100% + 48px - 2 * var(--zf-gutter))); }

/* 当前页导航标记 */
.nav__link.is-current { color: var(--zf-green-800); }
.nav__link.is-current::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--zf-green-600); }
.nav__link[data-mega].is-current::after { margin-left: -10px; }

/* =====================================================================
   r8（2026-11-04）：交易状态、近期休市、四步接入
   ===================================================================== */
.st { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: var(--zf-ink-300); }
.st--open { background: var(--zf-green-500); box-shadow: 0 0 0 3px rgba(16,168,98,.16); }
.st--break, .st--pre { background: var(--zf-warning); }
.st--holiday { background: var(--zf-danger); }
.mst { color: var(--zf-text-2) !important; }
.mst__t { color: var(--zf-text-3); }

.closures-wrap { margin-top: 24px; padding: 20px 24px 22px; border-radius: 24px; background: rgb(var(--zf-surface-rgb) / .72); border: 1px solid rgb(var(--zf-surface-rgb) / .95); box-shadow: 0 1px 2px rgba(16,42,67,.04), 0 20px 44px -28px rgba(16,42,67,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.closures-head { display: flex; align-items: center; justify-content: space-between; }
.closures-head h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.closures-head h3 svg { width: 18px; height: 18px; color: var(--zf-green-600); }
.closures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.closure { --ac: var(--zf-ink-600); display: grid; grid-template-columns: 74px 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--zf-surface); border: 1px solid var(--zf-line); transition: transform var(--zf-dur-pop) var(--zf-ease-out), box-shadow var(--zf-dur-pop), border-color var(--zf-dur-hover); }
.closure:hover { transform: translateY(-2px); border-color: var(--zf-line-2); box-shadow: var(--zf-sh-2); }
.closure__d b { display: block; font-size: 14px; color: var(--zf-text); white-space: nowrap; }
.closure__d small { font-size: 12px; color: var(--zf-text-3); }
.closure .mchip__flag { width: 32px; height: 32px; font-size: 11px; }
.closure__t { min-width: 0; }
.closure__t b { display: block; font-size: 14px; color: var(--zf-text); }
.closure__t small { display: block; font-size: 12px; color: var(--zf-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.closure__k { height: 22px; padding: 0 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600; line-height: 22px; background: rgba(229,72,77,.1); color: #C9363B; }
.closure__k--half { background: rgba(224,138,0,.12); color: #A86400; }

.dsteps--4 { gap: 12px; }
.dsteps--4 .dstep { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; align-content: center; padding: 16px 18px; }
.dsteps--4 .dstep > :not(.dstep__n) { grid-column: 2; }
.dsteps--4 .dstep h4 { margin-top: 4px; }
.dsteps--4 .dstep .dstep__key, .dsteps--4 .dstep .dstep__state, .dsteps--4 .dstep .zf-link { margin-top: 10px; }

/* r11：四档订阅时长（月 / 季 / 半年 / 年） */
.sum__bill .zf-seg { border-radius: 14px; }
.sum__bill .zf-seg .zf-seg__ind { border-radius: 10px; }
.sum__bill .zf-seg button { height: 46px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1.1; padding: 0 4px; }
.sum__bill .zf-seg .save { margin: 0; height: 16px; padding: 0 6px; font-size: 10.5px; }

/* =====================================================================
   r13（2026-11-04）：首屏下方板块向首屏语言收敛
   规则：一种玻璃卡（同首屏 Key 卡）+ 一种白底内面板；颜色只用墨蓝与品牌绿；
   不用水印大字、地区色、角落彩色光晕和整块深色背景；招牌元素是 Key 卡。
   ===================================================================== */
:root {
  --zf-card-bg: rgb(var(--zf-surface-rgb) / .66);
  --zf-card-line: rgb(var(--zf-surface-rgb) / .92);
  --zf-card-sh: var(--zf-sh-inset), 0 1px 2px rgba(16,42,67,.04), 0 28px 60px -32px rgba(16,42,67,.28);
}
/* 统一玻璃卡 */
.rp, .tile, .closures-wrap, .panel2, .code--tile {
  background: var(--zf-card-bg); border: 1px solid var(--zf-card-line); box-shadow: var(--zf-card-sh);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
}
.rp, .tile, .mchip, .tile__ico { --ac: var(--zf-green-600); }
.rp::before, .tile::before, .rp__en { display: none; }

/* Markets：地区只用文字区分，不再配色 */
.rp__head h3::before { width: 6px; height: 6px; background: var(--zf-green-500); box-shadow: 0 0 0 4px rgba(47,190,121,.14); }
.rp__stat { background: var(--zf-ink-50); color: var(--zf-text-3); }
.mchip__flag { color: var(--zf-text); background: var(--zf-ink-50); border: 1px solid var(--zf-line); }
.mchip:hover { border-color: var(--zf-green-200); box-shadow: 0 14px 28px -18px rgba(16,42,67,.28); }
.mchip.is-sel { border-color: var(--zf-green-400); background: var(--zf-surface); box-shadow: 0 0 0 3px rgba(0,144,74,.08), 0 14px 28px -20px rgba(16,42,67,.3); }
.mchip.is-sel .mchip__flag { background: var(--zf-ink-800); border-color: var(--zf-ink-800); color: #fff; }
.rp.is-ping { animation: none; }

/* 底部结算条：浅色玻璃，和首屏 Key 卡同一材质 */
.mkbar {
  background: rgb(var(--zf-surface-rgb) / .94); color: var(--zf-text-2);
  border: 1px solid var(--zf-card-line); box-shadow: var(--zf-sh-inset), 0 30px 64px -30px rgba(16,42,67,.38), 0 2px 6px rgba(16,42,67,.05);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
}
.mkbar .sum__count { background: var(--zf-ink-100); color: var(--zf-text-2); }
.mkbar .sum__count.is-on { background: var(--zf-green-600); color: #fff; }
.mkbar__flag { background: var(--zf-ink-800); border: 2px solid var(--zf-surface); color: #fff; }
.mkbar__flag.is-new { background: var(--zf-ink-800); }
.mkbar__more { background: var(--zf-ink-100); color: var(--zf-text-2); }
.mkbar__txt b { color: var(--zf-text); }
.mkbar__txt small { color: var(--zf-text-3); }
.mkbar__txt small.is-on { color: var(--zf-green-700); }
.mkbar__price span, .mkbar__price small { color: var(--zf-text-3); }
.mkbar__price b { color: var(--zf-text); }

/* 近期休市：内面板跟市场条目一致 */
.closure { background: var(--zf-surface); }

/* 行情滚动带：标识统一为首屏 Key 卡的墨蓝方块 */
.mcard__flag--fx, .mcard__flag--metal { background: var(--zf-ink-800); }

/* Included：降密度，数字写法同首屏 */
.tile__ico { color: var(--zf-green-600); background: var(--zf-green-50); border: 1px solid var(--zf-green-100); }
.tile:hover .tile__ico { transform: none; }
.tile__api { background: var(--zf-ink-50); }
.tile__bar { padding: 0 2px 12px; margin-bottom: 4px; background: none; border: 0; border-bottom: 1px solid var(--zf-line); border-radius: 0; }
.tile--push .stream__row:nth-child(even) { background: none; }
.tile--push .stream__row { border-bottom: 1px solid rgb(var(--zf-shade-rgb) / .05); border-radius: 0; }
.tile--push .stream__row:last-child { border-bottom: 0; }
.tile--push .stream__row .qbadge { background: var(--zf-ink-800); }
.tile--snap .snap-big .v { font-size: 44px; }
.snap2 { gap: 18px 20px; background: none; border: 0; border-radius: 0; overflow: visible; padding-top: 18px; border-top: 1px solid var(--zf-line); }
.snap2 div { padding: 0; background: none; }
.snap2 div:hover { background: none; }
.snap2 b { margin-top: 4px; font-size: 16px; font-weight: 600; }
.spec2 { gap: 0; grid-template-columns: 1fr 1fr; }
.spec2 > div { padding: 16px 4px 16px 0; border: 0; border-radius: 0; background: none; border-top: 1px solid var(--zf-line); }
.spec2 > div:nth-child(-n+2) { border-top: 0; padding-top: 4px; }
.spec2 > div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--zf-line); }
.spec2 > div:hover { background: none; }
.spec2 > div > span { color: var(--zf-text-3); font-size: 13px; }
.spec2 b { margin-top: 6px; font-size: 26px; letter-spacing: -.01em; line-height: 1.3; }
.spec2 small { font-size: 13px; }

/* Developer：浅色区块，步骤与代码窗都用玻璃卡 */
.dev-light { position: relative; }
.dev-light .dev__cta { display: flex; gap: 12px; margin-top: 0; }
.dstep { background: var(--zf-card-bg); border: 1px solid var(--zf-card-line); box-shadow: var(--zf-sh-inset), 0 18px 40px -28px rgba(16,42,67,.26); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); }
.dstep:hover { background: rgb(var(--zf-surface-rgb) / .86); border-color: var(--zf-green-200); }
.dstep__n { background: var(--zf-green-50); border: 1px solid var(--zf-green-200); color: var(--zf-green-700); }
.dstep h4 { color: var(--zf-text); }
.dstep p { color: var(--zf-text-3); }
.dstep .zf-link { color: var(--zf-green-700); }
.dstep__state { color: var(--zf-text-3); }
.dstep__state .zf-nodes { color: var(--zf-green-500); }
.dstep__done { color: var(--zf-green-700); }
#step3.is-done { border-color: var(--zf-green-200); }
/* 第一步复用首屏 Key 卡的 Key 行 */
.dkey { display: flex; align-items: center; gap: 10px; height: 48px; margin-top: 10px; padding: 0 4px 0 6px; border-radius: 14px; background: rgb(var(--zf-surface-rgb) / .8); border: 1px solid var(--zf-line); }
.dkey .kc-flag { width: 34px; height: 34px; border-radius: 10px; font-size: 11.5px; }
.dkey .zf-mono { flex: 1; min-width: 0; font-size: 13.5px; color: var(--zf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dkey .zf-iconbtn { width: 34px; height: 34px; }

/* 代码窗：玻璃外框 + 浅色代码区 */
.code--tile { border-radius: 24px; box-shadow: var(--zf-sh-inset), var(--zf-sh-3); }
.code--tile .code__bar { border-bottom: 1px solid var(--zf-line); }
.code--tile .zf-tabs button { color: var(--zf-text-3); }
.code--tile .zf-tabs button:hover, .code--tile .zf-tabs button[aria-selected="true"] { color: var(--zf-text); }
.code--tile .zf-tabs__ind { background: var(--zf-green-600); }
.code--tile .code__btn { color: var(--zf-text-2); background: var(--zf-ink-50); }
.code--tile .code__btn:hover { color: var(--zf-text); background: var(--zf-ink-100); }
.code--tile .code__btn.is-copied { color: var(--zf-green-700); }
.code--tile .code__run, .code--tile .code__run:hover { color: #fff; background: var(--zf-green-600); }
.code--tile .code__run:hover { background: var(--zf-green-500); }
.code--tile .code__sub { color: var(--zf-text-3); border-bottom: 1px solid var(--zf-line); }
.code--tile .code__sub--res { border-top: 1px solid var(--zf-line); background: rgb(var(--zf-surface-2-rgb) / .55); }
.code--tile .code__res { background: rgb(var(--zf-surface-2-rgb) / .55); border-radius: 0 0 24px 24px; }
.code--tile .code__empty { color: var(--zf-text-3); }
.code--tile .code__empty .zf-nodes { color: var(--zf-green-500); }
.code--tile .code__status { color: var(--zf-green-700); }
.code--tile .code__mock { background: var(--zf-ink-50); color: var(--zf-text-3); }
.code--tile pre { color: var(--zf-text); }
.code--tile pre .k { color: #1B4D7A; } .code--tile pre .f { color: #00804A; } .code--tile pre .s { color: #9A5B00; }
.code--tile pre .n { color: #2F5F8F; } .code--tile pre .c { color: #8A9BAD; } .code--tile pre .p { color: var(--zf-text-2); }

/* SDK：浅色内面板 */
.sdk { background: var(--zf-card-bg); border: 1px solid var(--zf-card-line); box-shadow: var(--zf-sh-inset), 0 12px 28px -22px rgba(16,42,67,.26); color: var(--zf-text); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); }
.sdk:hover { background: rgb(var(--zf-surface-rgb) / .9); border-color: var(--zf-green-200); }
.sdk code { color: var(--zf-text-3); }
.sdk__cp { color: var(--zf-text-3); }
.sdk:hover .sdk__cp { color: var(--zf-green-600); }
.sdk--more b { color: var(--zf-green-700); }

/* 区块光晕上下边缘淡出，避免相邻区块之间出现硬分界 */
.blk2::before { -webkit-mask-image: linear-gradient(180deg, transparent, #000 200px, #000 calc(100% - 200px), transparent); mask-image: linear-gradient(180deg, transparent, #000 200px, #000 calc(100% - 200px), transparent); }
.code--tile pre { scrollbar-width: thin; scrollbar-color: var(--zf-line-2) transparent; }


/* r20.7：导航 Logo 放大（图片自带透明留白，32px 时字标偏小）；页面滚动、导航收窄后略缩小 */
.nav__brand img { height: 40px; transition: height var(--zf-dur-layer) var(--zf-ease-out), transform var(--zf-dur-pop) var(--zf-ease-out); }
.nav.is-scrolled .nav__brand img, .nav.is-mega .nav__brand img { height: 36px; }

/* r20.7：首页市场卡片状态行设置了 overflow:hidden，绿点的 3px 光晕在左侧被裁掉；左侧留出空间并用负边距抵消，文字位置不变 */
.mchip__id small.mst { padding-left: 4px; margin-left: -4px; }

/* r22：未滚动时导航也是玻璃条（与滚动后同一套材质），只有高度和投影随滚动变化。
   原来顶部完全透明，搜索框、登录按钮像散落在背景上的孤岛，与页面的玻璃卡片语言不一致。 */
.nav {
  background: rgb(var(--zf-surface-rgb) / .58);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border-bottom-color: rgb(var(--zf-shade-rgb) / .06);
}
.nav.is-scrolled, .nav.is-mega { background: rgb(var(--zf-surface-rgb) / .76); border-bottom-color: rgb(var(--zf-shade-rgb) / .07); }
.nav:not(.is-scrolled) .nav__search { background: rgb(var(--zf-surface-rgb) / .85); }

/* r22.1：Logo 缩小改用 transform，不占布局——原来改 height 会让 Logo 变窄 12px，导航链接整体左移 6px。
   展开超级菜单（未滚动）时 Logo 不缩小；只有滚动后才缩小。 */
.nav__brand img, .nav.is-scrolled .nav__brand img, .nav.is-mega .nav__brand img { height: 40px; transform-origin: left center; transition: transform var(--zf-dur-layer) var(--zf-ease-out); }
.nav.is-scrolled .nav__brand img { transform: scale(.9); }
.nav.is-scrolled .nav__brand:hover img { transform: scale(.93); }

/* r22.2：导航链接紧跟 Logo（原来居中于 Logo 与右侧按钮之间，Logo 后空出约 250px）；空白留在中间，分隔「导航」与「操作」 */
.nav__brand { margin-right: 12px; }

/* r24：全站维护提醒条（导航上方，随页面滚走；导航仍吸顶）。琥珀色只用于需要留意的维护 */
.znote { position: relative; z-index: calc(var(--zf-z-nav) + 1); display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--zf-ease-out); }
.znote.is-in { grid-template-rows: 1fr; }
.znote__in { overflow: hidden; min-height: 0; background: linear-gradient(90deg, rgba(224,138,0,.14), rgba(224,138,0,.07) 60%, rgba(224,138,0,.04)), rgb(var(--zf-surface-rgb) / .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(224,138,0,.20); }
.znote__row { display: flex; align-items: center; gap: 10px; height: 40px; font-size: 13px; color: var(--zf-text-2); }
.znote__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #E08A00; box-shadow: 0 0 0 3px rgba(224,138,0,.18); }
.znote.is-live .znote__dot { animation: nwPulse 1.6s ease-in-out infinite; }
.znote__k { flex: none; font-weight: 700; color: #A86400; }
.znote__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--zf-text); font-weight: 500; }
.znote__t:hover { text-decoration: underline; text-underline-offset: 3px; }
.znote__cd { flex: none; padding: 2px 8px; border-radius: 999px; background: rgba(224,138,0,.12); font-size: 12px; font-weight: 600; color: #A86400; }
.znote__a { flex: none; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-weight: 600; color: var(--zf-text); }
.znote__a svg { width: 14px; height: 14px; transition: transform var(--zf-dur-hover); }
.znote__a:hover { color: #A86400; }
.znote__a:hover svg { transform: translateX(2px); }
.znote__x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-right: -6px; border-radius: 8px; color: var(--zf-text-3); transition: background-color var(--zf-dur-hover), color var(--zf-dur-hover); }
.znote__x svg { width: 15px; height: 15px; }
.znote__x:hover { background: rgba(224,138,0,.14); color: var(--zf-text); }
@keyframes nwPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
[data-theme="dark"] .znote__in { background: linear-gradient(90deg, rgba(242,181,74,.14), rgba(242,181,74,.06) 60%, rgba(242,181,74,.03)), rgb(var(--zf-surface-rgb) / .72); border-bottom-color: rgba(242,181,74,.18); }
[data-theme="dark"] .znote__k, [data-theme="dark"] .znote__cd, [data-theme="dark"] .znote__a:hover { color: #F2B54A; }
[data-theme="dark"] .znote__cd { background: rgba(242,181,74,.14); }
@media (prefers-reduced-motion: reduce) { .znote { transition: none; } }

/* r25：首页首屏文字入场换为「逐行柔和显现」——
   原效果：标题整行从遮罩下方升起（900ms），而描述、按钮在 210–350ms 就开始淡入，几样东西同时在动，没有先后。
   新效果：每行标题从左到右带柔边显现，同时由模糊变清晰、轻微上移；两行相隔 180ms。
   标题落定后依次出现描述 → 按钮 → 数据，最后绿色字扫一次光。 */
.hero .zf-lines > span { overflow: visible; padding-bottom: 0; }
.hero .zf-lines > span > span {
  padding-bottom: .14em; margin-bottom: -.14em; /* 让遮罩盖住 y、g 等下伸部分 */
  opacity: 0; transform: translateY(.16em); filter: blur(12px);
  -webkit-mask-image: linear-gradient(90deg, #000 0 38%, transparent 62% 100%); mask-image: linear-gradient(90deg, #000 0 38%, transparent 62% 100%);
  -webkit-mask-size: 270% 100%; mask-size: 270% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: none;
}
/* 结束后回到无滤镜、无遮罩的状态（backwards 只在延迟期间保持首帧），文字渲染保持清晰 */
.hero .zf-lines.is-in > span > span { opacity: 1; transform: none; filter: none; -webkit-mask-image: none; mask-image: none; animation: heroLineIn 1150ms cubic-bezier(.22, .8, .24, 1) backwards; animation-delay: calc(var(--i, 0) * 180ms + 140ms); }
@keyframes heroLineIn {
  0% { opacity: 0; transform: translateY(.16em); filter: blur(12px); -webkit-mask-image: linear-gradient(90deg, #000 0 38%, transparent 62% 100%); mask-image: linear-gradient(90deg, #000 0 38%, transparent 62% 100%); -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  45% { opacity: 1; }
  70% { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); -webkit-mask-image: linear-gradient(90deg, #000 0 38%, transparent 62% 100%); mask-image: linear-gradient(90deg, #000 0 38%, transparent 62% 100%); -webkit-mask-position: 0 0; mask-position: 0 0; }
}
.hero .zf-lines.is-in .zf-grad-text { animation-delay: 1250ms; }
/* 其余内容排在标题之后 */
.hero .zf-eyebrow[data-reveal] { transition-delay: 0ms; }
.hero .hero__desc[data-reveal] { transition-delay: 720ms; }
.hero .hero__cta[data-reveal] { transition-delay: 840ms; }
.hero .hero__facts[data-reveal] { transition-delay: 960ms; }
@media (prefers-reduced-motion: reduce) {
  .hero .zf-lines > span > span, .hero .zf-lines.is-in > span > span { animation: none; opacity: 1; transform: none; filter: none; -webkit-mask-image: none; mask-image: none; }
}

/* r27：右侧客服栏重做——按钮统一用品牌绿悬停；信息卡可移入（与按钮之间用透明「桥」相连）、可复制、可打开 */
.zf-dock { width: 54px; gap: 2px; padding: 5px; }
.zf-dock__item { position: relative; }
.zf-dock__btn { width: 42px; height: 42px; color: var(--zf-ink-600); }
.zf-dock__btn svg { width: 20px; height: 20px; }
.zf-dock__btn--tg:hover, .zf-dock__btn--wa:hover, .zf-dock__btn:hover, .zf-dock__item.is-open > .zf-dock__btn:not(.zf-dock__btn--chat) { background: var(--zf-green-50); color: var(--zf-green-700); }
.zf-dock__item.is-open > .zf-dock__btn:not(.zf-dock__btn--chat) { box-shadow: inset 0 0 0 1px rgba(0,144,74,.18); }
.zf-dock__btn--chat { margin-top: 4px; color: #fff; }
.zf-dock__btn--chat:hover { background: var(--zf-green-700); color: #fff; }
.zf-dock__item--chat::before { content: ""; position: absolute; left: 9px; right: 9px; top: -1px; height: 1px; background: var(--zf-line); }

.zf-dock__pop {
  position: absolute; right: calc(100% + 14px); top: 50%; width: 272px; padding: 14px; border-radius: 16px;
  background: var(--zf-surface); border: 1px solid var(--zf-line); box-shadow: 0 1px 2px rgba(16,42,67,.05), 0 24px 48px -20px rgba(16,42,67,.32);
  opacity: 0; visibility: hidden; transform: translate(8px, -50%) scale(.98); transform-origin: right center;
  transition: opacity 140ms var(--zf-ease-in), transform 140ms var(--zf-ease-in), visibility 0s 140ms;
}
/* 透明桥：覆盖信息卡与按钮之间的间隙，鼠标经过时不会断开 */
.zf-dock__pop::before { content: ""; position: absolute; left: 100%; top: 0; bottom: 0; width: 20px; }
.zf-dock__pop::after { content: ""; position: absolute; right: -6px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; background: var(--zf-surface); border-right: 1px solid var(--zf-line); border-top: 1px solid var(--zf-line); transform: rotate(45deg); border-radius: 2px; }
.zf-dock__item.is-open > .zf-dock__pop { opacity: 1; visibility: visible; transform: translate(0, -50%); transition: opacity 180ms var(--zf-ease-out), transform 180ms var(--zf-ease-out), visibility 0s; }
.zf-dock__ph { display: flex; align-items: center; gap: 10px; }
.zf-dock__pi { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--zf-green-50); color: var(--zf-green-700); }
.zf-dock__pi svg { width: 18px; height: 18px; }
.zf-dock__ph b { display: block; font-size: 14px; color: var(--zf-text); }
.zf-dock__ph small, .zf-dock__pop--tip small { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: 12px; color: var(--zf-text-3); }
.zf-dock__on { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--zf-green-500); box-shadow: 0 0 0 3px rgba(16,168,98,.14); }
.zf-dock__val { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 42px; margin-top: 12px; padding: 0 5px 0 12px; border-radius: 11px; background: var(--zf-ink-50); }
.zf-dock__val code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13.5px var(--zf-mono); color: var(--zf-text); }
.zf-dock__copy { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 8px; background: var(--zf-surface); border: 1px solid var(--zf-line); font-size: 12.5px; font-weight: 600; color: var(--zf-text-2); transition: color var(--zf-dur-hover), border-color var(--zf-dur-hover), background-color var(--zf-dur-hover); }
.zf-dock__copy svg { width: 14px; height: 14px; }
.zf-dock__copy:hover { border-color: var(--zf-green-300); color: var(--zf-green-700); }
.zf-dock__copy.is-done { border-color: var(--zf-green-300); background: var(--zf-green-50); color: var(--zf-green-700); }
.zf-dock__pf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.zf-dock__pf small { font-size: 12px; color: var(--zf-text-3); }
.zf-dock__pf .zf-btn { flex: none; }
.zf-dock__pop--tip { width: auto; min-width: 200px; padding: 11px 14px; white-space: nowrap; }
.zf-dock__pop--tip b { font-size: 14px; color: var(--zf-text); }
.zf-dock__btn--chat.is-open + .zf-dock__pop { display: none; } /* 在线客服窗口打开时不显示提示 */
@media (prefers-reduced-motion: reduce) { .zf-dock__pop { transition: none; } }
[data-theme="dark"] .zf-dock__btn { color: var(--zf-text-2); }
[data-theme="dark"] .zf-dock__btn:not(.zf-dock__btn--chat):hover, [data-theme="dark"] .zf-dock__item.is-open > .zf-dock__btn:not(.zf-dock__btn--chat) { background: rgba(47,190,121,.12); color: #7FD7AA; }
[data-theme="dark"] .zf-dock__pop { box-shadow: 0 24px 48px -20px rgba(0,0,0,.6); }
[data-theme="dark"] .zf-dock__pi { background: rgba(47,190,121,.12); color: #7FD7AA; }
[data-theme="dark"] .zf-dock__val { background: rgba(255,255,255,.05); }
[data-theme="dark"] .zf-dock__copy.is-done, [data-theme="dark"] .zf-dock__copy:hover { background: rgba(47,190,121,.12); color: #7FD7AA; }

/* V1 第 3 批：首页示例行情标注（上线构建中由 live-data.js 添加） */
.zf-sample-host { position: relative; }
.zf-sample { position: absolute; top: 8px; right: 10px; z-index: 3; padding: 2px 8px; border-radius: 99px; font-size: 11px; line-height: 18px; color: var(--zf-text-3); background: color-mix(in srgb, var(--zf-surface, #fff) 82%, transparent); border: 1px solid var(--zf-border, rgba(11,31,51,.12)); pointer-events: none; }

/* 英文界面（2026-11-07）：英文比中文长，顶栏导航与搜索按钮不折行 */
html[lang="en"] .nav__link, html[lang="en"] .nav__search { white-space: nowrap; }

/* 顶栏语言切换（2026-11-08：用户要求放在右上角；页脚的入口保留） */
.nav__lang { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 10px; border-radius: var(--zf-r-pill); border: 1px solid transparent; background: transparent; color: var(--zf-text-2, var(--zf-text)); font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--zf-dur-hover), border-color var(--zf-dur-hover), color var(--zf-dur-hover); }
.nav__lang svg { width: 16px; height: 16px; }
.nav__lang svg:last-child { width: 13px; height: 13px; opacity: .6; }
.nav__lang:hover, .nav__lang[aria-expanded="true"] { background: rgb(var(--zf-surface-rgb) / .8); border-color: var(--zf-line); color: var(--zf-text); }
@media (max-width: 640px) { .nav__lang [data-lang-short], .nav__lang svg:last-child { display: none; } .nav__lang { padding: 0 8px; } }

/* 上线构建（scripts/build-web.py）：隐藏原型标记 */
.proto-flag { display: none !important; }