@charset "UTF-8";
/* theme-light-r51.css — Retu 官网浅色主题层 · 第三轮(2026-10-04)。r45 原文并入(§0–§10) + R51 新层(§A–§I)。回退 = 把 <head> 里本行换回 r45 那行。 */
/* ══════════════════════════════════════════════════════════════════
   theme-light-r45.css — Retu 官网浅色主题层(2026-09-30)

   规矩
   ─────
   · 本文件**每一条规则都以 [data-theme="light"] 开头**。深色主题下一条都不命中 ——
     这是「深色零变化」的机制保证,不是自觉。新增规则必须守这一条。
   · 色值只取 brand/tokens-light.css 的槽位(logo 三档 + 墨推出)。
     本文件里出现的字面色值只有两类:透明度叠在 token 原值上的 rgba(注明原值),和 #FFF。
   · 挂在每页 <head> 的最后一行,回退 = 删那一行。
   · 版式、字号、间距一律不改;只换颜色、底、线、投影,和关掉背景动画。
   ══════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  /* 浅色专用槽位(tokens-light.css 只许定义深色也有的名字,多出来的放这里) */
  --r45-teal: #0CA6A6;                       /* logo 青档原值 · 只做纯装饰图形,对白 2.99,绝不当字色 */
  --r45-teal-soft: rgba(12, 166, 166, .14);  /* 青档原值 14% */
  --r45-blue-soft: rgba(12, 66, 166, .08);   /* 深蓝档原值 8% */
  --r45-card-line: var(--c-border);
  --r45-card-shadow: 0 1px 2px rgba(1, 7, 17, .04), 0 2px 8px -2px rgba(1, 7, 17, .06);  /* 墨原值,极浅 */
  /* R53:底图从「只在首屏」变成「每一屏都在」,同一档强度铺到整页会比原来累;「中」档在原值上再收 ≈10%(画布 .46→.42,光斑 ×.88)。
     首屏图自身(--r52-hero-art-*)不动。 */
  --r52-cv-opacity: .30;
  --r52-cv-mobile-opacity: .26;
  --r52-field-opacity: .30;
  --r52-hero-art-opacity: .62;
  --r52-hero-art-saturation: .85;
  --r52-aura-a1: .048;
  --r52-aura-a2: .030;
  --r52-aura-a3: .060;
  /* R53:各节底色改成半透明,让固定在 <body> 背后的底图透出来。数值 = 底色不透明度(1 = 完全盖住底图) */
  --r53-white-a: .50;
  --r53-band-a: .46;
  --r53-foot-a: .56;
}

[data-theme="light"][data-r52-bg="soft"] {
  --r52-cv-opacity: .32;
  --r52-cv-mobile-opacity: .26;
  --r52-field-opacity: .22;
  --r52-hero-art-opacity: .34;
  --r52-hero-art-saturation: .36;
  --r52-aura-a1: .070;
  --r52-aura-a2: .040;
  --r52-aura-a3: .090;
}

[data-theme="light"][data-r52-bg="current"] {
  --r52-cv-opacity: .90;
  --r52-cv-mobile-opacity: .90;
  --r52-field-opacity: .50;
  --r52-hero-art-opacity: 1;
  --r52-hero-art-saturation: 1;
  --r52-aura-a1: .340;
  --r52-aura-a2: .200;
  --r52-aura-a3: .620;
}

/* ── 0 · 页内写死 data-theme="dark" 的区块(about #boundary)在浅色主题下跟着变浅 ──
   custom property 的 inherit 取父级的值:不复制任何色值,只让它不再截住深色那一套。 */
[data-theme="light"] [data-theme="dark"] {
  --c-canvas: inherit; --c-surface: inherit; --c-surface-subtle: inherit; --c-surface-sunken: inherit;
  --c-border: inherit; --c-border-strong: inherit; --c-divider: inherit; --c-grid: inherit;
  --c-text: inherit; --c-text-2: inherit; --c-text-3: inherit; --c-text-disabled: inherit;
  --c-primary-50: inherit; --c-primary-100: inherit; --c-primary-500: inherit; --c-primary-600: inherit;
  --c-primary-700: inherit; --c-primary-800: inherit;
  --c-accent-50: inherit; --c-accent-500: inherit; --c-accent-700: inherit;
  --c-agent: inherit; --c-human: inherit;
  --c-success-700: inherit; --c-success-600: inherit; --c-success-50: inherit;
  --c-warning-700: inherit; --c-warning-600: inherit; --c-warning-50: inherit;
  --c-danger-700: inherit; --c-danger-600: inherit; --c-danger-50: inherit;
  --c-on-primary: inherit; --c-on-accent: inherit; --c-on-success: inherit; --c-on-warning: inherit; --c-on-danger: inherit;
  --sem-up: inherit; --sem-down: inherit; --sem-error: inherit;
  --sh-0: inherit; --sh-1: inherit; --sh-2: inherit; --sh-3: inherit;
  --glow-primary: none; --glow-accent: none;
  --hero-halo-alpha: inherit; --hero-grid-opacity: inherit;
  color-scheme: light;
}

/* ── 1 · 美术还没交付的浅色图:退回同位深色图,不露破图标(main.js E 段打的类) ── */
[data-theme="light"] img.on-light.r45-missing { display: none !important; }
/* 深色那张可能已被 dual-live-r27.js 就地换成内联 <svg>,所以不限定标签 */
[data-theme="light"] .on-dark.r45-fallback { display: block !important; }
/* 手机上首屏背景整张压在文字下:降到 .2(美术路 .25 实测最差 4.36 仍差线;.2 的结果见交付说明) */
@media (max-width: 640px) {
  [data-theme="light"] .hero__img.on-light { opacity: .2; }
}

/* ══ 2 · 卡面三层:浅灰页底 / 白卡 / 浅灰发丝边 ══════════════════════
   深色下这些是「玻璃 + 大落影 + 环境光斑」。浅底上玻璃没东西可糊,
   #000 大落影成了脏边,光斑成了一块块发灰的云 —— 浅色一律换成实心白卡。 */
[data-theme="light"] .fig-plate,
[data-theme="light"] .hero .hstage__panel,
[data-theme="light"] .hstage__panel,
[data-theme="light"] .page-services #payments .pay42__fig,
[data-theme="light"] .page-services #payments .pflow,
[data-theme="light"] .page-services #insight .ins42,
[data-theme="light"] .page-services #more .asm42,
[data-theme="light"] .page-services #payments .fpath,
[data-theme="light"] .page-services #insight .parse,
[data-theme="light"] .page-services #more .asm,
[data-theme="light"] .edge__core,
[data-theme="light"] .edge__card {
  background: var(--c-surface);
  border-color: var(--r45-card-line);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: var(--r45-card-shadow);
}
@media (hover: hover) {
  [data-theme="light"] .svc__row:hover .fig-plate {
    box-shadow: 0 1px 2px rgba(1, 7, 17, .05), 0 10px 24px -10px rgba(1, 7, 17, .14);  /* 墨原值 */
  }
}
@media (min-width: 1024px) {
  [data-theme="light"] .hstage__panel--quotes { box-shadow: var(--r45-card-shadow); }
}
[data-theme="light"] .hero .hstage__bar {
  background: var(--c-surface-subtle);
  border-block-end-color: var(--c-border);
}
[data-theme="light"] .hero .hstage__row { border-block-start-color: var(--c-border); }

/* 环境光斑:浅色下撤掉(设计体系 v1 浅色版「无大型背景氛围」) */
[data-theme="light"] #highlights, [data-theme="light"] #edge,
[data-theme="light"] #why, [data-theme="light"] #trust,
[data-theme="light"] .page-about #what, [data-theme="light"] .page-about #governance,
[data-theme="light"] .page-careers #work, [data-theme="light"] .page-careers #structure,
[data-theme="light"] .page-how #split, [data-theme="light"] .page-how #path,
[data-theme="light"] .page-how #results, [data-theme="light"] .page-how #running,
[data-theme="light"] .page-markets #read, [data-theme="light"] .page-markets #trust,
[data-theme="light"] .page-markets #start,
[data-theme="light"] .page-insights #howto,
[data-theme="light"] .page-help #hero .hero__inner {
  background-image: none;
}
[data-theme="light"] .dual__stage::after { content: none; }
/* 首屏压暗用的黑色晕影:浅底上是一片发灰的脏角 */
[data-theme="light"] .hero .hlx-amb { background: none; }

/* ══ 3 · 为深底画的白色发丝线 → 浅底上改墨色同强度 ════════════════
   原值 rgba(255,255,255,a) 只在深底上看得见;这里一一换成墨 #010711 的同档透明度。
   不是整页反色:只有「线」换,面仍是白卡。 */
