/* ============================================================
   引见（YinJian）· 深色科幻主题覆盖 + 特效组件（fx.css）
   ------------------------------------------------------------
   配合 assets/js/fx3d.js 使用：
   · fx3d.js 注入 <canvas id="fx-bg"> 并给 body 加 .has-fx；
     本文件所有覆盖一律 scoped 在 body.has-fx 下 —— JS 未运行 /
     降级失败时页面保持 main.css 的浅色暖纸主题，互不影响
   · 深空底色（多层径向渐变 + 极淡网格，纯 CSS）由 body 承担，
     画布透明叠加粒子
   · 令牌覆盖（表面 / 文本 / 边框 / 强调色 / 阴影 / glow），
     使 .section / .card / .nav / .footer / .badge / .btn 等
     现有组件在深色下自动适配；玻璃拟态只加在 has-fx 作用域
   · 新组件：.scifi-marquee（发光条幅）/ .svc-list（编号清单）/
     #yj-chat-orb（AI 对话悬浮球）/ .fx-eyebrow / .fx-quote
   ============================================================ */

/* ============================================================
   0. 背景画布兜底样式（JS 已内联，此处冗余保证）
   ============================================================ */
#fx-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: block;
}

/* 内容层压到画布之上（canvas z-index:0，定位元素默认在其下） */
body.has-fx main,
body.has-fx .footer {
  position: relative;
  z-index: 1;
}

/* ============================================================
   1. 深空底色：多层径向渐变 + 极淡网格（纯 CSS）
   ============================================================ */
