/* ======================== CSS变量定义 ======================== */
:root {
  /* 科技疗愈主色调 */
  --primary-gradient: linear-gradient(135deg, #0066ff 0%, #00d4ff 100%);
  --secondary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --accent-gradient: linear-gradient(135deg, #00ff88 0%, #00b4db 100%);
  
  /* 背景色系 */
  --bg-primary: #0a0a0a;
  --bg-secondary: #1a1a2e;
  --bg-card: rgba(20, 20, 40, 0.8);
  --bg-glass: rgba(255, 255, 255, 0.05);
  --bg-overlay: linear-gradient(135deg, rgba(10, 10, 10, 0.9) 0%, rgba(26, 26, 46, 0.9) 100%);
  
  /* 文字色系 */
  --text-primary: #ffffff;
  --text-secondary: #b8bcc8;
  --text-muted: #7c8db5;
  --text-accent: #00d4ff;
  
  /* 边框和阴影 */
  --border-glass: 1px solid rgba(255, 255, 255, 0.1);
  --shadow-glow: 0 8px 32px rgba(0, 100, 255, 0.2);
  --shadow-card: 0 8px 25px -8px rgba(0, 0, 0, 0.3);
  --shadow-heavy: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  
  /* 动画缓动 */
  --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ======================== 全局样式重置 ======================== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ======================== 背景和粒子效果 ======================== */
.healing-body {
  position: relative;
  background: var(--bg-primary);
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(0, 102, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(0, 212, 255, 0.05) 0%, transparent 50%);
}

/*
.gradient-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-overlay);
  z-index: -2;
  pointer-events: none;
}
*/


/* ======================== 导航栏样式 ======================== */
.healing-navbar {
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: var(--border-glass);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.healing-brand {
  display: flex;
  align-items: center;
  color: var(--text-primary) !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 1.25rem;
  transition: all 0.3s var(--ease-smooth);
}

.healing-brand:hover {
  color: var(--text-accent) !important;
  transform: translateY(-1px);
}

.brand-icon {
  width: 40px;
  height: 40px;
  background: var(--primary-gradient);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  box-shadow: var(--shadow-glow);
  animation: pulse-glow 3s ease-in-out infinite;
}

.brand-icon i {
  font-size: 1.2rem;
  color: white;
}

.brand-text {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: var(--shadow-glow); }
  50% { box-shadow: 0 8px 32px rgba(0, 100, 255, 0.4); }
}

/* 语言切换按钮 */
.language-btn {
  background: var(--bg-glass);
  border: var(--border-glass);
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s var(--ease-smooth);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.language-btn:hover {
  background: var(--primary-gradient);
  border-color: transparent;
  color: white;
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

/* ======================== 卡片容器样式 ======================== */
#stage-container {
  perspective: 1000px;
  padding: 0 15px;
  margin-top: 5vh; /* 新增这一行 */
}

.healing-card {
  background: var(--bg-glass);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: var(--border-glass);
  border-radius: 24px;
  box-shadow: var(--shadow-heavy);
  transition: all 0.6s var(--ease-smooth);
  transform-style: preserve-3d;
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
}

.healing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--primary-gradient);
  opacity: 0.5;
}

.healing-card:hover {
  transform: translateY(-4px);
  box-shadow: 
    var(--shadow-heavy),
    0 0 50px rgba(0, 100, 255, 0.1);
}

/* ======================== 卡片动画效果 ======================== */
.stage-card.fade-out {
  opacity: 0;
  transform: rotateY(-15deg) scale(0.95) translateZ(-50px);
}

.stage-card.fade-in {
  opacity: 1;
  transform: rotateY(0deg) scale(1) translateZ(0px);
}

/* ======================== 文字样式 ======================== */
.healing-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
  text-align: center;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.healing-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  text-align: center;
  line-height: 1.6;
}

.healing-description {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* ======================== 图标样式 ======================== */
.healing-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 2rem;
  position: relative;
  z-index: 1;
}

.healing-icon::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  background: var(--primary-gradient);
  opacity: 0.2;
  z-index: -1;
  animation: icon-pulse 2s ease-in-out infinite;
}

.healing-icon i {
  color: var(--text-accent);
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 不同阶段的图标颜色 */
.healing-icon-emotion { background: var(--secondary-gradient); }
.healing-icon-kg { background: var(--accent-gradient); }
.healing-icon-iso { background: var(--primary-gradient); }

@keyframes icon-pulse {
  0%, 100% { transform: scale(1); opacity: 0.2; }
  50% { transform: scale(1.05); opacity: 0.4; }
}

/* ======================== 输入框样式 ======================== */
.healing-input-container {
  margin-bottom: 2rem;
  position: relative;
}

.healing-textarea {
  width: 100%;
  background: var(--bg-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--border-glass);
  border-radius: 16px;
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.6;
  padding: 20px;
  resize: vertical;
  min-height: 120px;
  transition: all 0.3s var(--ease-smooth);
  font-family: inherit;
}

.healing-textarea:focus {
  outline: none;
  border-color: rgba(0, 212, 255, 0.5);
  box-shadow: 
    0 0 0 3px rgba(0, 212, 255, 0.1),
    0 8px 25px rgba(0, 100, 255, 0.15);
  background: var(--bg-card);
}

.healing-textarea::placeholder {
  color: var(--text-muted);
}

/* ======================== 按钮样式 ======================== */
.healing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s var(--ease-bounce);
  position: relative;
  overflow: hidden;
  min-width: 200px;
}

