/* =========================================================================
   ZaFeed 品牌语言 v4 · 基础层
   设计 token（颜色 / 字体 / 形状 / 阴影 / 动效）+ 基础组件 + 悬停效果
   仅 PC 端。原型文件，不接入 web/。
   ========================================================================= */
@import url("assets/fonts/fonts.css");

:root {
  /* ---------- 品牌色：绿取自已批准 Logo 实色（≈ #00904A） ---------- */
  --zf-green-50: #EEFAF3;
  --zf-green-100: #D7F3E3;
  --zf-green-200: #AEE6C8;
  --zf-green-300: #74D3A2;
  --zf-green-400: #2FBE79;
  --zf-green-500: #10A862;
  --zf-green-600: #00904A;   /* 品牌主色 = Logo 绿 */
  --zf-green-700: #007A3F;
  --zf-green-800: #066234;
  --zf-green-900: #064B2A;

  /* ---------- 墨蓝：字标与标题 ---------- */
  --zf-ink-900: #0B1F33;
  --zf-ink-800: #102A43;     /* 品牌墨蓝 = 字标 */
  --zf-ink-700: #243B53;
  --zf-ink-600: #334E68;
  --zf-ink-500: #486581;
  --zf-ink-400: #627D98;
  --zf-ink-300: #9FB3C8;
  --zf-ink-200: #C9D5E1;
  --zf-ink-100: #E1E8EF;
  --zf-ink-50: #F1F5F8;

  /* ---------- 资产分类辅助色（只用于资产图标，不用于按钮/链接） ---------- */
  --zf-cat-stock: #00904A;
  --zf-cat-crypto: #F08C1A;
  --zf-cat-fx: #2B78F0;
  --zf-cat-futures: #7B5CF5;

  /* ---------- 语义层 ---------- */
  --zf-bg: #F4F8F6;
  --zf-bg-2: #EDF3F0;
  --zf-surface: #FFFFFF;
  --zf-surface-2: #F8FAFB;
  --zf-glass: rgba(255, 255, 255, .58);
  --zf-glass-strong: rgba(255, 255, 255, .78);
  --zf-line: #E4EAEF;
  --zf-line-2: #D3DDE5;
  --zf-text: var(--zf-ink-800);
  --zf-text-2: #4A6178;
  --zf-text-3: #7A8DA0;
  --zf-text-inverse: #FFFFFF;
  --zf-accent: var(--zf-green-600);
  --zf-accent-hover: var(--zf-green-700);
  --zf-accent-tint: var(--zf-green-50);
  --zf-focus: 0 0 0 4px rgba(0, 144, 74, .16);

  /* 状态 */
  --zf-success: #00904A;
  --zf-info: #2B78F0;
  --zf-warning: #E08A00;
  --zf-danger: #E5484D;

  /* ---------- 行情涨跌：可切换（data-quote="intl" 绿涨红跌 / "cn" 红涨绿跌） ---------- */
  --zf-up: #00A35B;
  --zf-up-tint: rgba(0, 163, 91, .12);
  --zf-down: #E5484D;
  --zf-down-tint: rgba(229, 72, 77, .11);

  /* ---------- 字体 ---------- */
  --zf-sans: "Inter", "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --zf-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --zf-fs-display: 64px;
  --zf-fs-h1: 44px;
  --zf-fs-h2: 36px;
  --zf-fs-h3: 22px;
  --zf-fs-h4: 18px;
  --zf-fs-body: 16px;
  --zf-fs-sm: 14px;
  --zf-fs-xs: 12.5px;

  /* ---------- 形状 ---------- */
  --zf-r-xs: 6px;
  --zf-r-sm: 10px;
  --zf-r-md: 14px;
  --zf-r-lg: 20px;
  --zf-r-xl: 28px;
  --zf-r-pill: 999px;

  /* ---------- 阴影（墨蓝底色，不用纯黑） ---------- */
  --zf-sh-1: 0 1px 2px rgba(16, 42, 67, .06), 0 1px 1px rgba(16, 42, 67, .03);
  --zf-sh-2: 0 10px 28px -10px rgba(16, 42, 67, .14), 0 2px 6px rgba(16, 42, 67, .05);
  --zf-sh-3: 0 28px 64px -22px rgba(16, 42, 67, .26), 0 10px 24px -10px rgba(16, 42, 67, .10);
  --zf-sh-glow: 0 12px 28px -10px rgba(0, 144, 74, .55);
  --zf-sh-inset: inset 0 1px 0 rgba(255, 255, 255, .9);

  /* ---------- 动效 token ---------- */
  --zf-dur-press: 90ms;     /* 按下、勾选 */
  --zf-dur-hover: 160ms;    /* 悬停颜色/位移 */
  --zf-dur-pop: 220ms;      /* 提示、气泡、下拉 */
  --zf-dur-layer: 360ms;    /* 对话框、抽屉 */
  --zf-dur-reveal: 640ms;   /* 区块入场 */
  --zf-dur-draw: 1200ms;    /* 图表描线、数字滚动 */
  --zf-ease: cubic-bezier(.2, 0, 0, 1);          /* 标准：状态变化 */
  --zf-ease-out: cubic-bezier(.16, 1, .3, 1);    /* 进入：从快到稳 */
  --zf-ease-in: cubic-bezier(.4, 0, 1, 1);       /* 退出：干脆离开 */
  --zf-ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* 小元素回弹，限图标/指示点 */

  /* ---------- 层级 ---------- */
  --zf-z-nav: 50;
  --zf-z-dropdown: 60;
  --zf-z-drawer: 80;
  --zf-z-modal: 90;
  --zf-z-toast: 100;
  --zf-z-tooltip: 110;
}