body.has-fx {
  background-color: #04060D;
  background-image:
    /* 顶部中枢蓝光（数字核心光晕） */
    radial-gradient(90% 60% at 50% -8%, rgba(21, 93, 252, .20) 0%, rgba(21, 93, 252, .05) 42%, transparent 70%),
    /* 中心主光：深青蓝 */
    radial-gradient(120% 90% at 50% 32%, #0A1428 0%, rgba(10, 20, 40, 0) 72%),
    /* 右下青色余辉 */
    radial-gradient(60% 70% at 88% 78%, rgba(34, 211, 238, .07) 0%, transparent 62%),
    /* 左下紫色余辉（极少量） */
    radial-gradient(52% 60% at 8% 86%, rgba(139, 92, 246, .06) 0%, transparent 60%),
    /* 极淡网格线（随 --grid-size） */
    linear-gradient(rgba(120, 160, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 160, 255, .045) 1px, transparent 1px),
    /* 边缘压暗 */
    radial-gradient(140% 120% at 50% 40%, transparent 52%, #04060D 100%);
  background-size: auto, auto, auto, auto, 72px 72px, 72px 72px, auto;
  background-attachment: fixed;
}

/* ============================================================
   2. 令牌覆盖：整站切深色科幻（全部 scoped 在 body.has-fx）
   ============================================================ */
body.has-fx {
  color-scheme: dark;

  /* 表面阶梯 → 深空玻璃（半透明让粒子隐约透出） */
  --surface-0: #04060D;
  --surface-1: rgba(10, 19, 38, .58);
  --surface-2: rgba(15, 25, 48, .62);
  --surface-3: rgba(23, 36, 64, .72);
  --surface-4: rgba(8, 14, 28, .92);
  --color-bg: var(--surface-0);
  --color-bg-alt: var(--surface-1);
  --color-surface: var(--surface-2);

  /* 墨色反转：黑底按钮在深色下改为亮蓝底 */
  --color-ink: #155DFC;
  --color-ink-hover: #2E6BFD;
  --color-ink-active: #1044B0;

  /* 遮罩加深 */
  --scrim-soft: rgba(2, 4, 10, .55);
  --scrim-strong: rgba(2, 4, 10, .84);

  /* 边框 → 青蓝 alpha 发光线 */
  --border-subtle: rgba(148, 178, 255, .09);
  --border-hairline: rgba(148, 178, 255, .14);
  --border-default: rgba(148, 178, 255, .20);
  --border-strong: rgba(148, 178, 255, .30);
  --border-interactive: rgba(109, 155, 255, .48);
  --border-accent: rgba(76, 130, 251, .52);
  --border-accent-hot: rgba(34, 211, 238, .66);

  /* 文本 → 浅色冷白 alpha */
  --color-text-primary: rgba(235, 240, 255, .96);
  --color-text-body: rgba(235, 240, 255, .80);
  --color-text-secondary: rgba(235, 240, 255, .64);
  --color-text-muted: rgba(235, 240, 255, .50);
  --color-text-faint: rgba(235, 240, 255, .38);
  --color-text-disabled: rgba(235, 240, 255, .26);
  --color-text-on-accent: #FFFFFF;

  /* 强调蓝调亮（深底可读性） */
  --color-primary-300: #B9CFFF;
  --color-primary-400: #6D9BFF;
  --color-primary-500: #4C82FB;
  --color-primary-600: #3B6FE0;
  --color-primary-700: #2E5AC0;
  --color-primary-800: #23479A;
  --color-primary-900: #162E66;

  --primary-a04: rgba(76, 130, 251, .07);
  --primary-a08: rgba(76, 130, 251, .12);
  --primary-a12: rgba(76, 130, 251, .17);
  --primary-a18: rgba(76, 130, 251, .26);
  --primary-a28: rgba(76, 130, 251, .38);
  --primary-a45: rgba(76, 130, 251, .55);

  /* glow → 青蓝发光环 */
  --glow-accent-sm: 0 0 0 1px rgba(76, 130, 251, .38), 0 0 14px rgba(34, 211, 238, .12);
  --glow-accent-md: 0 0 0 1px rgba(76, 130, 251, .48), 0 0 26px rgba(34, 211, 238, .18);
  --glow-accent-lg: 0 0 0 1px rgba(76, 130, 251, .56), 0 0 52px rgba(34, 211, 238, .22);
  --glow-inner-top: inset 0 1px 0 rgba(235, 240, 255, .10);
  --glow-inner-ring: inset 0 0 0 1px rgba(148, 178, 255, .10);

  /* 材质光：月光 → 顶部青蓝冷光 */
  --noise-opacity: .05;
  --grid-line: rgba(120, 160, 255, .055);
  --grid-line-lg: rgba(120, 160, 255, .085);
  --moonlight: radial-gradient(120% 70% at 50% -12%,
      rgba(76, 130, 251, .22) 0%,
      rgba(34, 211, 238, .07) 38%,
      transparent 70%);
  --moonlight-side: radial-gradient(70% 90% at 100% 0%,
      rgba(34, 211, 238, .12) 0%, transparent 60%);

  /* 阴影 → 深黑重投影 */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .45);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, .50);
  --shadow-lg: 0 22px 56px rgba(0, 0, 0, .55);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, .60);
  --elev-card: var(--glow-inner-top), var(--shadow-sm);
  --elev-card-hover: var(--glow-inner-top), var(--shadow-md);
  --elev-overlay: var(--glow-inner-ring), var(--shadow-xl);

  /* 焦点环：深色底上的亮蓝环 */
  --ring-focus: 0 0 0 2px #04060D, 0 0 0 4px var(--color-primary-400);

  /* 语义色提亮（深底适配） */
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-danger: #F87171;
  --color-info: var(--color-primary-400);
  --color-success-bg: rgba(52, 211, 153, .12);
  --color-warning-bg: rgba(251, 191, 36, .12);
  --color-danger-bg: rgba(248, 113, 113, .12);
  --color-info-bg: var(--primary-a08);
  --color-success-border: rgba(52, 211, 153, .36);
  --color-warning-border: rgba(251, 191, 36, .38);
  --color-danger-border: rgba(248, 113, 113, .36);
  --color-info-border: var(--primary-a28);

  /* 中性灰阶翻转（数字越大越亮） */
  --color-neutral-900: #EDF1FA;
  --color-neutral-800: #C9D2E8;
  --color-neutral-700: #AAB6D2;
  --color-neutral-600: #8B96B6;
  --color-neutral-500: #6F7A99;
  --color-neutral-400: #566080;
  --color-neutral-300: #404A6B;
  --color-neutral-200: #2C3550;
  --color-neutral-100: #1B2340;
  --color-neutral-50: #121A33;
}