[data-theme="light"] .page-services #payments .pflow__node,
[data-theme="light"] .page-services #payments .pnotes__item,
[data-theme="light"] .page-services #payments .pflow__watchitems > span,
[data-theme="light"] .page-services #payments .pay42__fig,
[data-theme="light"] .page-services #insight .ins42,
[data-theme="light"] .page-services #more .asm42,
[data-theme="light"] .asm42__asset,
[data-theme="light"] .asm42__slot,
[data-theme="light"] .ins42__doc,
[data-theme="light"] .ins42__cell,
[data-theme="light"] .edge__core,
[data-theme="light"] .edge__card { border-color: var(--c-border); }
[data-theme="light"] .page-services #payments .pflow__chip { border-color: var(--c-border); }
[data-theme="light"] .page-services #payments .pflow__node--cutsrc,
[data-theme="light"] .page-services #payments .pflow__lane--cut .pflow__node,
[data-theme="light"] .page-services #payments .pflow__x,
[data-theme="light"] .page-services #payments .pflow__state,
[data-theme="light"] .asm42__asset--new { border-color: color-mix(in srgb, var(--c-border-strong) 55%, var(--c-border)); }
[data-theme="light"] .edge__body,
[data-theme="light"] .page-services #payments .pay42__fig figcaption,
[data-theme="light"] .pay42__item,
[data-theme="light"] .asm42__fn { border-color: var(--c-border); }

/* 服务页 · 支付路径图(svc-r42 §pf42) */
[data-theme="light"] .pf42-w      { stroke: rgba(1, 7, 17, .20); }
[data-theme="light"] .pf42-w--blk { stroke: rgba(1, 7, 17, .16); }
[data-theme="light"] .pf42-sk     { stroke: rgba(1, 7, 17, .22); }
[data-theme="light"] .pf42-off rect { stroke: rgba(1, 7, 17, .14); }
[data-theme="light"] .pf42-node rect,
[data-theme="light"] .pf42-acc > rect { fill: var(--c-surface); stroke: rgba(1, 7, 17, .18); }
[data-theme="light"] .pf42-ringbg { fill: var(--c-surface-subtle); }
[data-theme="light"] .pf42-sat circle { stroke: var(--c-surface); }
[data-theme="light"] .pf42-g--hi { stroke: var(--c-primary-600); }

/* 服务页 · 资讯拆解图(svc-r42 §ins42):灰块改白底浅灰格 */
[data-theme="light"] .ins42__doc,
[data-theme="light"] .ins42__cell { background: var(--c-canvas); }
[data-theme="light"] .ins42-s      { fill: rgba(1, 7, 17, .10); }
[data-theme="light"] .ins42-s--dim { fill: rgba(1, 7, 17, .06); }
[data-theme="light"] .ins42-h      { fill: rgba(1, 7, 17, .26); }
[data-theme="light"] .ins42-panel  { fill: var(--c-surface); stroke: rgba(1, 7, 17, .10); }
[data-theme="light"] .ins42-base   { stroke: rgba(1, 7, 17, .14); }
[data-theme="light"] .ins42-cd path { stroke: rgba(1, 7, 17, .30); }
[data-theme="light"] .ins42-cd rect { fill: rgba(1, 7, 17, .18); }
[data-theme="light"] .ins42-cd--b rect { stroke: rgba(1, 7, 17, .34); }
[data-theme="light"] .ins42-cd--ev path { stroke: var(--c-accent-500); }
[data-theme="light"] .ins42-cd--ev rect { fill: var(--c-accent-500); }
[data-theme="light"] .ins42-hl { stroke: rgba(1, 7, 17, .16); }
[data-theme="light"] .ins42-hc { fill: var(--c-surface); stroke: rgba(1, 7, 17, .14); }
[data-theme="light"] .ins42-hd { fill: var(--c-primary-600); }
[data-theme="light"] .ins42-pill { fill: var(--c-surface); stroke: rgba(1, 7, 17, .16); }
[data-theme="light"] .ins42-ln { stroke: rgba(1, 7, 17, .20); }
[data-theme="light"] .ins42-n  { fill: var(--c-surface); stroke: rgba(1, 7, 17, .36); }

/* 服务页 · 多资产架构图(svc-r43 §asm42):内核那块是「灰底白字」,浅色下改浅蓝底深蓝字 */
[data-theme="light"] .asm42__asset { background: var(--c-surface); box-shadow: 0 1px 2px rgba(1, 7, 17, .05); }
[data-theme="light"] .asm42__slot { background: var(--c-surface); }
[data-theme="light"] .asm42__core {
  background: var(--c-primary-50);
  border-color: color-mix(in srgb, var(--c-primary-600) 30%, var(--c-border));
}
[data-theme="light"] .asm42__coretitle { color: var(--c-primary-600); }
[data-theme="light"] .asm42__wires span {
  background: linear-gradient(180deg, rgba(1, 7, 17, .10), color-mix(in srgb, var(--c-accent-500) 70%, transparent));
}
[data-theme="light"] .asm42__wires span.is-new {
  background: repeating-linear-gradient(180deg, rgba(1, 7, 17, .28) 0 3px, transparent 3px 7px);
}
[data-theme="light"] .asm42__wires span.is-new::after { border-color: rgba(1, 7, 17, .36); }
@media (prefers-reduced-motion: no-preference) {
  [data-theme="light"] .asm42__wires span:not(.is-new)::before {
    background: linear-gradient(180deg, transparent, var(--c-primary-600));
  }
}

/* 服务页 · 双端截图的落影(dual-r25):.52/.62 纯黑在浅底上是一团脏影 */
[data-theme="light"] .dual__shot { box-shadow: 0 0 0 1px var(--c-border), 0 1px 2px rgba(1, 7, 17, .06), 0 18px 40px -18px rgba(1, 7, 17, .22); }
[data-theme="light"] .dual__phone { filter: drop-shadow(0 12px 24px rgba(1, 7, 17, .18)); }

/* 交易学院 · 演示屏的边框(academy-r28) */
[data-theme="light"] .ac-screen__bezel { border-color: var(--c-border); }
[data-theme="light"] .ac-screen[data-playing="1"] .ac-screen__bezel { border-color: color-mix(in srgb, var(--c-border-strong) 55%, var(--c-border)); }
[data-theme="light"] .ac-screen__bar,
[data-theme="light"] .ac-screen__ctrl { border-color: var(--c-border); }
[data-theme="light"] .ac-screen__svg .an-card { stroke: rgba(1, 7, 17, .14); }

/* 法律页小节竖线:深色写死的 #2A3B45 在浅底上是一道近黑线 */
[data-theme="light"] [data-page="legal"] .section__head { border-left-color: color-mix(in srgb, var(--c-border-strong) 45%, var(--c-border)); }

/* 「即将上线」提示条的落影 */
[data-theme="light"] .soon-toast { box-shadow: 0 1px 2px rgba(1, 7, 17, .06), 0 12px 28px -10px rgba(1, 7, 17, .20); }

/* ══ 4 · 首页牌照盾(licshield-r19) ══════════════════════════════
   金属描边(logo 深蓝→中蓝档)保留;去掉底部那一碗蓝色内发光和 #000 落影,
   盾芯灰渐变改白底 + 浅灰描边。 */