:root[data-quote="cn"] {
  --zf-up: #E5484D;
  --zf-up-tint: rgba(229, 72, 77, .11);
  --zf-down: #00A35B;
  --zf-down-tint: rgba(0, 163, 91, .12);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --zf-dur-hover: 1ms; --zf-dur-pop: 1ms; --zf-dur-layer: 1ms;
    --zf-dur-reveal: 1ms; --zf-dur-draw: 1ms;
  }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* =========================== 基础 =========================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 1280px;                 /* 仅 PC */
  background: var(--zf-bg);
  color: var(--zf-text-2);
  font-family: var(--zf-sans);
  font-size: var(--zf-fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.zf-lock { overflow: hidden; }
h1, h2, h3, h4, h5 { margin: 0; color: var(--zf-text); font-weight: 700; letter-spacing: -.012em; line-height: 1.2; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
img, svg { display: block; }
[hidden] { display: none !important; }
::selection { background: var(--zf-green-200); color: var(--zf-ink-900); }
:focus-visible { outline: 2px solid var(--zf-green-600); outline-offset: 2px; border-radius: 6px; }

.zf-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.zf-mono { font-family: var(--zf-mono); }
/* 自适应内容宽度：两侧留白 48–112px 随视口变化（给右侧客服栏留位），内容最宽 1440px（1440 屏约 1250px，1920 屏 1440px） */
:root { --zf-wrap: 1440px; --zf-gutter: clamp(48px, 6vw, 112px); }
.zf-container { width: min(var(--zf-wrap), calc(100% - 2 * var(--zf-gutter))); margin: 0 auto; }
.zf-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--zf-ink-600);
}
.zf-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--zf-green-600); }
.zf-section-title { font-size: var(--zf-fs-h2); line-height: 1.22; }
.zf-section-desc { margin-top: 14px; font-size: 17px; color: var(--zf-text-2); max-width: 620px; }
.zf-demo-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  border-radius: var(--zf-r-pill); background: rgb(var(--zf-shade-rgb) / .06); color: var(--zf-text-3);
  font-size: 11.5px; font-weight: 500; letter-spacing: .02em; white-space: nowrap;
}
.zf-demo-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--zf-warning); }

/* 图标容器默认尺寸（组件内可再覆盖） */
[data-icon] { display: inline-grid; place-items: center; flex: none; }
[data-icon] > svg { width: 18px; height: 18px; }

