/**
 * ============================================================================
 * CatuxXS 组件样式 - 从内联样式提取的可复用组件类
 * ============================================================================
 * 
 * 文件名：components.css
 * 描述：动画演示、流程卡片、图例、效率条等可复用组件的样式类
 * 依赖：variables.css（需先加载）
 * 创建日期：2026-05-04
 * 
 * ============================================================================
 */

/* ========================================
   动画延迟辅助类 (fade-in 配合)
   ======================================== */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.25s; }

/* ========================================
   弹性盒辅助类
   ======================================== */
.flex-center { display: flex; align-items: center; }
.flex-center-gap8 { display: flex; align-items: center; gap: 8px; }
.flex-center-gap12 { display: flex; align-items: center; gap: 12px; }
.flex-center-gap16 { display: flex; align-items: center; gap: 16px; }

/* ========================================
   流程卡片（技术原理三步卡片）
   ======================================== */
.flow-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
}

.flow-card-icon {
  width: 44px;
  height: 44px;
  background: rgba(56,189,248,0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: #38bdf8;
}

.flow-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 6px;
}

.flow-card-desc {
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.6;
}

/* ========================================
   流程卡片网格
   ======================================== */
.flow-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================
   动画演示舞台
   ======================================== */
.anim-stage {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  aspect-ratio: 860 / 320;
  margin: 0 auto;
  border-radius: 16px;
  background: #eef2f7;
}

/* ========================================
   阶段标签（动画演示状态指示）
   ======================================== */
.phase-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #64748b;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* ========================================
   动画控制按钮
   ======================================== */
.anim-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  font-size: 1rem;
  font-weight: 700;
  background: #38bdf8;
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(56,189,248,0.35);
  transition: all 0.2s;
}

.anim-play-btn:hover {
  background: #0ea5e9;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(56,189,248,0.45);
}

.anim-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  font-size: 1rem;
  font-weight: 600;
  background: #fff;
  color: #64748b;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.anim-reset-btn:hover {
  border-color: #38bdf8;
  color: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ========================================
   图例点
   ======================================== */
.legend-bar {
  display: flex;
  justify-content: center;
  gap: 36px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-dot-blue { background: #38bdf8; box-shadow: 0 0 10px #38bdf8; }
.legend-dot-red { background: #f87171; box-shadow: 0 0 10px #f87171; }
.legend-dot-green { background: #4ade80; box-shadow: 0 0 10px #4ade80; }

.legend-text {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
}

/* ========================================
   效率条形图
   ======================================== */
.bar-fill-97 { width: 97%; }
.bar-fill-84 { width: 84%; }
.bar-fill-100 { width: 100%; }
.bar-fill-33 { width: 33%; }

/* ========================================
   字体颜色辅助类
   ======================================== */
.text-muted { color: #64748b; }
.fw-600 { font-weight: 600; }
.text-accent-green { color: var(--accent-green); font-weight: 600; }
.text-slate { color: #64748b; }
.text-slate-light { color: #cbd5e1; }
.text-sky { color: #38bdf8; }

/* ========================================
   额外延迟辅助
   ======================================== */
.delay-025 { animation-delay: 0.25s; }
.delay-015 { animation-delay: 0.15s; }

/* ========================================
   弹性盒 - 带间距的
   ======================================== */
.flex-gap12-mb18 { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }

/* ========================================
   卡片变体
   ======================================== */
.card-green-light {
  background: white;
  border: 1px solid #dcfce7;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.card-blue-light {
  background: white;
  border: 1px solid #dbeafe;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}

.card-full {
  grid-column: 1 / -1;
  background: white;
  border: 1px solid #dcfce7;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

/* ========================================
   背景色辅助
   ======================================== */
.bg-blue-faint { background: rgba(59, 130, 246, 0.1); color: var(--primary-600); }
.bg-gray-blue-gradient { background: linear-gradient(135deg, var(--gray-50), var(--primary-50)); }

/* ========================================
   网格对比表
   ======================================== */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; }
.grid-2col-gap12 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-2col-gap14 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 900px; margin: 0 auto; }
.grid-2col-gap20 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; margin: 0 auto 28px; }
.grid-2col-gap10 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 0; font-size: 0.82rem; }

/* ========================================
   效率收益提示框
   ======================================== */
.profit-note {
  margin-top: 24px;
  padding: 16px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 12px;
  text-align: center;
}

/* ========================================
   背景渐变卡片
   ======================================== */
.bg-card-green {
  background: linear-gradient(135deg,#f0fdf4,#ecfdf5);
  border: 1.5px solid #bbf7d0;
  border-radius: 20px;
  padding: 28px;
}
.bg-card-blue {
  background: linear-gradient(135deg,#eff6ff,#f0f9ff);
  border: 1.5px solid #bfdbfe;
  border-radius: 20px;
  padding: 28px;
}

/* ========================================
   小尺寸字体与颜色
   ======================================== */
.text-sm-green { font-size: 0.85rem; color: #15803d; font-weight: 700; }
.text-sm-blue { font-size: 0.85rem; color: #1d4ed8; font-weight: 700; }
.text-xs-muted { font-size: 0.75rem; color: #64748b; margin-top: 6px; }
.text-xs-blue60 { font-size: 0.75rem; color: #60a5fa; opacity: 0.85; }
.text-xs-green60 { font-size: 0.75rem; color: #16a34a; opacity: 0.85; }
.text-sm-green-title { font-size: 0.95rem; font-weight: 700; color: #15803d; margin-bottom: 6px; }

/* ========================================
   图标大小
   ======================================== */
.icon-42-blue {
  width: 42px; height: 42px;
  background: #1d4ed8;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-42-green {
  width: 42px; height: 42px;
  background: #15803d;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}