[data-theme="light"] .lic[data-lic19] .licgrid__cell--held,
[data-theme="light"] .lic[data-lic19] .licgrid__cell--held:hover {
  background:
    linear-gradient(var(--c-surface), var(--c-surface)) padding-box,
    linear-gradient(152deg,
      var(--c-primary-700),
      color-mix(in srgb, #FFFFFF 78%, var(--c-primary-500)) 26%,
      var(--c-primary-500) 54%,
      var(--c-primary-100)) border-box;
  box-shadow: var(--r45-card-shadow);
}
[data-theme="light"] .lic[data-lic19] .licgrid__cell--held:hover,
[data-theme="light"] .lic[data-lic19] .licgrid__cell--pending:hover {
  box-shadow: 0 1px 2px rgba(1, 7, 17, .05), 0 14px 28px -12px rgba(1, 7, 17, .18);
}
[data-theme="light"] .lic[data-lic19] .licgrid__cell--pending {
  background: var(--c-surface);
  box-shadow: none;
}
[data-theme="light"] .lic[data-lic19] .licgrid__cell--held .licgrid__mark {
  background: var(--c-surface);
  box-shadow: inset 0 0 0 1px var(--c-border);
}
[data-theme="light"] .lic[data-lic19] .licgrid__cell--pending .licgrid__mark {
  background: var(--c-surface-subtle);
}

/* ══ 5 · 装饰性分隔符对比度补足 ══════════════════════════════════
   这两个只是标点,但放在 .5 透明度下对白 2.1–2.3,低于大字 3.0 / 正文 4.5。 */
[data-theme="light"] .mi-event__slash { opacity: .8; }
[data-theme="light"] .mi-press__sep { opacity: 1; }

/* ══ 6 · 容器外框:强描边 → 浅灰发丝边 ═══════════════════════════
   深色里卡面对页底只有 1.14,层级只能靠 3:1 的强描边撑;浅色里白卡对浅灰底
   本身就分得开,再套一圈 3:1 灰框就成了「线框稿」。
   只动「装内容的容器」;输入框、筛选片、按钮这类控件边框仍留 3:1(WCAG 1.4.11),
   法定风险警示条(.alert)也不动。 */
[data-theme="light"] .ac-card,
[data-theme="light"] .ac-tile,
[data-theme="light"] .ac-sample,
[data-theme="light"] .ia-toc,
[data-theme="light"] .ia-tablewrap,
[data-theme="light"] .mi-event,
[data-theme="light"] .mi-guide,
[data-theme="light"] .mi-press__group,
[data-theme="light"] .qtable-wrap,
[data-theme="light"] .qd__card,
[data-theme="light"] .qdchart,
[data-theme="light"] .qd__driver,
[data-theme="light"] .page-services #payments .fpath,
[data-theme="light"] .page-services #insight .parse,
[data-theme="light"] .page-services #more .asm {
  border-color: var(--c-border);
  box-shadow: var(--r45-card-shadow);
}
[data-theme="light"] .rail--on .deflist__item,
[data-theme="light"] .rail--on .flow__step,
[data-theme="light"] .mi-event__when,
[data-theme="light"] .mi-press__cat { border-color: var(--c-border); }
[data-theme="light"] .navmenu,
[data-theme="light"] .lang__menu {
  border-color: var(--c-border);
  box-shadow: 0 1px 2px rgba(1, 7, 17, .06), 0 12px 28px -10px rgba(1, 7, 17, .18);  /* 墨原值 */
}
/* 学院演示屏顶部那层「正文色 5%」斜光:深底上是玻璃反光,浅底上是一片发灰 */
[data-theme="light"] .ac-screen__stage::before { content: none; }
[data-theme="light"] .ac-screen__stage { background: var(--c-surface-subtle); }
/* 学院时间轴「还没到的步」:深色下是 .55 透明度的刻度色;浅底 #EEF0F4 上同样做法只剩 2.2。
 * 浅色改用不透明的刻度色(约 5.0)来区分三档:当前步墨色 > 已走过 text-2 > 没到 text-3。 */
[data-theme="light"] .ac-screen__svg .an-tick[opacity="0.55"] { opacity: 1; fill: var(--c-text-3); }
/* 首页实时报价「· 每 10 分钟」:.68 透明度在白卡上只有 2.95,浅色去掉透明度(5.84) */
[data-theme="light"] .qlv24__cad { opacity: 1; }
/* 学院演示屏「示例数值,非真实报价」:深色下用禁用色(3.19),浅底 #EEF0F4 上只剩 2.42。
 * 这句是声明不是装饰,浅色改用三级文字色(约 5.0),仍比刻度与读数轻。 */
[data-theme="light"] .ac-screen__svg .an-sample { fill: var(--c-text-3); }

/* ══ 9 · r45 验收返工(2026-09-30)══════════════════════════════════
   验收报告 #1/#2/#5/#6:首屏两段背景动画没关、行情面板三处小字差 4.5。只动浅色,不动版式字号。 */

/* 浅色无背景动画(任务书 + 设计体系 v1):光束与行情台扫描线直接撤掉。
   光束 26s 呼吸 / 扫描线 12s 一轮,都只在 ≥1024 存在(<1024 早已 display:none) */
[data-theme="light"] .hero .hlx-beam { display: none; }
[data-theme="light"] .hstage__plane::after { animation: none; display: none; }
/* r45 返修 #1 补:产品舞台里「令牌过风控闸」的循环(hs-run / qlv-gate)是首屏另一处在动的东西,
   不停的话相隔 4 秒两帧遮掉行情面板后 1440 仍差 7–11 千像素。静止态 = 站内已有的 prefers-reduced-motion 静态稿
   (令牌默认不可见,只留「风控闸」标签与竖线)。要恢复动画:删下面这一条。 */
[data-theme="light"] .hstage__tok,
[data-theme="light"] .hstage__gate { animation: none; }
/* 2026-10-05 返修:上一条的 animation:none 是简写,会把 duration 一并清成 0s;
   下面 ≥1024 那段只改 animation-name、不补时长,令牌就停在 0s 的死动画上 → 执行流车道整条是空的。
   现在那段改写成完整简写(名/时长/延迟/循环齐全)。闸的呼吸光(改 box-shadow,逐帧重绘)仍保持静止。 */

/* 行情面板分组标题(外汇/贵金属/加密货币):深色下是「三级字色 82% 透明」,浅底上只有 3.5–3.9。
   改不透明三级字色(白卡 5.84 / 分区带 5.12) */
[data-theme="light"] .qlv24__grp { color: var(--c-text-3); }

/* 「逐笔实时」徽标:青字压 10% 青染色底 + 分区带,实测 4.17。字色向墨再走 15%(对染色底约 5.3);染色底保留 */
[data-theme="light"] .qlv__link[data-state="live"] {
  color: color-mix(in srgb, var(--c-accent-700) 85%, var(--c-text));
}

/* ══ 10 · r45 返修(2026-10-01):开关的三处行为 —— 本节不带 [data-theme="light"] 前缀 ═══════
   只作用于 r45 新增的开关及其分组,和切换那一帧的临时类;深色页面上没有任何既有元素命中。 */

/* #7 关 JS 时开关不显示:theme-boot.js 在 <head> 里同步写 data-r45-js,没有它说明脚本没跑,按钮点了也没反应 */
html:not([data-r45-js]) .theme-toggle { display: none; }
html:not([data-r45-js]) .drawer__group--prefs:not(:has(.muted)) { display: none; }

/* #6 切换那一帧禁用过渡:main.js 点击时加类、强制刷样式后下一帧移除 */
.r45-no-trans,
.r45-no-trans *,
.r45-no-trans *::before,
.r45-no-trans *::after { transition: none !important; }

/* #5 手机抽屉:主题开关分组上移到导航之前(第一屏可见)。它成了抽屉里的第一块,
   不再需要顶部分隔线,改为在它与导航之间画线。 */
.drawer__group.drawer__group--prefs {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-divider);
}

/* ══════════════════════════════════════════════════════════════════════
   R51 · 柔和浅色(2026-10-04)—— 本文件 §A 起是第三轮新增,§0–§10 是 r45 原样并入
   规矩同上:每条规则都以 [data-theme="light"] 开头(§R 的开关行为除外,已在 r45 原文里)。

   病根(见 _light-r51/list):
   · 页底 #F4F5F8 与白卡亮度几乎一样,全靠 1px 灰线撑层次 → 线成了主角,整页像线框稿
   · 标题近纯黑(#010711)又是超粗字重 → 与浅蓝灰底的反差过大,读起来「硬」
   · 阴影是黑色的、描边是中性灰的 → 与品牌蓝不同色相,脏
   · 浅色下大多数页首屏没有任何背景动效(scene-r13 只在深色起画布)
   解法:全套色阶改蓝调(明度阶梯拉开)、墨改海军墨、阴影与描边改蓝调、
   首屏铺一层天空渐变 + 慢漂光斑(CSS)+ 一幅每页自己的克制画布(theme-light-r51.js)。
   ══════════════════════════════════════════════════════════════════════ */

/* ══ A · 色阶重定义(同槽位,只换值;深色一个槽位都不碰)══════════════════
   做法:tokens-light.css 挂 :root,本块挂 [data-theme="light"](同权重,后写者胜)。
   所有 var(--c-*) 引用自动跟着变,不逐条改选择器。 */
