/**
 * 数据可视化工具 - 专属样式
 * 描述: 为数据可视化工具的所有页面（列表/详情/工作台）提供专属样式
 * 命名约定: 所有类名以 dv- 前缀（data-video 缩写），避免与主应用样式冲突
 * 依赖: 复用 design-system.css 中的 CSS 变量
 */

/* ===== 1. 工具内导航 .data-video-subnav ===== */
.data-video-subnav {
  background: var(--primary-color, #165DFF);
  color: #fff;
  padding: 12px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.data-video-subnav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 品牌标识 */
.dv-brand {
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dv-brand i {
  font-size: 22px;
}

/* 导航链接 */
.dv-nav {
  display: flex;
  gap: 24px;
}

.dv-nav-link {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s;
}

.dv-nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

/* ===== 2. 工具内容区 .data-video-main ===== */
.data-video-main {
  min-height: calc(100vh - 200px);
  padding: 32px 0;
  background: #f5f7fa;
}

/* ===== 3. 工具头部 .dv-hero ===== */
.dv-hero {
  text-align: center;
  padding: 48px 0 32px;
  position: relative;
  overflow: hidden;
}

/* 动态渐变背景：通过伪元素实现流动的渐变色彩 */
.dv-hero::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #4facfe, #667eea);
  background-size: 400% 400%;
  animation: dv-gradient-shift 8s ease infinite;
  opacity: 0.08;
  z-index: -1;
}

/* 渐变背景流动动画 */
@keyframes dv-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 标题渐变文字效果：文字呈现流动的渐变色 */
.dv-hero-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #165DFF, #722ED1, #165DFF);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: dv-title-shimmer 3s linear infinite;
}

/* 标题渐变色微光流动动画 */
@keyframes dv-title-shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.dv-hero-intro {
  font-size: 18px;
  color: var(--text-color-secondary, #666);
  margin-bottom: 8px;
}

.dv-hero-steps {
  font-size: 14px;
  color: var(--primary-color, #165DFF);
  font-weight: 500;
}

/* ===== 4. 筛选与排序条 .dv-toolbar ===== */
.dv-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
  background: #fff;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* 分类筛选 chip 列表 */
.dv-categories {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dv-cat-chip {
  padding: 6px 16px;
  border-radius: 20px;
  background: #f0f2f5;
  color: #666;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s;
  white-space: nowrap;
}

.dv-cat-chip:hover {
  background: #e4e7eb;
  color: #333;
}

.dv-cat-chip.active {
  background: var(--primary-color, #165DFF);
  color: #fff;
}

/* 控件区（搜索 + 排序） */
.dv-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}

.dv-search {
  position: relative;
  display: flex;
  align-items: center;
}

.dv-search i {
  position: absolute;
  left: 12px;
  color: #999;
  font-size: 14px;
}

.dv-search input {
  padding: 8px 12px 8px 36px;
  border: 1px solid #e0e3e8;
  border-radius: 8px;
  font-size: 14px;
  width: 200px;
  outline: none;
  transition: border-color 0.2s;
}

.dv-search input:focus {
  border-color: var(--primary-color, #165DFF);
}

.dv-sort {
  padding: 8px 12px;
  border: 1px solid #e0e3e8;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
}

/* ===== 5. 模板网格 .dv-grid ===== */
.dv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* 响应式断点: 1200px 时由 4 列变为 3 列 */
@media (max-width: 1199px) {
  .dv-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 响应式断点: 768px 时由 3 列变为 2 列 */
@media (max-width: 767px) {
  .dv-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .dv-categories {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .dv-cat-chip {
    flex-shrink: 0;
  }
}

/* ===== 6. 模板卡片 .dv-card ===== */
.dv-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-style: preserve-3d;
  perspective: 800px;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 卡片 hover 3D 倾斜效果：上浮 + 微旋转 + 主题色阴影 */
.dv-card:hover {
  transform: translateY(-4px) rotateX(2deg);
  box-shadow: 0 12px 32px rgba(22, 93, 255, 0.15);
}

/* 卡片光泽扫过效果：hover 时白色光带从左到右滑过 */
.dv-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.3) 45%, rgba(255,255,255,0.1) 50%, transparent 55%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 1;
}

.dv-card:hover::after {
  opacity: 1;
  animation: dv-shimmer-sweep 0.6s ease forwards;
}

/* 光泽扫过动画：从左到右滑动 */
@keyframes dv-shimmer-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* 卡片预览区: 竖屏 9:16 比例 */
.dv-card-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1080 / 1920;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
}

.dv-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dv-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.5);
  font-size: 48px;
}

/* 卡片角标 */
.dv-badge {
  position: absolute;
  top: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.dv-badge-hot {
  right: 8px;
  background: #ff4757;
}

.dv-badge-new {
  right: 8px;
  background: #2ed573;
}

.dv-badge-hot + .dv-badge-new {
  right: 50px;
}

/* 卡片正文 */
.dv-card-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dv-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.dv-card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.dv-card-cat {
  background: var(--primary-color, #165DFF);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
}

.dv-card-tag {
  background: #f0f2f5;
  color: #666;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
}

.dv-card-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 12px;
  flex: 1;
}

.dv-card-actions {
  display: flex;
  gap: 8px;
}

.dv-card-actions .btn {
  flex: 1;
  font-size: 13px;
}

/* ===== 7. 空状态 .dv-empty ===== */
.dv-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 20px;
  color: #999;
}

.dv-empty i {
  font-size: 64px;
  margin-bottom: 16px;
  display: block;
}

.dv-empty p {
  font-size: 16px;
  margin-bottom: 16px;
}

/* ===== 8. 工具页脚 .data-video-footer ===== */
.data-video-footer {
  background: #1a1a2e;
  color: rgba(255, 255, 255, 0.6);
  padding: 24px 0;
  text-align: center;
  font-size: 13px;
}

/* ===== 9. 详情页通用样式（Task 6/7 预留） ===== */
.dv-detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

@media (max-width: 991px) {
  .dv-detail-layout {
    grid-template-columns: 1fr;
  }
}

.dv-detail-preview {
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1080 / 1920;
  box-shadow: 0 0 20px rgba(22, 93, 255, 0.2);
  animation: dv-glow-breathe 3s ease-in-out infinite;
}

/* 呼吸光效动画：预览区边框柔和呼吸 */
@keyframes dv-glow-breathe {
  0%, 100% { box-shadow: 0 0 15px rgba(22, 93, 255, 0.15); }
  50% { box-shadow: 0 0 25px rgba(22, 93, 255, 0.35); }
}

.dv-detail-preview video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dv-detail-info {
  padding: 0;
}

.dv-detail-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 12px;
}

.dv-detail-section {
  margin-bottom: 24px;
}

.dv-detail-section h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

/* ===== 10. 四步指示器 .dv-steps ===== */
.dv-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
  position: relative;
  --progress: 0;
}

