/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #9ca3af;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* 进度条样式 */
progress {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}

progress::-webkit-progress-bar {
  background-color: #e5e7eb;
  border-radius: 4px;
}

progress::-webkit-progress-value {
  background: linear-gradient(to right, #3b82f6, #4f46e5);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* TinyPNG样式的列表项 */
.image-item {
  transition: all 0.2s ease;
  cursor: default;
}

.image-item:hover {
  background-color: rgba(59, 130, 246, 0.05);
}

.image-item progress {
  height: 4px;
}

.image-item progress::-webkit-progress-bar {
  background-color: #f3f4f6;
}

/* 拖放区域激活状态 */
.drop-active {
  border-color: #3b82f6 !important;
  background-color: rgba(59, 130, 246, 0.05);
}

/* 确保拖拽区域收缩和扩展的动画平滑 */
#upload-container {
  transition: all 0.3s ease;
}

/* 确保图像卡片在悬停时有微妙的阴影变化 */
.card-shadow {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card-shadow:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 下载按钮悬停效果 */
.download-btn {
  transition: all 0.2s ease;
  min-width: 100px;
}

.download-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 按钮点击态动画 */
button {
  transition: transform 0.1s ease;
}

button:active {
  transform: scale(0.98);
}

/* 输入框焦点状态 */
input:focus {
  outline: none;
  ring: 2px;
  ring-color: #3b82f6;
}