[data-theme="light"] {
  --c-canvas: #F3F6FB;           /* 页底:带一点品牌蓝的冷白,不再是灰 */
  --c-surface: #FFFFFF;
  --c-surface-subtle: #EBF0FA;   /* 分区带 */
  --c-surface-sunken: #E3EBF7;   /* 凹陷面 / 表头 */
  --c-border: #DAE3F1;           /* 装饰性细边:蓝调 */
  --c-border-strong: #6F83A4;    /* 控件边框(1.4.11 需 3:1) */
  --c-divider: #E2E9F4;
  --c-grid: #E9EFF8;
  --c-text: #0B1B3A;             /* 海军墨:不再是近纯黑 */
  --c-text-2: #34445F;
  --c-text-3: #55647F;
  --c-text-disabled: #8F9BB2;
  --c-primary-50: #EDF3FC;
  --c-primary-100: #DCE8F9;
  --c-primary-500: #1D63C4;
  --c-accent-50: #E4F4F5;
  --c-accent-500: #096C70;
  --c-accent-700: #096C70;
  --c-success-50: #E2F2EA;
  --c-warning-50: #F8EFDC;
  --c-danger-50: #F9E7E4;
  --c-human: #55647F;

  /* 浅色专用槽位:装饰用的中间明度档(品牌蓝缺的那几档),绝不当字色 */
  --r51-blue-200: #BCD2F3;
  --r51-blue-300: #8DB1E8;
  --r51-blue-400: #5A8CDB;
  --r51-blue-500: #2F6BC9;
  --r51-teal: #0CA6A6;
  --r51-ink: #0B1B3A;
  --r51-sh-1: 0 1px 2px rgba(16, 40, 96, .05), 0 4px 14px -6px rgba(16, 40, 96, .10);
  --r51-sh-2: 0 1px 2px rgba(16, 40, 96, .05), 0 12px 28px -12px rgba(16, 40, 96, .20);
  --r51-sh-3: 0 2px 4px rgba(16, 40, 96, .06), 0 22px 44px -18px rgba(16, 40, 96, .28);
  --r51-sky:
    radial-gradient(64% 110% at 92% -24%, rgba(90, 140, 219, .15), transparent 68%),
    radial-gradient(46% 90% at -6% 118%, rgba(12, 166, 166, .12), transparent 70%),
    linear-gradient(180deg, #E5EEFA 0%, #EDF3FB 58%, #F3F6FB 100%);
  --r51-band: linear-gradient(180deg, rgba(234, 240, 250, var(--r53-band-a)), rgba(240, 244, 251, var(--r53-band-a)));

  --r45-card-line: var(--c-border);
  --r45-card-shadow: var(--r51-sh-1);
  --sh-1: var(--r51-sh-1);
  --sh-2: var(--r51-sh-2);
  --sh-3: var(--r51-sh-3);
  /* r46 遗留别名:R50 舞台规则里引用,统一指向 r51 色阶 */
  --r46-mid: var(--r51-blue-400);
  --r46-teal: var(--r51-teal);
  --r46-line: var(--c-border);
  --r46-wash: var(--c-primary-50);
  --r46-wash-2: var(--c-primary-100);
  --r46-deep-600: var(--c-primary-600);
}
[data-theme="light"] ::selection { background: color-mix(in srgb, var(--r51-blue-400) 28%, transparent); color: var(--c-text); }
/* R53:页面底色交给 <html>(画布层),<body> 透明 —— 固定在 body 背后的底图(z-index:-1)才不会被 body 背景盖住。深色 scene-r13.js 的 swapBase 是同一招 */
[data-theme="light"] { background-color: var(--c-canvas); }
[data-theme="light"] body { background: transparent; }

/* ══ B · 顶栏与二级锚点条:半透明白 + 轻模糊,线更淡 ═════════════════════ */
[data-theme="light"] .site-header {
  background: color-mix(in srgb, var(--c-surface) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
          backdrop-filter: blur(14px) saturate(1.25);
  border-bottom-color: color-mix(in srgb, var(--c-border) 70%, transparent);
}
[data-theme="light"] .site-header[data-scrolled="1"] { box-shadow: 0 6px 20px -12px rgba(16, 40, 96, .22); }
[data-theme="light"] .anchornav {
  background: color-mix(in srgb, var(--c-surface) 82%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
          backdrop-filter: blur(12px) saturate(1.2);
  border-block-end-color: color-mix(in srgb, var(--c-border) 70%, transparent);
}
[data-theme="light"] .anchornav__link { transition: color .18s, background-color .18s; }
[data-theme="light"] .anchornav__link:hover { background: var(--c-primary-50); color: var(--c-text); }

/* ══ C · 首屏:天空渐变 + 底边化进页面 ════════════════════════════════════ */
/* R53:天空渐变搬去固定层(§I 的 <html>::before),首屏自己不再铺不透明底 */
[data-theme="light"] .hero { background: none; isolation: isolate; }
[data-theme="light"] .hero .hero__veil { background: none; }
[data-theme="light"] .hero .hero__bg {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 80%, transparent 100%);
}
[data-theme="light"] .hero h1 { color: var(--c-text); }
[data-theme="light"] .hero .sub { color: var(--c-text-2); }
/* 首页 eyebrow 小胶囊:白底蓝调描边,不再是一条灰框 */
[data-theme="light"] .page-index .eyebrow--hero {
  background: color-mix(in srgb, var(--c-surface) 82%, transparent);
  border-color: color-mix(in srgb, var(--r51-blue-300) 55%, var(--c-border));
  box-shadow: 0 1px 2px rgba(16, 40, 96, .04);
}
/* 首屏下一节不再有一条硬分隔线 */
[data-theme="light"] .hero + .section,
[data-theme="light"] .hero + .anchornav { border-block-start: 0; }

/* ══ D · 按钮:主按钮上一档渐变 + 蓝调光晕;次按钮白底蓝调边 ═════════════ */
[data-theme="light"] .btn--primary {
  background: linear-gradient(180deg, #1F59BD, var(--c-primary-600));
  border-color: var(--c-primary-600);
  box-shadow: 0 1px 2px rgba(12, 66, 166, .22), 0 8px 18px -8px rgba(12, 66, 166, .50);
  transition: background-color .18s, box-shadow .18s, transform .18s, border-color .18s;
}
[data-theme="light"] .btn--primary:hover {
  background: linear-gradient(180deg, #1B52AD, var(--c-primary-700));
  box-shadow: 0 1px 2px rgba(12, 66, 166, .26), 0 12px 24px -8px rgba(12, 66, 166, .55);
}
[data-theme="light"] .btn--primary:active { background: var(--c-primary-800); box-shadow: none; }
[data-theme="light"] .btn--secondary {
  background: color-mix(in srgb, var(--c-surface) 90%, transparent);
  border-color: color-mix(in srgb, var(--r51-blue-500) 42%, var(--c-border-strong));
}
[data-theme="light"] .btn--secondary:hover { background: var(--c-primary-50); border-color: var(--c-primary-600); }

/* ══ E · 节的节奏:带状节换成蓝调渐变带;白卡靠柔和投影离开页底 ═══════════ */
[data-theme="light"] .section--band,
[data-theme="light"] #boundary.section {
  background: var(--r51-band);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(255, 255, 255, .8);
}
[data-theme="light"] .card,
[data-theme="light"] .figure,
[data-theme="light"] .usp__item,
[data-theme="light"] .hflow__card,
[data-theme="light"] .core__item,
[data-theme="light"] .stance__row,
[data-theme="light"] .qd__block {
  border-color: var(--c-border);
  box-shadow: var(--r51-sh-1);
}
[data-theme="light"] .fig-plate,
[data-theme="light"] .edge__core,
[data-theme="light"] .edge__card { box-shadow: var(--r51-sh-1); }
@media (hover: hover) {
  [data-theme="light"] .card--link:hover,
  [data-theme="light"] a.card:hover,
  [data-theme="light"] .crest:hover {
    border-color: color-mix(in srgb, var(--r51-blue-300) 60%, var(--c-border));
    box-shadow: var(--r51-sh-2);
  }
  [data-theme="light"] .svc__row:hover .fig-plate { box-shadow: var(--r51-sh-2); }
}
[data-theme="light"] .dual__shot { box-shadow: 0 0 0 1px var(--c-border), 0 2px 4px rgba(16, 40, 96, .06), 0 22px 44px -20px rgba(16, 40, 96, .30); }
[data-theme="light"] .dual__phone { filter: drop-shadow(0 14px 26px rgba(16, 40, 96, .20)); }
[data-theme="light"] .navmenu,
[data-theme="light"] .lang__menu,
[data-theme="light"] .soon-toast { box-shadow: var(--r51-sh-3); }
[data-theme="light"] .lic[data-lic19] .licgrid__cell--held:hover,
[data-theme="light"] .lic[data-lic19] .licgrid__cell--pending:hover { box-shadow: var(--r51-sh-2); }

/* 页脚:不再是一块灰,蓝调渐变 + 顶部细发光线 */
[data-theme="light"] .footer {
  background: linear-gradient(180deg, rgba(238, 243, 251, var(--r53-foot-a)), rgba(231, 238, 249, var(--r53-foot-a)));
  border-block-start-color: color-mix(in srgb, var(--c-border) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* 表格:表头蓝调凹陷面,行线更淡 */
[data-theme="light"] .qtable-wrap,
[data-theme="light"] .ia-tablewrap { background: var(--c-surface); }
[data-theme="light"] .ia-table th,
[data-theme="light"] .qtable th { background: var(--c-surface-sunken); }

/* 首页五节:白 / 蓝调带 / 白 / 蓝调带 / 浅蓝,带换成渐变(原来是一块平色) */
[data-theme="light"] .section--m2,
[data-theme="light"] .section--m4 { --sec-bg: var(--r51-band); }
[data-theme="light"] .section--m5 { --sec-bg: linear-gradient(180deg, rgba(237, 243, 252, var(--r53-band-a)), rgba(228, 236, 250, var(--r53-band-a))); }
/* 首页一、三节原本是纯白(--c-surface):改成半透明白。文字落在「白 ⊕ 浅蓝底图」上,底只会比白略深一点点,对比由 r53-contrast 复核 */
[data-theme="light"] .section--m1,
[data-theme="light"] .section--m3 { --sec-bg: rgba(255, 255, 255, var(--r53-white-a)); }
/* 令牌:光晕改一圈实心细环,不再是一团糊 */
[data-theme="light"] .hstage__tok { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-agent) 16%, transparent); }
[data-theme="light"] .hstage__tok--human { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-human) 16%, transparent); }

/* ══ F · 服务页:节奏改为 白 / 蓝调 / 页底 / 蓝调(不再用整块深蓝)═══════════
   首屏 天空 | 锚点条 | 服务梯 页底 | 交易平台 蓝调 | 支付 页底 | 行情热点 蓝调 | 多资产 页底 | 页脚 */
[data-theme="light"] .page-services .section__bg { display: none; }
[data-theme="light"] .page-services #trading,
[data-theme="light"] .page-services #insight { background: var(--r51-band); }
[data-theme="light"] .page-services #payments,
[data-theme="light"] .page-services #more { background: none; }
/* 服务流程动画的上色:白卡上深色关键帧的白光点看不见,改蓝/青(只改色与粗细,不改时序) */
[data-theme="light"] .pf42-flow path { stroke: var(--r51-blue-400); stroke-width: 2.6; stroke-dasharray: 6 14; opacity: 1; }
[data-theme="light"] .pf42-sat { fill: var(--r51-teal); }
[data-theme="light"] .pf42-sat circle { stroke: var(--c-surface); }
[data-theme="light"] .ins42-live { fill: var(--r51-teal); }
@media (prefers-reduced-motion: no-preference) {
  [data-theme="light"] .asm42__wires span:not(.is-new)::before {
    inline-size: 4px; block-size: 14px;
    background: linear-gradient(180deg, transparent, var(--r51-blue-400));
  }
  [data-theme="light"] .asm42__wires--bus span::before { background: linear-gradient(180deg, transparent, var(--r51-teal)); }
}

/* ══ G · 首页收尾细修(取 r46 §7 中与色无关的几条,色全部换成蓝调)═══════════ */
[data-theme="light"][data-page]:not([data-page="legal"]) .hero__inner { grid-template-columns: minmax(0, 1fr); }
[data-theme="light"] .page-index #edge > .container > .btn-row { margin-block-start: var(--s-6, 32px); }
[data-theme="light"] .page-index .hflow__close {
  margin-block-start: var(--s-7, 48px);
  padding: var(--s-6, 32px);
  background: linear-gradient(100deg, var(--c-primary-50), var(--c-surface) 70%);
  border: 1px solid var(--c-border);
  border-inline-start: 4px solid var(--c-primary-600);
  border-radius: 12px;
  box-shadow: var(--r51-sh-1);
}
[data-theme="light"] .page-index .hflow__card { transition: transform .22s, box-shadow .22s; }
[data-theme="light"] .page-index .hflow__viz { background: linear-gradient(160deg, var(--c-primary-50), var(--c-primary-100)); border-radius: 10px; }
@media (hover: hover) {
  [data-theme="light"] .page-index .hflow__card:hover { transform: translateY(-3px); box-shadow: var(--r51-sh-2); }
}
[data-theme="light"] .page-index #start { padding-block: clamp(72px, 9vw, 120px); }
[data-theme="light"] .page-index .licgrid__auth,
[data-theme="light"] .page-index .licgrid__body { color: var(--c-text-2); }

/* ══ H · 首屏行情舞台 ═══════════════════════════════════════════════════════
   2026-10-05 委托人:「淺色系首頁的首屏擺放跟深色不一樣,調整一下」。
   ≥1280:摆放几何与深色同一套 —— 斜铺角度 / 位置 / 尺寸 / 右缘冲出被裁 / 左缘羽化 / 行情面板 60% 靠右,
   全部由 herostage-r19 §1 + herolive-r24 §6/§R 供给,这里不再覆盖(原 R50 的摆平 / 收窄 / 去 mask / 面板 100% 宽已撤)。
   1024–1279:保持 R50 的静态单列。深色在这个宽度也是斜面,但标题(940px 宽)会压到行情行上:
   深色是浅字压暗面,浅色是深墨压白面,同样的重叠会变成字压字,所以不跟。 */
[data-theme="light"] .hero .hstage__panel {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
@media (min-width: 1024px) {
  [data-theme="light"] .hero .hstage__lane { block-size: 98px; padding: var(--s-3); }
  [data-theme="light"] .hero .hstage__gate { inset-block: 20px 18px; }
}
@media (min-width: 1280px) {
  [data-theme="light"] .page-index .hero__inner { min-block-size: 680px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  [data-theme="light"] .hero .hstage__plane { transform: none; }
  [data-theme="light"] .hero .hstage__plane::after { inset-inline: 0; }
  [data-theme="light"] .hero .hstage__panel--quotes.qlv24 { inline-size: 100%; margin-inline-start: 0; }
  [data-theme="light"] .hero .hstage {
    position: relative; inset: auto; inline-size: 100%; max-inline-size: 640px; margin-block-start: 0;
    -webkit-mask-image: none; mask-image: none;
  }
}
[data-theme="light"] .hero .qlv24 .qlv__row:has(.hstage__chg[data-dir="up"]) .qlv__spark { color: var(--sem-up); }
[data-theme="light"] .hero .qlv24 .qlv__row:has(.hstage__chg[data-dir="down"]) .qlv__spark { color: var(--sem-down); }
[data-theme="light"] .hero .qlv24 .qlv__row:not(:has(.hstage__chg[data-dir])) .qlv__spark { color: var(--c-text-2); }
[data-theme="light"] .hero .qlv24 .hstage__row[data-flash]::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--r51-blue-400) 9%, transparent));
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  [data-theme="light"] .hero .hstage__tok { animation: r50-run var(--dur, 8.6s) linear var(--delay, 0s) infinite; }
  [data-theme="light"] .hero .hstage__tok.hstage__tok--human { animation: r50-run-human var(--dur, 11s) linear var(--delay, 0s) infinite; }
}
@keyframes r50-run {
  0%   { left: -3%; transform: translateY(calc(var(--y0, 0px) * .5)); opacity: 0; }
  8%   { opacity: 1; }
  44%  { left: 45%; transform: translateY(calc(var(--y0, 0px) * .5)); }
  54%  { left: 47%; transform: translateY(calc(var(--y1, 0px) * .5)); }
  92%  { opacity: 1; }
  100% { left: 103%; transform: translateY(calc(var(--y1, 0px) * .5)); opacity: 0; }
}
@keyframes r50-run-human {
  0%   { left: -3%; transform: translateY(calc(var(--y0, 0px) * .5)); opacity: 0; }
  8%   { opacity: 1; }
  38%  { left: 45%; transform: translateY(calc(var(--y0, 0px) * .5)); }
  62%  { left: 45%; transform: translateY(calc(var(--y0, 0px) * .5)); }
  70%  { left: 47%; transform: translateY(calc(var(--y1, 0px) * .5)); }
  92%  { opacity: 1; }
  100% { left: 103%; transform: translateY(calc(var(--y1, 0px) * .5)); opacity: 0; }
}
/* 价格逐位:浅色下不再垂直滚动(滚动中途露出前后两个数字 = 叠影;下跌那一路尾段停在旧数字上),
   直接停在新数字上,用一下淡底色标出「这一位刚变」 */