/* ============================================================
   3. 现有组件深色适配（玻璃拟态仅在此作用域启用）
   ============================================================ */

/* --- 区块表面：白色/交替区块透明化，粒子透出；叠阅读 scrim 压暗文字背后粒子 --- */
/* scrim 用 background-image 承载，各变体只改 background-color，避免 shorthand 互相覆盖 */
body.has-fx .section,
body.has-fx .cta-deep,
body.has-fx .section--dark {
  background-image: radial-gradient(125% 90% at 50% 26%,
      rgba(4, 6, 13, .52) 0%,
      rgba(4, 6, 13, .30) 55%,
      rgba(4, 6, 13, .08) 100%);
}

body.has-fx .section--white {
  background-color: transparent;
}

body.has-fx .section--alt,
body.has-fx .stats-bar {
  background-color: rgba(10, 19, 38, .42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

body.has-fx .section--dark {
  background-color: rgba(8, 15, 30, .60);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* 标题再压一层软阴影，粒子穿过字形时仍保可读 */
body.has-fx .section-head h2,
body.has-fx .section-head .lead,
body.has-fx .cta-deep h2,
body.has-fx .cta-deep .lead {
  text-shadow: 0 1px 16px rgba(4, 6, 13, .75), 0 0 3px rgba(4, 6, 13, .55);
}

/* --- 导航：滚动态深色玻璃 --- */
body.has-fx .nav--scrolled {
  background: rgba(5, 9, 20, .72);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--border-hairline);
}

body.has-fx .nav--scrolled::after {
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .45) 50%, transparent);
  opacity: .7;
}

body.has-fx .nav__link:hover {
  color: var(--color-text-primary);
  background: rgba(148, 178, 255, .08);
}

/* --- 移动端抽屉：深色玻璃面板 --- */
body.has-fx .drawer {
  background: rgba(8, 14, 28, .88);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-left-color: var(--border-hairline);
}

body.has-fx .drawer__close {
  background: rgba(148, 178, 255, .10);
  color: var(--color-text-primary);
}

body.has-fx .drawer__link:hover {
  background: rgba(148, 178, 255, .08);
  color: var(--color-text-primary);
}

body.has-fx .drawer__link.is-active {
  background: rgba(76, 130, 251, .16);
  color: var(--color-text-primary);
}

/* --- 卡片：深色玻璃 + 青蓝描边 --- */
body.has-fx .card,
body.has-fx .card--role,
body.has-fx .card-glass {
  background: rgba(15, 25, 48, .58);
  border-color: rgba(148, 178, 255, .16);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

body.has-fx .card-glass {
  box-shadow: var(--glow-inner-top), var(--shadow-lg);
}

body.has-fx .card::before {
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .55) 22%, rgba(34, 211, 238, .55) 78%, transparent);
}

body.has-fx .card:hover,
body.has-fx .card--role:hover {
  background: rgba(21, 33, 60, .66);
  border-color: rgba(109, 155, 255, .32);
  box-shadow: var(--glow-accent-sm), var(--shadow-md);
}

body.has-fx .card--accent {
  border-color: var(--border-accent);
  background: linear-gradient(180deg, var(--primary-a08), transparent 46%), rgba(15, 25, 48, .62);
  box-shadow: var(--glow-accent-md), var(--shadow-sm);
}

body.has-fx .card--role:hover .role-avatar {
  color: var(--color-primary-300);
  border-color: var(--primary-a45);
  box-shadow: var(--glow-inner-top), 0 0 16px rgba(34, 211, 238, .22);
}

/* --- 徽章 --- */
body.has-fx .badge--eyebrow,
body.has-fx .badge--eyebrow--on-dark {
  border-color: rgba(148, 178, 255, .26);
  color: rgba(34, 211, 238, .92);
  background: rgba(34, 211, 238, .06);
}