/* =========================== 按钮 =========================== */
.zf-btn {
  --h: 44px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 22px; border-radius: var(--zf-r-pill);
  font-size: 15px; font-weight: 600; white-space: nowrap; line-height: 1;
  transition:
    transform var(--zf-dur-hover) var(--zf-ease),
    box-shadow var(--zf-dur-hover) var(--zf-ease),
    background-color var(--zf-dur-hover) var(--zf-ease),
    border-color var(--zf-dur-hover) var(--zf-ease),
    color var(--zf-dur-hover) var(--zf-ease);
  user-select: none;
}
.zf-btn--sm { --h: 36px; padding: 0 16px; font-size: 14px; }
.zf-btn--lg { --h: 52px; padding: 0 30px; font-size: 16px; }
.zf-btn svg { width: 18px; height: 18px; flex: none; }
.zf-btn__arrow { transition: transform var(--zf-dur-hover) var(--zf-ease-out); }
.zf-btn:hover .zf-btn__arrow { transform: translateX(3px); }
.zf-btn:active { transform: translateY(0) scale(.975); transition-duration: var(--zf-dur-press); }

/* 主按钮：品牌绿 + 内高光 + 悬停扫光 */
.zf-btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #17AE66 0%, var(--zf-green-600) 100%);
  box-shadow: var(--zf-sh-inset), 0 1px 2px rgba(0, 80, 40, .25), 0 6px 16px -8px rgba(0, 144, 74, .55);
}
.zf-btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .38) 48%, transparent 66%);
  transform: translateX(-110%);
}
.zf-btn--primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #13A45F 0%, var(--zf-green-700) 100%);
  box-shadow: var(--zf-sh-inset), var(--zf-sh-glow);
}
.zf-btn--primary:hover::after { transform: translateX(110%); transition: transform 700ms var(--zf-ease-out); }

/* 次按钮：白底描边，悬停转绿 */
.zf-btn--secondary {
  color: var(--zf-text); background: rgb(var(--zf-surface-rgb) / .86);
  border: 1px solid var(--zf-line-2); box-shadow: var(--zf-sh-1);
}
.zf-btn--secondary:hover {
  color: var(--zf-green-700); border-color: var(--zf-green-300); background: var(--zf-green-50);
  transform: translateY(-1px); box-shadow: var(--zf-sh-2);
}
/* 墨蓝按钮：深色区块或次级强调 */
.zf-btn--ink { color: #fff; background: var(--zf-ink-800); box-shadow: 0 6px 16px -8px rgba(16, 42, 67, .6); }
.zf-btn--ink:hover { background: var(--zf-ink-900); transform: translateY(-1px); box-shadow: var(--zf-sh-3); }
/* 幽灵按钮 */
.zf-btn--ghost { color: var(--zf-text); padding: 0 14px; }
.zf-btn--ghost:hover { background: rgb(var(--zf-shade-rgb) / .06); }
/* 危险 */
.zf-btn--danger { color: #fff; background: var(--zf-danger); }
.zf-btn--danger:hover { background: #CF3A3F; transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(229, 72, 77, .6); }

.zf-btn[disabled], .zf-btn.is-disabled { opacity: .45; pointer-events: none; box-shadow: none; }
.zf-btn.is-loading { pointer-events: none; color: transparent !important; }
.zf-btn.is-loading .zf-nodes { position: absolute; inset: 0; margin: auto; color: #fff; }
.zf-btn--secondary.is-loading .zf-nodes { color: var(--zf-green-600); }

/* 图标按钮 */
.zf-iconbtn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--zf-text); transition: background-color var(--zf-dur-hover) var(--zf-ease), color var(--zf-dur-hover) var(--zf-ease), transform var(--zf-dur-press) var(--zf-ease);
}
.zf-iconbtn svg { width: 20px; height: 20px; }
.zf-iconbtn:hover { background: rgb(var(--zf-shade-rgb) / .07); color: var(--zf-green-700); }
.zf-iconbtn:active { transform: scale(.92); }

/* 文字链接：下划线从左生长 */
.zf-link {
  display: inline-flex; align-items: center; gap: 6px; color: var(--zf-green-700); font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  padding-bottom: 2px; transition: background-size var(--zf-dur-pop) var(--zf-ease-out), color var(--zf-dur-hover);
}
.zf-link:hover { background-size: 100% 1.5px; color: var(--zf-green-800); }
.zf-link svg { width: 16px; height: 16px; transition: transform var(--zf-dur-hover) var(--zf-ease-out); }
.zf-link:hover svg { transform: translateX(3px); }

/* =========================== 卡片与质感 =========================== */
.zf-card {
  position: relative; background: var(--zf-surface); border: 1px solid var(--zf-line);
  border-radius: var(--zf-r-lg); box-shadow: var(--zf-sh-1);
}
.zf-card--hover {
  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-pop);
}
.zf-card--hover:hover { transform: translateY(-4px); box-shadow: var(--zf-sh-3); border-color: var(--zf-line-2); }

.zf-glass {
  background: var(--zf-glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgb(var(--zf-surface-rgb) / .85);
  box-shadow: var(--zf-sh-inset), var(--zf-sh-3);
}

/* 光斑跟随：卡片内部柔光 + 边缘高光（JS 写入 --mx / --my） */
.zf-spot { --mx: 50%; --my: 50%; overflow: hidden; }
.zf-spot::before, .zf-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity var(--zf-dur-pop) var(--zf-ease);
}
.zf-spot::before { background: radial-gradient(360px circle at var(--mx) var(--my), rgba(0, 144, 74, .08), transparent 60%); }
.zf-spot::after {
  padding: 1px;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(0, 144, 74, .7), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.zf-spot:hover::before, .zf-spot:hover::after { opacity: 1; }
.zf-spot > * { position: relative; z-index: 1; }

/* 3D 倾斜（JS 写入 --rx / --ry） */
[data-tilt] {
  --rx: 0deg; --ry: 0deg;
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 500ms var(--zf-ease-out);
  transform-style: preserve-3d; will-change: transform;
}
[data-tilt].is-tilting { transition-duration: 120ms; }

/* =========================== 标签与涨跌 =========================== */
.zf-chg {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: var(--zf-r-pill);
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background-color var(--zf-dur-pop), color var(--zf-dur-pop);
}
.zf-chg.is-up { color: var(--zf-up); background: var(--zf-up-tint); }
.zf-chg.is-down { color: var(--zf-down); background: var(--zf-down-tint); }
.is-up-text { color: var(--zf-up); }
.is-down-text { color: var(--zf-down); }

/* 价格跳动闪烁：只闪底色，不晃动数字 */
@keyframes zf-flash-up { from { background-color: var(--zf-up-tint); } to { background-color: transparent; } }
@keyframes zf-flash-down { from { background-color: var(--zf-down-tint); } to { background-color: transparent; } }
.zf-flash-up { animation: zf-flash-up 900ms var(--zf-ease) both; border-radius: 6px; }
.zf-flash-down { animation: zf-flash-down 900ms var(--zf-ease) both; border-radius: 6px; }

.zf-tag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--zf-r-pill);
  border: 1px solid var(--zf-line); background: var(--zf-surface); font-size: 12.5px; color: var(--zf-text-2); font-weight: 500;
  transition: border-color var(--zf-dur-hover), color var(--zf-dur-hover), background-color var(--zf-dur-hover);
}
a.zf-tag:hover, button.zf-tag:hover { border-color: var(--zf-green-300); color: var(--zf-green-700); background: var(--zf-green-50); }
.zf-tag--mono { font-family: var(--zf-mono); font-size: 12px; }

