/* =====================================================
   Jiguang JGX 节点系统 - V1.2 极简黑洞视觉
   黑底白字 · 蓝色点缀 · 大空间感 · 钱包数字风
   ===================================================== */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: #020617;
  color: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- 黑洞背景：暗蓝光晕 + 网格 层次 ---------- */
.bh-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 720px at 50% -6%, rgba(34,184,255,0.22), transparent 58%),
    radial-gradient(820px 600px at 84% 10%, rgba(37,99,235,0.12), transparent 55%),
    radial-gradient(900px 700px at 8% 88%, rgba(24,175,255,0.08), transparent 60%),
    linear-gradient(180deg, #030712 0%, #020617 45%, #010409 100%);
}
/* 细网格线层（极轻，不影响阅读） */
.bh-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(56,189,248,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(circle at 50% 32%, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 32%, #000 0%, transparent 72%);
}

/* ---------- 品牌字标 ---------- */
.brand-jgx { color: #22B8FF; }
.brand-glow { text-shadow: 0 0 30px rgba(34,184,255,0.45), 0 1px 0 rgba(255,255,255,0.06); }
.text-pure { color: #FFFFFF; text-shadow: 0 0 18px rgba(255,255,255,0.12); }
/* 首页主标题：精细字重、稍暗灰白、纯色无渐变无光晕 */
.hero-title { color: #C8D0CE; font-weight: 500; text-shadow: none; }
/* 首页极简 Logo 图：纯黑底，与页面背景无缝融合 */
.hero-logo { display: block; max-width: 100%; user-select: none; -webkit-user-drag: none; }

/* ---------- 艺术签名字体（Jiguang 装饰） ---------- */
.brand-signature {
  font-family: 'Great Vibes', 'Brush Script MT', cursive;
  background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(56,189,248,0.9));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  user-select: none;
}

/* ---------- 卡片 ---------- */
.card-bh {
  background: linear-gradient(160deg, rgba(7,17,31,0.92), rgba(5,8,22,0.92));
  border: 1px solid rgba(24,175,255,0.22);
  border-radius: 18px;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.card-bh:hover {
  border-color: rgba(24,175,255,0.45);
  box-shadow: 0 0 40px rgba(24,175,255,0.10);
}

/* 重点卡片（JGX-16000 / 推荐） */
.card-feature {
  background: linear-gradient(160deg, rgba(11,18,32,0.96), rgba(5,8,22,0.96));
  border: 1px solid rgba(24,175,255,0.55);
  border-radius: 18px;
  box-shadow: 0 0 50px rgba(24,175,255,0.14);
}

/* ---------- 数字风（钱包资产） ---------- */
.num {
  font-family: 'Inter', 'DIN', 'Roboto Condensed', system-ui, sans-serif;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: -0.01em;
}
.amount-xl { font-size: clamp(38px, 7vw, 64px); font-weight: 800; line-height: 1.02; }
.amount-lg { font-size: clamp(32px, 5vw, 48px); font-weight: 800; line-height: 1.05; }
.amount-md { font-size: clamp(28px, 4vw, 40px); font-weight: 700; }

/* ---------- 按钮 ---------- */
.btn-primary {
  background: linear-gradient(92deg, #22B8FF 0%, #18AFFF 50%, #2563EB 100%);
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  transition: all .2s;
  box-shadow: 0 0 18px rgba(34,184,255,0.30);
}
.btn-primary:hover { filter: brightness(1.1); box-shadow: 0 0 34px rgba(34,184,255,0.55); transform: translateY(-1px); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost {
  background: rgba(2,6,23,0.4);
  color: #FFFFFF;
  border: 1px solid rgba(34,184,255,0.5);
  border-radius: 12px;
  font-weight: 700;
  transition: all .2s;
}
.btn-ghost:hover { border-color: #22B8FF; background: rgba(34,184,255,0.10); box-shadow: 0 0 22px rgba(34,184,255,0.25); }

/* 连接钱包按钮（更亮更有科技感） */
.btn-wallet {
  background: linear-gradient(92deg, #22B8FF, #18AFFF);
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  transition: all .2s;
  box-shadow: 0 0 16px rgba(34,184,255,0.35);
}
.btn-wallet:hover { filter: brightness(1.12); box-shadow: 0 0 30px rgba(34,184,255,0.6); transform: translateY(-1px); }

/* ---------- 徽标 / 标签 ---------- */
.chip {
  background: rgba(24,175,255,0.08);
  border: 1px solid rgba(24,175,255,0.30);
  color: #38BDF8;
}
.chip-soft { background: rgba(148,163,184,0.10); border: 1px solid rgba(148,163,184,0.18); color: #94A3B8; }

/* ---------- 图标圆框 ---------- */
.icon-box {
  background: rgba(24,175,255,0.07);
  border: 1px solid rgba(24,175,255,0.25);
  color: #38BDF8;
}

/* ---------- 顶部导航 ---------- */
.nav-bar {
  background: rgba(2,6,23,0.82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(34,184,255,0.16);
}
/* 导航文字高亮：默认亮白，不灰不暗 */
.nav-link { color: #E5E7EB; font-weight: 600; transition: color .2s, text-shadow .2s; }
.nav-link:hover { color: #FFFFFF; }
.nav-link.active { color: #22B8FF; text-shadow: 0 0 14px rgba(34,184,255,0.5); }

/* J 形 LOGO */
.logo-j {
  background: #fff;
  color: #000;
  border-radius: 10px;
  box-shadow: 0 0 22px rgba(34,184,255,0.35);
  font-weight: 900;
}

/* ---------- 动效 ---------- */
.fade-in { animation: fadeIn .5s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.rise { animation: rise .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.rise-1 { animation-delay: .05s; }
.rise-2 { animation-delay: .12s; }
.rise-3 { animation-delay: .2s; }
.num-pop { animation: numPop .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes numPop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* 蓝色边框呼吸（重点卡片） */
.breathe { animation: breathe 4s ease-in-out infinite; }
@keyframes breathe {
  0%,100% { box-shadow: 0 0 30px rgba(24,175,255,0.10); }
  50% { box-shadow: 0 0 55px rgba(24,175,255,0.22); }
}

/* QR 容器居中 */
#qrcode img, #qrcode canvas { margin: 0 auto; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: rgba(24,175,255,0.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(24,175,255,0.4); }

/* 选择/输入聚焦 */
input:focus, select:focus { border-color: #18AFFF !important; box-shadow: 0 0 0 1px rgba(24,175,255,0.4); }
select option { background: #07111F; color: #fff; }

/* =====================================================
   Round 5 · 代码库 / 终端控制台风格（节点中心 UI 重构）
   黑色代码库 · JSON 配置文件 · 命令行按钮 · 数据曲线
   ===================================================== */
.mono { font-family: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', 'Consolas', monospace; }

/* ---------- 控制台顶部信息区（终端启动页） ---------- */
.console-header {
  background:
    linear-gradient(180deg, rgba(2,6,23,0.92), rgba(2,6,23,0.72));
  border: 1px solid rgba(34,184,255,0.28);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.console-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 200px at 12% 0%, rgba(34,184,255,0.10), transparent 60%);
  pointer-events: none;
}
/* 数据曲线/波形 背景层（轻量，透明度低） */
.wave-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; }
.console-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.console-dot.r { background: #EF4444; }
.console-dot.y { background: #FACC15; }
.console-dot.g { background: #00FF9D; box-shadow: 0 0 8px rgba(0,255,157,0.7); }

/* ---------- 代码窗口卡片（节点配置文件） ---------- */
.code-card {
  background: linear-gradient(170deg, rgba(5,10,22,0.96), rgba(2,6,18,0.97));
  border: 1px solid rgba(34,184,255,0.22);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.code-card:hover {
  border-color: rgba(34,184,255,0.55);
  box-shadow: 0 0 38px rgba(34,184,255,0.16);
  transform: translateY(-2px);
}
.code-card.recommended {
  border-color: rgba(34,184,255,0.6);
  box-shadow: 0 0 44px rgba(34,184,255,0.18);
}
/* 文件名标题栏（编辑器 tab） */
.code-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(2,6,23,0.75);
  border-bottom: 1px solid rgba(34,184,255,0.16);
}
.code-titlebar .dots { display: flex; gap: 6px; }
.code-titlebar .dots span { width: 9px; height: 9px; border-radius: 50%; }
.code-titlebar .dots .d1 { background: #EF4444; }
.code-titlebar .dots .d2 { background: #FACC15; }
.code-titlebar .dots .d3 { background: #00FF9D; }
.code-filename {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  color: #94A3B8;
  letter-spacing: 0.02em;
}
.code-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #00FF9D;
}

/* 代码主体（等宽字段对齐） */
.code-body {
  font-family: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', monospace;
  font-size: 13px;
  line-height: 1.9;
  padding: 16px 16px 6px;
}
.code-line { display: flex; gap: 8px; white-space: pre-wrap; word-break: break-word; }
.code-key { color: #38BDF8; flex-shrink: 0; }      /* 字段名 蓝 */
.code-val { color: #FFFFFF; }                       /* 字段值 白 */
.code-num { color: #00FF9D; font-weight: 700; }     /* 数字/权重 绿 */
.code-str { color: #FACC15; }                       /* 字符串值 黄(轻量) */
.code-punct { color: #475569; }                     /* 标点 暗灰 */
.code-comment { color: #475569; font-style: italic; }

/* 权限数组缩进 */
.code-arr-item { padding-left: 22px; color: #E5E7EB; }
.code-arr-item::before { content: "- "; color: #38BDF8; }

/* ---------- 命令行风格按钮 ---------- */
.btn-cmd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  border-radius: 10px;
  transition: all .2s;
}
.btn-cmd-primary {
  background: linear-gradient(92deg, #22B8FF, #18AFFF);
  color: #fff;
  box-shadow: 0 0 16px rgba(34,184,255,0.32);
}
.btn-cmd-primary:hover { filter: brightness(1.12); box-shadow: 0 0 30px rgba(34,184,255,0.6); transform: translateY(-1px); }
.btn-cmd-ghost {
  background: rgba(2,6,23,0.5);
  color: #FFFFFF;
  border: 1px solid rgba(34,184,255,0.5);
}
.btn-cmd-ghost:hover { border-color: #22B8FF; background: rgba(34,184,255,0.10); box-shadow: 0 0 20px rgba(34,184,255,0.3); }
.btn-cmd .prompt { color: #00FF9D; }                /* > 提示符 绿 */
.btn-cmd-ghost .prompt { color: #38BDF8; }

/* 在线状态绿点（呼吸） */
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #00FF9D;
  box-shadow: 0 0 8px rgba(0,255,157,0.8);
  animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* 终端打字光标 */
.caret { display: inline-block; width: 8px; background: #00FF9D; animation: blink 1.1s step-end infinite; }
@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

/* ---------- 节点机制弹窗（技术文档抽屉） ---------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .25s ease both;
}
.modal-panel {
  width: 100%; max-width: 560px;
  max-height: 84vh; overflow-y: auto;
  background: linear-gradient(170deg, rgba(5,10,22,0.98), rgba(2,6,18,0.99));
  border: 1px solid rgba(34,184,255,0.4);
  border-radius: 16px;
  box-shadow: 0 0 60px rgba(34,184,255,0.2);
  animation: rise .35s cubic-bezier(.22,1,.36,1) both;
}

/* ---------- 移动端：代码不溢出 ---------- */
@media (max-width: 640px) {
  .code-body { font-size: 12px; line-height: 1.85; padding: 14px 13px 4px; }
  .code-filename { font-size: 11px; }
  .console-header { border-radius: 12px; }
}

/* =====================================================
   Round 6 · 长代码流 · 波浪节点控制台
   黑底 · 绿色终端字 · 细等宽 · 垂直滚动 · 波浪节点段
   ===================================================== */
body.flow-mode { background: #000000; }

/* 整页代码流容器 */
.flow-wrap {
  font-family: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', monospace;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #00FF9D;
}

/* ---------- 顶部精简控制台 ---------- */
.flow-console {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.flow-led {
  width: 11px; height: 11px; border-radius: 50%;
  background: #00FF9D;
  box-shadow: 0 0 12px rgba(0,255,157,0.9), 0 0 24px rgba(0,255,157,0.4);
  animation: ledPulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes ledPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.82); } }

.flow-title {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #39FF88;
  text-shadow: 0 0 22px rgba(0,255,157,0.35);
}
/* 终端输入光标 _ */
.term-caret {
  display: inline-block;
  width: 0.55em;
  border-bottom: 2px solid #00FF9D;
  margin-left: 2px;
  animation: termBlink 1.1s step-end infinite;
}
@keyframes termBlink { 0%,55% { opacity: 1; } 56%,100% { opacity: 0; } }

/* 代码 token 配色（绿主 / 蓝键 / 紫括号 / 灰注释） */
.t-key    { color: #22B8FF; }                 /* 字段名 蓝 */
.t-val    { color: #00FF9D; }                 /* 字段值 绿 */
.t-num    { color: #39FF88; font-weight: 600; } /* 数字 亮绿 */
.t-brace  { color: #A855F7; }                 /* 花括号/方括号 紫 */
.t-punct  { color: #475569; }                 /* 冒号点缀 灰 */
.t-comment{ color: #3f7d5f; font-style: italic; } /* 注释 暗绿灰 */
.t-prompt { color: #00FF9D; }                 /* > 提示符 */
.t-tilde  { color: #1f8f5f; }                 /* ~ 波浪缩进符 暗绿 */
.t-exec   { color: #C084FC; }                 /* execute 值 紫亮 */

/* ---------- 节点波浪段（每档位独立占一段） ---------- */
.node-seg {
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  border-top: 1px dashed rgba(0,255,157,0.12);
  padding: 48px 0;
}
.node-seg:first-of-type { border-top: none; }

/* 段落波浪 SVG 背景层 */
.seg-wave {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}
.seg-index {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(80px, 16vw, 200px);
  font-weight: 700;
  line-height: 1;
  color: rgba(0,255,157,0.06);
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* 段落文件名头 */
.seg-file {
  color: #A855F7;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 18px;
}
.seg-file .t-brace { color: #C084FC; }

/* 代码波浪行 */
.wave-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: clamp(13px, 1.5vw, 16px);
  line-height: 2.2;
  white-space: pre-wrap;
  word-break: break-word;
  position: relative;
  z-index: 1;
  animation: lineIn .5s ease both;
}
@keyframes lineIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.wave-line .field {
  color: #22B8FF;
  min-width: 96px;
  flex-shrink: 0;
}
.wave-line .arrow { color: #1f8f5f; }
.wave-line .comment { color: #3f7d5f; font-style: italic; margin-left: 8px; }

/* ---------- 命令行激活按钮 ---------- */
.exec-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin-top: 26px;
  padding: 14px 22px;
  background: #000000;
  border: 1px solid rgba(34,184,255,0.55);
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  transition: all .22s;
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: 100%;
}
.exec-btn:hover {
  border-color: #00FF9D;
  box-shadow: 0 0 20px rgba(0,255,157,0.45), inset 0 0 16px rgba(0,255,157,0.08);
  transform: translateY(-1px);
}
.exec-btn .exec-cmd { color: #00FF9D; font-weight: 600; font-size: 15px; }
.exec-btn .exec-cmd .t-prompt { margin-right: 6px; }
.exec-btn .exec-zh { color: #3f7d5f; font-size: 12px; font-weight: 300; }
.exec-btn:hover .exec-zh { color: #22C55E; }

/* ---------- 机制入口（行内命令） ---------- */
.mech-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  color: #00FF9D;
  font-size: 14px;
  cursor: pointer;
  transition: text-shadow .2s, color .2s;
}
.mech-link:hover { color: #39FF88; text-shadow: 0 0 12px rgba(0,255,157,0.5); }
.mech-link .t-prompt { color: #A855F7; }

/* ---------- 移动端长代码流 ---------- */
@media (max-width: 640px) {
  .node-seg { min-height: 72vh; padding: 36px 0; }
  .flow-console { min-height: 70vh; }
  .wave-line { line-height: 2; font-size: 13px; }
  .wave-line .field { min-width: 84px; }
  .seg-index { font-size: 88px; opacity: 0.05; }
  .exec-btn { width: 100%; }
}

/* =====================================================
   Round 7 · 纯黑代码流 · 邮件回复线条 · 行号递增
   纯黑 · 暗绿细字 · 白色金额 · 白色引用线 · 闪烁竖线光标
   ===================================================== */
:root {
  --cf-bg: #000000;
  --cf-green: #58D68D;
  --cf-green-soft: #43B970;
  --cf-amount: #FFFFFF;
  --cf-line: rgba(255,255,255,0.72);
  --cf-field: #22B8FF;
  --cf-bracket: #A855F7;
  --cf-comment: rgba(88,214,141,0.42);     /* 中文注释：比英文主代码更淡 */
  /* VS Code 缩进引导线风格：细 0.5px，多层逐级变淡，紧凑间距 */
  --cf-rail-1: rgba(255,255,255,0.55);     /* 第一层引导线（最亮，贯穿整页） */
  --cf-rail-2: rgba(255,255,255,0.22);     /* 第二层 */
  --cf-rail-3: rgba(255,255,255,0.15);     /* 第三层 */
  --cf-rail-4: rgba(255,255,255,0.10);     /* 第四层 */
  --cf-rail-5: rgba(255,255,255,0.07);     /* 第五层 */
  --cf-indent: 1.25em;                     /* 每层缩进 = 引导线间距（更紧凑） */
  --cf-row-lh: 1.55;                       /* 行高更紧凑，像真实编辑器 */
  --cf-gutter: rgba(255,255,255,0.05);     /* 行号装订线分隔 */
}

/* 纯黑模式：覆盖一切背景层 */
body.codeflow-mode { background: #000000 !important; }
body.codeflow-mode .bh-bg,
body.codeflow-mode .bh-grid { display: none !important; }

.cf-wrap {
  font-family: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', 'Consolas', monospace;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: var(--cf-row-lh);
  color: var(--cf-green);
  background: #000000;
  max-width: 760px;        /* 收窄，让代码贴左不占满整屏 */
  margin: 0;               /* 靠左，不再水平居中 */
  margin-left: 18px;       /* 紧挨屏幕左边，像真实代码编辑器 */
  padding: 0;
  position: relative;
}
/* 黑客感：极淡扫描线纹理覆盖全页（不干扰阅读） */
.cf-wrap::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(88,214,141,0.018) 0px,
    rgba(88,214,141,0.018) 1px,
    transparent 1px,
    transparent 3px
  );
}
.cf-wrap > * { position: relative; z-index: 1; }

/* ---------- 顶部控制台：内容靠左上 ---------- */
.cf-console {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 8vh;        /* 顶部留呼吸，内容贴左 */
}
.cf-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #58D68D;
  display: inline-block;
  animation: cfPulseDot 1.8s infinite;
  flex-shrink: 0;
}
@keyframes cfPulseDot {
  0%,100% { opacity: .45; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.15); }
}
.cf-title {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #6FE0A0;
  font-size: clamp(20px, 3.4vw, 34px);
}

/* ---------- 代码行（行号 + 多层白色引用线 + 内容） ----------
   关键：行与行垂直方向首尾相接（line-height === min-height），
   .cf-bar 用 align-self:stretch 拉满整行高度，
   于是上下行的竖线在视觉上连续贯穿整页，绝不断层。 */
.cf-line {
  display: flex;
  align-items: stretch;        /* stretch 让 rail 撑满整行高，竖线连续 */
  font-size: clamp(12px, 1.35vw, 14px);
  line-height: var(--cf-row-lh);
  min-height: calc(var(--cf-row-lh) * 1em);
}
/* 行号装订线 gutter：右侧细分隔，像真实编辑器 */
.cf-ln {
  flex-shrink: 0;
  width: 3em;
  text-align: right;
  padding-right: 12px;
  margin-right: 0;
  border-right: 1px solid var(--cf-gutter);
  color: rgba(255,255,255,0.92);  /* 行号白色（最左边数字） */
  user-select: none;
  font-variant-numeric: tabular-nums;
  line-height: var(--cf-row-lh);
  font-size: 0.86em;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* 引导线轨道：容纳多条层级竖线，整体撑满行高 */
.cf-rail {
  flex-shrink: 0;
  display: flex;
  align-self: stretch;
  margin-left: 10px;
}
/* 每条引导线：细 0.5px，宽度固定 = 一层缩进，竖直方向因 stretch 而连续 */
.cf-bar {
  flex-shrink: 0;
  width: var(--cf-indent);
  align-self: stretch;
  border-left: 0.5px solid var(--cf-rail-1);
}
.cf-bar-0 { border-left-color: var(--cf-rail-1); }  /* 主线最亮，贯穿整页 */
.cf-bar-1 { border-left-color: var(--cf-rail-2); }
.cf-bar-2 { border-left-color: var(--cf-rail-3); }
.cf-bar-3 { border-left-color: var(--cf-rail-4); }
.cf-bar-4 { border-left-color: var(--cf-rail-5); }
.cf-content {
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
  min-width: 0;
  padding-left: 12px;            /* 内容与最近一条竖线的间距 */
  line-height: var(--cf-row-lh);
}

/* token 配色 */
.cf-field   { color: var(--cf-field); }                  /* 字段名 蓝 */
.cf-val     { color: var(--cf-green); }                  /* 值 暗绿 */
.cf-amount  { color: var(--cf-amount); font-weight: 400; } /* 金额 纯白 */
.cf-bracket { color: var(--cf-bracket); }                /* 括号 紫 */
.cf-punct   { color: rgba(255,255,255,0.35); }           /* 冒号 */
.cf-comment { color: var(--cf-comment); font-style: italic; } /* 中文注释：更淡 + 斜体 */
.cf-prompt  { color: #58D68D; }                          /* > 提示符 */
.cf-file    { color: var(--cf-bracket); font-weight: 400; } /* { node.config } */
/* JSON 代码库风格 token */
.cf-key { color: #22B8FF; }                              /* "键名" 蓝 */
.cf-str { color: #58D68D; }                              /* "字符串值" 暗绿 */
.cf-num { color: #FFFFFF; font-weight: 400; }            /* 数字 / 布尔 纯白 */

/* ---------- 节点段落：靠左上自然往下排，段间留白用大量带行号空行撑开（滚动 1-2 屏） ---------- */
.cf-seg {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
}

/* ---------- 闪烁竖线光标 ---------- */
.cf-cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: #58D68D;
  vertical-align: text-bottom;
  animation: cfBlink 1s steps(2, start) infinite;
}
@keyframes cfBlink { 0%,45% { opacity: 1; } 46%,100% { opacity: 0; } }
/* 标题后输入光标（同款，宽一点） */
.cf-caret { display:inline-block; width:0.55em; height:1em; background:#58D68D; vertical-align:text-bottom; margin-left:3px; animation: cfBlink 1.05s steps(2,start) infinite; }

/* ---------- 命令行激活按钮 ---------- */
.cf-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: 6px;
  padding: 12px 20px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 4px;
  font-family: inherit;
  font-weight: 300;
  transition: all .22s;
  width: max-content;
  max-width: 100%;
}
.cf-btn:hover { border-color: #58D68D; }
.cf-btn .cf-cmd { color: #58D68D; font-size: 15px; }
.cf-btn:hover .cf-cmd { color: #FFFFFF; }
.cf-btn .cf-cmd .cf-prompt { margin-right: 6px; }
.cf-btn .cf-zh { color: var(--cf-comment); font-size: 12px; font-style: italic; }
.cf-btn:hover .cf-zh { color: #FFFFFF; font-style: normal; }

/* ---------- 机制入口 ---------- */
.cf-mech {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #58D68D;
  cursor: pointer;
  font-size: 14px;
  transition: color .2s;
}
.cf-mech:hover { color: #FFFFFF; }
.cf-mech .cf-prompt { color: var(--cf-bracket); }

/* ============================================================
   门头（导航栏）统一为纯黑代码流风格 —— 仅在 codeflow-mode 生效
   纯黑底 · 暗绿等宽字 · 去蓝渐变/浅顶边/光晕 · 终端风按钮
   ============================================================ */
body.codeflow-mode .nav-bar {
  background: #000000 !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}
/* 品牌名：等宽暗绿，去光晕 */
body.codeflow-mode .nav-bar .logo-j {
  background: transparent !important;
  border: 1px solid rgba(88,214,141,0.55) !important;
  color: #58D68D !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}
body.codeflow-mode .nav-bar a > span:last-child,
body.codeflow-mode .nav-bar .brand-jgx {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 500 !important;
  color: #58D68D !important;
  text-shadow: none !important;
  letter-spacing: 0.02em;
}
body.codeflow-mode .nav-bar .brand-jgx { color: #6FE0A0 !important; }
/* 导航项：等宽暗绿，hover/active 变亮绿（不再蓝色光晕） */
body.codeflow-mode .nav-link {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 300 !important;
  color: rgba(88,214,141,0.62) !important;
  text-shadow: none !important;
  letter-spacing: 0.02em;
}
body.codeflow-mode .nav-link:hover { color: #58D68D !important; }
body.codeflow-mode .nav-link.active {
  color: #FFFFFF !important;
  text-shadow: none !important;
}
/* 当前页导航项前加终端提示符 */
body.codeflow-mode .nav-link.active::before {
  content: "> ";
  color: #58D68D;
}
/* 连接钱包按钮：终端命令行风（透明底/绿字/白框，hover 转绿） */
body.codeflow-mode .btn-wallet,
body.codeflow-mode .nav-bar .chip {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  color: #58D68D !important;
  box-shadow: none !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 300 !important;
  border-radius: 4px !important;
  transition: border-color .2s, color .2s !important;
}
body.codeflow-mode .btn-wallet:hover,
body.codeflow-mode .nav-bar .chip:hover {
  border-color: #58D68D !important;
  color: #FFFFFF !important;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
}
body.codeflow-mode .btn-wallet::before { content: "> "; color: #58D68D; }
body.codeflow-mode .btn-wallet:hover::before { color: #FFFFFF; }
/* 底部移动端导航栏同步纯黑 */
body.codeflow-mode nav.nav-bar { background: #000000 !important; border-top: 1px solid rgba(255,255,255,0.10) !important; }

/* ============================================================
   全站统一：codeflow-mode 下所有页面通用组件 → 纯黑代码流风
   覆盖首页 / 登录 / 我的节点 / 订单记录 / 权益记录
   ============================================================ */
body.codeflow-mode { color: #58D68D; }
body.codeflow-mode #app, body.codeflow-mode main { background: #000000 !important; }

/* 卡片 → 终端面板：透明深底 + 细白边 + 无光晕 */
body.codeflow-mode .card-bh,
body.codeflow-mode .card-feature {
  background: rgba(255,255,255,0.018) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
  border-radius: 6px !important;
}
body.codeflow-mode .card-bh:hover,
body.codeflow-mode .card-feature:hover {
  border-color: rgba(88,214,141,0.45) !important;
  background: rgba(88,214,141,0.04) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 图标盒 → 绿色描边方块 */
body.codeflow-mode .icon-box {
  background: transparent !important;
  border: 1px solid rgba(88,214,141,0.45) !important;
  color: #58D68D !important;
  box-shadow: none !important;
  border-radius: 6px !important;
}

/* 主按钮 → 终端命令风（透明 + 白边 + 绿字 + > 前缀） */
body.codeflow-mode .btn-primary {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  color: #58D68D !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}
body.codeflow-mode .btn-primary::before { content: "> "; color: #58D68D; }
body.codeflow-mode .btn-primary:hover {
  background: rgba(88,214,141,0.08) !important;
  border-color: #58D68D !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}
body.codeflow-mode .btn-primary:hover::before { color: #FFFFFF; }

/* 次按钮 → 暗色终端风 */
body.codeflow-mode .btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: rgba(88,214,141,0.85) !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  font-family: 'JetBrains Mono', monospace !important;
}
body.codeflow-mode .btn-ghost:hover {
  border-color: rgba(88,214,141,0.5) !important;
  background: rgba(88,214,141,0.05) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

/* 输入框 → 终端输入行 */
body.codeflow-mode input,
body.codeflow-mode textarea,
body.codeflow-mode .bg-card2 {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #58D68D !important;
  font-family: 'JetBrains Mono', monospace !important;
  border-radius: 4px !important;
}
body.codeflow-mode input:focus,
body.codeflow-mode textarea:focus {
  border-color: rgba(88,214,141,0.55) !important;
  outline: none !important;
  box-shadow: none !important;
}
body.codeflow-mode input::placeholder,
body.codeflow-mode textarea::placeholder { color: rgba(88,214,141,0.35) !important; }

/* 文本色统一为代码绿系 */
body.codeflow-mode .text-txt,
body.codeflow-mode .text-pure { color: #FFFFFF !important; text-shadow: none !important; }
body.codeflow-mode .text-sub { color: rgba(88,214,141,0.55) !important; }
body.codeflow-mode .text-brand,
body.codeflow-mode .text-brand2 { color: #58D68D !important; }
body.codeflow-mode .brand-jgx { color: #6FE0A0 !important; }
body.codeflow-mode .brand-glow { text-shadow: 0 0 24px rgba(88,214,141,0.35) !important; }

/* 数字/金额 → 白 */
body.codeflow-mode .num,
body.codeflow-mode .amount-md { color: #FFFFFF !important; }

/* 标题统一 */
body.codeflow-mode h1,
body.codeflow-mode h2,
body.codeflow-mode h3 { color: #FFFFFF !important; }

/* 首页主标题：精细、稍暗、纯色无渐变无光晕（优先级高于上面的 h1 白色） */
body.codeflow-mode .hero-title { color: #C8D0CE !important; font-weight: 500 !important; text-shadow: none !important; }

/* 标签 chip-soft / chip 等小标签 */
body.codeflow-mode .chip-soft {
  background: rgba(88,214,141,0.06) !important;
  border: 1px solid rgba(88,214,141,0.3) !important;
  color: #58D68D !important;
}

/* ---------- 移动端：保留长代码流 / 行号 / 多层白线 / 白金额 / 纯黑 / 靠左 / 无横向滚动 ---------- */
@media (max-width: 640px) {
  .cf-wrap { --cf-indent: 0.95em; margin-left: 8px; max-width: calc(100vw - 12px); padding: 0; }
  .cf-seg { padding: 4vh 0; }
  .cf-console { padding-top: 6vh; }
  .cf-ln { width: 2.1em; padding-right: 8px; }
  .cf-content { padding-left: 9px; }
  .cf-line { font-size: 12px; }
  .cf-btn { width: 100%; }
}