/* --- 按钮 --- */
body.has-fx .btn--primary {
  background: linear-gradient(135deg, var(--color-primary-400) 0%, #155DFC 100%);
  color: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(109, 155, 255, .35), 0 6px 22px rgba(21, 93, 252, .35);
}

body.has-fx .btn--primary:hover {
  box-shadow: 0 0 0 1px rgba(109, 155, 255, .5), 0 8px 30px rgba(21, 93, 252, .5);
}

body.has-fx .btn--primary:active {
  background: linear-gradient(135deg, #4C82FB 0%, #1044B0 100%);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .45);
}

body.has-fx .btn--secondary {
  background: rgba(148, 178, 255, .06);
  color: var(--color-text-primary);
  border-color: rgba(148, 178, 255, .34);
}

body.has-fx .btn--secondary:hover {
  background: rgba(148, 178, 255, .12);
  border-color: rgba(109, 155, 255, .5);
}

body.has-fx .btn--secondary:active {
  background: rgba(148, 178, 255, .16);
}

body.has-fx .btn--ghost {
  color: var(--color-text-secondary);
}

body.has-fx .btn--ghost:hover {
  color: var(--color-text-primary);
  background: rgba(148, 178, 255, .08);
}

body.has-fx .btn--ghost:active {
  background: rgba(148, 178, 255, .12);
}

body.has-fx .btn--moon {
  background: rgba(235, 240, 255, .92);
  color: #0B1226;
  border-color: transparent;
}

/* --- 页脚 --- */
body.has-fx .footer {
  background: rgba(5, 9, 20, .66);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top-color: var(--border-subtle);
}

body.has-fx .footer a:hover {
  color: var(--color-text-primary);
}

/* --- Hero / CTA 深色透明化：粒子透出，文字走浅色令牌保证对比 --- */
body.has-fx .hero {
  background: transparent;
}

body.has-fx .hero__stack .card-glass {
  background: rgba(13, 22, 44, .66);
  border-color: rgba(148, 178, 255, .18);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--glow-inner-top), var(--shadow-xl);
}

body.has-fx .cta-deep {
  background-color: transparent;
  border-top-color: var(--border-subtle);
}

/* --- 定价页：定价卡 / 对比表 / 附加项 深色玻璃适配 --- */
body.has-fx .card--pricing {
  background: rgba(15, 25, 48, .62);
  border-color: rgba(148, 178, 255, .18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--glow-inner-top), var(--shadow-md);
}

body.has-fx .card--pricing .plan-name {
  color: rgba(235, 240, 255, .96);
}

body.has-fx .card--pricing .plan-desc {
  color: rgba(235, 240, 255, .66);
}

/* 价格数字：纯白 + 蓝光晕，深底下最高对比 */
body.has-fx .plan-price .num {
  color: #FFFFFF;
  text-shadow: 0 0 26px rgba(76, 130, 251, .40);
}

body.has-fx .plan-price .unit,
body.has-fx .plan-quota {
  color: rgba(235, 240, 255, .55);
}

body.has-fx .card--pricing-featured {
  background: rgba(23, 36, 64, .72);
  border-color: var(--border-accent);
  box-shadow: var(--glow-accent-md), var(--shadow-md);
}

body.has-fx .compare-wrap {
  background: rgba(12, 20, 40, .66);
  border-color: rgba(148, 178, 255, .16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* 粘性表头/首列：半透明会透出滚动内容，需近实底 */
body.has-fx .compare-table thead th,
body.has-fx .compare-table .th-group th {
  background: rgba(9, 15, 31, .94);
}

body.has-fx .compare-table tbody th[scope="row"] {
  background: rgba(13, 22, 44, .95);
}

body.has-fx .compare-table tbody tr:nth-child(odd) th[scope="row"] {
  background: rgba(10, 18, 36, .95);
}

body.has-fx .addon-card .price {
  color: var(--color-primary-300);
}

/* FAQ：提问行 hover 提亮（其余文字已被令牌覆盖） */
body.has-fx .faq__q:hover .faq__q-text {
  color: var(--color-text-primary);
}

/* --- 写死颜色的零散组件修正 --- */
body.has-fx .btn--moon:hover {
  background: rgba(235, 240, 255, .86);
}

body.has-fx .contour-ring circle {
  stroke: rgba(148, 178, 255, .16);
}

body.has-fx .funnel-l4 {
  background: rgba(148, 178, 255, .07);
}

/* 高对比模式：main.css 会把文字令牌改深（亮底适配），has-fx 下反向提亮 */
@media (prefers-contrast: more) {
  body.has-fx {
    --color-text-body: rgba(235, 240, 255, .94);
    --color-text-secondary: rgba(235, 240, 255, .82);
    --color-text-muted: rgba(235, 240, 255, .68);
    --border-hairline: rgba(148, 178, 255, .30);
    --border-interactive: rgba(109, 155, 255, .68);
  }
}

/* --- 选中态与滚动条 --- */
body.has-fx::selection,
body.has-fx ::selection {
  background: rgba(21, 93, 252, .55);
  color: #FFFFFF;
}

body.has-fx ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body.has-fx ::-webkit-scrollbar-track {
  background: #04060D;
}

body.has-fx ::-webkit-scrollbar-thumb {
  background: rgba(76, 130, 251, .28);
  border-radius: 6px;
  border: 2px solid #04060D;
}

body.has-fx ::-webkit-scrollbar-thumb:hover {
  background: rgba(76, 130, 251, .45);
}

/* ============================================================
   4. 新组件：.scifi-marquee —— 全宽发光无限滚动条幅
   用法：<div class="scifi-marquee"><div class="scifi-marquee__track">
   （track 内容需重复两遍以实现无缝循环）
   ============================================================ */
.scifi-marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-5, 20px);
  /* 极淡深底条带，让亮青文字从粒子上浮出来 */
  background: rgba(5, 9, 20, .42);
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(34, 211, 238, .5) 50%, transparent) 1;
}