.healing-btn-primary {
  background: var(--primary-gradient);
  color: white;
  box-shadow: var(--shadow-glow);
}

.healing-btn-primary:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 
    var(--shadow-glow),
    0 15px 35px rgba(0, 100, 255, 0.3);
}

.healing-btn-secondary {
  background: var(--secondary-gradient);
  color: white;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.2);
}

.healing-btn-secondary:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 
    0 8px 32px rgba(99, 102, 241, 0.4),
    0 15px 35px rgba(99, 102, 241, 0.3);
}

.healing-btn:disabled {
  opacity: 0.7;
  transform: none;
  cursor: not-allowed;
}

.healing-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.6s ease;
}

.healing-btn:hover::before {
  width: 300px;
  height: 300px;
}

/* ======================== 进度条样式 ======================== */
.healing-progress-bar {
  width: 100%;
  height: 4px;
  background: var(--bg-glass);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2rem;
  position: relative;
}

.healing-progress-fill {
  height: 100%;
  background: var(--primary-gradient);
  width: 0;
  border-radius: 2px;
  animation: progress-fill 3s ease-in-out forwards;
}

@keyframes progress-fill {
  to { width: 100%; }
}

/* ======================== 列表样式 ======================== */
.healing-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.healing-list li {
  background: var(--bg-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: var(--border-glass);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0;
  animation: fadeInUp 0.6s var(--ease-smooth) forwards;
  position: relative;
  transition: all 0.3s var(--ease-smooth);
}

.healing-list li:hover {
  transform: translateX(8px);
  border-color: rgba(0, 212, 255, 0.3);
  background: var(--bg-card);
}

.healing-list li::before {
  content: '✨';
  margin-right: 12px;
  font-size: 1.1rem;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ======================== 波浪动画 ======================== */
.healing-wave-animation {
  position: relative;
  height: 60px;
  margin-top: 2rem;
  overflow: hidden;
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: var(--primary-gradient);
  border-radius: 50px 50px 0 0;
  opacity: 0.3;
  animation: wave-flow 3s ease-in-out infinite;
}

.wave1 { animation-delay: 0s; opacity: 0.4; }
.wave2 { animation-delay: 0.5s; opacity: 0.3; }
.wave3 { animation-delay: 1s; opacity: 0.2; }

@keyframes wave-flow {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

/* ======================== 视频播放器样式 ======================== */
.healing-video-container {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-card);
  border: var(--border-glass);
  box-shadow: var(--shadow-card);
}

.healing-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  background: var(--bg-primary);
}

.healing-video:focus {
  outline: none;
}

/* ======================== 重新开始按钮 ======================== */
#restart-button {
  margin-top: 1.5rem;
  background: var(--secondary-gradient);
  animation: pulse-attention 2s ease-in-out infinite;
}

@keyframes pulse-attention {
  0%, 100% {
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.2);
  }
  50% {
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
  }
}

/* ======================== 响应式设计 ======================== */
@media (max-width: 768px) {
  .healing-title {
    font-size: 1.5rem;
  }
  
  .healing-subtitle {
    font-size: 0.9rem;
  }
  
  .healing-card {
    border-radius: 16px;
    margin-bottom: 1rem;
  }
  
  .healing-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  
  .healing-btn {
    padding: 12px 24px;
    font-size: 0.9rem;
    min-width: 180px;
  }
  
  .healing-textarea {
    min-height: 100px;
    padding: 16px;
  }
  
  .brand-text {
    font-size: 1rem;
  }
  
  .language-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
  }
}

@media (max-width: 576px) {
  #stage-container {
    padding: 0 10px;
  }
  
  .healing-card .card-body {
    padding: 1.5rem !important;
  }
  
  .healing-title {
    font-size: 1.25rem;
  }
  
  .healing-icon {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }
  
  .healing-btn {
    min-width: 160px;
    font-size: 0.85rem;
  }
  
  .floating-particles {
    display: none; /* 在小屏幕上隐藏粒子效果以提高性能 */
  }
}

/* ======================== 加载动画 ======================== */
@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border: 0.125em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner 0.75s linear infinite;
}

/* ======================== 滚动条样式 ======================== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-gradient);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-gradient);
}

/* ======================== 选择文本样式 ======================== */
::selection {
  background: rgba(0, 212, 255, 0.2);
  color: var(--text-primary);
}

/* ======================== 焦点辅助功能 ======================== */
.healing-btn:focus,
.healing-textarea:focus,
.language-btn:focus {
  outline: 2px solid var(--text-accent);
  outline-offset: 2px;
}