[data-theme="light"] .hero .qlv24 .qlv__d[data-dir] { color: inherit; animation: none; }
[data-theme="light"] .hero .qlv24 .qlv__d[data-dir] .qlv24__roll { animation: none; transform: translateY(-1.22em); }
@media (prefers-reduced-motion: no-preference) {
  [data-theme="light"] .hero .qlv24 .qlv__d[data-dir] { animation: r51-tick 600ms ease-out both; }
}
@keyframes r51-tick {
  from { background-color: color-mix(in srgb, var(--r51-blue-400) 18%, transparent); }
  to   { background-color: transparent; }
}

/* ══ I · 首屏动效层(theme-light-r51.js 注入)═════════════════════════════
   .r51-aura  三团慢漂光斑,纯 CSS transform 动画(GPU 合成,不占主线程)
   .r51-cv    每页自己的画布场景
   天空渐变  <html>::before(R53 起在固定层里,不再是首屏自己的背景) */
.r51-aura, .r51-cv { display: none; }
[data-theme="light"] .r51-aura,
[data-theme="light"] .r51-cv { display: block; z-index: -1; }

/* R53:三层 —— 天空(<html> 的 ::before,纯 CSS、不依赖 JS)、光斑与画布(JS 插进 <body> 最前面)—— 都是 position:fixed + z-index:-1,
   固定在视口、垫在所有内容之下(与深色 .r13-scene 同一机制);叠放次序 = 树序:天空 → 光斑 → 画布。
   没有任何祖先的 mask / overflow / isolation 能再裁它或盖它;各节背景改半透明,它才透得出来。 */