.scifi-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: scifi-marquee-scroll 30s linear infinite;
  will-change: transform;
}

.scifi-marquee:hover .scifi-marquee__track {
  animation-play-state: paused;
}

@keyframes scifi-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.scifi-marquee__item {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-caption, 13px);
  font-weight: var(--fw-medium, 500);
  letter-spacing: var(--ls-widest, .22em);
  text-transform: uppercase;
  /* 亮青 + 微光晕，深空底下清晰可见 */
  color: rgba(154, 226, 255, .92);
  text-shadow: 0 0 14px rgba(34, 211, 238, .40);
  white-space: nowrap;
  padding-inline: var(--space-6, 24px);
}

/* 间隔圆点：青色发光 */
.scifi-marquee__item::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: var(--space-6, 24px);
  border-radius: 50%;
  background: #22D3EE;
  box-shadow: 0 0 8px rgba(34, 211, 238, .8);
  opacity: .8;
}

/* ============================================================
   5. 新组件：.svc-list —— 编辑排版编号清单
   用法：<div class="svc-list"><div class="svc-row">
     <span class="svc-row__no">01</span>
     <div class="svc-row__body"><h3>…</h3><p>…</p></div>
   ============================================================ */
.svc-list {
  border-top: 1px solid var(--border-hairline, rgba(148, 178, 255, .14));
}

.svc-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-6, 24px);
  padding-block: var(--space-7, 28px);
  border-bottom: 1px solid var(--border-hairline, rgba(148, 178, 255, .14));
  transition: background var(--dur-base, 260ms) var(--ease-out, ease),
    padding var(--dur-base, 260ms) var(--ease-out, ease);
}

.svc-row:hover {
  background: linear-gradient(90deg, rgba(34, 211, 238, .05), rgba(76, 130, 251, .06) 40%, transparent 85%);
}

.svc-row__no {
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
  color: rgba(148, 178, 255, .32);
  transition: color var(--dur-base, 260ms) var(--ease-out, ease),
    text-shadow var(--dur-base, 260ms) var(--ease-out, ease);
}

/* 支持描边数字的浏览器：空心描边更科幻 */
@supports ((-webkit-text-stroke: 1px #000)) {
  .svc-row__no {
    color: transparent;
    -webkit-text-stroke: 1px rgba(148, 178, 255, .40);
  }
}

.svc-row:hover .svc-row__no {
  color: #22D3EE;
  -webkit-text-stroke-color: rgba(34, 211, 238, .85);
  text-shadow: 0 0 18px rgba(34, 211, 238, .55);
}

.svc-row__body h3 {
  margin: 0;
  font-size: var(--fs-h3, 1.5rem);
  line-height: var(--lh-heading, 1.24);
  color: var(--color-text-primary, rgba(235, 240, 255, .96));
}

.svc-row__body p {
  margin: var(--space-2, 8px) 0 0;
  font-size: var(--fs-body-sm, .9375rem);
  color: var(--color-text-secondary, rgba(235, 240, 255, .64));
  max-width: var(--measure-body, 68ch);
}

@media (max-width: 767px) {
  .svc-row {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--space-4, 16px);
    padding-block: var(--space-6, 24px);
  }
}