.zf-kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px;
  border: 1px solid var(--zf-line-2); border-bottom-width: 2px; background: var(--zf-surface);
  font: 500 11.5px/1 var(--zf-sans); color: var(--zf-text-3);
}

/* =========================== 品牌母题：三节点信号 =========================== */
/* 取自 Logo Z 下横笔延伸的三个逐渐缩小的数据节点。用于：实时指示、加载、推送节拍 */
.zf-nodes { display: inline-flex; align-items: center; gap: 4px; height: 10px; color: var(--zf-green-600); }
.zf-nodes i { display: block; border-radius: 50%; background: currentColor; }
.zf-nodes i:nth-child(1) { width: 8px; height: 8px; }
.zf-nodes i:nth-child(2) { width: 6px; height: 6px; }
.zf-nodes i:nth-child(3) { width: 4px; height: 4px; }
/* 加载：节点依次点亮，像数据向右流出 */
@keyframes zf-node-flow { 0%, 100% { opacity: .25; transform: scale(.8); } 35% { opacity: 1; transform: scale(1.12); } }
.zf-nodes--flow i { animation: zf-node-flow 1100ms var(--zf-ease) infinite; }
.zf-nodes--flow i:nth-child(2) { animation-delay: 140ms; }
.zf-nodes--flow i:nth-child(3) { animation-delay: 280ms; }

/* 实时指示点：首节点持续脉冲 */
.zf-live { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--zf-green-500); }
.zf-live::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit;
  animation: zf-live-ping 1800ms var(--zf-ease-out) infinite;
}
@keyframes zf-live-ping { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(3); opacity: 0; } }

