/* Claude 卡密兑换页（/claude）新手引导：分章聚光引导 + 操作动画 + 情境提示 + 操作视频。
   由线上 customer-guide.ae0d28fa906a.css 分叉；只用 xjcg- 前缀，不覆盖页面原有样式。
   层级：全部低于 KYC 弹层（.claude-identity-backdrop z-index 10020）；页面原生 <dialog> 在 top layer，入口会在它打开时隐藏。 */
.xjcg-root,
.xjcg-launcher,
.xjcg-menu,
.xjcg-modal,
.xjcg-nudge,
.xjcg-ring,
.xjcg-nudge-fx,
.xjcg-invite {
  --xjcg-blue: #0071e3;
  --xjcg-grad: linear-gradient(135deg, #0a84ff 0%, #0071e3 100%);
  --xjcg-text: #1d1d1f;
  --xjcg-muted: #6e6e73;
  --xjcg-card: #ffffff;
  --xjcg-line: rgba(15, 23, 42, 0.1);
  --xjcg-soft: #e9f2fe;
  --xjcg-shade: rgba(8, 14, 28, 0.58);
  --xjcg-ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  letter-spacing: normal;
  text-transform: none;
}
.xjcg-root *,
.xjcg-launcher *,
.xjcg-menu *,
.xjcg-modal *,
.xjcg-nudge *,
.xjcg-invite * {
  box-sizing: border-box;
}

/* ---------- 聚光层 ---------- */
.xjcg-root {
  position: fixed;
  inset: 0;
  z-index: 10015;
  pointer-events: none;
}
/* 客户不理引导、自己在页面上操作：整层收起，只在入口上留「继续引导 n/t」 */
.xjcg-root.is-mini { display: none; }
.xjcg-shade {
  position: fixed;
  inset: 0;
  background: var(--xjcg-shade);
  opacity: 0;
  transition: opacity 240ms var(--xjcg-ease);
}
.xjcg-root.has-stage .xjcg-shade {
  background: transparent;
}
.xjcg-root.is-open .xjcg-shade {
  opacity: 1;
}
.xjcg-stage {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 16px;
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 6px rgba(10, 132, 255, 0.32),
    0 0 0 200vmax var(--xjcg-shade);
  opacity: 0;
  transition:
    top 320ms var(--xjcg-ease),
    left 320ms var(--xjcg-ease),
    width 320ms var(--xjcg-ease),
    height 320ms var(--xjcg-ease),
    opacity 200ms var(--xjcg-ease);
}
.xjcg-root.has-stage.is-open .xjcg-stage {
  opacity: 1;
}
.xjcg-stage::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  border: 2px solid rgba(10, 132, 255, 0.55);
  animation: xjcg-breathe 2.2s ease-in-out infinite;
}
@keyframes xjcg-breathe {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.012); }
}