/* ============================================================
   6. 新组件：#yj-chat-orb —— AI 营销总控悬浮对话球
   用法：<button id="yj-chat-orb" aria-label="AI 营销总控对话">
     <span class="yj-chat-orb__tip">AI 营销总控在线 · 点击对话</span>
   ============================================================ */
#yj-chat-orb {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--z-toast, 400);
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  background: linear-gradient(135deg, #4C82FB 0%, #155DFC 55%, #22D3EE 130%);
  box-shadow:
    0 0 0 1px rgba(109, 155, 255, .45),
    0 8px 28px rgba(21, 93, 252, .5),
    0 0 44px rgba(34, 211, 238, .28);
  transition: transform var(--dur-fast, 180ms) var(--ease-out, ease),
    box-shadow var(--dur-base, 260ms) var(--ease-out, ease);
}

#yj-chat-orb:hover {
  transform: scale(1.06);
  box-shadow:
    0 0 0 1px rgba(109, 155, 255, .6),
    0 10px 34px rgba(21, 93, 252, .62),
    0 0 60px rgba(34, 211, 238, .4);
}

#yj-chat-orb:active {
  transform: scale(.98);
}

#yj-chat-orb:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus, 0 0 0 4px #4C82FB),
    0 8px 28px rgba(21, 93, 252, .5);
}

/* 脉冲扩散环 */
#yj-chat-orb::before,
#yj-chat-orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(34, 211, 238, .55);
  animation: yj-orb-pulse 2.8s var(--ease-out, ease-out) infinite;
  pointer-events: none;
}

#yj-chat-orb::after {
  animation-delay: 1.4s;
}

@keyframes yj-orb-pulse {
  0% {
    transform: scale(1);
    opacity: .8;
  }

  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

/* 气泡提示：hover 显示；JS 也可加 .yj-chat-orb__tip--show 延迟弹出 */
.yj-chat-orb__tip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  font-size: var(--fs-caption, 13px);
  letter-spacing: .02em;
  color: rgba(235, 240, 255, .92);
  background: rgba(10, 18, 36, .88);
  border: 1px solid rgba(109, 155, 255, .35);
  border-radius: var(--radius-sm, 10px);
  padding: 8px 14px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 16px rgba(34, 211, 238, .12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-base, 260ms) var(--ease-out, ease),
    transform var(--dur-base, 260ms) var(--ease-out, ease),
    visibility var(--dur-base, 260ms);
}

/* 气泡小三角 */
.yj-chat-orb__tip::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: rgba(10, 18, 36, .88);
}

#yj-chat-orb:hover .yj-chat-orb__tip,
#yj-chat-orb:focus-visible .yj-chat-orb__tip,
.yj-chat-orb__tip--show {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* ============================================================
   7. 新组件：.fx-eyebrow / .fx-quote —— 科幻排版小件
   ============================================================ */
.fx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3, 12px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-wider, .14em);
  text-transform: uppercase;
  color: #22D3EE;
  margin-right: -0.14em;
  text-shadow: 0 0 12px rgba(34, 211, 238, .35);
}

/* 前置短线段 */
.fx-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #22D3EE);
  box-shadow: 0 0 8px rgba(34, 211, 238, .6);
}

.fx-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  line-height: var(--lh-snug, 1.45);
  color: rgba(235, 240, 255, .72);
  max-width: 30em;
}

.fx-quote strong,
.fx-quote em {
  color: rgba(235, 240, 255, .92);
}

/* ============================================================
   8. 减动效：关闭条幅滚动与脉冲环（fx3d.js 侧已只渲一帧）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .scifi-marquee__track {
    animation: none;
    transform: none;
  }

  #yj-chat-orb::before,
  #yj-chat-orb::after {
    animation: none;
    opacity: 0;
  }
}