/**
 * VIP 功能锁定覆盖样式 — 「天机」付费墙设计体系 v5
 * 配合 utils/vipGate.js 使用
 *
 * 核心设计理念（爆款产品 · 顶级IP）：
 *   ① 折叠式标题栏 — VIP内容不渲染，只保留标题+VIP徽章，极致紧凑
 *   ② 零空白 — 不使用模糊/遮罩，杜绝「大片白色空洞」
 *   ③ 品牌化徽章 — 精致渐变胶囊按钮，自带微光动画
 *   ④ 有序节奏 — 折叠栏之间形成清晰的信息层级
 *   ⑤ 顶级质感 — 每个元素都经过设计打磨
 */

/* ====== 设计 Tokens ====== */
:root {
  --vg-purple: #6C5CE7;
  --vg-purple-light: #A29BFE;
  --vg-purple-soft: rgba(108, 92, 231, 0.06);
  --vg-purple-border: rgba(108, 92, 231, 0.12);
  --vg-purple-glow: rgba(108, 92, 231, 0.15);

  --vg-gold: #E8A006;
  --vg-gold-light: #F1C40F;
  --vg-gold-soft: rgba(232, 160, 6, 0.06);
  --vg-gold-border: rgba(232, 160, 6, 0.12);
  --vg-gold-glow: rgba(232, 160, 6, 0.15);

  --vg-text-primary: #1a1a2e;
  --vg-text-secondary: #636e83;
  --vg-text-muted: #9ba3b5;
  --vg-radius: 14px;
  --vg-radius-sm: 10px;
  --vg-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ====================================================================
   1. 折叠式标题栏 — .vg-collapse-bar
   VIP内容折叠后的核心展示组件
   左侧：图标+标题   右侧：VIP徽章按钮
   ==================================================================== */

.vg-collapsed {
  /* 被折叠的容器完全重置 — 确保所有折叠栏大小宽度一致 */
  overflow: hidden !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.vg-collapse-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 16px 22px;
  background: linear-gradient(135deg,
    rgba(250, 249, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.95) 40%,
    rgba(248, 246, 255, 0.98) 100%);
  border-radius: var(--vg-radius);
  border: 1px solid rgba(108, 92, 231, 0.10);
  border-left: 3px solid var(--vg-purple);
  position: relative;
  overflow: hidden;
  animation: vg-slide-in 0.35s var(--vg-ease) both;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.04);
}

.vg-collapse-bar:hover {
  border-color: rgba(108, 92, 231, 0.18);
  border-left-color: var(--vg-purple);
  box-shadow: 0 4px 16px rgba(108, 92, 231, 0.10);
  transform: translateY(-1px);
}

/* 折叠栏微光背景 */
.vg-collapse-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(108, 92, 231, 0.03) 0%,
    transparent 30%);
  pointer-events: none;
}

/* 折叠栏底部柔和分割线渐变 */
.vg-collapse-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(108, 92, 231, 0.08),
    transparent);
}

/* 标题区域 */
.vg-collapse-bar__title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.vg-collapse-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(108, 92, 231, 0.08);
}

.vg-collapse-bar__icon i {
  font-size: 14px;
  color: var(--vg-purple);
  opacity: 0.85;
}

.vg-collapse-bar__icon .vg-title-emoji {
  font-size: 14px;
  line-height: 1;
}

.vg-collapse-bar__text {
  font-size: 14px;
  font-weight: 600;
  color: var(--vg-text-primary);
  font-family: 'Noto Serif SC', serif;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ====================================================================
   2. VIP徽章按钮 — .vg-badge
   精致的渐变胶囊，带微光动画
   ==================================================================== */

.vg-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px 6px 10px;
  border: none;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--vg-ease);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.3px;
}

.vg-badge:active { transform: scale(0.96); }

/* 玄机徽章 — 紫色系 */
.vg-badge--xuanji {
  background: linear-gradient(135deg, var(--vg-purple) 0%, var(--vg-purple-light) 100%);
  color: #fff;
  box-shadow:
    0 2px 8px rgba(108, 92, 231, 0.25),
    0 0 0 1px rgba(108, 92, 231, 0.1);
}
.vg-badge--xuanji:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 16px rgba(108, 92, 231, 0.35),
    0 0 0 1px rgba(108, 92, 231, 0.15);
}

