.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body { font-family: 'Manrope', sans-serif; }
h1, h2, h3 { font-family: 'Plus Jakarta Sans', sans-serif; }
body {
  min-height: max(884px, 100dvh);
  background-color: theme('colors.background');
  color: theme('colors.on-background');
}
/* 保留原有开关交互逻辑，样式替换为Tailwind适配 */
.toggle-switch-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-switch-control {
  display: inline-block;
  width: 40px;
  height: 20px;
  background: theme('colors.surface-container-highest');
  border-radius: 10px;
  position: relative;
  transition: background 0.3s;
}
.toggle-switch-control::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: left 0.3s;
}
.toggle-switch-input:checked + .toggle-switch-control {
  background: theme('colors.primary');
}
.toggle-switch-input:checked + .toggle-switch-control::after {
  left: 22px;
}
.toggle-switch.sm .toggle-switch-control {
  width: 36px;
  height: 18px;
}
.toggle-switch.sm .toggle-switch-control::after {
  width: 14px;
  height: 14px;
}
.toggle-switch.sm .toggle-switch-input:checked + .toggle-switch-control::after {
  left: 20px;
}
/* 滑块样式适配Tailwind */
input[type="range"] {
  accent-color: #1677ff;
}


/* 针对移动端优化参数调整区域 */
@media (max-width: 1024px) {
  /* 1. 增大开关控件触摸区域 */
  .toggle-switch-control {
	min-width: 3rem; /* 增大宽度 */
	min-height: 1.75rem; /* 增大高度 */
  }
  .toggle-switch-control::after {
	width: 1.4rem; /* 增大旋钮 */
	height: 1.4rem;
	top: 0.175rem;
  }
  .toggle-switch-input:checked + .toggle-switch-control::after {
	left: calc(100% - 1.4rem - 0.175rem); /* 调整选中状态旋钮位置 */
  }

  /* 2. 增大滑块控件触摸区域 */
  input[type="range"] {
	height: 0.75rem; /* 显著增加轨道高度 */
	border-radius: 0.375rem;
  }
  /* 针对Webkit浏览器（Chrome, Safari）优化滑块旋钮 */
  input[type="range"]::-webkit-slider-thumb {
	height: 1.5rem;
	width: 1.5rem;
  }
  /* 针对Firefox浏览器 */
  input[type="range"]::-moz-range-thumb {
	height: 1.5rem;
	width: 1.5rem;
  }

  /* 3. 调整按钮布局为纵向，并增大触摸区域 */
  .lg\\:col-span-4 .mt-4.flex.gap-4 {
	flex-direction: column; /* 改为纵向排列 */
	gap: 0.75rem; /* 调整按钮间距 */
  }
  .lg\\:col-span-4 .mt-4.flex.gap-4 button {
	width: 100%; /* 按钮宽度撑满 */
	padding-top: 0.875rem; /* 增加垂直内边距 */
	padding-bottom: 0.875rem;
  }

  /* 4. 增大速度输入框 */
  #fpsVal {
	width: 5rem; /* 增加宽度 */
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	font-size: 1rem; /* 可选：增大字体 */
  }

  /* 动图类型选择移动端适配 */
  .gif-type-item {
	width: 45% !important;
  }
}

/* 阻止画布区域的默认触摸滚动行为 */
#canvas {
  touch-action: none; /* 禁用浏览器默认的触摸行为（滚动、缩放等） */
  user-select: none; /* 禁止选中文字，避免拖动时触发文本选择 */
}

/* 仅修改播放按钮 + 导出按钮的颜色 */
#play {
  --custom-primary: #1677ff;        /* 主色 */
  --custom-primary-hover: #0f62d9;  /* 悬浮色 */
  --custom-primary-active: #0a4baa; /* 点击色 */
  
  /* 替换背景色 */
  background-color: var(--custom-primary) !important;
  /* 替换阴影色 */
  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.3) !important;
  /* 保留原有过渡 */
  transition: all 0.18s ease !important;
}