[data-theme="light"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--r51-sky);
}

[data-theme="light"] .r51-aura {
  position: fixed; inset: var(--risk-h, 0px) 0 0 0; block-size: 100svh;
  overflow: hidden; pointer-events: none; contain: paint;
}
[data-theme="light"] .r51-aura i {
  position: absolute; display: block; border-radius: 50%;
  will-change: transform;
}
[data-theme="light"] .r51-aura i:nth-child(1) {
  inline-size: 52vw; block-size: 52vw; max-inline-size: 760px; max-block-size: 760px;
  inset-block-start: -22%; inset-inline-end: -8%;
  background: radial-gradient(closest-side, rgba(90, 140, 219, calc(var(--r52-aura-a1) * var(--r52-aura-k, 1))), rgba(90, 140, 219, 0) 100%);
  animation: r51-drift-a 19s ease-in-out infinite alternate;
}
[data-theme="light"] .r51-aura i:nth-child(2) {
  inline-size: 40vw; block-size: 40vw; max-inline-size: 560px; max-block-size: 560px;
  inset-block-end: -30%; inset-inline-start: 18%;
  background: radial-gradient(closest-side, rgba(80, 170, 220, calc(var(--r52-aura-a2) * var(--r52-aura-k, 1))), rgba(80, 170, 220, 0) 100%);
  animation: r51-drift-b 23s ease-in-out infinite alternate;
}
[data-theme="light"] .r51-aura i:nth-child(3) {
  inline-size: 34vw; block-size: 34vw; max-inline-size: 480px; max-block-size: 480px;
  inset-block-start: 8%; inset-inline-start: 46%;
  background: radial-gradient(closest-side, rgba(188, 210, 243, calc(var(--r52-aura-a3) * var(--r52-aura-k, 1))), rgba(188, 210, 243, 0) 100%);
  animation: r51-drift-c 27s ease-in-out infinite alternate;
}
@keyframes r51-drift-a { from { transform: translate3d(0, 0, 0) scale(1); }   to { transform: translate3d(-9vw, 7%, 0) scale(1.14); } }
@keyframes r51-drift-b { from { transform: translate3d(0, 0, 0) scale(1.08); } to { transform: translate3d(11vw, -9%, 0) scale(.94); } }
@keyframes r51-drift-c { from { transform: translate3d(-4vw, 0, 0) scale(.96); } to { transform: translate3d(8vw, 12%, 0) scale(1.12); } }

[data-theme="light"] .r51-cv {
  position: fixed; inset: var(--risk-h, 0px) 0 0 0; inline-size: 100vw; block-size: 100svh;
  pointer-events: none;
  opacity: calc(var(--r52-cv-opacity) * var(--r58-fade, 1));
  -webkit-mask-image: linear-gradient(90deg, transparent 0 26%, #000 58%);
          mask-image: linear-gradient(90deg, transparent 0 26%, #000 58%);
}
[data-theme="light"] .hero .hero__img.on-light {
  opacity: var(--r52-hero-art-opacity);
  filter: saturate(var(--r52-hero-art-saturation));
}

/* 手机:光斑改小改慢,画布场景留着但 JS 已减半粒子数;左侧不再整列遮罩(文字占满宽度,改整体压淡) */
@media (max-width: 640px) {
  [data-theme="light"] .r51-aura i:nth-child(1) { inline-size: 90vw; block-size: 90vw; inset-inline-end: -30%; }
  [data-theme="light"] .r51-aura i:nth-child(2) { inline-size: 80vw; block-size: 80vw; }
  [data-theme="light"] .r51-aura i:nth-child(3) { display: none; }
  [data-theme="light"] .r51-cv { opacity: var(--r52-cv-mobile-opacity); -webkit-mask-image: none; mask-image: none; }
  /* R53:手机上光斑比桌面更靠近正文,同档再收 ≈40%,保住灰字 AA */
  [data-theme="light"] .r51-aura { --r52-aura-k: .60; }
  [data-theme="light"] .hero .hero__img.on-light { opacity: min(var(--r52-hero-art-opacity), .34); }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="light"] .r51-aura i { animation: none !important; }
  [data-theme="light"] .page-index .hflow__card { transition: none; }
}

/* ══ J · 第三轮接线与修补(2026-10-04)═══════════════════════════════════════
   J1 画布层抬到首屏图之上(图不透明部分会把光点盖住;光斑仍在图下面,透过图的透明区)
   J2 首页中文标题第二行的右端必须停在美术竖轨(含节点光圈)左侧
   J3 窄屏(<1280)首屏图缩成右上角小饰件,不再整张铺在文字下面
   J4 首页能力块 / 内核图与服务页界面稿换成美术正式稿(HTML 里已接 <img class="on-light">) */

/* J2 · 竖轨在 x = 70.4vw(1280–1920 实测);节点光圈半径 ≈ 30px,再留 14px。
   第二行 = 11 个全角字 ⇒ 字号 ≤ (可用宽 / 11),可用宽 = 70.4vw − 44px − 容器左缘((100vw − 1136px) / 2) */
@media (min-width: 1280px) {
  [data-theme="light"] .page-index .hero h1:lang(zh) {
    font-size: min(var(--fs-h1), calc(1.856vw + 47.6px));
  }
  /* D6(第三轮 QA):英文第二行 "Clear. Transparent. Traceable." ≈ 14.1em,64px 时在 1440 宽伸到 x≈1055,
     压住右侧报价面板(左缘 ≈ 948)。可用宽 = 面板左缘 − 容器左缘 − 余量;面板左缘实测 827 / 886 / 948 / 1108 / 1428(1280 / 1366 / 1440 / 1600 / 1920),
     线性拟合后 ≤ 1600 宽字号 = 2.7vw + 17px,1920 起回到 --fs-h1 */
  [data-theme="light"] .page-index .hero h1:lang(en) {
    font-size: min(var(--fs-h1), calc(2.7vw + 17px));
  }
}

/* J3 · 小饰件:右对齐、贴首屏顶、等比。图自己的左 55% 是透明的,可见内容只落在右侧 */
@media (max-width: 1279px) {
  [data-theme="light"] .hero .hero__img.on-light {
    inset: 0 0 auto auto;
    inline-size: clamp(230px, 45vw, 520px); block-size: auto; aspect-ratio: 1440 / 810;
    object-fit: fill; opacity: 1;
  }
  [data-theme="light"] .r51-cv { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 640px) {
  [data-theme="light"] .hero .hero__img.on-light { inline-size: clamp(170px, 56vw, 300px); }
}

/* J4 · 能力块 / 内核图:透明底带边缘渐隐,放进图版框内 */
[data-theme="light"] .fig-plate > img.fig-r51 { display: block; inline-size: 100%; block-size: auto; }

/* J5 markets:首屏背景里内联的深色 motif(锯齿走势线)在浅色下压在眉题上,浅色稿已有自己的首屏图 */
[data-theme="light"] .page-markets .hero__bg > svg.motif { display: none; }

/* J6 markets / market-quotes ≥1280:右侧是整排行情条(art x≥820/1440 ≈ 0.569·W),文案列收在它左边留 24px 空隙;
   EN 的 h1 单行块最宽 13.21em(markets)/ 10.42em(market-quotes),按可用宽度反推字号 */
@media (min-width: 1280px) {
  [data-theme="light"] .page-markets .hero__copy,
  [data-theme="light"] .page-market-quotes .hero__copy { max-inline-size: calc(6.94vw + 544px); }
  [data-theme="light"] .page-markets .hero h1:lang(en) { font-size: min(var(--fs-h1), calc(.51vw + 40px)); }
  [data-theme="light"] .page-market-quotes .hero h1:lang(en) { font-size: min(var(--fs-h1), calc(.64vw + 50.4px)); }
}

/* §J 对比度补丁:行情详情页面包屑末级与「持平」涨跌幅压在光晕上低于 4.5:1,改用次级文字色 */
[data-theme="light"] .qd__crumbs a,
[data-theme="light"] .qd__crumbs span,
[data-theme="light"] .qd__chg[data-dir="flat"] { color: var(--c-text-2); }


/* ── 2026-10-05 执行流车道:静态骨架(令牌没在跑 / 还没进场时,车道也不是空的) ──
   三条虚线轨道 + 进场/出场标注;令牌沿轨道走,过「风控闸」后落到等距的出口位。 */
[data-theme="light"] .hero .hstage__lane {
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--c-text-3) 38%, transparent) 0 5px, transparent 5px 11px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--c-text-3) 38%, transparent) 0 5px, transparent 5px 11px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--c-text-3) 38%, transparent) 0 5px, transparent 5px 11px);
  background-size: 100% 1px, 100% 1px, 100% 1px;
  background-position: 0 24%, 0 50%, 0 76%;
  background-repeat: no-repeat;
}
[data-theme="light"] .hero .hstage__lane::before,
[data-theme="light"] .hero .hstage__lane::after {
  position: absolute; inset-block-end: 3px;
  font-size: 10px; letter-spacing: .08em; color: var(--c-text-3); pointer-events: none;
}
[data-theme="light"] .hero .hstage__lane::before { content: "进场 · 乱序"; inset-inline-start: var(--s-3); }
[data-theme="light"] .hero .hstage__lane::after  { content: "出场 · 等距同速"; inset-inline-end: var(--s-3); }
html[lang^="en"][data-theme="light"] .hero .hstage__lane::before { content: "in · irregular"; }
html[lang^="en"][data-theme="light"] .hero .hstage__lane::after  { content: "out · evenly spaced"; }