/* =========================== 表单 =========================== */
.zf-field { display: grid; gap: 8px; }
.zf-label { font-size: 13.5px; font-weight: 600; color: var(--zf-text); }
.zf-input {
  height: 46px; width: 100%; padding: 0 14px; border-radius: var(--zf-r-md);
  border: 1px solid var(--zf-line-2); background: var(--zf-surface); color: var(--zf-text); font-size: 15px;
  transition: border-color var(--zf-dur-hover), box-shadow var(--zf-dur-hover), background-color var(--zf-dur-hover);
}
textarea.zf-input { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.6; }
.zf-input::placeholder { color: var(--zf-ink-300); }
.zf-input:hover { border-color: var(--zf-ink-300); }
.zf-input:focus { outline: none; border-color: var(--zf-green-500); box-shadow: var(--zf-focus); }
.zf-input.is-error { border-color: var(--zf-danger); box-shadow: 0 0 0 4px rgba(229, 72, 77, .12); }
@keyframes zf-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
.zf-shake { animation: zf-shake 420ms var(--zf-ease); }
.zf-hint { font-size: 12.5px; color: var(--zf-text-3); }
.zf-hint.is-error { color: var(--zf-danger); }

/* 开关 */
.zf-switch { position: relative; width: 40px; height: 24px; border-radius: 99px; background: var(--zf-ink-200); transition: background-color var(--zf-dur-pop) var(--zf-ease); flex: none; }
.zf-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(16, 42, 67, .3); transition: transform var(--zf-dur-pop) var(--zf-ease-spring);
}
.zf-switch[aria-checked="true"] { background: var(--zf-green-600); }
.zf-switch[aria-checked="true"]::after { transform: translateX(16px); }

/* =========================== 分段控制 / 标签页（滑动指示器） =========================== */
.zf-seg {
  position: relative; display: inline-flex; padding: 4px; border-radius: var(--zf-r-pill);
  background: rgb(var(--zf-shade-rgb) / .06);
}
.zf-seg__ind {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--zf-r-pill);
  background: var(--zf-surface); box-shadow: var(--zf-sh-1), 0 2px 8px -2px rgba(16, 42, 67, .12);
  transition: transform var(--zf-dur-layer) var(--zf-ease-out), width var(--zf-dur-layer) var(--zf-ease-out);
}
.zf-seg--green .zf-seg__ind { background: var(--zf-green-600); }
.zf-seg button {
  position: relative; z-index: 1; height: 32px; padding: 0 16px; border-radius: var(--zf-r-pill);
  font-size: 13.5px; font-weight: 600; color: var(--zf-text-2); transition: color var(--zf-dur-pop);
}
.zf-seg button:hover { color: var(--zf-text); }
.zf-seg button[aria-selected="true"] { color: var(--zf-text); }
.zf-seg--green button[aria-selected="true"] { color: #fff; }
.zf-seg--sm button { height: 26px; padding: 0 11px; font-size: 12.5px; }

.zf-tabs { position: relative; display: flex; gap: 4px; border-bottom: 1px solid var(--zf-line); }
.zf-tabs button {
  height: 42px; padding: 0 14px; font-size: 14px; font-weight: 600; color: var(--zf-text-3);
  transition: color var(--zf-dur-hover);
}
.zf-tabs button:hover { color: var(--zf-text); }
.zf-tabs button[aria-selected="true"] { color: var(--zf-text); }
.zf-tabs__ind {
  position: absolute; bottom: -1px; left: 0; height: 2px; width: 0; border-radius: 2px; background: var(--zf-green-600);
  transition: transform var(--zf-dur-layer) var(--zf-ease-out), width var(--zf-dur-layer) var(--zf-ease-out);
}

/* =========================== 列表行 / 表格行悬停 =========================== */
.zf-row { position: relative; transition: background-color var(--zf-dur-hover) var(--zf-ease); }
.zf-row::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
  background: var(--zf-green-600); transform: scaleY(0); transition: transform var(--zf-dur-pop) var(--zf-ease-out);
}
.zf-row:hover { background: rgba(0, 144, 74, .045); }
.zf-row:hover::before { transform: scaleY(1); }