/* 播放按钮悬浮 */
#play:hover {
  background-color: var(--custom-primary-hover) !important;
  box-shadow: 0 6px 20px rgba(22, 119, 255, 0.4) !important;
}

/* 播放按钮点击 */
#play:active {
  background-color: var(--custom-primary-active) !important;
  box-shadow: 0 2px 6px rgba(22,119,255,0.25) !important;
}

/* 主操作按钮样式 - 同时作用于“导出”和“下载”按钮 */
.primary-action-btn {
  --custom-primary: #1677ff;
  --custom-primary-hover: #0f62d9;
  --custom-primary-active: #0a4baa;
  
  background: linear-gradient(145deg, var(--custom-primary), var(--custom-primary-hover)) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.3) !important;
  transition: all 0.18s ease !important;
  /* 注意：这里不定义宽度、圆角等，这些由Tailwind类控制 */
}

.primary-action-btn:not(:disabled):hover {
  background: linear-gradient(145deg, #3b8cff, var(--custom-primary)) !important;
  box-shadow: 0 6px 20px rgba(22, 119, 255, 0.4) !important;
  transform: translateY(-1px) !important;
}

.primary-action-btn:not(:disabled):active {
  background: linear-gradient(145deg, var(--custom-primary-active), var(--custom-primary-hover)) !important;
  box-shadow: 0 2px 6px rgba(22,119,255,0.25) !important;
  transform: translateY(1px) !important;
}

.primary-action-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.15) !important;
}


/* 动图类型选择样式 */
.gif-type-selector {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.gif-type-item {
  cursor: pointer;
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.2s ease;
  border: 3px solid transparent;
  width: 120px;
  background-color: theme('colors.surface-container-low');
}
/* 强化选中状态样式 */
.gif-type-item.active {
  transform: translateY(-5px) scale(1.05);
  border-color: theme('colors.primary'); /* 主色边框 */
  background-color: rgba(120, 157, 255, 0.1); /* 主色浅背景 */
  box-shadow: 0 0 0 4px rgba(120, 157, 255, 0.2), 0 6px 16px rgba(0, 83, 205, 0.15); /* 外发光+阴影 */
  transform: translateY(-3px); /* 轻微上浮 */
}

.gif-type-item.active::after {
  content: 'check_circle';
  font-family: 'Material Symbols Outlined';
  position: absolute;
  top: 4px;
  right: 4px;
  color: theme('colors.primary');
  font-size: 18px;
}
.gif-type-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 83, 205, 0.15);
}
.gif-type-preview {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  padding: 0.5rem;
}
.gif-type-label {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 0;
  color: theme('colors.on-surface');
}
/* 选中状态的文字颜色也同步变化 */
.gif-type-item.active .gif-type-label {
  color: theme('colors.primary');
  font-weight: 700;
}

.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 
	0 10px 15px -3px rgba(0, 0, 0, 0.05),
	0 4px 6px -2px rgba(0, 0, 0, 0.02);
}

/* AI抠图水印样式 */
.watermark-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none; /* 不影响交互 */
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.watermark-overlay.active {
  opacity: 0.15; /* 水印透明度，可调整 */
}
/* 水印容器（用于定位Canvas） */
.canvas-container {
  position: relative;
}

/* 全局提示 Toast */
.toast-container {
  position: fixed;
  /* 核心：上下左右都居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  /* 限制最大宽度，适配小屏幕 */
  max-width: 90%;
}

.toast {
  min-width: 180px;
  max-width: 280px;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
  /* 毛玻璃效果兼容 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* 防止文字紧贴边缘 */
  word-break: break-word;

  /* 入场动画初始状态 */
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  transition: all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 显示状态动画 */
.toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 成功状态 */
.toast.success {
  background: rgba(40, 167, 69, 0.85);
}

/* 错误状态 */
.toast.error {
  background: rgba(220, 53, 69, 0.85);
}

/* 小圆点旋转加载动画 */
.loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(22, 119, 255, 0.2);
  border-top-color: #1677ff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 控制显示隐藏 */
.loading-spinner.show {
  display: block !important;
}