/* ---------- 引导卡片 ---------- */
.xjcg-pop {
  position: fixed;
  width: 344px;
  max-width: calc(100vw - 24px);
  display: grid;
  gap: 10px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(10, 132, 255, 0.18);
  border-radius: 18px;
  background: var(--xjcg-card);
  color: var(--xjcg-text);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity 220ms var(--xjcg-ease), transform 260ms var(--xjcg-ease), top 320ms var(--xjcg-ease), left 320ms var(--xjcg-ease);
  outline: none;
  text-align: left;
}
.xjcg-root.is-open .xjcg-pop {
  opacity: 1;
  transform: none;
}
.xjcg-pop-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--xjcg-card);
  border: 1px solid rgba(10, 132, 255, 0.18);
  transform: rotate(45deg);
}
.xjcg-pop[data-side="bottom"] .xjcg-pop-arrow { top: -8px; border-right: 0; border-bottom: 0; }
.xjcg-pop[data-side="top"] .xjcg-pop-arrow { bottom: -8px; border-left: 0; border-top: 0; }
.xjcg-pop[data-side="sheet"] .xjcg-pop-arrow,
.xjcg-pop[data-side="sheet-top"] .xjcg-pop-arrow,
.xjcg-pop[data-side="center"] .xjcg-pop-arrow { display: none; }
.xjcg-pop-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.xjcg-progress {
  flex: none;
  border-radius: 999px;
  background: var(--xjcg-soft);
  color: var(--xjcg-blue);
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.xjcg-soon {
  display: none;
  flex: none;
  border: 1px dashed rgba(10, 132, 255, 0.45);
  border-radius: 999px;
  color: var(--xjcg-blue);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}
.xjcg-pop.is-soon .xjcg-soon { display: inline-block; }
.xjcg-dots {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.xjcg-dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #d2d2d7;
  transition: width 240ms var(--xjcg-ease), background 240ms var(--xjcg-ease);
}
.xjcg-dots i.is-on {
  width: 16px;
  background: var(--xjcg-blue);
}
.xjcg-pop h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--xjcg-text);
}
.xjcg-pop p {
  margin: 0;
  color: var(--xjcg-muted);
  font-size: 14px;
  line-height: 1.6;
}
.xjcg-pop p b {
  color: var(--xjcg-text);
  font-weight: 600;
}
.xjcg-pop p em {
  font-style: normal;
  color: var(--xjcg-blue);
}
.xjcg-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.xjcg-actions .xjcg-spacer {
  flex: 1;
}
.xjcg-btn {
  appearance: none;
  min-height: 36px;
  margin: 0;
  border: 1px solid var(--xjcg-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--xjcg-muted);
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms var(--xjcg-ease), background 160ms var(--xjcg-ease), box-shadow 160ms var(--xjcg-ease);
  white-space: nowrap;
}
.xjcg-btn:hover { background: #f5f5f7; }
.xjcg-btn:active { transform: scale(0.97); }
.xjcg-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.35);
}
.xjcg-btn.is-primary {
  border-color: transparent;
  background: var(--xjcg-grad);
  color: #ffffff;
}
.xjcg-btn.is-primary:hover { filter: brightness(1.05); background: var(--xjcg-grad); }
.xjcg-btn.is-ghost {
  border-color: transparent;
  background: transparent;
  padding: 0 6px;
}
.xjcg-btn.is-video {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: rgba(10, 132, 255, 0.25);
  color: var(--xjcg-blue);
  background: var(--xjcg-soft);
}

/* ---------- 操作动画（光标 / 涟漪 / 按键 / 下拉示意 / 勾选） ---------- */
.xjcg-fx {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.xjcg-nudge-fx .xjcg-fx { z-index: 10012; }
.xjcg-cursor {
  width: 30px;
  height: 30px;
  opacity: 0;
  filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.35));
}
.xjcg-ripple {
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 999px;
  border: 3px solid rgba(10, 132, 255, 0.9);
  background: rgba(10, 132, 255, 0.18);
  opacity: 0;
}
.xjcg-tap {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.28);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 6px 16px rgba(0, 113, 227, 0.35);
  opacity: 0;
}
.xjcg-keycap {
  display: flex;
  gap: 6px;
  opacity: 0;
}
.xjcg-keycap kbd {
  min-width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0 9px;
  border-radius: 9px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-bottom-width: 3px;
  background: #ffffff;
  color: var(--xjcg-text);
  font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}
.xjcg-chip {
  max-width: 260px;
  padding: 9px 12px;
  border-radius: 12px;
  background: #1d1d1f;
  color: #e8f3ff;
  font: 600 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.32);
  opacity: 0;
}
.xjcg-chip em {
  color: #8ec5ff;
  font-style: normal;
}
.xjcg-fill {
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(10, 132, 255, 0.05), rgba(10, 132, 255, 0.16), rgba(10, 132, 255, 0.05));
  background-size: 200% 100%;
  opacity: 0;
}
.xjcg-dropdown {
  min-width: 160px;
  max-width: 300px;
  padding: 6px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.24);
  opacity: 0;
  transform-origin: top left;
}
.xjcg-dropdown div {
  padding: 7px 10px;
  border-radius: 8px;
  color: #1d1d1f;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xjcg-dropdown div.is-pick {
  background: #0071e3;
  color: #ffffff;
}
.xjcg-bubble {
  padding: 6px 10px;
  border-radius: 10px;
  background: #0071e3;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0, 113, 227, 0.35);
  opacity: 0;
  white-space: nowrap;
}
.xjcg-tick {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #0071e3;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.25), 0 6px 14px rgba(0, 113, 227, 0.35);
  opacity: 0;
}