/* 天机徽章 — 金色系 */
.vg-badge--tianji {
  background: linear-gradient(135deg, var(--vg-gold) 0%, #d4920a 100%);
  color: #fff;
  box-shadow:
    0 2px 8px rgba(232, 160, 6, 0.25),
    0 0 0 1px rgba(232, 160, 6, 0.1);
}
.vg-badge--tianji:hover {
  transform: translateY(-1px);
  box-shadow:
    0 4px 16px rgba(232, 160, 6, 0.35),
    0 0 0 1px rgba(232, 160, 6, 0.15);
}

/* 徽章图标 */
.vg-badge__icon {
  font-size: 13px;
  line-height: 1;
  opacity: 0.9;
}
.vg-badge--tianji .vg-badge__icon {
  font-size: 14px;
  opacity: 1;
  filter: drop-shadow(0 0 3px rgba(255,215,0,0.4));
  animation: vg-crown-shimmer 2.5s ease-in-out infinite;
}
@keyframes vg-crown-shimmer {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255,215,0,0.3)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 6px rgba(255,215,0,0.7)); transform: scale(1.1); }
}

/* 徽章文字 */
.vg-badge__text {
  font-size: 11px;
  line-height: 1;
}

/* 徽章箭头 */
.vg-badge__arrow {
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
  transition: transform 0.25s ease;
}
.vg-badge:hover .vg-badge__arrow {
  transform: translateX(2px);
  opacity: 1;
}

/* 徽章微光动画 */
.vg-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: vg-badge-shine 4s ease-in-out infinite;
}

@keyframes vg-badge-shine {
  0%, 80%, 100% { left: -100%; }
  40% { left: 200%; }
}

/* ====================================================================
   3. AI 按钮/区域锁 — .vg-ai-lock
   居中展示的极简品牌卡片
   ==================================================================== */

.vg-ai-lock {
  border-radius: var(--vg-radius);
  overflow: hidden;
  animation: vg-pop-in 0.45s var(--vg-ease) both;
}

.vg-ai-lock--xuanji {
  background: linear-gradient(160deg,
    rgba(248, 246, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(248, 246, 255, 0.8) 100%);
  border: 1px solid var(--vg-purple-border);
  box-shadow: 0 2px 16px rgba(108, 92, 231, 0.04);
}

.vg-ai-lock--tianji {
  background: linear-gradient(160deg,
    rgba(255, 252, 245, 0.85) 0%,
    rgba(255, 255, 255, 0.70) 50%,
    rgba(255, 252, 245, 0.85) 100%);
  border: 1px solid var(--vg-gold-border);
  box-shadow: 0 2px 16px rgba(232, 160, 6, 0.06);
}

.vg-ai-lock--area { padding: 0 !important; margin-top: 8px; }

.vg-ai-lock-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 24px 24px;
  text-align: center;
}

/* 图标光环 */
.vg-ai-lock-icon-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.vg-ai-lock--xuanji .vg-ai-lock-icon-ring {
  background: linear-gradient(135deg, rgba(108,92,231,0.12), rgba(162,155,254,0.06));
  box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.04), 0 2px 10px rgba(108, 92, 231, 0.08);
}
.vg-ai-lock--tianji .vg-ai-lock-icon-ring {
  background: linear-gradient(135deg, rgba(232,160,6,0.12), rgba(241,196,15,0.06));
  box-shadow: 0 0 0 4px rgba(232, 160, 6, 0.04), 0 2px 10px rgba(232, 160, 6, 0.08);
}

.vg-ai-lock-icon { font-size: 20px; line-height: 1; }
.vg-ai-lock-icon i { font-size: 20px; }
.vg-ai-lock--xuanji .vg-ai-lock-icon i { color: var(--vg-purple); }
.vg-ai-lock--tianji .vg-ai-lock-icon i { color: var(--vg-gold); }