/* 2026-10-05 执行流车道:令牌的「静止位置」(≥1024;<1024 整张卡 display:none)
   令牌没在跑(减少动效 / 动画被停)时只剩 left:auto,8 个全叠在车道左缘 = 一个点。这里给每个令牌一个落点,
   讲同一件事:闸左 3 个圆乱序(x 间距不等 + 各自的 --y0)、闸上 1 个方块(人工裁定)、
   闸右 4 个等距(x 等间距;选 idx 0/2/4/6,它们的 --y1 恰是等差 12px ⇒ x、y 同时等距)。
   这是基础值,不是动画:r50-run 开着时,关键帧的 left/transform 照常盖过它。
   纵向乘 .5 与上面 r50-run 一致(车道只有 72px)。令牌 = 车道第 3–10 个子节点(前两个是标签与闸)。 */
@media (min-width: 1024px) {
  [data-theme="light"] .hero .hstage__lane > .hstage__tok {
    opacity: 1;
    left: var(--sx, 0%);
    transform: translateY(calc(var(--sy, 0px) * .5));
  }
  /* 闸左:乱序 */
  [data-theme="light"] .hero .hstage__lane > .hstage__tok:nth-child(4)  { --sx: 12%; --sy: var(--y0); }
  [data-theme="light"] .hero .hstage__lane > .hstage__tok:nth-child(10) { --sx: 25%; --sy: var(--y0); }
  [data-theme="light"] .hero .hstage__lane > .hstage__tok:nth-child(8)  { --sx: 37%; --sy: var(--y0); }
  /* 闸上:方 = 人工裁定,压在闸线中点(闸 left:46% 宽 2px,令牌 9px;不用 --y0,免得顶到「风控闸」标签) */
  [data-theme="light"] .hero .hstage__lane > .hstage__tok:nth-child(6)  { --sx: calc(46% - 3.5px); --sy: 0px; }
  /* 闸右:等距 */
  [data-theme="light"] .hero .hstage__lane > .hstage__tok:nth-child(9)  { --sx: 57%; --sy: var(--y1); }
  [data-theme="light"] .hero .hstage__lane > .hstage__tok:nth-child(7)  { --sx: 68%; --sy: var(--y1); }
  [data-theme="light"] .hero .hstage__lane > .hstage__tok:nth-child(5)  { --sx: 79%; --sy: var(--y1); }
  [data-theme="light"] .hero .hstage__lane > .hstage__tok:nth-child(3)  { --sx: 90%; --sy: var(--y1); }
}

/* ── 2026-10-05 光斑不越过首屏顶边 ──────────────────────────────────────
   实测(同一首页、同一探针,只改光斑位置):一团动着的光斑只要越过首屏上沿,首屏帧率 60 → 28;
   越过左 / 右 / 下沿都不掉。越过上沿的那一团每帧都要和页头那一层重新合成。
   所以三团光斑改成「顶部不出界」:一号光斑下移到上沿以内,二号限高(不顶到上沿),
   漂移的缩放上限从 1.14 收到 1.08(放大时也不会顶出去)。视觉上右上角的光仍在,只是中心略下移。 */
[data-theme="light"] .r51-aura { container-type: size; }
[data-theme="light"] .r51-aura i:nth-child(1) { inset-block-start: 9%; }
[data-theme="light"] .r51-aura i:nth-child(3) { inset-block-start: 14%; }
@media (min-width: 641px) {
  [data-theme="light"] .r51-aura i:nth-child(2) { block-size: min(40vw, 560px, 105cqh); }
}
@keyframes r51-drift-a { from { transform: translate3d(0, 0, 0) scale(1); }   to { transform: translate3d(-9vw, 5%, 0) scale(1.08); } }
@keyframes r51-drift-b { from { transform: translate3d(0, 0, 0) scale(1.04); } to { transform: translate3d(11vw, -7%, 0) scale(.94); } }
@keyframes r51-drift-c { from { transform: translate3d(-4vw, 0, 0) scale(.96); } to { transform: translate3d(8vw, 9%, 0) scale(1.06); } }

/* ══ K · 第四轮(2026-10-05,QA 第三轮缺陷修复)══════════════════════════════
   K1 · D1 减弱动效:首页 / 服务页首屏图是 CSS 背景(url() 变量),SVG 内部的 @media (prefers-reduced-motion)
        在图像上下文里不生效 ⇒ 页面这一侧换成 xxx-still.svg。<img> 那几张由 theme-light-r51.js 的 swapStill 换。
        ⚠️ 这里只改变量(不写 animation 简写),不会把时长清成 0s。 */
@media (prefers-reduced-motion: reduce) {
  [data-theme="light"] body.page-index .hero { --r46-hero-art: url("../brand/hero-home-light-r46-still.svg"); }
  [data-theme="light"] body.page-services .hero { --r46-hero-art: url("../brand/hero-services-light-r46-still.svg"); }
}

/* K2(R53 改写)· D3 首屏左下光晕在底边的台阶
   原做法是首屏背景叠 140px「透明 → 底边同色」+ .r51-aura::after 同款渐隐,把底图在首屏底边处盖掉。
   R53 起底图固定在整页背后、首屏与各节都不再有不透明底,首屏底边没有「前后两种底」之分,台阶自然不存在:两处渐隐一并撤掉。
   唯一剩下的接缝在首页:首屏之后是半透明白(--r53-white-a),所以首屏底边 140px 叠一层 透明 → 同一半透明白,两侧同色。 */
[data-theme="light"] .page-index .hero {
  background: linear-gradient(180deg, transparent calc(100% - 140px), rgba(255, 255, 255, var(--r53-white-a)) 100%);
}
/* r22 的 .hlx-edge 是「往下化进页面底」:渐变终点是不透明的页面底色,会把固定底图在首屏底边处盖出一条带。
   终点换成与下一节同色的半透明白(普通页下一节无底色,则整条不画) */
[data-theme="light"] .hero .hlx-edge { background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, var(--r53-white-a)) 88%); }

/* ══ 2026-10-05 insights/markets/help 首屏对齐深色 ═══════════════════════════════
   深色这三页首屏没有大底图(identity-r13.css:249 把 .hero__bg img 全部 display:none,画布也不挂),
   市场洞察 / 帮助中心的右列是一块插画卡,我们的市场只有文案。浅色这边 r51 给每页都挂了「底图 + 画布」,
   于是:markets / help 与 market-quotes 共用同一张刻度尺图(hero-markets-light.svg),insights 的斜纸张图盖在插画卡后面。
   做法只动构图:撤掉这三页的首屏底图与画布;天空渐变(.hero 背景)与光斑(.r51-aura)是浅色的配色,不动。
   回退:删本块,或 cp assets/theme-light-r51.css.bak-heroalign3-20261005 回来。 */

/* L1 · 撤底图:img 是图本身,画布(.r51-cv)是沿图上刻度/纸张画的动点,两个一起撤,否则画布会悬空 */
[data-theme="light"] :is(.page-insights, .page-help) .hero__bg > img.hero__img.on-light {
  display: none;
}

/* L2 · insights 右列放回插画卡。深色那条两列规则只写给 data-theme="dark"(insights-r44.css:81),
   浅色一直落在 r51 §G 的「内页首屏单列」(特异度 0,4,0)上,卡片被挤到按钮下面左下角。
   这里是 insights-r44 那条的浅色孪生,逐属性一致,特异度 (0,4,1) 压过 §G。help-center 自己的两列规则
   (helpcenter-r44.css:41)不分主题,所以它在浅色下本来就是对的。 */