/* ---------- 右下角入口 ---------- */
.xjcg-launcher {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 10012;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin: 0;
  padding: 0 16px 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  color: var(--xjcg-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  cursor: pointer;
  transition: transform 200ms var(--xjcg-ease), box-shadow 200ms var(--xjcg-ease), opacity 200ms var(--xjcg-ease);
}
.xjcg-launcher:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22); }
.xjcg-launcher:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.4), 0 10px 30px rgba(15, 23, 42, 0.18); }
.xjcg-launcher.is-dodge {
  opacity: 0;
  transform: scale(0.88);
  pointer-events: none;
}
/* 原位压住页面控件时：贴到屏幕右边缘的 28×56 小标签（页面所有可点控件离右边缘至少 31px，压不到），不淡出 */
.xjcg-launcher.is-edge {
  right: env(safe-area-inset-right, 0px);
  width: 28px;
  height: 56px;
  padding: 0;
  gap: 0;
  justify-content: center;
  border-radius: 14px 0 0 14px;
  border-right: 0;
}
.xjcg-launcher.is-edge .xjcg-launcher-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.xjcg-launcher.is-edge .xjcg-launcher-icon { width: 22px; height: 22px; }
.xjcg-launcher.is-edge:hover { transform: none; }
/* 引导收成小胶囊：入口显示「继续引导 n/t」（手机圆钮上显示 n/t 角标） */
.xjcg-launcher.is-mini { border-color: rgba(10, 132, 255, 0.45); color: var(--xjcg-blue); }
.xjcg-launcher[data-badge]::after {
  content: attr(data-badge);
  position: absolute;
  top: -8px;
  left: -6px;
  min-width: 26px;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--xjcg-blue);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  display: none;
}
.xjcg-launcher.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.xjcg-launcher-icon {
  position: relative;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 999px;
  background: var(--xjcg-grad);
  color: #ffffff;
}
/* 新客户提示：只动 transform/opacity（合成器完成，不触发样式重算），播 5 轮就停 */
.xjcg-launcher.is-new .xjcg-launcher-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(10, 132, 255, 0.35);
  pointer-events: none;
  animation: xjcg-ping 2s var(--xjcg-ease) 5;
  opacity: 0;
}
@keyframes xjcg-ping {
  0% { opacity: 0.7; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.75); }
  100% { opacity: 0; transform: scale(1.75); }
}
.xjcg-menu {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: calc(max(24px, env(safe-area-inset-bottom)) + 54px);
  z-index: 10013;
  width: 280px;
  max-width: calc(100vw - 32px);
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--xjcg-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.98);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 180ms var(--xjcg-ease), transform 220ms var(--xjcg-ease), visibility 0s linear 220ms;
}
.xjcg-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 180ms var(--xjcg-ease), transform 220ms var(--xjcg-ease), visibility 0s;
}
.xjcg-menu button {
  appearance: none;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--xjcg-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* 作者样式 display:grid 会盖过 UA 的 [hidden]，这里显式隐藏（「卡住了？」项平时隐藏） */
.xjcg-menu button[hidden] { display: none; }
.xjcg-menu button:hover,
.xjcg-menu button:focus-visible {
  outline: none;
  background: #f5f5f7;
}
.xjcg-menu-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--xjcg-soft);
  color: var(--xjcg-blue);
}
.xjcg-menu strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.xjcg-menu span.xjcg-menu-sub {
  display: block;
  margin-top: 2px;
  color: var(--xjcg-muted);
  font-size: 12px;
}

