/* 自定义样式补充 */

/* 确保文件输入框的样式与Tailwind一致 */
input[type="file"] {
    @apply block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100;
}

/* 滑块样式美化 */
input[type="range"] {
    @apply h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer;
}

input[type="range"]::-webkit-slider-thumb {
    @apply appearance-none w-4 h-4 rounded-full bg-blue-500;
}

input[type="range"]::-moz-range-thumb {
    @apply w-4 h-4 rounded-full bg-blue-500 border-0;
}

/* 加载动画 */
.loading {
    @apply animate-pulse;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .container {
        @apply px-4;
    }
    
    h1 {
        @apply text-2xl;
    }
    
    h2 {
        @apply text-lg;
    }
}

/* 卡片悬停效果 */
.card-hover {
    @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}

/* 按钮点击效果 */
button {
    @apply transition-all duration-200;
}

button:active {
    @apply transform scale-95;
}

/* 自定义文件输入框标签，确保显示英文 */
.file-input-wrapper {
    @apply relative;
}

.file-input-label {
    @apply block w-full text-sm text-gray-500 bg-white border border-gray-300 rounded-md px-4 py-2 cursor-pointer hover:bg-gray-50;
}

.file-input-label::after {
    content: 'Browse';
    @apply absolute right-2 top-2 bg-blue-50 text-blue-700 px-3 py-1 rounded text-sm font-medium;
}

.file-input-hidden {
    @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;
}