/* 步骤连接线：使用渐变模拟进度填充 */
.dv-steps::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(to right, #2ed573 0%, #2ed573 var(--progress), #e0e3e8 var(--progress), #e0e3e8 100%);
  z-index: 0;
  transition: all 0.5s ease;
}

.dv-step {
  position: relative;
  z-index: 1;
  text-align: center;
  flex: 1;
}

.dv-step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e0e3e8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #999;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

/* 当前步骤：脉冲光环动画 */
.dv-step.active .dv-step-num {
  background: var(--primary-color, #165DFF);
  border-color: var(--primary-color, #165DFF);
  color: #fff;
  animation: dv-step-pulse 2s ease-in-out infinite;
}

/* 当前步骤脉冲光环关键帧 */
@keyframes dv-step-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(22, 93, 255, 0); }
}

/* 已完成步骤：弹跳打勾动画 */
.dv-step.completed .dv-step-num {
  background: #2ed573;
  border-color: #2ed573;
  color: #fff;
  animation: dv-check-bounce 0.4s ease;
}

/* 已完成步骤弹跳动画关键帧 */
@keyframes dv-check-bounce {
  0% { transform: scale(0.6); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.dv-step-label {
  font-size: 13px;
  color: #666;
}

.dv-step.active .dv-step-label {
  color: var(--primary-color, #165DFF);
  font-weight: 600;
}

/* ===== 11. 数据编辑器 .dv-editor ===== */
.dv-editor-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 2px solid #e0e3e8;
}

.dv-editor-tab {
  padding: 8px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.dv-editor-tab.active {
  color: var(--primary-color, #165DFF);
  border-bottom-color: var(--primary-color, #165DFF);
  font-weight: 600;
}

.dv-table-editor {
  width: 100%;
  border-collapse: collapse;
}

.dv-table-editor th,
.dv-table-editor td {
  border: 1px solid #e0e3e8;
  padding: 8px;
  font-size: 13px;
}

.dv-table-editor th {
  background: #f5f7fa;
  font-weight: 600;
}

.dv-table-editor input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 13px;
  outline: none;
}

/* ===== 12. 生成结果 .dv-result ===== */
.dv-result {
  text-align: center;
  padding: 32px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dv-result-video {
  max-width: 360px;
  margin: 0 auto 24px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(22, 93, 255, 0.1);
}

.dv-result-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* 生成成功勾号动画 */
.dv-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #2ed573;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: dv-success-bounce 0.6s ease;
}

.dv-success-icon svg {
  width: 32px;
  height: 32px;
  stroke: #fff;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: dv-check-draw 0.4s ease 0.3s forwards;
}

@keyframes dv-success-bounce {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes dv-check-draw {
  to { stroke-dashoffset: 0; }
}

/* 结果信息结构化展示 */
.dv-result-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 14px;
  color: #666;
}

.dv-result-stat i {
  color: var(--primary-color, #165DFF);
  font-size: 15px;
}

.dv-result-stat strong {
  color: #333;
}


/* ===== 13. 详情页预览加载状态与信息区补充（Task 6） ===== */
/* 预览视频加载状态：覆盖在视频区域之上，居中显示 spinner 与提示文字 */
.dv-preview-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  gap: 12px;
  z-index: 2;
}
.dv-preview-loading p {
  font-size: 14px;
  margin: 0;
}

/* 详情页信息头部：标题 + 元信息（分类/标签/角标） */
.dv-detail-header {
  margin-bottom: 24px;
}
.dv-detail-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
/* 角标在详情页中改为静态展示（不再绝对定位） */
.dv-detail-meta .dv-badge {
  position: static;
}

/* 详情页操作按钮区：纵向排列 */
.dv-detail-actions {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 操作按钮 hover 发光效果 */
.dv-detail-actions .btn-primary:hover {
  box-shadow: 0 0 12px rgba(22, 93, 255, 0.4);
}

/* 详情页小节标题：图标 + 文字水平排列 */
.dv-detail-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 详情页数据格式表格：紧凑字号 */
.dv-detail-section table {
  font-size: 14px;
}

/* 详情页字段名代码标签：使用主题色 */
.dv-detail-section code {
  color: var(--primary-color, #165DFF);
}


/* ===== 14. 工作台 .dv-create（Task 7） ===== */
.dv-create {
  max-width: 1200px;
  margin: 0 auto;
}

/* 步骤1 选模板网格：3 列（复用 .dv-grid，覆盖列数） */
.dv-grid-sm {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991px) {
  .dv-grid-sm {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .dv-grid-sm {
    grid-template-columns: 1fr;
  }
}

.dv-card-sm {
  cursor: pointer;
}

.dv-card-sm .dv-card-preview {
  aspect-ratio: 1080 / 1920;
}

.dv-card-sm .dv-card-body {
  align-items: flex-start;
}

.dv-card-sm .dv-card-title {
  font-size: 15px;
}

.dv-card-sm .dv-card-desc {
  font-size: 12px;
  margin-bottom: 8px;
}

/* 步骤面板：白底圆角卡片 */
.dv-step-pane {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.dv-step-pane h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #1a1a1a;
}

/* 步骤头部：标题 + 右侧操作 */
.dv-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.dv-step-header h3 {
  margin-bottom: 0;
}

.dv-step-header small {
  font-size: 13px;
  font-weight: 400;
}

/* 步骤导航：底部 上一步/下一步 按钮条 */
.dv-step-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.dv-step-nav .btn {
  min-width: 140px;
}

/* 步骤4：生成动作按钮组 */
.dv-generate-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 32px 0;
  flex-wrap: wrap;
}

.dv-generate-actions .btn-lg {
  padding: 12px 28px;
  font-size: 16px;
}

/* 生成进度条（替换原 spinner） */
.dv-generate-progress {
  padding: 32px 24px;
  text-align: center;
}

.dv-progress-bar-container {
  max-width: 480px;
  margin: 0 auto;
}

/* 阶段标签行 */
.dv-progress-stages {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  color: #999;
}

.dv-progress-stages .dv-stage-item {
  flex: 1;
  text-align: center;
  transition: color 0.3s, font-weight 0.3s;
}

.dv-progress-stages .dv-stage-item.active {
  color: var(--primary-color, #165DFF);
  font-weight: 600;
}

.dv-progress-stages .dv-stage-item.done {
  color: #2ed573;
}

/* 进度条轨道 */
.dv-progress-track {
  height: 8px;
  background: #e8ecf0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.dv-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #165DFF, #722ED1);
  width: 0%;
  transition: width 0.5s ease;
  position: relative;
}

/* 进度条闪光效果 */
.dv-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: dv-progress-shine 1.5s infinite;
}

@keyframes dv-progress-shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 百分比 + 阶段名 + 预估时间 */
.dv-progress-info {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 13px;
}

.dv-progress-percent {
  font-weight: 600;
  color: var(--primary-color, #165DFF);
}

.dv-progress-stage-name {
  color: #333;
}

.dv-progress-eta {
  color: #999;
}

/* 进度条错误态 */
.dv-generate-progress.error .dv-progress-fill {
  background: #ff4757;
}

.dv-generate-progress.error .dv-progress-percent {
  color: #ff4757;
}

/* 重试按钮 */
.dv-progress-retry {
  margin-top: 16px;
}

/* 生成结果信息 */
.dv-result-info {
  margin: 16px 0;
  color: #666;
  font-size: 14px;
}

.dv-result-info p {
  margin-bottom: 4px;
}

/* 配置表单：复用 Bootstrap .form-label / .form-control / .form-select */
.dv-config-form .form-label {
  font-weight: 500;
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.dv-config-form .form-text {
  font-size: 12px;
}

/* 数据编辑器占位（Task 8 将覆盖） */
.dv-editor textarea#dv-json-input {
  width: 100%;
  border: 1px solid #e0e3e8;
  border-radius: 8px;
  padding: 12px;
  resize: vertical;
}

.dv-editor textarea#dv-json-input:focus {
  border-color: var(--primary-color, #165DFF);
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.1);
}

/* ===== 15. Toast 通知系统 ===== */

/* Toast 容器：固定在右上角 */
.dv-toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

/* 单条 Toast：滑入动画、圆角、阴影 */
.dv-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 360px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  pointer-events: auto;
  font-size: 14px;
  color: #333;
  overflow: hidden;
  position: relative;
  animation: dv-toast-in 0.3s ease forwards;
}

/* 左侧竖条颜色标识类型 */
.dv-toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

/* Toast 图标 */
.dv-toast i {
  font-size: 18px;
  flex-shrink: 0;
}

/* Toast 文字 */
.dv-toast span {
  flex: 1;
  word-break: break-word;
}

/* 成功类型：绿色 */
.dv-toast-success::before {
  background: #2ed573;
}
.dv-toast-success i {
  color: #2ed573;
}

/* 警告类型：橙色 */
.dv-toast-warning::before {
  background: #ffa502;
}
.dv-toast-warning i {
  color: #ffa502;
}

/* 错误类型：红色 */
.dv-toast-error::before {
  background: #ff4757;
}
.dv-toast-error i {
  color: #ff4757;
}

/* 滑入动画 */
@keyframes dv-toast-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 滑出淡出动画 */
@keyframes dv-toast-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Toast 退出状态 */
.dv-toast-exit {
  animation: dv-toast-out 0.3s ease forwards;
}