@media (min-width: 1024px) {
  html[data-theme="light"][data-page="insights"] .hero .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    column-gap: var(--s-9);
    align-items: start;
  }
}

/* L3(r77 起只管中文;首屏图回来后英文回到 J6 的窄列与缩字号)· markets 文案列让回深色的宽度:J6 的窄列(max-inline-size)与英文 h1 缩字号都是为了给右侧刻度条让位,
   底图撤了,这两条随之失效。 */
@media (min-width: 1280px) {
  [data-theme="light"] .page-markets .hero__copy:lang(zh) { max-inline-size: min(940px, 92vw); }
}

/* ══ 2026-10-05 浅色背景动图范围对齐深色 ═══════════════════════════════════════
   成因:深色背景是 viewport 固定的整页画布(canvas.r13-scene,1440×900 时就是 1440×900),圆环圆心在 (0.8w, 0.40h),
         不受首屏盒子约束,所以环铺到屏幕右 55%、穿过锚点导航、继续伸进「我们是谁」。
         浅色背景是 1440×810 的 SVG 以 cover 塞进 1440×411 的首屏盒子(只露中间 411 行),
         再被 .hero{overflow:hidden} 与 .hero__bg 底部 mask 裁掉 ⇒ 环小、被腰斩。
   做法(只动范围 / 尺寸 / 裁切 / mask,不动配色、线宽、动画节奏):
         ① 图改成 object-fit:fill + 显式盒子,盒子大小/位置按 viewport 算,圆环圆心(图内 1170,400)落在 (0.8w, 0.40h) 与深色同一点;
         ② 首屏只裁左右(overflow-x:clip),不再裁底边;图与画布各自带底部渐隐 mask,环淡出,没有硬边;
         ③ 画布(沿环跑的光点)与图用同一套盒子几何(size() 读 object-fit:fill 的真实盒子),光点重新落回环上。
   适用 ≥1024。<1024 深色那边也只剩淡带,保持原有小饰物不动。回退:删本块,或 cp assets/theme-light-r51.css.bak-bgrange-20261005 回来。 */
@media (min-width: 1024px) {
  [data-theme="light"] .page-about .hero {
    --bg-w: min(152.35vw, 216vh);
    --bg-x: calc(80vw - .8125 * var(--bg-w));
    --bg-y: calc(40vh - var(--risk-h) - var(--header-h) - .2778 * var(--bg-w));
    overflow-x: clip;
    overflow-y: visible;
  }
  [data-theme="light"] .page-about .hero .hero__bg {
    -webkit-mask-image: none;
            mask-image: none;
  }
  [data-theme="light"] .page-about .hero .hero__img.on-light {
    inset: auto;
    inset-inline-start: var(--bg-x);
    inset-block-start: var(--bg-y);
    inline-size: var(--bg-w);
    max-inline-size: none;
    block-size: auto;
    aspect-ratio: 1440 / 810;
    object-fit: fill;
    opacity: 1;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 68%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 68%, transparent 100%);
  }
}

/* 同一块 · 其余首屏被腰斩的三页(运营模式阶梯 / 加入我们刻度柱 / 即时报价刻度尺;前两页 ≥1024,即时报价 ≥1280 —— 1024–1279 刻度尺会压到导语末端,那一档仍留 J3 小饰物)
   这三页的图本来就是整幅从首屏顶铺到下面,cover 只露了中间一截。做法与 about 同:图按宽度等比铺满(右对齐),
   顶端让墨迹起点落在首屏顶下 12px,首屏不再裁底边,底部渐隐。 */
@media (min-width: 1024px) {
  [data-theme="light"] :is(.page-how, .page-careers, .page-markets) .hero {
    --bg-w: min(100vw, 160vh);
    --bg-y: calc(12px - .0764 * var(--bg-w));
    overflow-x: clip;
    overflow-y: visible;
  }
  [data-theme="light"] :is(.page-how, .page-careers, .page-markets) .hero .hero__bg {
    -webkit-mask-image: none;
            mask-image: none;
  }
  [data-theme="light"] :is(.page-how, .page-careers, .page-markets) .hero .hero__img.on-light {
    inset: auto;
    inset-inline-end: 0;
    inset-block-start: var(--bg-y);
    inline-size: var(--bg-w);
    max-inline-size: none;
    block-size: auto;
    aspect-ratio: 1440 / 810;
    object-fit: fill;
    opacity: 1;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%);
  }
}

@media (min-width: 1280px) {
  [data-theme="light"] .page-market-quotes .hero {
    --bg-w: min(100vw, 160vh);
    --bg-y: calc(12px - .0764 * var(--bg-w));
    overflow-x: clip;
    overflow-y: visible;
  }
  [data-theme="light"] .page-market-quotes .hero .hero__bg {
    -webkit-mask-image: none;
            mask-image: none;
  }
  [data-theme="light"] .page-market-quotes .hero .hero__img.on-light {
    inset: auto;
    inset-inline-end: 0;
    inset-block-start: var(--bg-y);
    inline-size: var(--bg-w);
    max-inline-size: none;
    block-size: auto;
    aspect-ratio: 1440 / 810;
    object-fit: fill;
    opacity: 1;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 70%, transparent 100%);
  }
}

/* r54 行情涨跌与小字灰:这些行底下没有实底,字直接落在固定天空+光斑上,比旧平底更深更蓝。
   只把字色向墨色(--c-text)压 15%/10%,不动任何底图、不动 --r53-*;符号 +/− 仍是第二通道。 */
[data-theme="light"] .qv-chg[data-dir="up"],
[data-theme="light"] .qtable__trend--up { color: color-mix(in srgb, var(--c-success-700) 85%, var(--c-text)); }
[data-theme="light"] .qv-chg[data-dir="down"],
[data-theme="light"] .qtable__trend--down { color: color-mix(in srgb, var(--c-danger-700) 85%, var(--c-text)); }
[data-theme="light"] .qv-chg[data-dir="flat"] { color: color-mix(in srgb, var(--c-text-3) 85%, var(--c-text)); }
[data-theme="light"] .ec-day__count,
[data-theme="light"] .ec-tz { color: color-mix(in srgb, var(--c-text-3) 85%, var(--c-text)); }
[data-theme="light"] .ec-chip,
[data-theme="light"] .qtab { color: color-mix(in srgb, var(--c-text-3) 90%, var(--c-text)); }
[data-theme="light"] .ec-chip:hover,
[data-theme="light"] .qtab:hover { color: var(--c-text); }
[data-theme="light"] .ec-chip[aria-pressed="true"] { color: var(--c-primary-700); }
[data-theme="light"] .qtab[aria-selected="true"] { color: var(--c-primary-700); }
[data-theme="light"] .ac-table th,
[data-theme="light"] .mi-gap,
[data-theme="light"] .mi-gap p { color: color-mix(in srgb, var(--c-text-3) 90%, var(--c-text)); }


/* ══ R58 · 首屏大图改固定层 + 配色收淡(2026-10-09)═══════════════════════════════
   用户:「浅色系右边这个背景图应该跟深色系一样,是固定的、有动效的;当前颜色搭配很抢主题;页面有一层看不见的动效,很诡异」。
   成因:① 首屏 <img> 随首屏滚走,但沿环跑的光点画布(.r51-cv)是固定的 ⇒ 滚下去只剩没有环的「幽灵光点」+ 蓝光斑;
         ② 图 / 光点 / 光斑 / 天空四层蓝叠在一起,比深色那层几乎只有细线的背景重很多。
   做法:theme-light-r51.js 把首屏大图克隆成 body 最前面的固定层 .r51-art(位置/大小照抄首屏里那张,原图 visibility:hidden 留盒子);
         本块只管这张克隆的样式;配色收淡在文件顶部变量(--r52-*)和 --r51-sky 里。
   回退:cp _bak/r58-art-fixed-20261009/theme-light-r51.{css,js} 回来。 */
.r51-art { display: none; }
[data-theme="light"] .r51-art {
  position: fixed; z-index: -1; pointer-events: none;
  max-inline-size: none; max-block-size: none;
  opacity: var(--r52-hero-art-opacity);
  filter: saturate(var(--r52-hero-art-saturation));
}
[data-theme="light"] .hero .hero__img.on-light[data-r58-fixed] { visibility: hidden; }

/* r77 · 英文首屏标题很宽,会压进右侧新图:≥1024 时让文案列收到视口 46%,标题自己折行 */
@media (min-width: 1024px) {
  [data-theme="light"] :is(.page-markets, .page-careers) .hero__copy:lang(en) { max-inline-size: 46vw; }
}