/* Tailwind CSS 兼容性修复 */
/* 解决backdrop-filter和透明度语法问题 */

.backdrop-blur {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.backdrop-blur-lg {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* 透明度背景色修复 */
.bg-white\/70 {
    background-color: rgba(255, 255, 255, 0.7);
}

.bg-white\/80 {
    background-color: rgba(255, 255, 255, 0.8);
}

.bg-white\/50 {
    background-color: rgba(255, 255, 255, 0.5);
}

.bg-white\/90 {
    background-color: rgba(255, 255, 255, 0.9);
}

.bg-black\/50 {
    background-color: rgba(0, 0, 0, 0.5);
}

.bg-black\/70 {
    background-color: rgba(0, 0, 0, 0.7);
}

/* 透明度边框修复 */
.border-white\/20 {
    border-color: rgba(255, 255, 255, 0.2);
}

.border-white\/30 {
    border-color: rgba(255, 255, 255, 0.3);
}

.border-gray-200\/50 {
    border-color: rgba(229, 231, 235, 0.5);
}

/* 渐变背景修复 */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-pink-50 {
    --tw-gradient-from: #fdf2f8;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(253, 242, 248, 0));
}

.via-purple-50 {
    --tw-gradient-stops: var(--tw-gradient-from), #faf5ff, var(--tw-gradient-to, rgba(250, 245, 255, 0));
}

.to-blue-50 {
    --tw-gradient-to: #eff6ff;
}

/* 文字渐变修复 */
.text-transparent {
    color: transparent;
}

.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}

/* 阴影修复 */
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* 变换修复 */
.transform {
    transform: var(--tw-transform);
}

.-translate-y-1\/2 {
    --tw-translate-y: -50%;
    transform: translateY(-50%);
}

.hover\:scale-105:hover {
    transform: scale(1.05);
}

/* 过渡效果修复 */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* 焦点状态修复 */
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-purple-500:focus {
    --tw-ring-color: #8b5cf6;
}

.focus\:border-transparent:focus {
    border-color: transparent;
}