.upload-area {
    border: 2px dashed #cbd5e0;
    transition: all 0.3s ease;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-area:hover {
    border-color: #4299e1;
    background-color: #ebf8ff;
    transform: scale(1.01);
}

.preview-image {
    max-width: 200px;
    max-height: 240px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.preview-image:hover {
    transform: scale(1.05);
}

.loading-overlay {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
}

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

.spinner {
    animation: spin 1s linear infinite;
}

/* FAQ 区域动画 */
.bg-gradient-to-r {
    background-size: 200% 200%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 问答项悬停效果 */
.flex.items-start {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 1rem;
    border-radius: 0.5rem;
}

.flex.items-start:hover {
    transform: translateX(8px);
    background-color: #f0f7ff;
}

/* 圆形数字动画 */
.w-8.h-8.bg-blue-100 {
    transition: all 0.3s ease;
}

.flex.items-start:hover .w-8.h-8.bg-blue-100 {
    background-color: #3b82f6;
}

.flex.items-start:hover .w-8.h-8.bg-blue-100 span {
    color: white;
}

/* 移动端优化 */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .preview-image {
        max-width: 160px;
        max-height: 192px;
    }

    .upload-area {
        min-height: 160px;
    }

    .flex.items-start {
        padding: 0.75rem;
    }
}