/* 自定义Tailwind扩展和基础样式 */
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .form-input-focus {
        @apply focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
    }
}

/* 基础表单样式 */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none form-input-focus transition duration-200;
}

/* 错误提示样式 */
.error-message {
    @apply hidden text-sm text-red-500 mt-1;
}

.error-message.active {
    @apply block;
}

/* 按钮样式 */
.btn-primary {
    @apply w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-4 rounded-lg transition duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

.btn-secondary {
    @apply w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-3 px-4 rounded-lg transition duration-200;
}

/* 卡片容器样式 */
.card-container {
    @apply bg-white rounded-xl overflow-hidden;
}

/* 响应式调整 */
@media (max-width: 640px) {
    .container {
        @apply px-4;
    }
    .btn-primary, .btn-secondary {
        @apply py-2 text-sm;
    }
}