/* 自定义样式补充 */

/* 文件拖拽效果 */
.drag-over {
    border-color: #ec4899 !important;
    background-color: #fdf2f8;
}

/* 图片预览动画 */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 加载动画优化 */
.pulse-soft {
    animation: pulseSoft 1.5s ease-in-out infinite;
}

@keyframes pulseSoft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* 移动端优化 */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* 减少移动端的内边距 */
    .mobile-padding-reduce {
        padding: 1rem;
    }
}

/* 成功状态样式 */
.status-success {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

/* 错误状态样式 */
.status-error {
    background-color: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* 信息状态样式 */
.status-info {
    background-color: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* 图片悬浮效果 */
.image-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-hover:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* 匹配结果网格优化 */
.match-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

@media (min-width: 768px) {
    .match-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

/* 按钮点击效果 */
.btn-click {
    transform: scale(0.98);
}

/* 平滑滚动 */
html {
    scroll-behavior: smooth;
}

/* 自定义滚动条（webkit浏览器） */
::-webkit-scrollbar {
    width: 8px;
}

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

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

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}