.vg-ai-lock-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--vg-text-primary);
  font-family: 'Noto Serif SC', serif;
  letter-spacing: 0.8px;
}

.vg-ai-lock-desc {
  font-size: 12px;
  color: var(--vg-text-muted);
  max-width: 260px;
  line-height: 1.5;
  margin-bottom: 2px;
}

/* 功能亮点标签 */
.vg-ai-lock-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 8px;
}

.vg-ai-lock-feature {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 14px;
}

.vg-ai-lock--xuanji .vg-ai-lock-feature {
  color: #5a4bc7;
  background: rgba(108, 92, 231, 0.05);
  border: 1px solid rgba(108, 92, 231, 0.08);
}
.vg-ai-lock--tianji .vg-ai-lock-feature {
  color: #9a7209;
  background: rgba(232, 160, 6, 0.05);
  border: 1px solid rgba(232, 160, 6, 0.08);
}
.vg-ai-lock-feature i { font-size: 12px; }
.vg-ai-lock--xuanji .vg-ai-lock-feature i { color: var(--vg-purple); }
.vg-ai-lock--tianji .vg-ai-lock-feature i { color: var(--vg-gold); }

/* 操作按钮区 */
.vg-ai-lock-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  width: 100%;
  max-width: 300px;
}

/* ====================================================================
   4. AI输入框锁 — .vg-input-lock
   ==================================================================== */

.vg-input-lock { animation: vg-pop-in 0.4s var(--vg-ease) both; }

.vg-input-lock-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg,
    rgba(232, 160, 6, 0.04) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(241, 196, 15, 0.03) 100%);
  border: 1px solid var(--vg-gold-border);
  border-radius: var(--vg-radius);
}

.vg-input-lock-icon {
  font-size: 16px;
  color: var(--vg-gold);
  flex-shrink: 0;
}

.vg-input-lock-text {
  flex: 1;
  font-size: 12px;
  color: var(--vg-text-secondary);
  font-weight: 500;
}

.vg-input-lock-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ====================================================================
   5. 通用CTA按钮组件
   ==================================================================== */

/* 内联CTA按钮（用于输入框锁等场景） */
.vg-inline-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 14px;
  border: none;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s var(--vg-ease);
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.vg-inline-cta__btn:active { transform: scale(0.95); }
.vg-inline-cta__btn:hover { transform: translateY(-1px); }

.vg-inline-cta__btn--xuanji {
  background: linear-gradient(135deg, var(--vg-purple), var(--vg-purple-light));
  color: #fff;
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.3);
}
.vg-inline-cta__btn--tianji {
  background: linear-gradient(135deg, var(--vg-gold), #d4920a);
  color: #fff;
  box-shadow: 0 2px 8px rgba(232, 160, 6, 0.3);
}
.vg-inline-cta__btn--ppu {
  background: rgba(255, 255, 255, 0.65);
  color: var(--vg-text-secondary);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* 品牌CTA按钮 */
.vg-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 14px;
  border: none;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s var(--vg-ease);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  flex: 1;
}
.vg-cta-btn:active { transform: scale(0.95); }
.vg-cta-btn:hover { transform: translateY(-1px); }

.vg-cta-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 200%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transition: left 0.5s ease;
}
.vg-cta-btn:hover::after { left: 100%; }

.vg-cta-btn--xuanji {
  background: linear-gradient(135deg, var(--vg-purple), var(--vg-purple-light));
  color: #fff;
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.25);
}
.vg-cta-btn--xuanji:hover { box-shadow: 0 4px 14px rgba(108, 92, 231, 0.35); }