/* ---------- 情境提示（卡在“账单已核对”时提示点继续） ---------- */
.xjcg-ring {
  position: fixed;
  z-index: 10009;
  pointer-events: none;
  border: 2px solid rgba(10, 132, 255, 0.9);
  border-radius: 14px;
  opacity: 0;
  transition: opacity 200ms var(--xjcg-ease);
}
.xjcg-ring.is-on {
  opacity: 1;
}
/* 外圈脉冲：伪元素只动 transform/opacity（不再每帧重算 box-shadow），播 6 轮后只留静态外圈 */
.xjcg-ring::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 3px solid rgba(10, 132, 255, 0.55);
  opacity: 0;
  pointer-events: none;
}
.xjcg-ring.is-on::after {
  animation: xjcg-pulse 1.6s ease-out 6;
}
@keyframes xjcg-pulse {
  0% { opacity: 0.9; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.08, 1.3); }
  100% { opacity: 0; transform: scale(1.08, 1.3); }
}
.xjcg-nudge {
  position: fixed;
  z-index: 10011;
  width: max-content;
  max-width: min(340px, calc(100vw - 24px));
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 8px 11px 12px;
  border: 1px solid rgba(10, 132, 255, 0.35);
  border-radius: 14px;
  background: var(--xjcg-card);
  color: var(--xjcg-text);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 220ms var(--xjcg-ease), transform 260ms var(--xjcg-ease), visibility 0s linear 260ms;
}
.xjcg-nudge.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 220ms var(--xjcg-ease), transform 260ms var(--xjcg-ease), visibility 0s;
}
.xjcg-nudge.is-dock { cursor: pointer; }
.xjcg-nudge-icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--xjcg-soft);
  color: var(--xjcg-blue);
}
.xjcg-nudge-body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.xjcg-nudge-text {
  min-width: 0;
  padding-top: 1px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.xjcg-nudge-text b {
  color: var(--xjcg-blue);
  font-weight: 700;
}
.xjcg-nudge-sub {
  min-width: 0;
  color: var(--xjcg-muted);
  font-size: 13px;
  line-height: 1.45;
}
/* 副行按 " · " 分段，段内不断行（不再出现“不会/重复付款”） */
.xjcg-nudge-sub .xjcg-nw { white-space: nowrap; }
/* 关闭键：看起来 26px，点击区 40px；与停靠时的“定位”区隔开 */
.xjcg-nudge-close {
  appearance: none;
  flex: none;
  width: 40px;
  height: 40px;
  margin: -9px -6px -9px 2px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--xjcg-muted);
  cursor: pointer;
}
.xjcg-nudge-close:hover { background: rgba(15, 23, 42, 0.06); }
.xjcg-nudge-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.35); }
.xjcg-nudge-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--xjcg-card);
  border: 1px solid rgba(10, 132, 255, 0.35);
  transform: rotate(45deg);
}
.xjcg-nudge[data-side="right"] .xjcg-nudge-arrow { left: -7px; border-right: 0; border-top: 0; }
.xjcg-nudge[data-side="top"] .xjcg-nudge-arrow { bottom: -7px; border-left: 0; border-top: 0; }
.xjcg-nudge[data-side="bottom"] .xjcg-nudge-arrow { top: -7px; border-right: 0; border-bottom: 0; }
.xjcg-nudge[data-side="after"] .xjcg-nudge-arrow { display: none; }
.xjcg-nudge.is-dock .xjcg-nudge-arrow { display: none; }
/* 停靠态（按钮在屏幕外）：实心蓝底白字的条，主行 16px，副行是看得见的“点这里跳到按钮” */
.xjcg-nudge.is-dock {
  /* 桌面停靠条放宽，主行（含长按钮名）尽量一行放下，不在按钮名中间断行 */
  max-width: min(480px, calc(100vw - 24px));
  border-color: transparent;
  background: var(--xjcg-grad);
  color: #ffffff;
  box-shadow: 0 16px 40px rgba(0, 113, 227, 0.42);
}
.xjcg-nudge.is-dock .xjcg-nudge-text { font-size: 16px; font-weight: 700; }
.xjcg-nudge.is-dock .xjcg-nudge-text b { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.xjcg-nudge.is-dock .xjcg-nudge-sub { color: rgba(255, 255, 255, 0.92); }
.xjcg-nudge.is-dock .xjcg-nudge-icon { background: rgba(255, 255, 255, 0.22); color: #ffffff; }
.xjcg-nudge.is-dock .xjcg-nudge-close { color: rgba(255, 255, 255, 0.92); margin-left: 8px; }
.xjcg-nudge.is-dock .xjcg-nudge-close:hover { background: rgba(255, 255, 255, 0.16); }
.xjcg-nudge-text[role="button"] { cursor: pointer; border-radius: 6px; }
.xjcg-nudge-text[role="button"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.35); }
.xjcg-nudge-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 小邀请（空白页“第一次用？”/ 跳过后的“要我带你粘贴 SK 吗？”）：不压暗页面 ---------- */
.xjcg-invite {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: calc(max(24px, env(safe-area-inset-bottom)) + 56px);
  z-index: 10013;
  width: 320px;
  max-width: calc(100vw - 32px);
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(10, 132, 255, 0.25);
  border-radius: 16px;
  background: var(--xjcg-card);
  color: var(--xjcg-text);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.24);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 200ms var(--xjcg-ease), transform 240ms var(--xjcg-ease), visibility 0s linear 240ms;
}
.xjcg-invite.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 200ms var(--xjcg-ease), transform 240ms var(--xjcg-ease), visibility 0s;
}
.xjcg-invite p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--xjcg-text);
}
.xjcg-invite .xjcg-actions { flex-wrap: wrap; }