/* 页面里同一段内容的中英两份（如法律页面正文，2026-11-10）：按 <html lang>（theme-init.js 在 head 里设置）只显示一份 */
html[lang="en"] [data-lang="zh"], html:not([lang="en"]) [data-lang="en"] { display: none !important; }

/* =========================== 入场动效（滚动触发） =========================== */
[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--zf-dur-reveal) var(--zf-ease-out), transform var(--zf-dur-reveal) var(--zf-ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="scale"] { transform: scale(.96); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* 标题逐行升起 */
.zf-lines > span { display: block; overflow: hidden; padding-bottom: .06em; }
.zf-lines > span > span {
  display: block; transform: translateY(105%);
  transition: transform 900ms var(--zf-ease-out); transition-delay: calc(var(--i, 0) * 110ms + 80ms);
}
.zf-lines.is-in > span > span { transform: none; }

/* 绿色渐变文字，入场后扫一次光 */
.zf-grad-text {
  background: linear-gradient(100deg, var(--zf-green-600) 0%, #19B46A 40%, #7BE0AB 50%, #19B46A 60%, var(--zf-green-600) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.is-in .zf-grad-text { animation: zf-grad-sweep 1600ms 700ms var(--zf-ease-out) both; }
@keyframes zf-grad-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* =========================== 图表 =========================== */
.zf-chart-host { position: relative; }
.zf-chart { overflow: visible; cursor: crosshair; }
.zf-chart__cross { transition: opacity 120ms var(--zf-ease); pointer-events: none; }
.zf-chart__endping { transform-box: fill-box; transform-origin: center; animation: zf-live-ping 1800ms var(--zf-ease-out) infinite; }
.zf-chart__axis { font: 500 10.5px var(--zf-sans); fill: var(--zf-text-3); font-variant-numeric: tabular-nums; }
.zf-chart__pricetext { font: 600 11px var(--zf-sans); font-variant-numeric: tabular-nums; }
.zf-chart__tip {
  position: absolute; top: 0; left: 0; pointer-events: none; display: grid; gap: 1px; padding: 8px 11px; border-radius: 10px;
  background: var(--zf-ink-900); color: #DCE6EF; font-size: 12px; white-space: nowrap; box-shadow: 0 10px 24px -8px rgba(11,31,51,.45);
  opacity: 0; transition: opacity 120ms var(--zf-ease);
}
.zf-chart__tip b { color: #fff; font-size: 14px; font-variant-numeric: tabular-nums; }
.zf-chart__tip.is-on { opacity: 1; }
.zf-chart__tip--ohlc { top: 8px; left: 8px; display: flex; gap: 14px; align-items: center; background: rgb(var(--zf-surface-rgb) / .92); color: var(--zf-text-2); border: 1px solid var(--zf-line); box-shadow: var(--zf-sh-1); }
.zf-chart__tip--ohlc b { color: var(--zf-text); font-size: 12.5px; }
.zf-chart__tip--ohlc .lbl { color: var(--zf-text-3); }
.zf-chart__tip--ohlc .is-up-text, .zf-chart__tip--ohlc b.is-up-text { color: var(--zf-up); }
.zf-chart__tip--ohlc .is-down-text, .zf-chart__tip--ohlc b.is-down-text { color: var(--zf-down); }
.zf-candle line { stroke-width: 1.2; }
.zf-candle--up line { stroke: var(--zf-up); } .zf-candle--up rect { fill: var(--zf-up); }
.zf-candle--down line { stroke: var(--zf-down); } .zf-candle--down rect { fill: var(--zf-down); }
.zf-candle .zf-candle__vol { opacity: .22; }
.zf-candle { transform-box: fill-box; transform-origin: 50% 100%; animation: zf-candle-in 500ms var(--zf-ease-out) both; animation-delay: calc(var(--i) * 12ms); }
@keyframes zf-candle-in { from { opacity: 0; transform: scaleY(.4); } to { opacity: 1; transform: none; } }

/* 按钮内加载节点：默认隐藏 */
.zf-btn > .zf-nodes { display: none; }
.zf-btn.is-loading > .zf-nodes { display: inline-flex; position: absolute; inset: 0; margin: auto; width: max-content; color: #fff; }
.zf-btn--secondary.is-loading > .zf-nodes, .zf-btn--ghost.is-loading > .zf-nodes { color: var(--zf-green-600); }