/* ======================== 打印样式 ======================== */
@media print {
  .floating-particles,
  .gradient-overlay,
  .healing-navbar {
    display: none;
  }
  
  .healing-card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* ======================== 情绪解码动画样式 (V3 - 三阶段版) ======================== */
.emotion-core-container {
    height: 280px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-bottom: 1rem;
}

/* --- 阶段一样式 --- */
.analyzer-text-container {
    font-family: 'Courier New', Courier, monospace;
    color: var(--text-accent);
    font-size: 1rem;
    text-shadow: 0 0 5px var(--text-accent);
}
.analyzer-text {
    border-right: .15em solid var(--text-accent); /* 模拟打字光标 */
    white-space: nowrap;
    overflow: hidden;
    animation: typing 1s steps(40, end), blink-caret .75s step-end infinite;
}
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--text-accent); }
}

/* --- 阶段二样式 --- */
.radar-grid {
    position: absolute;
    width: 250px; height: 250px;
    border-radius: 50%;
    background: 
        repeating-radial-gradient(rgba(0, 212, 255, 0) 0, rgba(0, 212, 255, 0) 49px, rgba(0, 212, 255, 0.1) 50px, rgba(0, 212, 255, 0.1) 51px),
        repeating-linear-gradient(0deg, transparent 0, transparent 49px, rgba(0, 212, 255, 0.1) 50px, rgba(0, 212, 255, 0.1) 51px),
        repeating-linear-gradient(90deg, transparent 0, transparent 49px, rgba(0, 212, 255, 0.1) 50px, rgba(0, 212, 255, 0.1) 51px);
    opacity: 0;
    transform: scale(0.8);
    animation: fadeInGrid 1s ease forwards;
}
@keyframes fadeInGrid { to { opacity: 1; transform: scale(1); } }