/* ---------- 操作视频弹窗 ---------- */
.xjcg-modal {
  position: fixed;
  inset: 0;
  z-index: 10018;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(8, 14, 28, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 220ms var(--xjcg-ease);
}
.xjcg-modal.is-open { opacity: 1; }
.xjcg-modal-card {
  width: min(960px, 100%);
  max-height: calc(100vh - 40px);
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 22px;
  background: var(--xjcg-card);
  color: var(--xjcg-text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  transform: translateY(10px) scale(0.98);
  transition: transform 280ms var(--xjcg-ease);
  outline: none;
  text-align: left;
}
.xjcg-modal.is-open .xjcg-modal-card { transform: none; }
.xjcg-modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 0;
}
.xjcg-modal-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--xjcg-text);
}
.xjcg-modal-head span {
  color: var(--xjcg-muted);
  font-size: 13px;
}
.xjcg-close {
  appearance: none;
  margin: 0 0 0 auto;
  padding: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #f2f2f7;
  color: var(--xjcg-muted);
  cursor: pointer;
}
.xjcg-close:hover { background: #e8e8ed; }
.xjcg-close:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.35); }
.xjcg-video-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #000000;
  aspect-ratio: 16 / 9;
}
.xjcg-video-wrap video {
  display: block;
  width: 100%;
  height: 100%;
  background: #000000;
}
.xjcg-video-fail {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 24px;
  color: #f5f5f7;
  font-size: 14px;
  text-align: center;
  background: rgba(0, 0, 0, 0.72);
}
.xjcg-modal-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px 2px;
  color: var(--xjcg-muted);
  font-size: 13px;
}
.xjcg-modal-foot .xjcg-spacer { flex: 1; }

/* ---------- 手机：引导卡片改底部抽屉，入口改 44px 圆钮 ---------- */
@media (max-width: 599px) {
  .xjcg-pop[data-side="sheet"] {
    left: 12px !important;
    right: 12px;
    width: auto;
    max-width: none;
    bottom: calc(12px + env(safe-area-inset-bottom));
    top: auto !important;
    max-height: 52vh;
    overflow: auto;
  }
  .xjcg-pop[data-side="sheet-top"] {
    left: 12px !important;
    right: 12px;
    width: auto;
    max-width: none;
    top: max(12px, env(safe-area-inset-top)) !important;
    bottom: auto;
    max-height: 52vh;
    overflow: auto;
  }
  .xjcg-pop h3 { font-size: 16px; }
  .xjcg-actions { flex-wrap: wrap; }
  /* 长译文把抽屉撑到要滚动时，按钮行仍贴在抽屉底部可见 */
  .xjcg-pop[data-side^="sheet"] .xjcg-actions {
    position: sticky;
    bottom: -14px;
    margin: 0 -16px -14px;
    padding: 8px 16px 14px;
    background: var(--xjcg-card);
  }
  .xjcg-launcher {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .xjcg-launcher-icon { width: 32px; height: 32px; }
  .xjcg-launcher[data-badge]::after { display: block; }
  .xjcg-launcher.is-edge {
    right: env(safe-area-inset-right, 0px);
    width: 28px;
    height: 56px;
    border-radius: 14px 0 0 14px;
  }
  .xjcg-launcher.is-edge .xjcg-launcher-icon { width: 22px; height: 22px; }
  .xjcg-invite {
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
    bottom: calc(16px + env(safe-area-inset-bottom) + 56px);
  }
  .xjcg-launcher-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .xjcg-menu {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom) + 54px);
  }
  .xjcg-nudge {
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
  }
  /* 手机停靠条：铺满宽度，只给右边缘的入口小标签（28px）留出位置；关闭键浮在右上角，正文更宽、行数更少 */
  .xjcg-nudge.is-dock {
    left: 12px;
    right: 36px;
    padding: 10px 44px 10px 12px;
    gap: 8px;
  }
  .xjcg-nudge.is-dock .xjcg-nudge-close {
    position: absolute;
    top: 2px;
    right: 2px;
    margin: 0;
  }
  .xjcg-nudge.is-dock .xjcg-nudge-icon { width: 20px; height: 20px; }
  .xjcg-nudge[data-dock="below"] {
    top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .xjcg-modal { padding: 10px; }
  .xjcg-modal-card { padding: 10px; border-radius: 18px; }
  .xjcg-modal-foot { flex-wrap: wrap; }
}