.vg-cta-btn--tianji {
  background: linear-gradient(135deg, var(--vg-gold), #d4920a);
  color: #fff;
  box-shadow: 0 2px 8px rgba(232, 160, 6, 0.25);
}
.vg-cta-btn--tianji:hover { box-shadow: 0 4px 14px rgba(232, 160, 6, 0.35); }

.vg-cta-btn--ppu {
  background: rgba(255, 255, 255, 0.55);
  color: var(--vg-text-secondary);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.vg-cta-btn--sm { padding: 5px 12px; font-size: 10px; }

/* ====================================================================
   6. 隐藏被锁定的原始元素
   ==================================================================== */

.vg-ai-locked { display: none !important; }

/* ====================================================================
   7. 表格列遮盖
   ==================================================================== */

.paipan-table td.vg-col-blur,
.paipan-table thead th.vg-col-blur {
  position: relative;
  user-select: none;
  pointer-events: none;
  filter: blur(8px) saturate(0.3);
  opacity: 0.06;
  transition: filter 0.5s ease, opacity 0.5s ease;
}

.vg-col-overlay {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 0 0 4px 4px;
}

.vg-col-overlay--xuanji {
  background: linear-gradient(180deg,
    rgba(248, 246, 255, 0.92) 0%,
    rgba(250, 248, 255, 0.96) 50%,
    rgba(252, 250, 255, 0.98) 100%);
}
.vg-col-overlay--tianji {
  background: linear-gradient(180deg,
    rgba(255, 252, 245, 0.92) 0%,
    rgba(255, 254, 250, 0.96) 50%,
    rgba(255, 255, 252, 0.98) 100%);
}

.vg-col-overlay:hover {
  backdrop-filter: blur(20px) saturate(1.4);
}

.vg-col-overlay-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  animation: vg-pop-in 0.4s var(--vg-ease) both;
}
.vg-col-overlay--xuanji .vg-col-overlay-text { color: var(--vg-purple); }
.vg-col-overlay--tianji .vg-col-overlay-text { color: var(--vg-gold); }

.vg-col-overlay-text i {
  font-size: 14px;
  writing-mode: horizontal-tb;
  animation: vg-pulse-soft 2.5s ease-in-out infinite;
}

/* ====================================================================
   8. 常驻VIP提示条 — .vg-permanent-hint
   ==================================================================== */

.vg-permanent-hint {
  margin-top: 4px;
  margin-bottom: 12px;
  border-radius: var(--vg-radius-sm);
  overflow: hidden;
  animation: vg-pop-in 0.4s var(--vg-ease) both;
}

.vg-permanent-hint--xuanji {
  background: linear-gradient(135deg, rgba(108,92,231,0.08), rgba(162,155,254,0.12));
  border: 1px solid rgba(108, 92, 231, 0.18);
}
.vg-permanent-hint--tianji {
  background: linear-gradient(135deg, rgba(232,160,6,0.08), rgba(241,196,15,0.12));
  border: 1px solid rgba(232, 160, 6, 0.18);
}

.vg-perm-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}

.vg-perm-icon {
  font-size: 18px;
  flex-shrink: 0;
  opacity: 0.9;
}
.vg-permanent-hint--xuanji .vg-perm-icon { color: var(--vg-purple); }
.vg-permanent-hint--tianji .vg-perm-icon { color: var(--vg-gold); }

.vg-perm-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--vg-text-secondary);
  line-height: 1.4;
}
.vg-perm-text strong {
  font-weight: 700;
  color: var(--vg-text-primary);
}

/* ====================================================================
   9. 动画
   ==================================================================== */

