/* ========= 解决方案标签增强样式 ========= */

/* 悬停效果 */
.solution-label:hover {
    border-color: rgba(54, 201, 88, 0.55) !important;
    box-shadow: 0 6px 24px rgba(54, 201, 88, 0.25),
                inset 0 1px 2px rgba(255, 255, 255, 0.2),
                inset 0 -1px 2px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px);
}

/* 悬停时内层渐变显示 */
.solution-label:hover > div {
    opacity: 1 !important;
}

/* 光晕动画 */
@keyframes solution-glow {
    0%, 100% {
        box-shadow: 0 4px 16px rgba(54, 201, 88, 0.12),
                    inset 0 1px 1px rgba(255, 255, 255, 0.15),
                    inset 0 -1px 1px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 4px 20px rgba(54, 201, 88, 0.2),
                    inset 0 1px 1px rgba(255, 255, 255, 0.2),
                    inset 0 -1px 1px rgba(0, 0, 0, 0.1);
    }
}

.solution-label {
    animation: solution-glow 3s ease-in-out infinite;
}

/* 响应式：手机端样式调整 */
@media (max-width: 767px) {
    .solution-label {
        font-size: 13px !important;
        letter-spacing: 2px !important;
        padding: 6px 18px !important;
    }
}

/* 触摸设备优化 */
@media (hover: none) {
    .solution-label:active {
        transform: scale(0.98);
    }
}

/* 性能优化 */
.solution-label {
    will-change: transform, box-shadow;
}

/* 尊重用户偏好 */
@media (prefers-reduced-motion: reduce) {
    .solution-label {
        animation: none !important;
        transition: none !important;
    }

    .solution-label:hover {
        transform: none !important;
    }
}