/* ---------- 深色（跟随系统，与页面一致） ---------- */
@media (prefers-color-scheme: dark) {
  .xjcg-root,
  .xjcg-launcher,
  .xjcg-menu,
  .xjcg-modal,
  .xjcg-nudge,
  .xjcg-ring,
  .xjcg-nudge-fx,
  .xjcg-invite {
    --xjcg-text: #f5f5f7;
    --xjcg-muted: #a1a1a6;
    --xjcg-card: #1c1c1e;
    --xjcg-line: rgba(255, 255, 255, 0.12);
    --xjcg-soft: rgba(10, 132, 255, 0.18);
    --xjcg-blue: #4da3ff;
    --xjcg-shade: rgba(0, 0, 0, 0.66);
  }
  .xjcg-stage { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 0 6px rgba(10, 132, 255, 0.4), 0 0 0 200vmax var(--xjcg-shade); }
  .xjcg-pop, .xjcg-pop-arrow { border-color: rgba(77, 163, 255, 0.28); }
  .xjcg-btn { background: #2c2c2e; }
  .xjcg-btn:hover { background: #3a3a3c; }
  .xjcg-btn.is-ghost { background: transparent; }
  .xjcg-launcher { background: rgba(44, 44, 46, 0.86); border-color: rgba(255, 255, 255, 0.12); }
  .xjcg-menu { background: rgba(28, 28, 30, 0.97); }
  .xjcg-menu button:hover, .xjcg-menu button:focus-visible { background: #2c2c2e; }
  .xjcg-close { background: #2c2c2e; }
  .xjcg-close:hover { background: #3a3a3c; }
  .xjcg-dots i { background: #48484a; }
  .xjcg-dropdown { background: #2c2c2e; border-color: rgba(255, 255, 255, 0.12); }
  .xjcg-dropdown div { color: #f5f5f7; }
  .xjcg-keycap kbd { background: #2c2c2e; color: #f5f5f7; border-color: rgba(255, 255, 255, 0.18); }
  .xjcg-chip { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 14px 30px rgba(0, 0, 0, 0.5); }
  .xjcg-nudge { border-color: rgba(77, 163, 255, 0.45); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }
  .xjcg-nudge.is-dock { border-color: transparent; }
  .xjcg-invite { border-color: rgba(77, 163, 255, 0.35); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5); }
  .xjcg-nudge-close:hover { background: rgba(255, 255, 255, 0.08); }
}

@media (prefers-reduced-motion: reduce) {
  .xjcg-stage, .xjcg-pop, .xjcg-menu, .xjcg-modal, .xjcg-modal-card, .xjcg-nudge, .xjcg-launcher, .xjcg-invite { transition: none; }
  .xjcg-stage::after, .xjcg-launcher.is-new .xjcg-launcher-icon::after, .xjcg-ring.is-on::after { animation: none; }
  .xjcg-ring.is-on { box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.3); }
}