@keyframes vg-slide-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes vg-pop-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes vg-pulse-soft {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* ====================================================================
   10. 响应式适配
   ==================================================================== */

@media (max-width: 640px) {
  /* 折叠栏紧凑化 */
  .vg-collapse-bar {
    padding: 12px 14px 12px 18px;
    gap: 8px;
  }
  .vg-collapse-bar__text { font-size: 13px; }
  .vg-collapse-bar__icon { width: 22px; height: 22px; border-radius: 6px; }
  .vg-collapse-bar__icon i { font-size: 12px; }
  .vg-badge {
    padding: 5px 10px 5px 8px;
    font-size: 10px;
  }
  .vg-badge__icon { font-size: 12px; }
  .vg-badge__arrow { font-size: 12px; }

  /* AI锁紧凑化 */
  .vg-ai-lock-inner { padding: 20px 16px 18px; gap: 6px; }
  .vg-ai-lock-icon-ring { width: 38px; height: 38px; }
  .vg-ai-lock-icon i { font-size: 17px; }
  .vg-ai-lock-title { font-size: 14px; }
  .vg-ai-lock-actions { flex-direction: row; gap: 8px; max-width: 100%; }
  .vg-ai-lock-actions .vg-cta-btn { flex: 1; }

  /* 输入框锁紧凑化 */
  .vg-input-lock-inner { padding: 10px 12px; gap: 8px; }
  .vg-input-lock-actions { flex-direction: column; gap: 3px; }

  /* 列覆盖 */
  .vg-col-overlay-text { font-size: 9px; gap: 4px; letter-spacing: 2px; }
  .vg-col-overlay-text i { font-size: 12px; }

  /* 常驻提示 */
  .vg-perm-inner { gap: 8px; padding: 8px 12px; }
  .vg-perm-text { font-size: 11px; }
}

@media (max-width: 380px) {
  .vg-collapse-bar { padding: 10px 10px 10px 16px; }
  .vg-collapse-bar__text { font-size: 12px; }
  .vg-badge { padding: 4px 8px 4px 6px; gap: 3px; }
  .vg-badge__text { font-size: 10px; }

  .vg-ai-lock-icon-ring { width: 32px; height: 32px; }
  .vg-ai-lock-title { font-size: 12px; }
  .vg-cta-btn { font-size: 10px; padding: 5px 10px; }
}

/* ====================================================================
   11. 通用积分余额提示 — .vg-credits-hint
   ==================================================================== */

.vg-credits-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
  padding: 6px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(243, 156, 18, 0.08), rgba(241, 196, 15, 0.04));
  border: 1px solid rgba(243, 156, 18, 0.12);
  font-size: 12px;
  font-weight: 500;
  color: var(--vg-gold);
  animation: vg-pop-in 0.4s var(--vg-ease) both;
}

.vg-credits-hint i {
  font-size: 14px;
  color: #F39C12;
}

.vg-credits-hint strong {
  font-size: 14px;
  font-weight: 800;
  color: #F39C12;
}

/* ====================================================================
   12. 积分模式 — 「使用积分」按钮样式
   购买积分后锁定组件切换为可操作的积分使用模式
   ==================================================================== */

/* 积分模式下的锁定卡片微调 */
.vg-ai-lock.vg-has-credits {
  border-color: rgba(243, 156, 18, 0.2);
  background: linear-gradient(160deg,
    rgba(255, 252, 245, 0.9) 0%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 252, 245, 0.9) 100%);
}

.vg-input-lock.vg-has-credits .vg-input-lock-inner {
  border-color: rgba(243, 156, 18, 0.18);
  background: linear-gradient(135deg,
    rgba(243, 156, 18, 0.06) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(241, 196, 15, 0.04) 100%);
}

/* 「使用积分」主按钮 — 品牌卡片中的大按钮 */
.vg-cta-btn--credit-use {
  background: linear-gradient(135deg, #F39C12, #F1C40F) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(243, 156, 18, 0.35);
  font-size: 13px !important;
  font-weight: 700;
  padding: 10px 20px !important;
  animation: vg-credit-btn-pulse 2s ease-in-out infinite;
}

.vg-cta-btn--credit-use:hover {
  box-shadow: 0 6px 24px rgba(243, 156, 18, 0.45) !important;
  transform: translateY(-2px) !important;
}

.vg-cta-btn--credit-use:active {
  transform: scale(0.97) !important;
}

.vg-cta-btn--credit-use i {
  font-size: 16px;
}

@keyframes vg-credit-btn-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(243, 156, 18, 0.35); }
  50% { box-shadow: 0 4px 24px rgba(243, 156, 18, 0.55); }
}

/* 「使用积分」内联按钮 — 输入框锁中的小按钮 */
.vg-inline-cta__btn--credit-use {
  background: linear-gradient(135deg, #F39C12, #F1C40F) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
  padding: 5px 14px;
  font-weight: 700;
}

.vg-inline-cta__btn--credit-use:hover {
  box-shadow: 0 4px 14px rgba(243, 156, 18, 0.4) !important;
}