.radar-sweep {
    position: absolute;
    width: 2px; height: 125px;
    background: linear-gradient(to top, rgba(94, 114, 228, 0), #5e72e4);
    top: 15px; left: 50%;
    transform-origin: bottom center;
}
@keyframes radar-sweep-anim { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ★ 新增: 能量束样式 */
.tracer-line {
    position: absolute;
    width: 1px;
    background: linear-gradient(to top, rgba(0, 212, 255, 0), var(--text-accent));
    top: 50%; left: 50%;
    transform-origin: top center;
    opacity: 0;
}
@keyframes flash-tracer {
    0% { opacity: 0; }
    50% { opacity: 0.7; }
    100% { opacity: 0; }
}

.emotion-core {
    width: 20px; height: 20px;
    background: #5e72e4;
    border-radius: 50%;
    position: absolute;
    box-shadow: 0 0 10px #5e72e4, 0 0 20px #5e72e4, inset 0 0 5px white;
    transform: scale(0);
    animation: popIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s forwards;
}

.emotion-satellite-container {
    position: absolute;
    transform: translate(-50%, -50%);
}

.emotion-satellite {
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 5px white, 0 0 10px var(--text-accent);
    transform: scale(0);
    transition: all 0.3s ease;
}
.emotion-satellite:hover { transform: scale(2.5) !important; z-index: 10; }

.satellite-label {
    position: absolute;
    left: 100%; top: 50%;
    transform: translateY(-50%);
    padding-left: 10px;
    color: var(--text-secondary);
    font-size: 13px; /* 稍微放大一点 */
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

/* --- 阶段三样式 --- */
/* ★ 新增: 抚慰金句样式 */
.healing-comfort-text {
    color: var(--text-accent);
    font-size: 1rem;
    margin-top: 1.5rem;
    text-align: center;
    opacity: 0; /* 由动画控制显示 */
    font-style: italic;
}

/* --- 通用动画 --- */
@keyframes popIn { 100% { transform: scale(1); } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeInLabel {
    from { opacity: 0; transform: translateY(-50%) translateX(-10px); }
    to { opacity: 0.9; transform: translateY(-50%) translateX(0); }
}

/* ================================================================ */
/* 最终版："认知熔炉" (Cognitive Forge) 动画样式         */
/* ================================================================ */

/* 动画总容器 */
.cognitive-forge-container {
    position: relative;
    width: 100%;
    height: 300px;
    transition: background 1s ease;
    margin-bottom: 1rem;
}

/* 针对 repurposed ul 元素的强制样式重置 */
#kg-details.cognitive-forge-container {
    padding-left: 0;
}

/* 标题样式控制 */
#kg-title {
    margin-bottom: 1.5rem;
    margin-top: 0.5rem;
}

/* --- 第一幕: 情绪核心 --- */
.forge-core-sun {
    width: 100px; height: 100px;
    background: radial-gradient(circle, #ffecd1, #f5b971);
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center; text-align: center;
    color: #5d4a36; font-weight: 600; font-size: 0.9rem; line-height: 1.4;
    box-shadow: 0 0 20px #f5b971, 0 0 40px #ffecd1;
    animation: pulse-sun 3s infinite ease-in-out, fadeIn 1s forwards;
    transition: all 1s ease;
    opacity: 0; z-index: 10;
}
@keyframes pulse-sun {
    50% { transform: scale(1.05); }
}

/* --- 第二幕: GEMS棱镜 & 光谱 --- */
.forge-core-sun.transform-to-prism {
    transform: scale(0.8) rotate(180deg);
    background: radial-gradient(circle, #e0c3fc, #8ec5fc);
    box-shadow: 0 0 20px #8ec5fc, 0 0 40px #e0c3fc;
    border-radius: 20%;
}
.gems-ray {
    position: absolute;
    height: 2px;
    width: calc(80px + var(--score, 0) * 120px);
    background: linear-gradient(to right, #a8c0ff, transparent);
    top: 50%; left: 50%;
    transform-origin: left;
    transform: rotate(calc(var(--i) * (360deg / 5) + 18deg)) translateY(-50%);
    opacity: 0;
    animation: shoot-ray 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-delay: calc(var(--i) * 0.15s + 0.5s);
}

/* 用下面的新样式替换掉旧的 .gems-ray span */
.gems-ray span {
  position: absolute;
  right: -5px; /* 向外移动一点 */
  top: 50%; /* 垂直居中于光束 */
  transform: translateY(-50%); /* 精准垂直居中 */
  color: var(--text-secondary);
  font-size: 0.8rem;
  white-space: nowrap;
  
  /* ★★★ 新增样式以修复重叠问题 ★★★ */
  background: rgba(10, 10, 10, 0.7); /* 添加半透明背景 */
  padding: 3px 8px; /* 增加内边距 */
  border-radius: 5px; /* 圆角 */
  backdrop-filter: blur(2px); /* 轻微毛玻璃效果 */
}

@keyframes shoot-ray { to { opacity: 0.8; } }



/* --- 第三幕: 知识图谱背景 & 参数节点 --- */
.cognitive-forge-container.show-kg-background::before {
    content: ''; position: absolute; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='%231a2e4a' fill-opacity='0.4'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM91 88c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 60c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    opacity: 0; animation: fadeIn 2s forwards; z-index: -1;
}
.param-node {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(calc(var(--i) * (360deg / 7))) translateX(140px) rotate(calc(var(--i) * (-360deg / 7)));
    display: flex; align-items: center; opacity: 0;
    animation: pop-node 0.8s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-delay: calc(var(--i) * 0.2s);
    transition: opacity 1s ease, transform 0.5s ease;
}
@keyframes pop-node { to { opacity: 1; } }
.param-glyph { width: 40px; height: 40px; margin-right: 10px; border: 1px solid var(--text-accent); border-radius: 50%; position: relative; }
.param-text { display: flex; flex-direction: column; color: var(--text-secondary); }
.param-text strong { color: var(--text-primary); }
.param-text span { font-size: 0.8rem; }

/* --- 第四幕: 合成 & 总结 --- */
.cognitive-forge-container.synthesized .param-node,
.cognitive-forge-container.synthesized .gems-ray,
.cognitive-forge-container.synthesized .forge-core-sun { opacity: 0.2; }
.cognitive-forge-container.synthesized .param-node { transform: translate(-50%, -50%) rotate(calc(var(--i) * (360deg / 7))) translateX(130px) rotate(calc(var(--i) * (-360deg / 7))) scale(0.95); }
.therapy-summary-card {
    /* 移除所有 position, top, left, bottom, transform 属性！ */
    width: 90%;
    max-width: 450px; /* 增加最大宽度，防止在大屏幕上过宽 */
    background: var(--bg-card);
    border: var(--border-glass);
    border-radius: 12px;
    padding: 1.5rem; /* 增加一点内边距 */
    text-align: center;
    opacity: 0;
    animation: fadeInUp 1.2s forwards; /* 动画时间稍长一点 */
}

/* ======================================== */
/* CSS 音乐参数图标 (由JS的data属性驱动) */
/* ======================================== */
.param-glyph::before, .param-glyph::after { content: ''; position: absolute; }
/* Tempo */
.param-glyph[data-type="tempo"]::before { width: 2px; height: 12px; background: var(--text-accent); left: 50%; top: 8px; transform: translateX(-50%) rotate(-25deg); }
.param-glyph[data-type="tempo"]::after { width: 4px; height: 4px; background: var(--text-accent); border-radius: 50%; left: 50%; bottom: 8px; transform: translateX(-50%); }
/* Mode */
.param-glyph[data-type="mode"][data-value*="major"]::before { width: 10px; height: 10px; border: 2px solid var(--text-accent); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.param-glyph[data-type="mode"][data-value*="minor"]::before { width: 10px; height: 10px; background: var(--text-accent); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* Dynamics */
.param-glyph[data-type="dynamics"] { display: flex; justify-content: center; align-items: flex-end; gap: 2px; padding: 10px; }
.param-glyph[data-type="dynamics"]::before, .param-glyph[data-type="dynamics"]::after { width: 4px; background: var(--text-accent); }
.param-glyph[data-type="dynamics"]::before { height: 40%; }
.param-glyph[data-type="dynamics"]::after { height: 70%; }
/* Harmony */
.param-glyph[data-type="harmony"]::before, .param-glyph[data-type="harmony"]::after { width: 20px; height: 10px; border: 2px solid var(--text-accent); border-top: none; left: 50%; transform: translateX(-50%); }
.param-glyph[data-type="harmony"][data-value*="consonant"]::before { border-radius: 0 0 10px 10px; top: 8px; }
.param-glyph[data-type="harmony"][data-value*="consonant"]::after { border-radius: 0 0 10px 10px; top: 18px; }
/* Timbre */
.param-glyph[data-type="timbre"]::before { width: 20px; height: 10px; border: 2px solid var(--text-accent); border-top: none; border-bottom: none; top: 14px; left: 9px; border-radius: 0 50% 50% 0; transform: rotate(-45deg); }
/* Register */
.param-glyph[data-type="register"]::before, .param-glyph[data-type="register"]::after { width: 18px; height: 2px; background: var(--text-accent); left: 10px; }
.param-glyph[data-type="register"]::before { top: 14px; }
.param-glyph[data-type="register"]::after { top: 24px; }
.param-glyph[data-type="register"][data-value*="high"] span { position: absolute; width: 6px; height: 6px; background: white; border-radius: 50%; left: 16px; top: 8px; }
.param-glyph[data-type="register"][data-value*="medium"] span { position: absolute; width: 6px; height: 6px; background: white; border-radius: 50%; left: 16px; top: 17px; }
.param-glyph[data-type="register"][data-value*="low"] span { position: absolute; width: 6px; height: 6px; background: white; border-radius: 50%; left: 16px; top: 26px; }
/* Density */
.param-glyph[data-type="density"][data-value*="dense"] { background-image: radial-gradient(white 1px, transparent 0), radial-gradient(white 1px, transparent 0); background-size: 8px 8px; background-position: 0 0, 4px 4px; }
.param-glyph[data-type="density"][data-value*="sparse"] { background-image: radial-gradient(white 1.5px, transparent 0); background-size: 15px 15px; }

/* 通用动画 */
@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeInUp { 
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ======================== 调试专用CSS ======================== */
/* 用蓝色框标出最外层的舞台容器 */
#stage-container {
  outline: 2px solid dodgerblue;
}

/* 用红色框标出四幕动画的直接父容器 */
#kg-details.cognitive-forge-container {
  outline: 2px solid red;
}

/* 用绿色框标出"疗愈焦点"组件 */
.therapy-summary-card {
  outline: 2px solid limegreen;
}
/* ============================================================= */

/* 这个样式只在最终幕生效，用Flexbox实现完美居中 */
.cognitive-forge-container.forge-final-stage {
    display: flex;
    align-items: center;     /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

/* ======================================== */
/* V2 - ISO Principle Animation Styles     */
/* ======================================== */

.iso-animation-container {
    height: 180px; /* 动画区域高度 */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem; /* 上下波形的间距 */
    margin: 1.5rem 0;
    overflow: hidden;
}

.iso-waveform-wrapper {
    position: relative;
    opacity: 0; /* 默认隐藏，由JS控制入场 */
    /* 为入场动画做准备 */
    transform: translateX(-30px);
}

.iso-waveform-svg path {
    /* ★ 核心：为SVG路径的形状(d)和颜色(stroke)添加平滑的过渡效果 */
    transition: d 2s cubic-bezier(0.4, 0, 0.2, 1), 
                stroke 2s cubic-bezier(0.4, 0, 0.2, 1);
}

.iso-waveform-label {
    position: absolute;
    top: -20px; /* 显示在波形上方 */
    left: 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
    opacity: 0.8;
}

.iso-description-stage {
    font-size: 1rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.6;
    min-height: 55px; /* 给予足够空间，防止文字换行时布局跳动 */
    opacity: 0;
    transition: opacity 0.5s, transform 0.5s;
    transform: translateY(10px);
}

/* --- JS控制的动画类 --- */

/* 入场动画 */
.iso-enter .iso-waveform-wrapper {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 1s, transform 1s;
}
/* 分别为上下波形设置延迟，更有层次感 */
.iso-enter #music-wave-wrapper {
    transition-delay: 0.2s;
}

/* 文字动画 */
.iso-text-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 退场动画 */
.iso-exit .iso-waveform-wrapper,
.iso-exit .iso-description-stage {
    opacity: 0;
    transform: translateY(-10px);
}

/* ======================================== */
/* V3 - Video Player Prelude/Epilogue Styles */
/* ======================================== */

/* 副标题样式 */
#video-subtitle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: -0.75rem; /* 向上微调，让它离主标题更近 */
    margin-bottom: 1rem;
}

/* "序章/尾声"遮罩层，用于承载呼吸动画 */
.healing-overlay {
    position: absolute;
    inset: 0; /* 现代CSS写法，等同于 top/right/bottom/left: 0 */
    background: rgba(10, 10, 10, 0.97); /* 一个更深的背景，增强沉浸感 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 20px; /* 与视频容器的圆角保持一致 */
    z-index: 10;
    opacity: 0;
    pointer-events: none; /* 默认不可交互 */
    transition: opacity 1.5s var(--ease-smooth);
}
.healing-overlay.visible {
    opacity: 1;
    pointer-events: auto; /* 显示时可交互 */
}

/* 呼吸光环 */
.breathing-ring {
    width: 100px;
    height: 100px;
    border: 2px solid var(--text-accent);
    border-radius: 50%;
    box-shadow: 0 0 20px var(--text-accent), inset 0 0 10px var(--text-accent);
    opacity: 0;
    transform: scale(0.9);
    animation: pulse-ring 4s var(--ease-smooth) infinite;
}
/* 当遮罩层显示时，光环才开始动画 */
.healing-overlay.visible .breathing-ring {
    opacity: 1;
}

/* 引导文字 */
.breathing-text {
    margin-top: 1.5rem;
    color: var(--text-secondary);
    font-size: 1rem;
    opacity: 0;
    transition: opacity 1s 0.5s; /* 延迟0.5秒出现 */
}
.healing-overlay.visible .breathing-text {
    opacity: 1;
}

/* 呼吸动画关键帧 */
@keyframes pulse-ring {
    0%   { transform: scale(0.95); opacity: 0.8; }
    50%  { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

/* 视频播放器自身的淡出效果 */
.healing-video.fade-out {
    transition: opacity 2s var(--ease-smooth);
    opacity: 0;
}

/* ✅ 将下面所有代码，完整粘贴到 styles.css 文件底部 */
/* ======================================== */
/* V4 - Emotional Horizon Background Styles */
/* ======================================== */

.emotional-horizon {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -10; /* 确保它在最底层 */
    overflow: hidden;
    background-color: #0a0a0a; /* 设定一个纯黑基底 */
}

#particle-canvas {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* "情感能量场"光晕的基础样式 */
.aura {
    position: absolute;
    border-radius: 50%;
    /* 使用 filter: blur() 来创造极其柔和、弥散的光晕效果 */
    filter: blur(120px); 
    opacity: 0.3;
    /* ★ 核心：让背景色的变化有3秒的平滑过渡 */
    transition: background-color 3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 定义三个光晕的大小、默认颜色和动画，形成丰富的层次感 */
.aura1 {
    width: 80vw;
    height: 80vh;
    /* 使用CSS变量，方便JS后续控制颜色 */
    background-color: var(--aura-color1, #0066ff); 
    animation: move-glow 25s linear infinite alternate;
    top: -30%;
    left: -40%;
}

.aura2 {
    width: 70vw;
    height: 70vh;
    background-color: var(--aura-color2, #8b5cf6);
    animation: move-glow 30s linear infinite alternate-reverse;
    bottom: -40%;
    right: -30%;
}

.aura3 {
    width: 60vw;
    height: 60vh;
    background-color: var(--aura-color3, #00d4ff);
    animation: move-glow 20s linear infinite alternate;
    top: 10%;
    right: -20%;
}

/* 光晕的移动动画，让背景永远"活着" */
@keyframes move-glow {
    from {
        transform: translate(0, 0) rotate(0deg);
    }
    to {
        transform: translate(10vw, 15vh) rotate(180deg);
    }
}

/* ================================================================ */
/* 最终版："认知熔炉" (Cognitive Forge) V2 动画样式         */
/* ================================================================ */

/* 动画总容器 */
.cognitive-forge-container {
    position: relative;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    overflow: hidden;
}

/* 每个阶段动画的容器 */
.cognitive-forge-stage {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: stage-fade-in 0.8s ease-in-out;
}

@keyframes stage-fade-in {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* --- 阶段1: 情绪解构 --- */
.deconstruction-stage .neural-network {
    position: relative;
    width: 200px;
    height: 200px;
}
.network-node {
    position: absolute;
    border-radius: 50%;
    background: var(--text-accent);
    box-shadow: 0 0 10px var(--text-accent), 0 0 20px var(--text-accent);
    animation: node-pulse 2s infinite ease-in-out;
}
.primary-node { width: 40px; height: 40px; top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 0s; }
.secondary-node { width: 25px; height: 25px; top: 20%; left: 20%; animation-delay: 0.3s; }
.tertiary-node { width: 15px; height: 15px; top: 75%; left: 80%; animation-delay: 0.6s; }

.connection-line {
    position: absolute;
    background: var(--text-accent);
    opacity: 0.5;
    transform-origin: top left;
    animation: draw-line 1.5s ease-out forwards;
}
.line1 { top: 32%; left: 32%; width: 2px; height: 50px; transform: rotate(135deg); }
.line2 { top: 58%; left: 58%; width: 2px; height: 45px; transform: rotate(30deg); }
.line3 { top: 26%; left: 26%; width: 2px; height: 80px; transform: rotate(105deg); }

@keyframes node-pulse { 50% { transform: scale(1.1); } }
@keyframes draw-line { from { height: 0; } to { height: auto; } } /* Simplified for effect */

/* --- 阶段2: GEMS映射 --- */
.gems-mapping-stage .gems-container {
    position: relative;
    width: 200px;
    height: 200px;
    transform: rotate(0deg);
    animation: rotate-container 10s linear infinite;
}
.music-param-node {
    position: absolute;
    width: 35px; height: 35px;
    border-radius: 50%;
    background: var(--bg-glass);
    border: 1px solid var(--text-accent);
    color: var(--text-accent);
    font-size: 1.5rem;
    display: flex; justify-content: center; align-items: center;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    opacity: 0;
    animation: pop-param 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.music-param-node:nth-child(1) { transform: translate(-50%, -50%) translateX(90px); animation-delay: 0.1s; }
.music-param-node:nth-child(2) { transform: translate(-50%, -50%) rotate(60deg) translateX(90px); animation-delay: 0.2s; }
.music-param-node:nth-child(3) { transform: translate(-50%, -50%) rotate(120deg) translateX(90px); animation-delay: 0.3s; }
.music-param-node:nth-child(4) { transform: translate(-50%, -50%) rotate(180deg) translateX(90px); animation-delay: 0.4s; }
.music-param-node:nth-child(5) { transform: translate(-50%, -50%) rotate(240deg) translateX(90px); animation-delay: 0.5s; }
.music-param-node:nth-child(6) { transform: translate(-50%, -50%) rotate(300deg) translateX(90px); animation-delay: 0.6s; }

@keyframes rotate-container { to { transform: rotate(360deg); } }
@keyframes pop-param { to { opacity: 1; } }

/* --- 阶段3: 知识图谱提取 --- */
.knowledge-extraction-stage .kg-web { position: relative; width: 220px; height: 220px; }
.kg-node {
    position: absolute;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: pop-kg-node 1s forwards;
}
.kg-node.central { width: 50px; height: 50px; top: 50%; left: 50%; background: var(--secondary-gradient); animation-delay: 0s; }
.kg-node.peripheral { width: 20px; height: 20px; background: var(--text-accent); }
.p1 { top: 10%; left: 50%; animation-delay: 0.2s; }
.p2 { top: 30%; left: 90%; animation-delay: 0.4s; }
.p3 { top: 70%; left: 90%; animation-delay: 0.6s; }
.p4 { top: 90%; left: 50%; animation-delay: 0.8s; }
.p5 { top: 50%; left: 10%; animation-delay: 1.0s; }
.kg-edge {
    position: absolute;
    width: 2px;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    top: 50%; left: 50%; transform-origin: top;
    animation: draw-kg-edge 1s forwards;
}
.e1 { transform: rotate(270deg); height: 88px; animation-delay: 0.3s; }
.e2 { transform: rotate(325deg); height: 88px; animation-delay: 0.5s; }
.e3 { transform: rotate(35deg); height: 88px; animation-delay: 0.7s; }
.e4 { transform: rotate(90deg); height: 88px; animation-delay: 0.9s; }
.e5 { transform: rotate(180deg); height: 88px; animation-delay: 1.1s; }

@keyframes pop-kg-node { from { transform: translate(-50%, -50%) scale(0); } to { transform: translate(-50%, -50%) scale(1); } }
@keyframes draw-kg-edge { to { height: 88px; } } /* Approximate length */

/* --- 阶段4: 疗愈处方合成 --- */
.prescription-synthesis-stage .prescription-icon {
    font-size: 5rem;
    animation: prescription-pop 1s forwards, float-icon 3s infinite ease-in-out 1s;
}
.prescription-synthesis-stage .synthesis-glow {
    position: absolute;
    width: 100px; height: 100px;
    background: var(--primary-gradient);
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    animation: glow-fade-in 1.5s forwards 0.5s;
}

@keyframes prescription-pop {
    0% { transform: scale(0); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
@keyframes float-icon { 50% { transform: translateY(-15px); } }
@keyframes glow-fade-in { to { opacity: 0.7; } }

/* --- 最终列表项样式 --- */
.healing-list-item {
    background: transparent !important; /* 强制透明背景 */
    padding-left: 0 !important;
    font-size: 1.05rem; /* 稍大一点更清晰 */
    color: var(--text-primary) !important;

/* ================================================================ */
/* V3 - 动态专业疗愈处方卡片样式 (Dynamic Healing Prescription)  */
/* ================================================================ */

.prescription-card {
    background: rgba(10, 10, 20, 0.5);
    border: var(--border-glass);
    border-radius: 16px;
    padding: 2rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s forwards;
    animation-delay: 0.5s;
    backdrop-filter: blur(10px);
}

.prescription-header {
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-glass);
    padding-bottom: 1.5rem;
}

.prescription-header .icon {
    font-size: 2rem;
    color: var(--text-accent);
    margin-bottom: 0.5rem;
}

.prescription-header h4 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin: 0;
    font-weight: 600;
}

.prescription-header p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.prescription-section {
    margin-bottom: 2rem;
}

.prescription-section-title {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}
.prescription-section-title i {
    margin-right: 0.75rem;
    color: var(--text-accent);
}

.param-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.param-item {
    background: var(--bg-glass);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.param-item .label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.param-item .value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 0.25rem;
}
.param-item .value span {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 400;
}

.rationale-text, .practice-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
    background: var(--bg-glass);
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--text-accent);
}
}

/* ================================================================ */
/* V3 - 动态专业疗愈处方卡片样式 (Dynamic Healing Prescription)  */
/* ================================================================ */

.prescription-card {
  background: rgba(10, 10, 20, 0.5);
  border: var(--border-glass);
  border-radius: 16px;
  padding: 1.5rem; /* 适配移动端 */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s forwards;
  animation-delay: 0.2s;
  backdrop-filter: blur(10px);
}

.prescription-header {
  text-align: center;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border-glass);
  padding-bottom: 1.5rem;
}

.prescription-header .icon {
  font-size: 2rem;
  color: var(--text-accent);
  margin-bottom: 0.5rem;
  display: inline-block;
}

.prescription-header h4 {
  font-size: 1.5rem;
  color: var(--text-primary);
  margin: 0;
  font-weight: 600;
}

.prescription-header p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.prescription-protocol {
  background: var(--bg-glass);
  color: var(--text-accent);
  border: 1px solid var(--text-accent);
  border-radius: 20px;
  padding: 0.25rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  display: inline-block;
  margin-top: 1rem;
}

.prescription-section {
  margin-bottom: 2rem;
}

.prescription-section-title {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}
.prescription-section-title i {
  margin-right: 0.75rem;
  width: 20px;
  text-align: center;
  color: var(--text-accent);
}

.param-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1rem;
}

.param-item {
  background: var(--bg-glass);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  transition: all 0.3s ease;
}
.param-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.1);
}


.param-item .label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.param-item .value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 0.25rem;
}
.param-item .value span {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 400;
}

.rationale-text, .practice-text {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.7;
  background: var(--bg-glass);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  border-left: 3px solid var(--text-accent);
}

@media (min-width: 768px) {
  .prescription-card {
      padding: 2rem;
  }
}

/* ================================================================ */
/* V4 - KG阶段 "三幕剧" 动画样式                                  */
/* ================================================================ */

/* 动画容器的通用样式 */
#kg-animation-container {
  height: 350px; /* 给予动画足够的垂直空间 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.kg-animation-stage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: stage-fade-in 0.8s ease-in-out;
}

.kg-animation-title {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

@keyframes stage-fade-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* --- 第一幕: GEMS映射 --- */
.gems-mapping-stage {
  position: relative;
  width: 200px;
  height: 200px;
  animation: rotate-container 12s linear infinite;
}
.music-param-node {
  position: absolute; width: 35px; height: 35px;
  border-radius: 50%; background: var(--bg-glass);
  border: 1px solid var(--text-accent); color: var(--text-accent);
  font-size: 1.5rem; display: flex; justify-content: center; align-items: center;
  top: 50%; left: 50%;
  opacity: 0;
  animation: pop-param 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.music-param-node:nth-child(1) { transform: translate(-50%, -50%) translateX(90px); animation-delay: 0.1s; }
.music-param-node:nth-child(2) { transform: translate(-50%, -50%) rotate(60deg) translateX(90px); animation-delay: 0.2s; }
.music-param-node:nth-child(3) { transform: translate(-50%, -50%) rotate(120deg) translateX(90px); animation-delay: 0.3s; }
.music-param-node:nth-child(4) { transform: translate(-50%, -50%) rotate(180deg) translateX(90px); animation-delay: 0.4s; }
.music-param-node:nth-child(5) { transform: translate(-50%, -50%) rotate(240deg) translateX(90px); animation-delay: 0.5s; }
.music-param-node:nth-child(6) { transform: translate(-50%, -50%) rotate(300deg) translateX(90px); animation-delay: 0.6s; }

@keyframes rotate-container { to { transform: rotate(360deg); } }
@keyframes pop-param { to { opacity: 1; } }

/* --- 第二幕: 知识图谱提取 --- */
.knowledge-extraction-stage { position: relative; width: 220px; height: 220px; }
.kg-node {
  position: absolute; background: white; border-radius: 50%;
  transform: translate(-50%, -50%); animation: pop-kg-node 1s forwards;
}
.kg-node.central { width: 50px; height: 50px; top: 50%; left: 50%; background: var(--secondary-gradient); animation-delay: 0s; }
.kg-node.peripheral { width: 20px; height: 20px; background: var(--text-accent); }
.p1 { top: 10%; left: 50%; animation-delay: 0.2s; }
.p2 { top: 30%; left: 90%; animation-delay: 0.4s; }
.p3 { top: 70%; left: 90%; animation-delay: 0.6s; }
.p4 { top: 90%; left: 50%; animation-delay: 0.8s; }
.p5 { top: 50%; left: 10%; animation-delay: 1.0s; }
.kg-edge {
  position: absolute; width: 2px; height: 0;
  background: rgba(255, 255, 255, 0.3);
  top: 50%; left: 50%; transform-origin: top;
  animation: draw-kg-edge 1s forwards;
}
.e1 { transform: rotate(270deg); height: 88px; animation-delay: 0.3s; }
.e2 { transform: rotate(325deg); height: 88px; animation-delay: 0.5s; }
.e3 { transform: rotate(35deg); height: 88px; animation-delay: 0.7s; }
.e4 { transform: rotate(90deg); height: 88px; animation-delay: 0.9s; }
.e5 { transform: rotate(180deg); height: 88px; animation-delay: 1.1s; }

@keyframes pop-kg-node { from { transform: translate(-50%, -50%) scale(0); } to { transform: translate(-50%, -50%) scale(1); } }
@keyframes draw-kg-edge { to { height: 88px; } }

/* --- 第三幕: 药丸动画 --- */
.prescription-pill-animation {
  font-size: 1.2rem;
  display: inline-block;
  margin-left: 0.75rem;
  animation: float-pill 3s ease-in-out infinite;
  color: var(--text-accent);
}
@keyframes float-pill {
  0%, 100% { transform: translateY(0) rotate(-10deg); }
  50% { transform: translateY(-5px) rotate(10deg); }
}

/* 最终版：默认隐藏语言切换按钮，聚焦英文版 */
#language-switcher { display: none; }