/* ==========================================================================
   AI 数字员工 · 紫色主题（仅 digital-employee.html 加载）
   --------------------------------------------------------------------------
   色号来源：SuperAISystem / ai-bot-ui / src
     · styles/global.less  gradient-bar-purple  → purple-500 #a855f7 / purple-600 #9333ea
     · theme/default.ts    background  #0a0a0f
                           surface     #1a0f2e   surfaceDarker #0f0a1f
                           techGradient #1e1b4b → #312e81 → #4c1d95
                           accent      #ec4899（点缀粉，仅用于背景光晕）
                           text        #e5e7eb / #d1d5db / #9ca3af
   ========================================================================== */

:root {
  --primary: #a855f7;          /* purple-500 主色 */
  --primary-strong: #c084fc;   /* purple-400 主色浅档 */
  --accent: #c084fc;           /* 强调色（浅紫） */
  --bg: #0a0a0f;
  --bg-soft: #0f0a1f;
  --panel: rgba(26, 15, 46, 0.86);          /* #1a0f2e */
  --panel-border: rgba(168, 85, 247, 0.2);
  --text: #e5e7eb;
  --text-soft: #a9a3bd;
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.45);

  --body-bg: radial-gradient(circle at top left, rgba(168, 85, 247, 0.22), transparent 34%),
             radial-gradient(circle at top right, rgba(236, 72, 153, 0.12), transparent 26%),
             linear-gradient(180deg, #0a0a0f 0%, #150c28 50%, #0a0a0f 100%);
  --header-bg: rgba(10, 10, 15, 0.78);
  --border-color: rgba(168, 85, 247, 0.12);
  --eyebrow-bg: rgba(168, 85, 247, 0.14);
  --btn-secondary-bg: rgba(168, 85, 247, 0.08);
  --panel-divider: rgba(168, 85, 247, 0.12);
  --slider-btn-bg: rgba(168, 85, 247, 0.16);
  --slider-btn-border: rgba(168, 85, 247, 0.28);
  --dot-bg: rgba(168, 85, 247, 0.28);
  --dot-hover: rgba(168, 85, 247, 0.6);
  --img-border: rgba(168, 85, 247, 0.16);
  --img-bg: rgba(168, 85, 247, 0.04);
  --muted-bg: rgba(168, 85, 247, 0.05);

  /* 公共数据条渐变改为紫粉，与首页的蓝紫渐变区分 */
  --home-title-gradient: linear-gradient(120deg, #a855f7 0%, #c084fc 55%, #ec4899 100%);
}

[data-theme="light"] {
  --primary: #9333ea;          /* purple-600，浅色模式下保证对比度 */
  --primary-strong: #a855f7;
  --accent: #7e22ce;
  --bg: #f8f6fc;
  --bg-soft: #f3edfd;
  --panel: rgba(255, 255, 255, 0.95);
  --panel-border: rgba(147, 51, 234, 0.14);
  --text: #1f2937;
  --text-soft: #565070;
  --shadow: 0 20px 40px rgba(147, 51, 234, 0.08);

  --body-bg: radial-gradient(circle at top left, rgba(168, 85, 247, 0.1), transparent 34%),
             radial-gradient(circle at top right, rgba(236, 72, 153, 0.06), transparent 26%),
             linear-gradient(180deg, #f8f6fc 0%, #f3edfd 100%);
  --header-bg: rgba(248, 246, 252, 0.88);
  --border-color: rgba(147, 51, 234, 0.1);
  --eyebrow-bg: rgba(147, 51, 234, 0.1);
  --btn-secondary-bg: rgba(147, 51, 234, 0.06);
  --panel-divider: rgba(147, 51, 234, 0.1);
  --slider-btn-bg: rgba(255, 255, 255, 0.9);
  --slider-btn-border: rgba(147, 51, 234, 0.2);
  --dot-bg: rgba(147, 51, 234, 0.2);
  --dot-hover: rgba(147, 51, 234, 0.45);
  --img-border: rgba(147, 51, 234, 0.14);
  --img-bg: rgba(147, 51, 234, 0.03);
  --muted-bg: rgba(147, 51, 234, 0.045);

  --home-title-gradient: linear-gradient(120deg, #9333ea 0%, #a855f7 55%, #db2777 100%);
}

/* ---------- 覆盖组件中硬编码的蓝色 ---------- */
.button-primary {
  box-shadow: 0 12px 24px rgba(168, 85, 247, 0.28);
}

.button-primary:hover {
  background: linear-gradient(135deg, #c084fc, #a855f7);
  box-shadow: 0 20px 40px rgba(168, 85, 247, 0.45);
}

.nav-download {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.28);
}

.nav-download:hover {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.35);
}

/* 头部切换器当前项的光晕跟随主题色 */
.product-switcher .ps-item--de.is-current {
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.35);
}

/* 底部 CTA 区原本是蓝青渐变，改为紫粉渐变 */
.cta-box {
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(236, 72, 153, 0.1)),
    var(--panel);
}

/* 首屏光晕：取自主题的科技感紫（techGradientEnd #4c1d95） */
.digital-hero {
  position: relative;
  overflow: hidden;
}

.digital-hero::before {
  content: "";
  position: absolute;
  top: -140px;
  left: 50%;
  width: 900px;
  height: 500px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(76, 29, 149, 0.36), transparent 68%);
  pointer-events: none;
}

.digital-hero .container {
  position: relative;
}

/* 视频封面：紫渐变（不使用 logo 图，16:9 等宽） */
.video-cover {
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(168, 85, 247, 0.4), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(236, 72, 153, 0.25), transparent 55%),
    linear-gradient(135deg, #1e1b4b 0%, #312e81 55%, #4c1d95 100%);
}